分享一个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]，结合这两点就可以理解这段代码了