之前在慕課網看了幾集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] ]; // 初始化一條
注：相關教程知識閱讀請移步到HTML教程頻道。
新聞熱點
疑難解答
