HTML5经典小游戏之坦克
粉色坦克为敌人的坦克，橘色坦克为我方坦克
画布上的点点是子弹，目前还没有实现发子弹消灭敌方坦克并消失
明天会更新并且完善
坦克的组成是由三个矩形中间矩形上面是一个圆形，圆形上是一个直线
根据不同的方向生成不同的子弹：
（1）根据方向----生成不同的子弹对象
（2）再根据子弹坦克炮筒方向，画出子弹
废话不多说 上源码
tankGame2.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src='tankGame2.js'></script>
</head>
<body onkeydown="changeDirect()">
<canvas id='tankMap' width='500px' height='300px' style='border:1px solid #cccfff'>
你的浏览器不支持canvas标签</canvas>
</body>
<script>
//开始画出我们的tanke
var canvas = document.getElementById('tankMap');
//相当于获得画笔
var ctx = canvas.getContext('2d');
//自定义的标准：
// 0-->向上 1-->向右 2-->向下 3--> 向左
var hero = new Hero(40,40,3,0,heroColor);
drawTank(hero);
//定义一个数组,画出敌人的坦克,画一个向数组添加一个
var enemyTanks = new Array();
//定义一个子弹的数组
var heroBullets = new Array();
//根据方向生成的具体的某个子弹对象
var heroBullet = null;
for(var i=0;i<3;i++){
var enemyTank = new EnemyTank((i+1)*50,0,3,2,enemyColor);
enemyTanks[i] = enemyTank;
drawTank(enemyTanks[i]);
}
//刷新作战区,显示战场上最新的元素()
function flashMap(){
ctx.clearRect(0,0,500,300);
drawTank(hero);
//画出英雄坦克的子弹
drawHeroBullet();
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}
function changeDirect(){
//触发事件后,传递参数 event
var keycode = event.keyCode;
switch(keycode){
case 38:
hero.moveUp();
break;
case 39:
hero.moveRight();
break;
case 40:
hero.moveBottom();
break;
case 37:
hero.moveLeft();
break;
case 32:
hero.shotEnemy();
break;
}
flashMap();
}
</script>
</html>
tankGame.js
//先给坦克定义颜色
var enemyColor = new Array('gray','pink');
var heroColor = new Array('blue','orange');
function Tank(x,y,speed,direct,color){
this.x = x;
this.y = y;
this.speed = speed;
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,speed,direct,color){
this.hero = Tank;
this.color = color;
this.hero(x,y,speed,direct);
this.shotEnemy = function(){
//drawHeroBullet(hero);
//heroBullet = new HeroBullet();
switch(this.direct){
case 0:
//实例化一个子弹对象
heroBullet = new HeroBullet(this.x+10,this.y,this.speed);
break;
case 1:
heroBullet = new HeroBullet(this.x+30,this.y+9,this.speed);
break;
case 2:
heroBullet = new HeroBullet(this.x+9,this.y+30,this.speed);
break;
case 3:
heroBullet = new HeroBullet(this.x,this.y+9,this.speed);
break;
}
heroBullets.push(heroBullet);
}
}
//定义 敌人的坦克
function EnemyTank(x,y,speed,direct,color){
this.enemyTank = Tank;
this.color = color;
this.enemyTank(x,y,speed,direct);
}
function HeroBullet(x,y,speed,direct){
this.x = x;
this.y = y;
this.speed = speed;
this.direct = direct;
}
function drawHeroBullet(){
for(var j=0;j<heroBullets.length;j++){
ctx.fillStyle = 'blue';
var heroBullet = heroBullets[j];
ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
//把生成坦克的代码封装到一个函数中
function drawTank(hero){
switch(hero.direct){
case 0:
case 2:
ctx.fillStyle = hero.color[1];
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[0];
ctx.beginPath();
ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[0];
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[1];
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[0];
ctx.beginPath();
ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[0];
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();
}
}