• 售前

  • 售后

热门帖子
入门百科

JavaScript实现网页版贪吃蛇游戏

[复制链接]
David902 显示全部楼层 发表于 2021-8-14 14:49:42 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JavaScript实现网页贪吃蛇游戏的详细代码,供各人参考,详细内容如下
  1. <!DOCTYPE html>
  2. <html>
  3. <head><title>贪吃蛇</title>
  4. </head>
  5. <body>
  6. <canvas id="canvas" width="400" height="400"></canvas>
  7. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  8. <script>
  9. var canv=document.getElementById("canvas");
  10. var ctx=canv.getContext("2d");
  11. var score=0;
  12. //定义一个方块的构造函数
  13. var Block=function(col,row,size)
  14. {
  15.   this.col=col;
  16.   this.row=row;
  17.   this.size=size;
  18.     };
  19. //定义Block函数的原型方法draw;
  20. Block.prototype.draw =function()
  21. {
  22.   ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
  23.    }
  24. //定义对象蛇
  25. var snake ={
  26.   body:[
  27.     new Block(20,20,10),
  28.     new Block(20,21,10),
  29.     new Block(20,22,10)
  30.    ],
  31.   direction:"right",
  32.   };
  33. //定义画蛇的函数
  34. snake.draw=function()
  35. {
  36.    for(var i=0;i<this.body.length;i++)
  37.   {
  38.      this.body[i].draw();
  39.         }
  40.    };
  41. snake.move = function()
  42.          {
  43.           var head = this.body[0];
  44. if(snake.direction=="right")
  45.      {   
  46.      var newhead=new Block(head.col+1,head.row,head.size)
  47.             }
  48.   
  49.   if(snake.direction =="left")
  50.    
  51.      {
  52.      var newhead = new Block(head.col-1,head.row,head.size);
  53.            }  
  54. if(snake.direction=="up")
  55.      {
  56.      var newhead=new Block(head.col,head.row-1,head.size)
  57.            }
  58.     if(snake.direction=="down")
  59.      {
  60.      var newhead=new Block(head.col,head.row+1,head.size)
  61.            }
  62.           if(newhead.col<0 || newhead.col>39 )
  63.           {
  64.            clearInterval(intervalId);
  65.            gameover();
  66.           }
  67.          
  68.           if(newhead.row<0 || newhead.row>39 )
  69.           {
  70.            clearInterval(intervalId);
  71.            gameover();
  72.           }
  73. for(var i=0;i<this.body.length;i++)
  74. {
  75.     if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
  76.   {
  77.     clearInterval(intervalId);
  78.     gameover();
  79.       }
  80.           }         
  81.      this.body.unshift(newhead);
  82.      if(newhead.col==apple.posX &&newhead.row==apple.posY)
  83. {  
  84.     score=score+100;
  85.     while(true)
  86.   {
  87.      var checkApple =false;
  88.      apple.posX=Math.floor(Math.random()*40);
  89.      apple.posY=Math.floor(Math.random()*40);
  90.      for(var i=0; i<this.body.length;i++)
  91.    {
  92.      if(this.body[i].col==apple.posX &&this.body[i].row==apple.posY)
  93.           checkApple=true;
  94.                         }
  95.        if(!checkApple)
  96.        break;
  97.       }  
  98.   }
  99. else{
  100.      this.body.pop();
  101.         }         
  102.          };
  103. //创建苹果对象
  104. var apple={
  105.     posX:Math.floor(Math.random()*40),
  106.     posY:Math.floor(Math.random()*40),
  107.     sizeR:5
  108. }
  109. //画苹果函数
  110. apple.draw=function()
  111. {
  112.   ctx.fillStyle="Green";
  113.   ctx.beginPath();
  114.   ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false);
  115.   ctx.fill();
  116.   ctx.fillStyle="Black";
  117.      };
  118. //结束
  119. var gameover=function()
  120. {
  121.   ctx.font="60px Comic Sans MS";
  122.   ctx.textAlign="center";
  123.   ctx.textBaseline="middle";
  124.   ctx.fillText("GAME OVER!",200,200)
  125.     };
  126. //定时功能
  127. var intervalId=setInterval (function ()
  128. {
  129.    ctx.clearRect(0,0,400,400);
  130.    ctx.font="20px Arial";
  131.    ctx.fillText("Score:"+score,5,15);
  132.    snake.draw();
  133.    snake.move();
  134.    apple.draw();
  135.    ctx.strokeRect(0,0,400,400);
  136.     },200);
  137. //贪吃蛇的按键控制
  138. $("body").keydown(function(event)
  139. {
  140.    console.log(event.keyCode);
  141.     if(event.keyCode==37 &&snake.direction!="right")
  142.      {
  143.     snake.direction="left";
  144.          }
  145.     if(event.keyCode==38 &&snake.direction!="down")
  146.      {
  147.     snake.direction="up";
  148.         }
  149.     if(event.keyCode==39 &&snake.direction!="left")
  150.      {
  151.      snake.direction="right";
  152.          }
  153.      if(event.keyCode==40 &&snake.direction!="up")
  154.      {
  155.      snake.direction="down";
  156.          }
  157.               }
  158. );
  159. </script>
  160. </body>
  161. </html>
复制代码

以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作