HTML5坦克大战-网页小游戏

2024-09-05 12:19:08

字体：大中小

来源：转载

供稿：网友

HTML5写网页游戏那是相当牛叉了，几乎不用什么图片修饰，只要水平够高，用HTML5写大型网页游戏肯定是主游戏。这个坦克大战游戏虽然简单，但可以为你编写HTML5游戏提供一些思路和参考，游戏实现了攻击、角色移动、子弹判断等众多逻辑，还是不错的。

<!DOCTYPE html><html><head><meta charset='utf-8'/><title>HTML5坦克大战</title><script> //定义敌方和自己坦克的颜色 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:    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;    if(this.type=='enemy'){     this.tank.bulletIsLive = false;    }    window.clearInterval(this.timer);   }  } } function drawHeroBullet(bullets){  for(var i=0;i<bullets.length;i++){   var heroBullet = bullets[i];   if(heroBullet.isLive){    ctx.fillStyle = '#00FEFE';    ctx.fillRect(heroBullet.x,heroBullet.y,2,2);   }  } } //画敌人坦克的子弹 function drawEnemyBullet(enemyBullets){  for(var i=0;i<enemyBullets.length;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<heroBullets.length;i++){   for(var j=0;j<enemyTanks.length;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<enemyBullets.length;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;   }   }  } }</script></head><body onkeydown="changeDirect()"><canvas id='tankMap' width='500px' height='300px' style='background-color:black'>你的浏览器不支持canvas标签</canvas><span id='aa'></span></body><script> //开始画出我们的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<bombs.length;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;  //alert(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(); } window.setInterval("flashMap()",100);</script></html>

上一篇：CSS3过滤器实现图片模糊与高亮显示

下一篇：Canvas HTML5圆形挂钟动画版