html5代码坦克大战-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

html5代码坦克大战

此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代码坦克大战
本文URL：http://scyingshan.cn/article/jiidec.html

新闻中心

其他资讯