HTML坦克游戏：经典小游戏HTML5版-优快云博客

粉色坦克为敌人的坦克，橘色坦克为我方坦克

画布上的点点是子弹，目前还没有实现发子弹消灭敌方坦克并消失

明天会更新并且完善

坦克的组成是由三个矩形中间矩形上面是一个圆形，圆形上是一个直线

根据不同的方向生成不同的子弹：

(1)根据方向----生成不同的子弹对象

(2)再根据子弹坦克炮筒方向，画出子弹

废话不多说上源码

tankGame2.html

你的浏览器不支持canvas标签

//开始画出我们的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();

}

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