此HTML5所做坦克的坦克大战的功能比较齐全 而且都是用HTML5画出来的坦克和炮弹
成都创新互联是一家专业提供湄潭企业网站建设,专注与网站设计制作、成都网站设计、H5场景定制、小程序制作等业务。10年已为湄潭众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
一、自己的坦克能上下左右移动 按wsad 这是上下左右键
二、自己的坦克可以发射多颗炮弹 连续发射炮弹
三、画出敌人的三个坦克 而且可以向四个方向随机移动 发射炮弹
四、自己的坦克可以击中敌人的坦克 敌人也可以击中自己的
五、不可以超出边界，击中敌人坦克 坦克爆炸 ×××消失
html代码：
你的浏览器不支持canvas标签
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 var heroBullet = bullets[i]; if(heroBullet.isLive){ ctx.fillStyle = '#FEF26E'; ctx.fillRect(heroBullet.x,heroBullet.y,2,2); } } } //画出敌人坦克的××× function drawEnemyBullet(enemyBullets){ for(var i=0;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 for(var j=0;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 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; } } } }
网站名称：html5代码坦克大战
本文路径：http://bjjierui.cn/article/jiidec.html
