之前在慕課網看了幾集Canvas的視頻，一直想著寫點東西練練手。感覺貪吃蛇算是比較簡單的了，當年大學的時候還寫過C語言字符版的，沒想到還是遇到了很多問題。
最終效果如下（圖太大的話時間太長錄製gif的軟體有時限…）
首先定義遊戲區域。貪吃蛇的螢幕上只有蛇身和蘋果兩種元素，而這兩個都可以用正方形格子構成。正方形之間添加縫隙。為什麼要添加縫隙？你可以想像當你成功填滿所有格子的時候，如果沒有縫隙，就是一個實心的大正方形……你根本不知道蛇身什麼樣子。
畫了一個圖。
格子是左上角的座標是(0, 0)，向右是橫座標增加，向下是縱座標增加。這個方向和Canvas相同。
每次畫一個格子的時候，要從左上角開始，我們直知道Canvas的左上角座標是(0, 0)，假設格子的邊長是GRID_WIDTH 縫隙的寬度是GAP_WIDTH ，可以得到第(i, j)個格子的左上角座標(i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) 。
假設現在蛇身是由三個藍色的格子組成的，我們不能只繪製三個格子，兩個紫色的空隙也一定要繪製，否則，還是之前說的，你根本不知道蛇身什麼樣子。如下圖，不畫縫隙雖然也能玩，但是體驗一定不一樣。
繪製相鄰格子之間間隙不繪製間隙
現在我們可以嘗試著畫一條蛇了。蛇身其實就是一個格子的集合，每個格子用包含兩個位置資訊的陣列表示，整條蛇可以用二維陣列表示。
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000; } </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // 格子的邊長const GAP_WIDTH = 2; // 空隙的邊長const ROW = 10; // 總共有多少行格子&每行有多少個格子let canvas = document.getElementById('canvas'); canvas.height = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); let ctx = canvas.getContext('2d'); let snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4 ], [5, 4], [5, 5] ]; // 初始化一條