html5坦克大战完整版

tanke.js文件：

//定义敌人和我们自己的坦克的颜色

var enemyColor = new Array('#00FEFE','#00A2B5');

var heroColor = new Array('#FEF26E','#BA9658');

//封装一个公用的坦克类

function Tank(x,y,direct){

this.x = x;

this.y = y;

this.speed = 3;

this.direct = direct;

this.moveUp = function(){

hero.y -= hero.speed;

hero.direct = 0;

}

this.moveRight = function(){

hero.x += hero.speed;

hero.direct = 1;

}

this.moveBottom = function(){

hero.y += hero.speed;

hero.direct = 2;

}

this.moveLeft = function(){

hero.x -= hero.speed;

hero.direct = 3;

}

}

//英雄坦克类

function Hero(x,y,direct,color){

//将坦克类的构造方法赋给hero

this.hero = Tank;

//调用,拥有坦克类的所有的属性和方法

this.hero(x,y,direct);

this.color = color;

this.direct = direct;

this.isLive = true;

this.shotEnemy = function(){

switch(this.direct){

case 0:

heroBullet = new Bullet(this.x+9,this.y,this.direct);

break;

case 1:

heroBullet = new Bullet(this.x+30,this.y+9,this.direct);

break;

case 2:

heroBullet = new Bullet(this.x+9,this.y+30,this.direct);

break;

case 3:

heroBullet = new Bullet(this.x,this.y+9,this.direct);

break;

}

heroBullets.push(heroBullet);

heroBullets[heroBullets.length-1].timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);

}

}

//敌人的坦克

function EnemyTank(x,y,direct,color){

//将坦克类的构造方法赋给hero

this.enemyTank = Tank;

//调用,拥有坦克类的所有的属性和方法

this.enemyTank(x,y,direct);

this.color = color;

this.isLive = true;

this.timer = null;

this.speed = 1;

this.count = 0;

this.direct = direct;

this.bulletIsLive = true;

this.run = function(){

switch(this.direct){

case 0:

if(this.y>0){

this.y--;

}

break;

case 1:

if(this.x+30<500){

this.x += this.speed;

}

break;

case 2:

if(this.y+30<300){

this.y += this.speed;

}

break;

case 3:

if(this.x>0){

this.x -= this.speed;

}

break;

}

if(this.count>=30){

this.direct = Math.round(Math.random()*3);

this.count=0;

}

this.count++;

//在坦克走的过程中,判断一下,这个坦克的子弹是否活着

if(this.bulletIsLive == false && this.isLive){

//子弹已死,给他补充一颗

switch(this.direct){

case 0:

enemyBullets.push(new Bullet(this.x+9,this.y,this.direct,this,'enemy'));

break;

case 1:

enemyBullets.push(new Bullet(this.x+30,this.y+9,this.direct,this,'enemy'));

break;

case 2:

enemyBullets.push(new Bullet(this.x+9,this.y+30,this.direct,this,'enemy'));

break;

case 3:

enemyBullets.push(new Bullet(this.x,this.y+9,this.direct,this,'enemy'));

break;

}

enemyBullets[enemyBullets.length-1].timer = window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);

this.bulletIsLive = true;

}

}

}

//绘制坦克

function drawTank(hero){

switch(hero.direct){

case 0:

case 2:

//alert(ctx);

ctx.fillStyle = hero.color[0];

ctx.fillRect(hero.x,hero.y,5,30);

ctx.fillRect(hero.x+15,hero.y,5,30);

ctx.fillRect(hero.x+6,hero.y+5,8,20);

//需要注意,画圆的时候需要重新开启路径

ctx.fillStyle = hero.color[1];

ctx.beginPath();

ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

//画出炮筒(直线)

ctx.strokeStyle = hero.color[1];

ctx.lineWidth = 2;

ctx.moveTo(hero.x+10,hero.y+15);

if(hero.direct==0){

ctx.lineTo(hero.x+10,hero.y);

}else if(hero.direct==2){

ctx.lineTo(hero.x+10,hero.y+30);

}

ctx.stroke();

break;

case 1:

case 3:

ctx.fillStyle = hero.color[0];

ctx.fillRect(hero.x,hero.y,30,5);

ctx.fillRect(hero.x,hero.y+15,30,5);

ctx.fillRect(hero.x+5,hero.y+6,20,8);

//需要注意,画圆的时候需要重新开启路径

ctx.fillStyle = hero.color[1];

ctx.beginPath();

ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

//画出炮筒(直线)

ctx.strokeStyle = hero.color[1];

ctx.lineWidth = 2;

ctx.moveTo(hero.x+15,hero.y+10);

if(hero.direct ==1){

ctx.lineTo(hero.x+30,hero.y+10);

}else if(hero.direct ==3){

ctx.lineTo(hero.x,hero.y+10);

}

ctx.stroke();

break;

}

}

//定义一个子弹类

function Bullet(x,y,direct,tank,type){

this.x = x;

this.y = y;

this.speed = 3;

this.direct = direct;

this.timer = null;

this.isLive = true;

this.tank = tank;

this.type = type;

this.run = 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;

}

document.getElementById('aa').innerText = "x轴:"+this.x+"y轴:"+this.y;

if(this.x <0 || this.x>=500 ||this.y<0 || this.y>300 ||this.isLive==false){

this.isLive = false;

//this.tank.bulletIsLive = false;

if(this.type=='enemy'){

this.tank.bulletIsLive = false;

}

window.clearInterval(this.timer);

}

}

}

function drawHeroBullet(bullets){

for(var i=0;i<bullets.length;i++){

var heroBullet = bullets[i];

if(heroBullet.isLive){

ctx.fillStyle = '#00FEFE';

ctx.fillRect(heroBullet.x,heroBullet.y,2,2);

}

}

}

//画出敌人坦克的子弹

function drawEnemyBullet(enemyBullets){

for(var i=0;i<enemyBullets.length;i++){

var enemyBullet = enemyBullets[i];

if(enemyBullet.isLive){

ctx.fillRect(enemyBullet.x,enemyBullet.y,2,2);

}

}

}

function isHitEnemyTank(heroBullets,enemyTanks){

for(var i=0;i<heroBullets.length;i++){

for(var j=0;j<enemyTanks.length;j++){

//判断一下自己的子弹和敌人的坦克坐标

if(enemyTanks[j].isLive){

switch(enemyTanks[j].direct){

case 0:

case 2:

if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+20&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){

//标记敌人的坦克和我们的子弹已经死掉了

heroBullets[i].isLive = false;

enemyTanks[j].isLive = false;

var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);

bombs.push(bomb);

}

break;

case 1:

case 3:

if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+30&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+20){

//标记敌人的坦克和我们的子弹已经死掉了

heroBullets[i].isLive = false;

enemyTanks[j].isLive = false;

var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);

bombs.push(bomb);

}

break;

}

}

}

}

}

//定义炸弹类

function Bomb(x,y){

this.x = x;

this.y = y;

}

//判断敌人的子弹是否击中自己的坦克

function isHitHeroTank(enemyBullets,heroTank){

for(var i=0;i<enemyBullets.length;i++){

if(enemyBullets[i].isLive && heroTank.isLive){

switch(heroTank.direct){

case 0:

case 2:

if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+20 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +30){

heroTank.isLive = false;

enemyBullets[i].isLive = false;

}

break;

case 1:

case 3:

if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+30 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +20){

heroTank.isLive = false;

enemyBullets[i].isLive = false;

}

break;

}

}

}

}

tanke.html文件：

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'/>

<script src='tankGame3.js'></script>

</head>

<body onkeydown="changeDirect()">

<canvas id='tankMap' width='500px' height='300px' style='background-color:black'>

你的浏览器不支持canvas标签</canvas>

<span id='aa'></span>

</body>

<script>

//开始画出我们的tanke

var canvas = document.getElementById('tankMap');

//相当于获得画笔

var ctx = canvas.getContext('2d');

//定义炸弹

var bombs = new Array();

var hero = new Hero(140,90,0,heroColor);

var enemyTanks = new Array();

//敌人的子弹数组

var enemyBullets = new Array();

for(var i=0;i<3;i++){

var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);

enemyTanks[i] = enemyTank;

//drawTank(enemyTanks[i]);

//让敌人的坦克动起来

var timer = window.setInterval("enemyTanks["+i+"].run()",50);

enemyTanks[i].timer = timer;

//让敌人发射子弹

var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],'enemy');

enemyBullets.push(enemyBullet);

enemyBullets[i].timer = window.setInterval("enemyBullets["+i+"].run()",50);

}

//定义子弹数组

var heroBullets = new Array();

var heroBullet = null;

if(hero.isLive){

drawTank(hero);

}

flashMap();

function flashMap(){

ctx.clearRect(0,0,500,300);

isHitHeroTank(enemyBullets,hero);

if(hero.isLive){

drawTank(hero);

}

isHitEnemyTank(heroBullets,enemyTanks);

//画出自己坦克的子弹

drawHeroBullet(heroBullets);

//画出敌人坦克的子弹

drawEnemyBullet(enemyBullets,enemyTanks);

for(var i=0;i<3;i++){

if(enemyTanks[i].isLive){

drawTank(enemyTanks[i]);

}

}

//画出炸弹

for(var k=0;k<bombs.length;k++){

var img = new Image();

img.src = 'bomb_1.gif';

var x = bombs[k].x;

var y = bombs[k].y;

ctx.drawImage(img,x,y,30,30);

bombs.splice(k,1);

}

}

function changeDirect(){

var keycode = event.keyCode;

switch(keycode){

case 87:

hero.moveUp();

break;

case 68:

hero.moveRight();

break;

case 83:

hero.moveBottom();

break;

case 65:

hero.moveLeft();

break;

case 74:

hero.shotEnemy();

break;

}

flashMap();

}

window.setInterval("flashMap()",100);

</script>

</html>