JS微信打飛機遊戲(四)

等朋友微信打飛機遊戲圖片,不然判斷碰撞,擦除等寫的不規範,後期難維護。

這個版本里更新瞭如下功能:

1.修復子彈移除但沒有在canvas裏擦除的bug.

2.隨機生成敵人飛機,並下降

3.判斷是否擊中敵機,擊中的話,移除子彈和敵機,同時顯示爆炸圖片


點擊下載源碼  建議用Chrome運行。





1.判斷是否擊中敵機,由於圖片素材沒有拿到,碰撞時子彈的中點和飛機中點不一定在一條直線上,也就是x座標相等。這相當噁心。

循環敵機數組和子彈數組,判斷兩個的位置。如果碰撞,移除子彈。敵機生命值減1,如果敵機生命值爲0,移走,且爆炸。

2.

//判斷是否擊中敵機
function isHitEnemyFlyer(){
	for ( var i = 0; i < bulletList.length; i++) {
		var b=bulletList[i];
		for ( var j= 0; j < enemyFlyerList.length; j++) {
			var e=enemyFlyerList[j];
			if(Math.abs(b.x-e.x)<b.width&&b.y<(e.y+e.height)){
				//hit
				e.life--;
				if(e.life<=0){
					//哥在等圖片,看着這個eggache.額
					ctx.drawImage(explode, b.x,b.y);
					e.miss();
					b.miss();
					enemyFlyerList.remove(e);
					bulletList.remove(b);
				}
			}
		}
	}
}




// 隨機生成敵機,當然在微信裏面很可能不是隨機生成敵機的,"有棋局"。
function randomNewEnemyFlyer(){
	// 按200:4:1的比例生成小中大飛機
	
	var r=parseInt(Math.random()*205*5);
	var type=undefined;
	if(r===204){
		type=2;
	}else if(r<=203&&r>=200){
		type=1
	}else if(r>=0&&r<=199){
		type=0;
	}
	if(type==undefined)
		return;
	var e  = new EnemyFlyer(type);
	var x=parseInt(Math.random()*(canWidth/e.width))*e.width;
	// 如果敵機越界,重新再生成
	if(x+e.width>canWidth){
		return randomNewEnemyFlyer();
	}
	e.display(x,0);
	enemyFlyerList.push(e);
	
}

setInterval(function(){
	// 隨機生成敵機
	randomNewEnemyFlyer();
	// 敵機下落
	for ( var j= 0; j < enemyFlyerList.length; j++) {
		enemyFlyerList[j].move();
		console.log(enemyFlyerList.length);
	}
},500);




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章