照着韩顺平老师模仿的坦克大战案例

来源：互联网发布：刷下拉词软件编辑：程序博客网时间：2024/05/16 19:01

看了韩顺平老师的公开课视频后，跟着他的视频做的，没有完全抄袭的。

TankGame.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onkeydown="move(event)">
<canvas id="tankMap" width="400px" height="300px" style="background-color:black">
</canvas>
<span id="aa"></span>
<script type="text/javascript" src="tank.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("tankMap");
var cxt = canvas.getContext("2d");
var heroColor = new Array("#DED284","#FFD972");
var enemyColor = new Array("#00A2B5","#00FEFE");
var heroBullets=new Array();
//规定：0代表上，1代表右，2代表下，3代表左。
var hero1 = new hero(40,40,0,heroColor);
var EnemyTanks = new Array();
for(var i=0;i<3;i++)
{
EnemyTanks[i] = new EnemyTank((i+1)*50,0,2,enemyColor);
}
//绘制坦克封装成函数。
//我的坦克hero
//var heroX = 30;
//var heroY = 30;
//参数里面传入的是tank对象

//定时刷新出现的元素
function flashTankMap()
{
cxt.clearRect(0,0,400,300);
for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
}
drawTank(hero1);
drawBullet();
}
window.setInterval("flashTankMap()",100);
function move(event)
{

switch(event.keyCode)
{
case 87:hero1.moveUp();hero1.direct=0; break;
case 65:hero1.moveLeft();hero1.direct=3; break;
case 83:hero1.moveDown();hero1.direct=2; break;
case 68:hero1.moveRight();hero1.direct=1; break;
case 74:hero1.shotEnemy();break;
}
//flashTankMap();
//在这里重新绘制所有坦克，于是我们直接写一个函数，专门用于定时刷新画布。
/* for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
} */
}
</script>

</body>
</html>

TankGame.js

/**
*
*/
//定义一个子弹类
function Bullet(x,y,direct,speed)
{
this.x = x;
this.y = y;
this.timer=null;
this.direct = direct;
this.isLive=true;
this.speed=speed;
this.run = function()
{
if(this.x<=0 || this.x>=400 || this.y<=0 || this.y>=300)
{
//子弹消失标记
this.isLive=false;
//子弹不走了
clearInterval(this.timer);
}
else
{
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;
}
}
var span = document.getElementById("aa");
span.innerHTML = "x坐标:"+this.x+"y坐标:"+this.y;

}
}
//父类
function Tank(x,y,direct,color)
{
this.x=x;
this.y=y;
this.speed=2;
this.color=color;
this.direct=direct;
this.moveUp=function()
{
this.y-=this.speed;
}
this.moveDown=function()
{
this.y+=this.speed;
}
this.moveRight=function()
{
this.x+=this.speed;
}
this.moveLeft=function()
{
this.x-=this.speed;
}
}
//通过对象冒充来继承
function hero(x,y,direct,color)
{
this.tank = Tank;
this.tank(x,y,direct,color);
this.shotEnemy=function()
{
switch(this.direct)
{
case 0:heroBullet = new Bullet(this.x+9,this.y,this.direct,1);break;
case 1:heroBullet = new Bullet(this.x+30,this.y+9,this.direct,1);break;
case 2:heroBullet = new Bullet(this.x+9,this.y+30,this.direct,1);break;
case 3:heroBullet = new Bullet(this.x,this.y+9,this.direct,1);break;

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

}
}
function drawBullet()
{
for(var i=0;i<heroBullets.length;i++)
{
var heroBullet = heroBullets[i];
if(heroBullet!=null && heroBullet.isLive)
{
cxt.fillStyle="#FFD972";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}

}
}
function EnemyTank(x,y,direct,color)
{
this.tank = Tank;
this.tank(x,y,direct,color);
}
function drawTank(tank)
{
//设置颜色

switch(tank.direct)
{
case 0:
case 2:
cxt.fillStyle=tank.color[0];
//位置先定死，然后以后再改进
//左边矩形
cxt.fillRect(tank.x,tank.y,5,30);
//右边矩形
cxt.fillRect(tank.x+5+10,tank.y,5,30);
//中间矩形
cxt.fillRect(tank.x+6,tank.y+5,8,20);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+10,tank.y+15,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15);
if(tank.direct==0)
{
cxt.lineTo(tank.x+10,tank.y);
}
else if(tank.direct==2)
{
cxt.lineTo(tank.x+10,tank.y+30);
}
cxt.closePath();
cxt.stroke();
break;
case 1:
case 3:
cxt.fillStyle=tank.color[0];
//上面矩形
cxt.fillRect(tank.x,tank.y,30,5);
//下面矩形
cxt.fillRect(tank.x,tank.y+5+10,30,5);
//中间矩形
cxt.fillRect(tank.x+5,tank.y+6,20,8);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+15,tank.y+10,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10);
if(tank.direct==1)
{
cxt.lineTo(tank.x+30,tank.y+10);
}
else if(tank.direct==3)
{
cxt.lineTo(tank.x,tank.y+10);
}
cxt.closePath();
cxt.stroke();
break;
}
}

0 0