打地鼠遊戲(3)之動畫效果
阿新 • • 發佈:2018-11-16
rand pre 繼續 ood 擴展 child timeout cti java
在第一篇中,我們已經實現了單擊開始後遊戲的倒計時,那麽下面,我們需要繼續在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中,我們同樣需要一個方法來初始化地鼠和巢穴的屬性及擴展:
打地鼠遊戲(3)之動畫效果