打地鼠游戏(3)之游戏属性
在第一篇中,我们已经实现了单击开始后游戏的倒计时,那么下面,我们需要继续在Game这个简直对对象中进行扩展属性和方法,整个有效中拥有哪些属性呢?
(1)游戏分数
(2)地鼠(多个扩展属性)
(3)地洞(多个扩展属性)
(4)动画
首先我们需要在Game中添加几组初始键值对:
//所有的地鼠dom元素 allMouse : [], //目前分数 nowScore : 0, //目前有哪几个地洞给占用 hasHole : {}, //目前有哪几只地鼠是活动的 hasMouse : {}, //页面的地洞集合 lis : null, //初始化地鼠与地洞
以及游戏中十个地鼠的编号,我们可以定义其中有三个编号对应的地鼠是无效的:
//地鼠地图,总共有十只,其中两只是无效的(扣分) mouseMap : { 1:'num1', 2:'num2', 3:'num3', 4:'num4', 5:'num5', 6:'num1', 7:'num4', 8:'num5', 9:'num1', 10:'num4' },
下面我们从开始游戏的方法开始创建,在创建之前,我们先思考,地鼠是怎么出现的,出现的时机和顺序是怎样的?
(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中,我们同样需要一个方法来初始化地鼠和巢穴的属性及扩展:
//初始化地鼠与地洞 init : function(){ //获取页面的地洞集合 this.lis = document.getElementById('panel').getElementsByTagName('li'); _this = this; //初始化10只地鼠 for(var i=1;i <=10;i++){ var mouse = new Mouse(this.mouseMap[i]); //扩展地鼠被点中事件 mouse.onbeat = function(){ //修改分数 Game.changeScore(100 * (this.mouse.mousetype=='good'?1:-1)); } //扩展地鼠动画结束事件 mouse.onend = function(){ //移除地洞中的地鼠 var li = _this.lis[this.hole]; li.removeChild(li.mouse.mouse); li.mouse = null; //清除对应的地洞与地鼠 _this.hasHole[this.hole] = null; _this.hasMouse[this.num] = null; } this.allMouse.push(mouse); } },
上面的方法中,我们用到了一个分数统计的方法,每击中有效或无效地鼠,我们需要在原有的分数上做增减分数,所以我们需要一个方法:
//修改游戏分数 changeScore : function(score){ this.nowScore += score; document.getElementById('score').innerHTML = this.nowScore; },
最后我们同样需要一个重置有效,游戏归零的操作
//重置游戏设置 reset : function(){ this.time = 61; this.allMouse = []; this.nowScore = 0; this.hasHole = {}; this.hasMouse = {}; this.lis = null; this.changeScore(0); }