打地鼠游戏之动画效果
Posted boyzi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打地鼠游戏之动画效果相关的知识,希望对你有一定的参考价值。
在第一篇中,我们已经实现了单击开始后游戏的倒计时,那么下面,我们需要继续在Game这个简直对对象中进行扩展属性和方法:
首先我们需要在Game中添加几组初始键值对:
//所有的地鼠dom元素 allMouse : [], //目前分数 nowScore : 0, //目前有哪几个地洞给占用 hasHole : {}, //目前有哪几只地鼠是活动的 hasMouse : {}, //页面的地洞集合 lis : null, //初始化地鼠与地洞
以及游戏中十个地鼠的编号,我们可以定义其中有三个编号对应的地鼠是无效的:
//总共有十只,其中三只是无效的 mouseMap : { 1:‘good‘, 2:‘bad‘, 3:‘good‘, 4:‘good‘, 5:‘bad‘, 6:‘good‘, 7:‘bad‘, 8:‘good‘, 9:‘good‘, 10:‘good‘ },
下面我们从开始游戏的方法开始创建,在创建之前,我们先思考,地鼠是怎么出现的,出现的时机和顺序是怎样的?
(1)地洞的地鼠是随机的
(2)出现的地鼠是随机的
(3)每次出现地洞编号和地鼠编号都不参与下一次的随机输出
//游戏开始 start : function(){ if(this.time <= 0)return; var _this = this; //随机地洞编号 var random = parseInt(Math.random()*9,10); while(this.hasHole[random]){ random = parseInt(Math.random()*9,10); } //随机地鼠编号 var randomMouse = parseInt(Math.random()*10,10); while(this.hasMouse[randomMouse]){ randomMouse = parseInt(Math.random()*10,10); } //添加地鼠到地洞中 this.allMouse[randomMouse].hole = random; this.allMouse[randomMouse].num = randomMouse; this.lis[random].appendChild(this.allMouse[randomMouse].mouse); this.lis[random].mouse = this.allMouse[randomMouse]; this.lis[random].mouse.animation(‘normal‘); //记录地鼠与地洞编号 this.hasHole[random] = ‘true‘; this.hasMouse[randomMouse] = ‘true‘; setTimeout(function(){_this.start();},250); },
在Game中,我们同样需要一个方法来初始化地鼠和巢穴的属性及扩展:
以上是关于打地鼠游戏之动画效果的主要内容,如果未能解决你的问题,请参考以下文章