本文章通过简单的css和html的操作，来实现Tom猫小游戏的功能，通过简单的js代码，让图片不断切换来实现动画效果。
Tom猫小游戏的HTML部分：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>TomCat</title>
</head>
<body>
<section>
<img id=”imgShow” src=”https://www.cnblogs.com/original-alps/p/tom/img/Animations/angry/angry_00.jpg” alt=””>
</section>
<div class=”cymbal”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/cymbal/cymbal.png” alt=””>
</div>
<div class=”drink”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/drink/drink.png” alt=””>
</div>
<div class=”eat”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/eat/eat.png” alt=””>
</div>
<div class=”fart”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/fart/fart.png” alt=””>
</div>
<div class=”pie”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/pie/pie.png” alt=””>
</div>
<div class=”scratch”>
<img src=”https://www.cnblogs.com/original-alps/p/tom/img/Buttons/scratch/scratch.png” alt=””>
</div>
<div class=”angry”></div>
<div class=”angry1″></div>
<div class=”footLeft”></div>
<div class=”footRight”></div>
<div class=”knockout”></div>
<div class=’stomach’></div>
<div></div>
<audio src=”” id=”music”></audio>
</body>
</html>
Tom猫的css部分：
<style>
*{
margin:0;
padding:0;
}
img{
display:block;
}
body,html{
height:100%;
}
section{
width:100%;
height:100%;
}
#imgShow{
width:100%;
height:100%;
}
.cymbal{
width:60px;
height:60px;
position:absolute;
left:1%;
bottom:30%;
}
.drink{
width:60px;
height:60px;
position:absolute;
left:1%;
bottom:20%;
}
.eat{
width:60px;
height:60px;
position:absolute;
left:1%;
bottom:10%;
}
.fart{
width:60px;
height:60px;
position:absolute;
right:1%;
bottom:30%;
}
.pie{
width:60px;
height:60px;
position:absolute;
right:1%;
bottom:20%;
}
.scratch{
width:60px;
height:60px;
position:absolute;
right:1%;
bottom:10%;
}
.angry{
width:108px;
height:92px;
/* background:chartreuse; */
position: absolute;
left:35%;
bottom:31%;
}
.angry1{
width:38px;
height:63px;
/* background:chartreuse; */
position: absolute;
right:22%;
bottom:11%;
}
.footLeft{
width:42px;
height:35px;
/* background:red; */
position:absolute;
left:36%;
bottom:4%;
}
.footRight{
width:42px;
height:35px;
/* background:blue; */
position:absolute;
right:36%;
bottom:4%;
}
.knockout{
width:110px;
height:46px;
/* background:blue; */
position:absolute;
right:36%;
bottom:76%;
}
.stomach{
width:110px;
height:88px;
/* background:yellow; */
position:absolute;
right:36%;
bottom:15%;
}
</style>
Tom猫js部分：
<script>
function Tom(){
this.imgShow = document.getElementById(‘imgShow’);
this.btn = document.querySelectorAll(‘div’);
this.music = document.getElementById(‘music’);
this.init();
}
Tom.prototype = {
init : function(){
},
tomPlay : function(name,num){
var _this = this;
this.count = 0 ;
clearInterval(this.timer);
this.timer = setInterval(function(){
if(_this.count >= num){
clearInterval(_this.timer);
_this.count = 0 ;
}else{
_this.count++;
_this.imgShow.src = ‘./tom/img/Animations/’+name+’/’+name+’_’ + _this.mendZero(_this.count)+’.jpg’;
}
},80)
},
mendZero : function(num){
if(num < 10){
return ‘0’ + num;
}else{
return num;
}
},
eventBind : function(){
var _this = this;
for(let i = 0 , k = this.btn.length ; i < k ; i++){
this.btn[i].onclick = function(){
let classN = this.className;
switch(classN){
case ‘cymbal’ :
_this.tomPlay(‘cymbal’,12);
_this.music.src = ‘./tom/mp3/pia.mp3’;
_this.music.play();
break;
case ‘drink’ :
_this.tomPlay(‘drink’,80);
break;
case ‘eat’ :
_this.tomPlay(‘eat’,39);
break;
case ‘fart’ :
_this.tomPlay(‘fart’,27);
break;
case ‘pie’ :
_this.tomPlay(‘pie’,23);
break;
case ‘scratch’ :
_this.tomPlay(‘scratch’,55);
break;
case ‘angry’ :
_this.tomPlay(‘angry’,25);
break;
case ‘angry1’ :
_this.tomPlay(‘angry’,25);
break;
case ‘footLeft’ :
_this.tomPlay(‘footRight’,29);
_this.music.src = ‘./tom/mp3/tomaiyou.mp3’;
_this.music.play();
break;
case ‘footRight’ :
_this.tomPlay(‘footLeft’,29);
_this.music.src = ‘./tom/mp3/tomaiyou.mp3’;
_this.music.play();
break;
case ‘knockout’ :
_this.tomPlay(‘knockout’,80);
break;
case ‘stomach’ :
_this.tomPlay(‘stomach’,33);
_this.music.src = ‘./tom/mp3/tomaiyou.mp3’;
_this.music.play();
break;
}
}
}
}
}
new Tom();
</script>
内容如有雷同，纯属巧合，侵权请联系本人。
1.《Tom猫小游戏功能实现》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《Tom猫小游戏功能实现》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/26902.html