JavaScript怎么實(shí)現(xiàn)網(wǎng)頁貪吃蛇游戲

發(fā)布時(shí)間：2021-07-28 14:59:23 來源：億速云閱讀：163 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下JavaScript怎么實(shí)現(xiàn)網(wǎng)頁貪吃蛇游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head><title>貪吃蛇</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var canv=document.getElementById("canvas");
var ctx=canv.getContext("2d");
var score=0;
//定義一個(gè)方塊的構(gòu)造函數(shù)
var Block=function(col,row,size)
{
  this.col=col;
  this.row=row;
  this.size=size;
    };
//定義Block函數(shù)的原型方法draw；
Block.prototype.draw =function()
{
  ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
   }
//定義對(duì)象蛇
var snake ={
  body:[
    new Block(20,20,10),
    new Block(20,21,10),
    new Block(20,22,10)
   ],
  direction:"right",
  };

//定義畫蛇的函數(shù)
snake.draw=function()
{
   for(var i=0;i<this.body.length;i++)
  {
     this.body[i].draw();
        }
   };

snake.move = function()
         {
          var head = this.body[0];

if(snake.direction=="right")
     {    
     var newhead=new Block(head.col+1,head.row,head.size)
            }
  
  if(snake.direction =="left")
   
     { 
     var newhead = new Block(head.col-1,head.row,head.size); 
           }  
 if(snake.direction=="up")
     {
     var newhead=new Block(head.col,head.row-1,head.size)
           }
    if(snake.direction=="down")
     {
     var newhead=new Block(head.col,head.row+1,head.size)
           } 
          if(newhead.col<0 || newhead.col>39 )
          {
           clearInterval(intervalId);
           gameover();
          }
          
          if(newhead.row<0 || newhead.row>39 )
          {
           clearInterval(intervalId);
           gameover();
          }
 for(var i=0;i<this.body.length;i++)
{
    if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
  {
    clearInterval(intervalId);
    gameover();
      }
          }         
     this.body.unshift(newhead);
     if(newhead.col==apple.posX &&newhead.row==apple.posY)
{  
    score=score+100;
    while(true)
  {
     var checkApple =false;
     apple.posX=Math.floor(Math.random()*40);
     apple.posY=Math.floor(Math.random()*40);
     for(var i=0; i<this.body.length;i++)
   {
     if(this.body[i].col==apple.posX &&this.body[i].row==apple.posY)
          checkApple=true;
                        }
       if(!checkApple)
       break;
      }  
  }
else{
     this.body.pop();
        }         
         };
//創(chuàng)建蘋果對(duì)象
var apple={
    posX:Math.floor(Math.random()*40),
    posY:Math.floor(Math.random()*40),
    sizeR:5
}
//畫蘋果函數(shù)
apple.draw=function()
{
  ctx.fillStyle="Green";
  ctx.beginPath();
  ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false);
  ctx.fill();
  ctx.fillStyle="Black";
     };
//結(jié)束
var gameover=function()
{
  ctx.font="60px Comic Sans MS";
  ctx.textAlign="center";
  ctx.textBaseline="middle";
  ctx.fillText("GAME OVER!",200,200)
    };
//定時(shí)功能
var intervalId=setInterval (function ()
{
   ctx.clearRect(0,0,400,400);
   ctx.font="20px Arial";
   ctx.fillText("Score:"+score,5,15);
   snake.draw();
   snake.move();
   apple.draw();
   ctx.strokeRect(0,0,400,400);
    },200);
//貪吃蛇的按鍵控制
$("body").keydown(function(event)
{
   console.log(event.keyCode);
    if(event.keyCode==37 &&snake.direction!="right")
     {
    snake.direction="left";
         }
    if(event.keyCode==38 &&snake.direction!="down")
     {
    snake.direction="up";
        }
    if(event.keyCode==39 &&snake.direction!="left")
     {
     snake.direction="right";
         }
     if(event.keyCode==40 &&snake.direction!="up")
     {
     snake.direction="down";
         }
              }
);
</script>
</body>
</html>

以上是“JavaScript怎么實(shí)現(xiàn)網(wǎng)頁貪吃蛇游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

JavaScript怎么實(shí)現(xiàn)網(wǎng)頁貪吃蛇游戲

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽