Tom猫小游戏功能实现

2024-04-23 16:24| 来源: 网络整理| 查看: 265

　　本文章通过简单的css和html的操作，来实现Tom猫小游戏的功能，通过简单的js代码，让图片不断切换来实现动画效果。

Tom猫小游戏的HTML部分：

TomCat Tom猫的css部分： *{ 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%; } Tom猫js部分： function Tom(){ this.imgShow = document.getElementById('imgShow'); this.btn = document.querySelectorAll('div'); this.music = document.getElementById('music'); this.init(); } Tom.prototype = { init : function(){ this.eventBind(); }, 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

【本文地址】

Tom猫小游戏功能实现

Tom猫小游戏功能实现

今日新闻

推荐新闻