1. 程式人生 > >打地鼠遊戲(3)之動畫效果

打地鼠遊戲(3)之動畫效果

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)之動畫效果