Tom貓小遊戲功能實現
本文章經過簡單的css和html的操做，來實現Tom貓小遊戲的功能，經過簡單的js代碼，讓圖片不斷切換來實現動畫效果。css
Tom貓小遊戲的HTML部分：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TomCat</title>
</head>
<body>
<section>
<img id="imgShow" src="./tom/img/Animations/angry/angry_00.jpg" alt="">
</section>
<div class="cymbal">
<img src="./tom/img/Buttons/cymbal/cymbal.png" alt="">
</div>
<div class="drink">
<img src="./tom/img/Buttons/drink/drink.png" alt="">
</div>
<div class="eat">
<img src="./tom/img/Buttons/eat/eat.png" alt="">
</div>
<div class="fart">
<img src="./tom/img/Buttons/fart/fart.png" alt="">
</div>
<div class="pie">
<img src="./tom/img/Buttons/pie/pie.png" alt="">
</div>
<div class="scratch">
<img src="./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(){
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 < 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. 小貓釣魚遊戲java實現
- 2. 我眼中的小Tom貓
- 3. WebSocket(2)---實現遊戲公告功能
- 4. 遊戲直播功能實現流程
- 5. 微信小遊戲轉發、分享等功能實現
- 6. cocos creator 小遊戲區域截圖功能實現
- 7. 使用NGUI實現拖拽功能（拼圖小遊戲）
- 8. java實現紙牌遊戲－小貓釣魚算法
- 9. Python實現小遊戲--2048
- 10. JQuery實現1024小遊戲
- 更多相關文章...
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章