html5代码坦克大战
此HTML5所做坦克的坦克大战的功能比较齐全 而且都是用HTML5画出来的坦克和炮弹
成都创新互联是一家专业提供湄潭企业网站建设,专注与网站设计制作、成都网站设计、H5场景定制、小程序制作等业务。10年已为湄潭众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
一、自己的坦克能上下左右移动 按wsad 这是上下左右键
二、自己的坦克可以发射多颗炮弹 连续发射炮弹
三、画出敌人的三个坦克 而且可以向四个方向随机移动 发射炮弹
四、自己的坦克可以击中敌人的坦克 敌人也可以击中自己的
五、不可以超出边界,击中敌人坦克 坦克爆炸 ×××消失
html代码:
你的浏览器不支持canvas标签
//开始画出我们的tanke
var canvas = document.getElementById('tankMap');
//相当于获得画笔
var ctx = canvas.getContext('2d');
//定义×××
var bombs = new Array();
var hero = new Hero(140,90,0,heroColor);
var enemyTanks = new Array();
//敌人的×××数组
var enemyBullets = new Array();
for(var i=0;i<3;i++){
var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
enemyTanks[i] = enemyTank;
//drawTank(enemyTanks[i]);
//让敌人的坦克动起来
var timer = window.setInterval("enemyTanks["+i+"].run()",50);
enemyTanks[i].timer = timer;
//让敌人发射×××
var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],'enemy');
enemyBullets.push(enemyBullet);
enemyBullets[i].timer = window.setInterval("enemyBullets["+i+"].run()",50);
}
//定义×××数组
var heroBullets = new Array();
var heroBullet = null;
if(hero.isLive){
drawTank(hero);
}
flashMap();
function flashMap(){
ctx.clearRect(0,0,500,300);
isHitHeroTank(enemyBullets,hero);
if(hero.isLive){
drawTank(hero);
}
isHitEnemyTank(heroBullets,enemyTanks);
//画出自己坦克的×××
drawHeroBullet(heroBullets);
//画出敌人坦克的×××
drawEnemyBullet(enemyBullets,enemyTanks);
for(var i=0;i<3;i++){
if(enemyTanks[i].isLive){
drawTank(enemyTanks[i]);
}
}
//画出×××
for(var k=0;k var img = new Image(); img.src = 'bomb_1.gif'; var x = bombs[k].x; var y = bombs[k].y; ctx.drawImage(img,x,y,30,30); bombs.splice(k,1); } } function changeDirect(){ var keycode = event.keyCode; switch(keycode){ case 87: hero.moveUp(); break; case 68: hero.moveRight(); break; case 83: hero.moveBottom(); break; case 65: hero.moveLeft(); break; case 74: hero.shotEnemy(); break; } flashMap(); } window.setInterval("flashMap()",100); 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://myzitong.com/article/jiidec.html