杰晶网络

20行js代码实现的贪吃蛇小游戏
网络编程 2024/11/16 佚名
3 2

前言

最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏，感觉被惊艳到了，就试着读了一下这段代码，阅读过程中不断为作者写法的巧妙而叫绝，其中我发现自己对运算符优先级和一些js的技巧不是很清楚，所以看完之后决定把思路分享出来，方便和我一样的小白学习。

我对代码稍稍做了些修改，并添加了一些注释，方便理解。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>贪吃蛇重构</title>
 <style>
  body {
   display: flex;
   height: 100vh;
   margin: 0;
   padding: 0;
   justify-content: center;
   align-items: center;
  }
 </style>
</head>
<body>
 <canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
 <script>
 
  var snake = [41, 40],  //snake队列表示蛇身，初始节点存在但不显示
   direction = 1,   //1表示向右，-1表示向左，20表示向下，-20表示向上
   food = 43,    //食物的位置
   n,      //与下次移动的位置有关
   box = document.getElementById('can').getContext('2d');
         //从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
  function draw(seat, color) {
   box.fillStyle = color;
   box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
         //用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。
  }
  document.onkeydown = function(evt) { 
         //当键盘上下左右键摁下的时候改变direction
   direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) "GAME OVER!");
   }
   draw(n, "lime");  //画出蛇头下次出现的位置
   if(n == food) {   //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
    while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
    draw(food, "yellow");
   } else {    //没有吃到食物时正常移动，蛇尾出队列
    draw(snake.pop(),"black");
   }
   setTimeout(arguments.callee, 150);  
         //每隔0.15秒执行函数一次，可以调节蛇的速度
  }();
 </script>
</body>
</html>

首先，我们要知道做一个贪吃蛇最主要的是什么，是做出蛇活动的场所和如何使蛇动起来。

我们先看蛇活动的场所：

<!-- html -->
<canvas id="can" width="400" height="400" style="background-color: black">
 对不起，您的浏览器不支持canvas
</canvas>
<!-- js -->
box = document.getElementById('can').getContext('2d');

这是一个400px*400px的canvas，思路是以20px*20px为一个方格，组成20行20列的方阵，总共400格，然后绿色填充的格子表示蛇身，用黄色表示食物。这400个格子和数字0~399一一对应，对应的方式就是以20作为基数，n / 20再取整表示第几行，n % 20表示第几列。行数和列数都用0~19表示。

蛇用一个一维数组表示，每个值都是这400个数中的一个，用var snake = [41, 40];初始化这条蛇，索引0为蛇头。food表示食物的位置，direction表示蛇头下一次运动的转向。蛇的运动就用添加和删除数组元素来实现，每次执行绘制蛇头，去掉蛇尾，循环执行使蛇运动。

下边从函数运行的起始处（39行）开始看:

!function() {}();

什么鬼？这其实是立即执行函数IIFE的另一种写法。关于IIFE，这篇文章讲的挺不错的。继续往下看，给蛇头添加一个节点n，其值为当前蛇头的值加direction的值，如此一来就能理解为什么要用20表示向下，-20表示向上了。再下一行是一个if语句，其中值得提醒的是&&的优先级高于||，这个语句就是判断即将出现的蛇头是不是属于蛇身，或者跑到box外边去了。如果没有死亡，就把这个蛇头绘制出来，下边就看看绘制的代码：

function draw(seat, color) {
 box.fillStyle = color;
 box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}

填充时填充18*18的像素，留1px边框。 .fillRect()中第一个参数就是要绘制的矩形的x坐标seat % 20 *20 + 1，即先得到所要绘制的矩形块在方阵中的位置：第~~(seat / 20)行，第seat % 20列，再* 20 + 1具体到像素点。可能这个~~有点难理解，我感觉在这里的用处应该和Math.floor()差不多，对一个浮点型的数取反再取反，得到的数就是去掉小数位的整数了。

回到47行，又是一个判断语句，判断下次蛇头出现的位置是不是和当前的食物的位置相同，如果相同，生成下一个食物，食物的位置为一个随机数，但是要判断这个点不是出现在当前的蛇身上，绘制食物。如果没有吃到食物，即蛇在正常运动时，每向前一次，将蛇尾弹出，并利用其返回值将这个点重新绘制为黑色。

最后的setTimeout，循环执行当前函数，设置执行周期来调蛇的移动速度。

到了这里，我们发现这条蛇已经可以动了，加上键盘的操作就完成了：

document.onkeydown = function(evt) { 
 direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) "color: #ff0000">总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
标签：
js贪吃蛇代码,贪吃蛇20行代码,贪吃蛇js源代码
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“20行js代码实现的贪吃蛇小游戏”
暂无“20行js代码实现的贪吃蛇小游戏”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网