分享一个js小游戏——贪吃蛇，你能写出来吗？

上周看到一个大腿用20行代码写了贪吃蛇游戏，觉得好屌，分享一下他的代码。曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊。
这里还是要推荐下我自己建的前端学习群：527535103，如果你正在学习前端，小编欢迎你加入，大家都是前端党，不定期分享干货（只有web前端相关的），包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
废话不多说，看代码。
一眼是不是没杂看明白，没关系，用浏览器打开，先玩一把，是不是感觉挺溜的。
游戏场景
下面一段一段来看看代码都干哈的。
首先是生成一个400x400的画布：图1
画布
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
这是整个游戏场景，蛇体，蛇移动和食物都在这里。设计单位小块尺寸20x20，这样整个画布一共就有20X20=400个正方小块，如图2
400格
只需加入这段js
首先声明canvas的上下文，然后声明绘制单元格函数，fillstyle是颜色属性，fillRect绘制一个矩形，四个参数，分别是：1.离原点的x方向距离；2.离原点的y方向的距离；3.长；4.宽。
用一个数组表示蛇体，数组的一项代表蛇体的一块，通过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的随机数，且不在蛇体数组内，即在蛇体外随机位置生成一个食物块。
游戏结束条件
2.蛇头碰到四壁；
满足一个即可。
sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19
最后推荐下我自己的web前端学习交流群：527535103，
不管你是小白还是大神，我都欢迎你们进**流，
不定期分享干货，包括我自己整理的最新的前端资料和教程送给大家，
欢迎初学和进阶中的小伙伴，一起学习一起交流，共同进步。