分享一个js小游戏--贪吃蛇

上周看到一个大腿用20行代码写了贪吃蛇游戏，觉得好屌，分享一下他的代码。
原文地址戳这: 原文链接。
废话不多说，看代码

游戏场景设计

一眼是不是没杂看明白，没关系，用浏览器打开，先玩一把，是不是感觉挺溜的。

游戏场景.png

下面一段一段来看看代码都干哈的。
首先是生成一个400x400的画布：图1

画布.png

这是整个游戏场景，蛇体，蛇移动和食物都在这里。设计单位小块尺寸20x20，这样整个画布一共就有20X20=400个正方小块，如图2

400格.png

只需加入这段js

首先声明canvas的上下文，然后声明绘制单元格函数，fillstyle是颜色属性，fillRect绘制一个矩形，四个参数，分别是：1.离原点的x方向距离；2.离原点的y方向的距离；3.长；4.宽。
长和宽只有18，不是20，是为了单元格之间流出1个长度的空隙，400个小块从左到右，从上到下依次对应0-399。
这里的函数draw是整个游戏绘制蛇体，食物的基础函数。执行一次绘制一个小方块，敲黑板了，功能设计关键的地方之一：

• 用一个数组表示蛇体，数组的一项代表蛇体的一块，通过draw绘制；
• 蛇体移动，通过数组头部增加一项，尾部去除一项实现；
• 蛇吃到食物，蛇体长度增加一块，通过数组增加一项实现；

从新来看下代码

每秒钟往数组头部添加一项，尾部去除一项（吃到食物时除外）
往数组头部里添加的一项是sn[0] + fx，这个fx就是蛇体不同移动方向的标识。

蛇体移动控制

前面说过画布的400个小块分别对应0-399，那蛇体向右移动一步就是+1，向左就是-1，向上就是-20，向下就是+20。
fx的控制绑定在键盘事件，左上右下方向键的keyCode分别为[37,38,39,40]，结合这两点就可以理解这段代码了

document.onkeydown = function(e) {  
    fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] ) ? fx : n  
 };

蛇吃食物控制

sn.unshift(n = sn[0] + fx);
if (n == dz) {  
    while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);  
    draw(dz, "Yellow");  
}

游戏开始时，n = 42 + 1，dz = 43。
此时执行上面的代码，while里的表达式是生成一个0-400的随机数，且不在蛇体数组内，即在蛇体外随机位置生成一个食物块。

游戏结束条件

游戏结束条件有两个：
1.蛇头碰到蛇体；
2.蛇头碰到四壁；
满足一个即可。
sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19

总结

一开始看完，真觉得原文作者程序设计的很好，分享出来给更多的人学习。