极乐门资源网

20行js代码实现的贪吃蛇小游戏
网络编程 2024/11/18 佚名
2 0
极乐门资源网 Design By www.ioogu.com

前言

最近在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源代码
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“20行js代码实现的贪吃蛇小游戏”

暂无20行js代码实现的贪吃蛇小游戏的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com