JavaScript怎么实现网页贪吃蛇游戏

2023-06-20 17:06:30 142人浏览薄情痞子

摘要

小编给大家分享一下javascript怎么实现网页贪吃蛇游戏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下<!DOCTYPE html

小编给大家分享一下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>