您的位置:首页 > 编程学习 > > 正文

JavaScript实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)

更多 时间:2021-09-30 00:25:15 类别:编程学习 浏览量:1885

JavaScript实现网页版贪吃蛇游戏

JavaScript实现网页版贪吃蛇游戏

本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下

  • <!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;
    //定义一个方块的构造函数
    var Block=function(col,row,size)
    {
      this.col=col;
      this.row=row;
      this.size=size;
        };
    //定义Block函数的原型方法draw;
    Block.prototype.draw =function()
    {
      ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
       }
    //定义对象蛇
    var snake ={
      body:[
        new Block(20,20,10),
        new Block(20,21,10),
        new Block(20,22,10)
       ],
      direction:"right",
      };
    
    //定义画蛇的函数
    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();
            }         
             };
    //创建苹果对象
    var apple={
        posX:Math.floor(Math.random()*40),
        posY:Math.floor(Math.random()*40),
        sizeR:5
    }
    //画苹果函数
    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";
         };
    //结束
    var gameover=function()
    {
      ctx.font="60px Comic Sans MS";
      ctx.textAlign="center";
      ctx.textBaseline="middle";
      ctx.fillText("GAME OVER!",200,200)
        };
    //定时功能
    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实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:js 贪吃蛇