聲明：代碼不是原創，借鑑自前輩，自是嘗試理解，若有侵權，抱歉！
<!doctype html>
<html>
<body>
<canvas
id="can"
width="400"
height="400"style="background:
Black"></canvas>
<script>
//sn 數組 ？？？？ctx:獲取id爲can的2d面板（解決：fx是用來控制蛇移動的量，由於t% 20 * 20 + 1，每次會向右移動20px）
//n 表示每次位於數組最前面的數
var sn
= [ 42,
41 ], dz =
43, fx =
1, n,
ctx = document.getElementById("can").getContext("2d");
functiondraw(t, c) {
ctx.fillStyle
= c; //設置顏色
//繪製圖形，顯示時的左上角（x,y）座標，圖形的寬高（設置成18可能是因爲存在邊框）
ctx.fillRect(t %
20 * 20 +
1,~~(t / 20) * 20
+ 1, 18,
18);
}
//用戶按下鍵盤時產生的事件，當sn[1]- sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx)（不懂）
//爲true時，fx=fx,反之fx=n;（解決：左上右下方向鍵對應n數組內取值，其他鍵將超出下標無法取值）
document.onkeydown
= function(e){
fx =
sn[1] -sn[0] == (n
= [-1, -20,
1, 20 ][(e ||
event).keyCode
- 37] || fx) ?fx
: n
};
!function() {
sn.unshift(n
= sn[0] +fx);
//向sn數組頭部插入數值n,n=42+1;
//當剛插入的值不在頭部時或者剛插入的值不在畫板中時，或者一直向右或向下不變移動18次後，或者向上向左一直移動2次後，結束遊戲
if (sn.indexOf(n,
1) > 0 ||
n<0||n>399
|| fx ==
1 && n %
20 == 0 || fx
== -1 &&n
% 20 ==
19)
returnalert("GAME OVER");
//初始化蛇的位置？？？
draw(n,
"Lime");
if (n
== dz) {
//產生0-40的隨機整數，在sn數組中查找dz的位置,以確保產生的食物不於蛇重疊。
while(sn.indexOf(dz
= ~~(Math.random() *
400))>= 0);
//在面板中繪製黃色的食物。
draw(dz,
"Yellow");
} else
//將數組的最後一個元素刪除，即在面板中繪製黑色的圖形進行遮蓋
draw(sn.pop(),
"Black");
//在130毫秒間隔後重復執行？？？（解決：是用來控制速度的量，並使重複執行當前函數，並不是屬於else範圍中）
setTimeout(arguments.callee,
130);
}();
</script>
</body>
</html>
如有錯誤，歡迎一起討論。
我
