格式化一下代码就看懂了:

首先HTML部分:

然后游戏部分:

var sn = [42, 41], // 存放贪食蛇的坐标, 第一个是头, 最后一个是尾, 初始的蛇长度是2, 坐标[2, 2], [1, 2] dz = 43, // 食物的坐标, 初始[3, 2] fx = 1, // 蛇前进的方向 n, // 蛇头位置 ctx = document.getElementById("can").getContext("2d"); // 画布 // 在画布上画背景或者贪食蛇方格 // 第一个参数是坐标信息, 第二个是颜色信息(用来区分背景和蛇) function draw(t, c) { ctx.fillStyle = c; // fillReact的签名是: fillRect(x: number, y: number, w: number, h: number): void; // 所以画的方格的宽高都是18, 加上默认的lineWidth=1, 所以每个方格的长宽都是20 // 参数t用一个标量标志二维坐标信息, t % 20即t/20的余数部分表示横坐标是第几个方格 // (t/20) 即t/20的商部分表示纵坐标是第几个方格 // 这意味着游戏画布宽度固定为20, 坐标为[0, 19] // 需要注意的是纵坐标的方向向下 // 所以初始的贪食蛇`[42, 41]`的头和尾的实际坐标分别是[2, 2], [1, 2], 也就是在画布的右上方 // 所以最初的运动方向是向右 // 所以前进方向`fx`的含义是: -1向左, -20右上, 1向右, 20向下 ctx.fillRect(t % 20 * 20, ~~(t / 20) * 20, 18, 18); } // 监听用户按键, 按键时改变下一次paint时蛇的方向 document.onkeydown = function (e) { // 方向键 左, 上, 右, 下的keyCode分别为37, 38, 39, 40 // 如果用户按下这几个键, 会改变蛇头下一次的位置到对应的方向上 // 如果不是这几个键, 则不会变动 n = [-1, -20, 1, 20][(e || event).keyCode - 37] || fx // 如果按键的方向和蛇当前前进的方向相反, 则不改动 fx = sn[1] - sn[0] == n ? fx : n }; // 根据蛇的位置及运动方向更新画布 !function update() { // 更新蛇头的位置 n = sn[0] + fx; // 蛇每前进一步, 只需要把蛇尾放到蛇头处即可 // 这里增加了蛇头 sn.unshift(n); // 边界判断 if ( sn.indexOf(n, 1) > 0 // 蛇头碰到了自身 || n < 0 // 或者纵坐标小于0 || n > 399 // 或者纵坐标大于等于20 || fx == 1 && n % 20 == 0 // 或者蛇向右运动并且蛇头横坐标是0(注意是更新过的坐标) || fx == -1 && n % 20 == 19 // 或者蛇头向左运动并且蛇头横坐标是19, 也就是在最右边 ) { // 碰到边界时结束游戏, 边界是 // x in [0, 20] & y in [0, 20] // 并且不可碰到蛇身 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"); // 每隔500ms更新 setTimeout(update, 500); }();