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圓形掛鐘動畫版