分享一个js小游戏--贪吃蛇
上周看到一个大腿用20行代码写了贪吃蛇游戏，觉得好屌，分享一下他的代码。
原文地址戳这👉: 原文链接。
废话不多说，看代码
游戏场景设计
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] ) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else {
draw(sn.pop(), "Black");
}
setTimeout(arguments.callee, 1000);
}();
</script>
</body>
</html>
一眼是不是没杂看明白，没关系，用浏览器打开，先玩一把，是不是感觉挺溜的。
游戏场景.png
下面一段一段来看看代码都干哈的。
首先是生成一个400x400的画布：图1
画布.png
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
这是整个游戏场景，蛇体，蛇移动和食物都在这里。设计单位小块尺寸20x20，这样整个画布一共就有20X20=400个正方小块，如图2
400格.png
只需加入这段js
<script>
var ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
!function(){
for (var i = 0; i < 400; i++) {
draw(i, 'lime')
}
}();
</script>
首先声明canvas的上下文，然后声明绘制单元格函数，fillstyle是颜色属性，fillRect绘制一个矩形，四个参数，分别是：1.离原点的x方向距离；2.离原点的y方向的距离；3.长；4.宽。
长和宽只有18，不是20，是为了单元格之间流出1个长度的空隙，400个小块从左到右，从上到下依次对应0-399。
这里的函数draw是整个游戏绘制蛇体，食物的基础函数。执行一次绘制一个小方块，敲黑板了，功能设计关键的地方之一：
- 用一个数组表示蛇体，数组的一项代表蛇体的一块，通过draw绘制；
- 蛇体移动，通过数组头部增加一项，尾部去除一项实现；
- 蛇吃到食物，蛇体长度增加一块，通过数组增加一项实现；
从新来看下代码
<script>
var sn = [ 42, 41 ], ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
...
!function() {
sn.unshift(n = sn[0] + fx);
...
draw(n, "Lime");
if (n == dz) {
...
} else {
draw(sn.pop(), "Black");
}
setTimeout(arguments.callee, 1000);
}();
</script>
每秒钟往数组头部添加一项，尾部去除一项（吃到食物时除外）
往数组头部里添加的一项是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
总结
一开始看完，真觉得原文作者程序设计的很好，分享出来给更多的人学习。
