javascript 模擬坦克大戰(zhàn)游戲(html5版)附源碼下載

更新時(shí)間：2014年04月08日 15:58:21 作者：

這篇文章主要介紹了javascript 模擬坦克大戰(zhàn)游戲關(guān)鍵點(diǎn)和遇到的問題及實(shí)現(xiàn)代碼,需要的朋友可以參考下

一、總結(jié)關(guān)鍵點(diǎn)和遇到的問題

1.javascript中的繼承，最好父類只提供方法共享，屬性寫到各自子類中，避免父類和子類的構(gòu)造函數(shù)混雜。

2.prototype模擬繼承的代碼，應(yīng)寫在所有方法定義之前，否則原型對(duì)象被改變，方法就變成了未定義，如：

復(fù)制代碼代碼如下:

 
Hero.prototype = new Tank (0, 0, 0); 
Hero.prototype.constructor = Hero; 
Hero.prototype.addLife = function(){ 
this.lifetimes++; 
document.querySelector("#life").innerHTML = hero.lifetimes; 
} 

3.canvas畫圖形時(shí)，除了畫矩形，其他的都要加上 ctx.beginPath();、ctx.closePath();，否則會(huì)出現(xiàn)意想不到的錯(cuò)誤。

4.concat函數(shù)可以合并數(shù)組，或者是元素返回一個(gè)新的數(shù)組

5.Image的src屬性賦值后就會(huì)加載圖片，但如果沒有加載完畢就畫圖片，會(huì)導(dǎo)致失效，所以使用onload事件處理

6.擴(kuò)展Array功能，刪除指定元素

復(fù)制代碼代碼如下:

 
//擴(kuò)展 刪除指定元素 
Array.prototype.deleteElement = function (obj) { 
if (obj) { 
for (var i = 0; i < this.length; i++) { 
if (this[i] === obj) { 
this.splice (i, 1); 
} 
} 
} 
} 

7.定時(shí)器設(shè)置，setInterval（“fun”,1000）方法的第一個(gè)參數(shù)，可以是字符串，如"hero.say()",類似eval會(huì)去執(zhí)行這串代碼，所以它可以給函數(shù)帶上參數(shù)，并且也指定了這個(gè)函數(shù)的運(yùn)行上下文。但如果傳入是函數(shù)的句柄，則不能帶參數(shù)，并且不能指定上下文，除了第一種方式解決外，我用了閉包來(lái)解決這個(gè)問題

復(fù)制代碼代碼如下:

 
//定時(shí)器，自行運(yùn)動(dòng) 
this.timer = setInterval ((function (context) { 
return function () { 
Bullet.prototype.move.call (context) 
} 
}) (this), 30); 

我保存了當(dāng)前的執(zhí)行環(huán)境，并調(diào)用call方法手動(dòng)執(zhí)行。

8.方法的功能設(shè)計(jì)，除了功能外，應(yīng)該包括執(zhí)行此功能的條件檢測(cè)，如move，就應(yīng)該包括什么情況下可以移動(dòng)，移動(dòng)到什么地方就不能移動(dòng)了。此檢測(cè)不應(yīng)該放在外部。

9.寫代碼時(shí)不應(yīng)該去想設(shè)計(jì)或者優(yōu)化的問題，先實(shí)現(xiàn)功能，再談優(yōu)化，或者先設(shè)計(jì)再實(shí)現(xiàn)。思路要清晰，別混亂，著重于一點(diǎn)。

10.javascript中沒有sleep的功能，可以創(chuàng)建一個(gè)變量作為緩沖，來(lái)達(dá)到間隔執(zhí)行的目的

二、代碼實(shí)現(xiàn)

1.本程序分為Bomb.js,Bullet.js,Draw.js,Tank.js,index.html,img,music,

2.最終效果

3.代碼

1.index.html

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<style type="text/css"> 
body { 
font: 14px "sans-serif" 
} 

#Map { 
background-color: #000000; 
} 

.show { 
float: left 
} 

#guide { 
float: left; 
width: 200px; 
height: 390px; 
margin-left: 5px; 
background: #CCCCCC; 
padding: 5px; 
} 
</style> 
<script type="text/javascript" src="Tank.js"></script> 
<script type="text/javascript" src="Bullet.js"></script> 
<script type="text/javascript" src="Bomb.js"></script> 
<script type="text/javascript" src="Draw.js"></script> 

<script type="text/javascript"> 
window.onload = function () { 
//畫布信息 
width = document.getElementById ('Map').width; 
height = document.getElementById ('Map').height; 
ctx = document.getElementById ('Map').getContext ('2d'); 
//初始頁(yè)面 
var starImg = new Image (); 
starImg.src = "img/star.jpg"; 
starImg.onload = function () { 
ctx.drawImage (starImg, 0, 0, width, height); 
} 

//鍵盤監(jiān)聽 回車開始游戲 
document.body.onkeydown = function () { 
var keycode = event.keyCode; 
switch (keycode) { 
case 13: 
//初始化參數(shù) 
init () 
//刷新頁(yè)面 
setInterval (draw, 30); 
document.body.onkeydown = gameControl; 
break; 
} 
} 
} 

function init () { 
//玩家和電腦 
hero = new Hero (100, 300, 0); 
enemys = []; 
for (var i = 0; i < 3; i++) { 
enemys.push (new Enemy (100 + i * 50, 0, 2)); 
} 
//合并數(shù)組 
allTank = enemys.concat (hero); 

//炸彈 
Bombs = []; 
im = new Image (); 
im2 = new Image (); 
im3 = new Image (); 
im.src = "img/bomb_3.gif"; 
im2.src = "img/bomb_2.gif"; 
im3.src = "img/bomb_1.gif"; 
} 

function gameControl () { 
var keycode = event.keyCode; 
switch (keycode) { 
case 65: 
hero.moveLeft (); 
break;//左 
case 83: 
hero.moveDown (); 
break;//下 
case 87: 
hero.moveUp (); 
break;//上 
case 68: 
hero.moveRight (); 
break;//右 
case 74: 
hero.shot (); 
break; 
case 49: 
hero.addLife () 
break; 
} 
} 

//擴(kuò)展 刪除指定元素 
Array.prototype.deleteElement = function (obj) { 
if (obj) { 
for (var i = 0; i < this.length; i++) { 
if (this[i] === obj) { 
this.splice (i, 1); 
} 
} 
} 
} 

</script> 
</head> 
<body> 
<div class="show"> 
<canvas id="Map" width="500px" height="400px"> 
</canvas> 
<audio id="music" autoplay="autoplay"> 
<source src="music/111.wav"> 
</audio> 
</div> 
<div id="guide"> 

<p>按下回車鍵開始游戲</p> 

<p>按下1鍵增加生命,默認(rèn)是1</p> 

<p>剩余生命數(shù) :<label id="life">1</label></p> 

<div id="data"> 

</div> 
</div> 
</body> 
</html> 

2.Draw.js

復(fù)制代碼代碼如下:

 
/** 
* Created by Alane on 14-3-18. 
*/ 

function draw(){ 
//檢測(cè)子彈和坦克生死 
checkDead(); 
//清空畫布 
ctx.clearRect(0,0,500,400); 
//畫玩家 
if(!hero.isdead){ 
drawTank(hero); 
}else{ 
hero.cutLife(); 
} 
//畫敵人坦克 
for (var i = 0; i < enemys.length; i++) { 
drawTank(enemys[i]); 
} 
//畫敵人子彈 
for(var j=0;j<enemys.length;j++){ 
var temp = enemys[j].bulletsList; 
for (var i = 0; i < temp.length; i++) { 
drawBullet(temp[i]); 
} 
} 
//畫玩家子彈 
var temp = hero.bulletsList; 
for (var i = 0; i < temp.length; i++) { 
drawBullet(temp[i]); 
} 

//畫炸彈 
for(var i=0;i<Bombs.length;i++){ 
drawBown(Bombs[i]); 
} 

} 

function drawTank(tank){ 
var x = tank.x; 
var y = tank.y; 
ctx.fillStyle = tank.color; 

if(tank.direct == 0 || tank.direct ==2){ 
ctx.fillRect(x, y, 5,30); 
ctx.fillRect(x+15, y, 5,30); 

ctx.fillRect(x+6, y+8, 8,15); 

ctx.strokeStyle = tank.color; 
ctx.lineWidth = '1.5'; 
if(tank.direct == 0){ 
ctx.beginPath(); 
ctx.moveTo(x+10,y-2); 
ctx.lineTo(x+10,y+8); 
ctx.closePath(); 
}else{ 
ctx.beginPath(); 
ctx.moveTo(x+10,y+24); 
ctx.lineTo(x+10,y+32); 
ctx.closePath(); 
} 

ctx.stroke(); 
}else{ 
ctx.fillRect(x, y, 30,5); 
ctx.fillRect(x, y+15, 30,5); 

ctx.fillRect(x+8, y+6, 15,8); 

ctx.strokeStyle = '#FF0000'; 
ctx.lineWidth = '1.5'; 
if(tank.direct == 3){ 
ctx.beginPath(); 
ctx.moveTo(x-2,y+10); 
ctx.lineTo(x+8,y+10); 
ctx.closePath(); 
}else{ 
ctx.beginPath(); 
ctx.moveTo(x+24,y+10); 
ctx.lineTo(x+32,y+10); 
ctx.closePath(); 
} 

ctx.stroke(); 
} 

} 
function drawBullet(bullet){ 
ctx.fillStyle = bullet.color; 
ctx.beginPath(); 
ctx.arc(bullet.x,bullet.y,2,360,true); 
ctx.closePath(); 
ctx.fill(); 
} 

function drawBown (obj){ 
if(obj.life>8){ 
ctx.drawImage(im,obj.x,obj.y,50,50); 
}else if(obj.life>4){ 
ctx.drawImage(im2,obj.x,obj.y,50,50); 
}else{ 
ctx.drawImage(im3,obj.x,obj.y,50,50); 
} 

obj.lifeDown(); 
if(obj.life<=0){ 
Bombs.deleteElement(obj); 
} 
} 

function checkDead(){ 
//檢測(cè)敵人子彈生死 
for(var j=0;j<enemys.length;j++){ 
var temp = enemys[j].bulletsList; 
for (var i = 0; i < temp.length; i++) { 
var o = temp[i]; 
if(o.isdead){ 
temp.deleteElement(o); 
} 
} 
} 
//檢測(cè)玩家子彈生死 
var temp = hero.bulletsList; 
for (var i = 0; i < temp.length; i++) { 
var o = temp[i]; 
if(o.isdead){ 
temp.deleteElement(o); 
} 
} 

//檢測(cè)敵人坦克生死 
for (var i = 0; i < enemys.length; i++) { 
var o = enemys[i]; 
if(o.isdead){ 
enemys.deleteElement(o); 
} 
} 
} 

Bomb.js

復(fù)制代碼代碼如下:

 
/** 
* Created by Alane on 14-3-18. 
*/ 
function Bomb(x,y){ 
this.life = 12; 
this.x = x; 
this.y = y; 
} 
Bomb.prototype.lifeDown = function(){ 
this.life--; 
} 

Tank.js

復(fù)制代碼代碼如下:

 
/** 
* Created by Alane on 14-3-7. 
*/ 
/** 
* direct 0 上 
* 1 右 
* 2 下 
* 3 左 
* @param x 
* @param y 
* @param direct 
* @constructor 
*/ 
//******************************************************************************************/ 
//坦克父類 
function Tank (x, y, direct) { 
this.speed = 2; 

} 
Tank.prototype.moveUp = function () { 
//邊界檢測(cè) 
if (this.y < 0) { 
//換方向 
this.changeDirect (); 
return; 
} 
this.y -= this.speed; 
this.direct = 0; 

} 
Tank.prototype.moveDown = function () { 
if (this.y > height - 30) { 
this.changeDirect (); 
return; 
} 
this.y += this.speed; 
this.direct = 2; 
} 
Tank.prototype.moveLeft = function () { 
if (this.x < 0) { 
this.changeDirect (); 
return; 
} 
this.x -= this.speed; 
this.direct = 3; 

} 
Tank.prototype.moveRight = function () { 
if (this.x > width - 30) { 
this.changeDirect (); 
return; 
} 
this.x += this.speed; 
this.direct = 1; 

} 

//變換方向 
Tank.prototype.changeDirect = function () { 
while (true) { 
var temp = Math.round (Math.random () * 3); 
if (this.direct != temp) { 
this.direct = temp; 
break; 
} 
} 
//alert("x="+this.x+" y="+this.y+" direct="+this.direct) 
} 

//射擊子彈 
Tank.prototype.shot = function () { 
if(this.isdead){ 
return; 
} 
if (this.bulletsList.length < this.maxBulletSize) { 
//新建子彈 
var bullet = null; 
switch (this.direct) { 
case 0: 
bullet = new Bullet (this.x + 10, this.y - 2, 0, this.color); 
break; 
case 1: 
bullet = new Bullet (this.x + 32, this.y + 10, 1, this.color); 
break; 
case 2: 
bullet = new Bullet (this.x + 10, this.y + 32, 2, this.color); 
break; 
case 3: 
bullet = new Bullet (this.x - 2, this.y + 10, 3, this.color); 
break; 
} 
//放入彈夾 
this.bulletsList.push (bullet); 
} 
} 
//******************************************************************************************/ 
//玩家 
function Hero (x, y, direct) { 
this.lifetimes = 5; 
this.isdead = false; 
this.color = '#FF0000'; 
this.x = x; 
this.y = y; 
this.direct = direct; 
this.bulletsList = []; 
this.maxBulletSize = 10; 
this.newlife = null; 
} 
Hero.prototype = new Tank (0, 0, 0); 
Hero.prototype.constructor = Hero; 
Hero.prototype.addLife = function(){ 
this.lifetimes++; 
document.querySelector("#life").innerHTML = hero.lifetimes; 
} 
Hero.prototype.cutLife = function(){ 
if(this.lifetimes>=1 && !this.newlife){ 
this.lifetimes--; 
this.newlife = setTimeout("hero.newLife()",2000); 
} 
} 
Hero.prototype.newLife = function(){ 
this.isdead = false; 
clearTimeout(hero.newlife); 
hero.newlife = null; 
document.querySelector("#life").innerHTML = hero.lifetimes; 
} 


//******************************************************************************************/ 
//敵人坦克 
function Enemy (x, y, direct) { 
this.isdead = false; 
this.color = 'blue'; 
this.x = x; 
this.y = y; 
this.direct = direct; 
this.bulletsList = []; 
this.maxBulletSize = 1; 


//定時(shí)器,自動(dòng)移動(dòng) 
this.timer1 = setInterval ((function (context) { 
return function () { 
//移動(dòng) 
Enemy.prototype.move.call (context); 
} 
}) (this), 30); 

//定時(shí)器,射擊 
this.timer2 = setInterval ((function (context) { 
return function () { 
//射擊 
Tank.prototype.shot.call (context); 
} 
}) (this), 2000); 

//定時(shí)器,變換方向 
this.timer3 = setInterval ((function (context) { 
return function () { 
//射擊 
Tank.prototype.changeDirect.call (context); 
} 
}) (this), 3000); 
} 

Enemy.prototype = new Tank (0, 0, 0); 
Enemy.prototype.constructor = Enemy; 
Enemy.prototype.move = function () { 
switch (this.direct) { 
case 0: 
this.moveUp (); 
break; 
case 1: 
this.moveRight (); 
break; 
case 2: 
this.moveDown (); 
break; 
case 3: 
this.moveLeft (); 
break; 
} 
} 

Bullet.js

復(fù)制代碼代碼如下:

 
/** 
* Created by Alane on 14-3-11. 
*/ 
function Bullet (x, y, direct, color) { 
this.isdead = false; 
this.x = x; 
this.y = y; 
this.direct = direct; 
this.speed = 4; 
this.color = color; 
//定時(shí)器，自行運(yùn)動(dòng) 
this.timer = setInterval ((function (context) { 
return function () { 
Bullet.prototype.move.call (context) 
} 
}) (this), 30); 
} 
Bullet.prototype.move = function () { 
switch (this.direct) { 
case 0: 
this.y -= this.speed; 
break; 
case 1: 
this.x += this.speed; 
break; 
case 2: 
this.y += this.speed; 
break; 
case 3: 
this.x -= this.speed; 
break; 
} 

//邊界檢測(cè) 
if (this.y < 0 || this.x > width || this.y > height || this.x < 0) { 
clearInterval (this.timer); 
this.isdead = true; 
} 

//碰撞檢測(cè) 檢測(cè)敵人坦克 
for(var i=0;i<allTank.length;i++){ 
var temp = allTank[i]; 
if(temp.isdead){ 
continue; 
} 
switch (temp.direct){ 
case 0: 
case 2:if(this.x>temp.x && this.x<temp.x+20 && this.y>temp.y&& this.y<temp.y+30){ 
if(this.color == temp.color){ 
break; 
} 
Bombs.push(new Bomb(temp.x-10,temp.y-10)); 
clearInterval (this.timer); 
this.isdead = true; 
temp.isdead = true; 
}break 
case 1: 
case 3:if(this.x>temp.x && this.x<temp.x+30 && this.y>temp.y&& this.y<temp.y+20){ 
if(this.color == temp.color){ 
break; 
} 
Bombs.push(new Bomb(temp.x-10,temp.y-10)); 
clearInterval (this.timer); 
this.isdead = true; 
temp.isdead = true; 
}break; 
} 
} 

} 