ο笥螒蜷_發(fā)實戰(zhàn))
1. 整體設(shè)計思路為什么用類來組織貪吃蛇我見過不少初學(xué)者寫貪吃蛇習(xí)慣把所有邏輯塞進一個 main 函數(shù)或者全用全局變量堆。全局變量一多代碼就成了一鍋粥。這次我們用 TypeScript 的類來組織但很多人會問一句貪吃蛇這么小有必要搞類嗎我覺得有必要。不是小題大做而是貪吃蛇這個項目其實覆蓋了面向?qū)ο笤O(shè)計里最典型的幾個問題誰負責(zé)數(shù)據(jù)、誰負責(zé)行為、誰負責(zé)協(xié)調(diào)、誰負責(zé)渲染。如果一開始就把職責(zé)劃清楚后面加計分、加速、障礙物這些功能都會順手很多。整款游戲的核心邏輯可以拆成三大塊。第一塊是蛇類負責(zé)蛇的狀態(tài)、移動規(guī)則、碰撞自檢、以及自身的繪制。第二塊是食物類負責(zé)食物坐標的隨機生成與繪制。第三塊是游戲控制器類負責(zé)把上面兩塊組合起來再承擔(dān)游戲循環(huán)、分數(shù)結(jié)算、鍵盤監(jiān)聽、開始結(jié)束狀態(tài)的切換。project-root/ ├─ src/ │ ├─ type.ts # 共享類型定義 │ ├─ food.ts # 食物類 │ ├─ snake.ts # 蛇類 │ ├─ game.ts # 游戲控制器類 │ └─ index.ts # 入口文件 ├─ index.html └─ tsconfig.json這個拆分有一個好處每個文件只做一件事。type.ts 里沒有邏輯只放類型snake.ts 里不碰鍵盤事件game.ts 里不關(guān)心蛇身格子到底是什么顏色。將來你如果想換成貪吃蛇雙人對戰(zhàn)版基本只需要創(chuàng)建兩個 Snake 實例再改一下控制器——這就是低耦合帶來的實際收益。1.1 類型先行先定義數(shù)據(jù)形狀再寫邏輯寫 TypeScript 項目我習(xí)慣的第一步永遠是定義類型。別看類型定義只是幾行 interface它相當(dāng)于整個項目的地基。地基歪了上面蓋什么都是歪的。貪吃蛇這個項目我認為最少需要這三樣類型/** 方向枚舉 */ export enum Direction { Up Up, Down Down, Left Left, Right Right } /** 坐標結(jié)構(gòu) */ export interface Point { x: number y: number } /** 蛇身和食物的通用格子結(jié)構(gòu) */ export interface Cell { x: number y: number }方向用枚舉還是用字符串字面量聯(lián)合類型都可以但我個人更推薦枚舉。原因很實在枚舉給每個方向一個語義名字代碼里不會出現(xiàn)裸字符串。你想想如果有人寫snake.faceTo(left)一旦字母拼錯整個方向判斷就廢了。用Direction.Left就完全沒這個問題編輯器還能給你直接提示省去翻代碼確認的麻煩。坐標為什么要分開 Point 和 Cell嚴格來說這兩個都是{ x: number; y: number }但語義完全不同。Point 強調(diào)空間上的一個點Cell 強調(diào)的是畫布上的一個格子。如果你在代碼里直接混用看moveTo(point)和moveTo(cell)的時候你很難一眼判斷參數(shù)到底是什么意思。TypeScript 是結(jié)構(gòu)化類型系統(tǒng)兩個形狀相同的接口是可以互相賦值的但它們的存在本身就在提醒你——這里的坐標代表什么含義。1.2 配置參數(shù)集中管理別寫死魔法數(shù)字寫游戲最忌諱的就是各種數(shù)字散落在代碼的各個角落比如畫布寬度 400、格子大小 20、蛇初始長度 3這些魔法數(shù)字如果你在每個方法里重復(fù)寫后期想要調(diào)整的時候得滿文件去搜。像我之前做某個項目時就吃過這種虧改一個參數(shù)要按三遍 CtrlF。我建議的做法是直接在 type.ts 里定一個配置對象/** 游戲參數(shù)配置 */ export const CONFIG { canvasWidth: 600, canvasHeight: 600, gridSize: 20, snakeInitLength: 4, snakeSpeed: 150, // 單位毫秒數(shù)值越大越慢 colorSnakeHead: #2d5016, colorSnakeBody: #4e8d3f, colorFood: #d1483b, colorBg: #f5f2e6 } as constas const會讓這些值的類型變成字面量類型比如canvasWidth的類型就是600而不是number。這有什么好處好處是如果你后續(xù)不小心寫了一個CONFIG.canvasWidth 800TypeScript 會直接在編譯階段報錯提醒你正在篡改一個只讀配置。對游戲這類運行時狀態(tài)變化頻繁的程序來說這個保護很值。還有一個細節(jié)蛇的移動速度我用snakeSpeed: 150表示每 150 毫秒走一格。這個值直接決定了游戲的難度。100 毫秒手感偏快200 毫秒手感偏慢150 毫秒是我調(diào)試下來比較舒服的檔位。如果你的玩家群體是小朋友建議放寬到 200。2. 食物類把地基打扎實很多人覺得食物類太簡單了就是把一個點隨機放在畫布上然后畫個圓。但食類有幾個細節(jié)值得琢磨比如隨機生成的坐標必須對齊網(wǎng)格否則蛇頭永遠吃不到食物食物不能生成在蛇身上否則一開局就穿模食物被吃掉后要能重新生成。2.1 食物類的職責(zé)范圍食物類的職責(zé)我限定為兩件生成一個當(dāng)前場景內(nèi)有效的坐標以及把自己畫在畫布上。它不關(guān)心蛇在哪里也不關(guān)心分數(shù)怎么加。那我怎么保證食物不生成在蛇身上答案是通過生成方法接收一個不可用區(qū)域參數(shù)由調(diào)用方來告訴它哪些坐標不能選。這個設(shè)計叫做依賴倒置。食物類并不直接引用 Snake 類型而是接收一個坐標數(shù)組。這樣食物類就不依賴蛇類將來如果棋盤上有障礙物也只需要把障礙物的坐標一并傳進來食物類不需要改一個字符。import { CONFIG } from ./type /** 食物類 */ export class Food { position: { x: number; y: number } constructor() { this.position { x: 0, y: 0 } } /** * 生成一個不包含在 forbiddenCells 里的隨機坐標 * param forbiddenCells 不可選的坐標蛇身等 */ generate(forbiddenCells: { x: number; y: number }[] []): void { // 計算行列數(shù)避免坐標越界 const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize while (true) { // 隨機取 0 ~ rowNum-1 之間的整數(shù) const newX Math.floor(Math.random() * colNum) const newY Math.floor(Math.random() * rowNum) // 如果這個坐標沒人占用則確定位置 const conflict forbiddenCells.some( cell cell.x newX cell.y newY ) if (!conflict) { this.position { x: newX, y: newY } return } } } /** 繪制食物 */ draw(ctx: CanvasRenderingContext2D): void { const { x, y } this.position // 給食物留一點內(nèi)邊距不然看起來像粘在一起 const radius CONFIG.gridSize / 2 - 3 ctx.save() ctx.shadowColor CONFIG.colorFood ctx.shadowBlur 6 ctx.fillStyle CONFIG.colorFood ctx.beginPath() // 注意這里換算的是像素中心點 ctx.arc( x * CONFIG.gridSize CONFIG.gridSize / 2, y * CONFIG.gridSize CONFIG.gridSize / 2, radius, 0, Math.PI * 2 ) ctx.fill() ctx.restore() } }2.2 隨機生成算法為什么用 while(true)你看那個while (true)可能會有點慌這玩意兒不會死循環(huán)嗎理論上如果棋盤被蛇占滿了確實會死循環(huán)。但貪吃蛇的棋盤大小時 30 × 30一共 900 個格子蛇身要達到 900 格這個可能性在實際游戲中幾乎為零。就算真的發(fā)生了那也是勝利的場面——棋盤都被蛇占滿了游戲早該結(jié)束了。不過從工程嚴謹?shù)慕嵌葋碚f我會給這個循環(huán)加一個最大嘗試次數(shù)。這個習(xí)慣是我自己后期養(yǎng)成的因為哪怕概率再低一個無法終止的循環(huán)在代碼評審里都是個隱患。比如可以改成嘗試 1000 次還找不到空位就拋異常。但在教學(xué)項目里while(true)配合占位判斷已經(jīng)完全夠用注釋里寫清楚前提就行。2.3 食物的繪制技巧食物的繪制我用的是shadowBlur加光暈效果這是讓食物看起來有質(zhì)感的低成本方式。不透明度和陰影的配合讓它像一顆水果糖而不是一個干巴巴的色塊。這里有個繪制坐標系容易混的地方。游戲邏輯里的坐標是格子坐標一格是 20 像素。比如{ x: 3, y: 5 }表示從左上角開始橫著數(shù)第 4 格、豎著數(shù)第 6 格。但 canvas 繪圖用的是像素坐標所以繪制的時候必須做一個換算像素X 格子X × 格子大小 格子大小 / 2 像素Y 格子Y × 格子大小 格子大小 / 2加一半格子大小的原因是為了讓圓心落在格子的正中心。如果不加圖案會偏在格子的左上角視覺上看起來很別扭。這個換算方法在蛇類繪制里也會用到建議你把它當(dāng)成一個固定的心法記下來。3. 蛇類實現(xiàn)游戲的核心到重點了。蛇類是貪吃蛇整個代碼里最復(fù)雜的類核心就是那幾件事數(shù)據(jù)怎么存、移動怎么做、碰撞怎么檢測、自己會不會咬到自己、吃到食物怎么變長、以及怎么把自己畫出來。3.1 蛇的數(shù)據(jù)結(jié)構(gòu)怎么選蛇在棋盤上的形態(tài)是一連串連續(xù)格子而且隨時會在頭部新增一格尾部可能減少一格。這種頭部增、尾部減的操作典型的先進先出邏輯天然適合用隊列。在 JavaScript 里數(shù)組的unshift在頭部插入、pop在尾部刪除剛好模擬了最自然的思路。但這里有一個性能上的點在教學(xué)里我會特意提一下unshift的時間復(fù)雜度是 O(n)因為數(shù)組頭部插入會引發(fā)后續(xù)所有元素的內(nèi)存移動。貪吃蛇的蛇身長度通常在幾十格這個量級這一點性能損失完全可忽略。如果你貪吃蛇以后要做到 500 格以上可以考慮用雙向鏈表存儲蛇身。在教學(xué)項目里用數(shù)組就行容易理解也容易調(diào)試。蛇類還用一個direction字段記錄當(dāng)前朝向一個pendingDirection記錄下一次移動的方向。為什么要兩個方向因為玩家在一幀之內(nèi)可能連續(xù)按兩個方向鍵如果不做緩沖第二個按鍵會覆蓋第一個按鍵導(dǎo)致蛇沒有按玩家的意圖轉(zhuǎn)向。而如果按下即生效又會出現(xiàn)一個經(jīng)典的 bug蛇正在向左走玩家按了向上再快速按了向右蛇會直接掉頭——蛇不允許直接 180 度轉(zhuǎn)向這個約束后面細說。3.2 蛇類的 TypeScript 實現(xiàn)import { CONFIG, Direction } from ./type interface Cell { x: number y: number } /** 蛇類管理蛇身狀態(tài)、移動規(guī)則與碰撞檢測 */ export class Snake { /** 蛇身第 0 項為蛇頭 */ body: Cell[] /** 當(dāng)前移動方向 */ direction: Direction /** 緩沖方向本輪移動尚未消費的最新轉(zhuǎn)向指令 */ private pendingDirection: Direction /** 本輪是否已經(jīng)移動過防止一幀內(nèi)多次移動 */ private movedThisTurn: boolean constructor() { // 初始蛇身從中間向左延伸 const gridX CONFIG.canvasWidth / CONFIG.gridSize const gridY CONFIG.canvasHeight / CONFIG.gridSize const startX Math.floor(gridX / 2) const startY Math.floor(gridY / 2) this.body [] for (let i 0; i CONFIG.snakeInitLength; i) { this.body.push({ x: startX - i, y: startY }) } this.direction Direction.Right this.pendingDirection Direction.Right this.movedThisTurn false } /** 獲取蛇頭坐標 */ get head(): Cell { return this.body[0] } /** 設(shè)置下一次移動的方向帶轉(zhuǎn)向合法性校驗 */ setDirection(newDir: Direction): void { // 左、右是橫向上、下是縱向 const isOpposite (this.direction Direction.Up newDir Direction.Down) || (this.direction Direction.Down newDir Direction.Up) || (this.direction Direction.Left newDir Direction.Right) || (this.direction Direction.Right newDir Direction.Left) // 如果是相反方向忽略 if (isOpposite) return // 如果相同方向忽略 if (this.direction newDir) return // 如果這一輪已經(jīng)移動過只更新緩沖方向下一輪再消費 if (this.movedThisTurn) { this.pendingDirection newDir } else { // 這一輪還沒移動直接生效 this.direction newDir this.pendingDirection newDir } } /** 蛇移動一步 */ move(grow: boolean): void { const head this.body[0] let newHead: Cell { x: head.x, y: head.y } switch (this.direction) { case Direction.Up: newHead.y - 1 break case Direction.Down: newHead.y 1 break case Direction.Left: newHead.x - 1 break case Direction.Right: newHead.x 1 break } // 頭部插入新格子 this.body.unshift(newHead) // 只有吃到食物才保留尾部否則移除尾部 if (!grow) { this.body.pop() } // 修正蛇頭坐標到棋盤范圍內(nèi)撞墻的場景留給控制器處理 const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize newHead.x (newHead.x colNum) % colNum newHead.y (newHead.y rowNum) % rowNum this.body[0] newHead // 移動完成消費緩沖方向 this.direction this.pendingDirection this.movedThisTurn true } /** 是否與自身發(fā)生碰撞 */ isHitSelf(): boolean { const head this.body[0] // 從索引 1 開始檢查因為索引 0 就是頭本身 return this.body.slice(1).some(segment segment.x head.x segment.y head.y) } /** 蛇頭是否撞到邊界 */ isHitWall(): boolean { const head this.body[0] const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize return head.x 0 || head.x colNum || head.y 0 || head.y rowNum } /** 判斷某個坐標是否與蛇身重合 */ isOnSnake(x: number, y: number): boolean { return this.body.some(segment segment.x x segment.y y) } /** 重置蛇狀態(tài)重新開局用 */ reset(): void { const gridX CONFIG.canvasWidth / CONFIG.gridSize const gridY CONFIG.canvasHeight / CONFIG.gridSize const startX Math.floor(gridX / 2) const startY Math.floor(gridY / 2) this.body [] for (let i 0; i CONFIG.snakeInitLength; i) { this.body.push({ x: startX - i, y: startY }) } this.direction Direction.Right this.pendingDirection Direction.Right this.movedThisTurn false } /** 繪制蛇 */ draw(ctx: CanvasRenderingContext2D): void { const size CONFIG.gridSize this.body.forEach((segment, index) { const px segment.x * size const py segment.y * size // 是否蛇頭 const isHead index 0 // 內(nèi)邊距讓蛇身看起來是一節(jié)一節(jié)的 const padding isHead ? 1 : 3 ctx.fillStyle isHead ? CONFIG.colorSnakeHead : CONFIG.colorSnakeBody // 用圓角矩形或正方形繪制蛇身 ctx.fillRect(px padding, py padding, size - padding * 2, size - padding * 2) // 給蛇頭畫出兩個眼睛增強辨識度 if (isHead) { ctx.fillStyle #fff const eyeSize 3 if (this.direction Direction.Right) { ctx.fillRect(px size - 8, py 4, eyeSize, eyeSize) ctx.fillRect(px size - 8, py size - 8, eyeSize, eyeSize) } else if (this.direction Direction.Left) { ctx.fillRect(px 5, py 4, eyeSize, eyeSize) ctx.fillRect(px 5, py size - 8, eyeSize, eyeSize) } else if (this.direction Direction.Up) { ctx.fillRect(px 4, py 5, eyeSize, eyeSize) ctx.fillRect(px size - 8, py 5, eyeSize, eyeSize) } else { // Down ctx.fillRect(px 4, py size - 8, eyeSize, eyeSize) ctx.fillRect(px size - 8, py size - 8, eyeSize, eyeSize) } } }) } }3.3 移動邏輯中的關(guān)鍵設(shè)計我在這里用了movedThisTurn這個標志位它在游戲循環(huán)里承擔(dān)著重要的作用。requestAnimationFrame 是每幀都會回調(diào)的但貪吃蛇不需要每幀都移動——它應(yīng)該按照snakeSpeed的節(jié)奏來走。于是我們只會每隔一段時間調(diào)用一次move()。但在一次移動完成之后如果用戶在這一幀里連續(xù)按了兩次方向鍵第一次的轉(zhuǎn)向已經(jīng)生效第二次的轉(zhuǎn)向只能進入 pendingDirection 緩沖區(qū)等下一輪移動時再消費。這個機制看起來簡單實際解決了兩個大問題。第一個問題是反向瞬移蛇頭正在向右走玩家在下一次移動前按了上又按了左如果沒有緩沖左方向會覆蓋上方向而左恰好是右的反方向蛇會瞬間穿過自己的身體。第二個問題是輸入丟失如果只用一個 direction而且每次鍵盤事件都直接覆蓋 direction那么玩家在短時間內(nèi)按的上和左只有最后一次生效看起來像是按鍵失靈。有了 pendingDirection按鍵就變成了隊列的感覺雖然只緩沖一個但手感已經(jīng)完全不同。還有就是move(grow: boolean)這個參數(shù)設(shè)計。grow 為 false 時移動完要把尾巴 pop 掉這樣蛇身長度保持不變。grow 為 true 時不 pop蛇身長度加一。這比吃到食物后再調(diào)一個專門的方法來加一節(jié)更符合直覺因為增長本來就應(yīng)該發(fā)生在移動這個瞬間。3.4 撞墻策略不穿墻還是穿墻我在move里做了一個邊界取模的兜底newHead.x (newHead.x colNum) % colNum newHead.y (newHead.y rowNum) % rowNum這個東西的意思是如果你的坐標到了 -1就把它修正成 colNum - 1如果到了 colNum就回到 0。也就是說蛇頭會從左邊穿出去、右邊鉆出來類似環(huán)屏效果。這在早期貪吃蛇里是一種常見玩法。但你可能想問既然蛇類里已經(jīng)做了邊界修正為什么還有一個isHitWall方法兩種玩法都存在經(jīng)典模式下蛇撞到邊界游戲結(jié)束穿墻模式則不然。把這個選擇交給控制器更合理——控制器知道當(dāng)前游戲該用哪種模式。在實際項目中我通常建議默認使用撞墻結(jié)束因為穿墻模式會讓玩家的策略變得完全不同難度把控也更含糊。在這個項目里我選擇在控制器里檢查撞墻結(jié)束游戲move里的取模只是防御性代碼確保極端情況下蛇頭始終在畫布內(nèi)。4. 游戲控制器類把一切串起來控制器類的名字我起的是 Game整個游戲的主循環(huán)、狀態(tài)管理、事件監(jiān)聽、Canvas 上下文管理都集中在它身上。它操作蛇和食物這兩個業(yè)務(wù)類但自身不關(guān)心蛇的數(shù)據(jù)結(jié)構(gòu)也不關(guān)心食物怎么畫它的工作是決策。4.1 游戲狀態(tài)機貪吃蛇看起來是實時游戲但邏輯上是一個狀態(tài)機至少包含這幾種狀態(tài)等待開始、運行中、暫停、結(jié)束。狀態(tài)不同事件處理和渲染行為完全不同。type GameStatus idle | running | paused | over export class Game { private canvas: HTMLCanvasElement private ctx: CanvasRenderingContext2D private snake: Snake private food: Food private status: GameStatus idle private score 0 private lastMoveTime 0 private animationId 0 constructor(canvas: HTMLCanvasElement) { this.canvas canvas // 這里在正式項目中應(yīng)該做空值處理但教學(xué)環(huán)節(jié)先保證存在 this.ctx canvas.getContext(2d)! this.snake new Snake() this.food new Food() this.food.generate() this.bindEvents() } }狀態(tài)機的好處在于任何外部輸入進來先看狀態(tài)再決定要不要響應(yīng)。比如游戲結(jié)束狀態(tài)下按方向鍵沒有任何意義暫停狀態(tài)下按空格應(yīng)該恢復(fù)運行中按空格應(yīng)該暫停。這個東西用 if 堆也能寫但狀態(tài)一多就會亂。我在項目里用狀態(tài)字符串加 switch 來處理。4.2 事件綁定與防止方向鍵滾動頁面鍵盤事件綁在 document 上而不是 canvas 上。為什么因為玩家按鍵盤時焦點不一定在 canvas 上如果綁在 canvas 上很可能出現(xiàn)按了沒反應(yīng)。而綁 document 能保證無論焦點在哪都能響應(yīng)。方向鍵的默認行為會讓頁面滾動必須preventDefault()。這是新手最容易忽略的問題不處理的話會出現(xiàn)按一下方向鍵蛇沒動頁面先滾了。private bindEvents(): void { document.addEventListener(keydown, (e) { const keyMap: Recordstring, Direction { ArrowUp: Direction.Up, ArrowDown: Direction.Down, ArrowLeft: Direction.Left, ArrowRight: Direction.Right, w: Direction.Up, s: Direction.Down, a: Direction.Left, d: Direction.Right } const dir keyMap[e.key] if (dir) { // 防止方向鍵滾動頁面 e.preventDefault() this.handleDirection(dir) } if (e.key || e.key Space) { e.preventDefault() this.handleSpace() } if (e.key Enter) { e.preventDefault() this.handleEnter() } }) }同時支持字母鍵和方向鍵這個體驗細節(jié)很加分。很多玩家習(xí)慣左手控制 WASD右手可能還握著鼠標。如果你只做了方向鍵會損失一部分玩家的舒適度。4.3 按鍵響應(yīng)與狀態(tài)流轉(zhuǎn)private handleDirection(dir: Direction): void { if (this.status ! running) return this.snake.setDirection(dir) } private handleSpace(): void { if (this.status running) { this.status paused } else if (this.status paused) { this.status running // 恢復(fù)時重置計時避免瞬間移動一次 this.lastMoveTime performance.now() } } private handleEnter(): void { if (this.status idle || this.status over) { this.start() } }這里有一個細節(jié)暫?；謴?fù)后lastMoveTime要重置為當(dāng)前時間。如果不重置暫停期間過去的時間會計入移動間隔恢復(fù)后瞬間就走一步玩家會感覺蛇跳了一下。類似的坑還有瀏覽器標簽頁切換回來后的大間隔問題也靠這個辦法解決。4.4 游戲循環(huán)用 requestAnimationFrame 加時間差控制游戲循環(huán)是控制器的靈魂。我用 requestAnimationFrame 驅(qū)動渲染但移動的節(jié)拍單獨用時間差控制。private loop (timestamp: number): void { // 記錄動畫幀ID便于取消 this.animationId requestAnimationFrame(this.loop) if (this.status ! running) { // 不管暫停還是結(jié)束畫面不動但為了方便顯示暫停文字還是重繪一次 this.draw() return } // 距離上次移動是否達到設(shè)定間隔 if (timestamp - this.lastMoveTime CONFIG.snakeSpeed) { this.update() this.lastMoveTime timestamp } this.draw() }為什么不直接setInterval來控制蛇移動誠實地講setInterval在這個場景其實也能用但有個一致性問題setInterval的回調(diào)可能會因為主線程忙而出現(xiàn)積壓導(dǎo)致多次快速連續(xù)執(zhí)行而且它和渲染不同步可能出現(xiàn)蛇移動了畫面卻沒更新。requestAnimationFrame 天然和瀏覽器渲染幀率同步在 60Hz 的屏幕上是 16.67ms 觸發(fā)一次移動節(jié)奏通過時間差來卡穩(wěn)定且不掉幀。loop定義為箭頭函數(shù)的原因是requestAnimationFrame(this.loop)里的 this 上下文如果換成一個普通函數(shù)在回調(diào)執(zhí)行時 this 會指向 window。箭頭函數(shù)則自動綁定當(dāng)前實例。4.5 更新邏輯碰撞檢測的先后順序update()是整個單幀決策的集中地。我處理碰撞的順序是先吃食物再撞自己再撞墻。private update(): void { const head this.snake.body[0] const foodPos this.food.position // 吃了食物嗎 const isEating head.x foodPos.x head.y foodPos.y // 讓蛇移動吃到食物就增長 this.snake.move(isEating) if (isEating) { this.score 10 this.food.generate(this.snake.body) } if (this.snake.isHitSelf()) { this.over() return } if (this.snake.isHitWall()) { this.over() return } }先判斷吃再調(diào)用 move。這里有個潛在的問題如果先調(diào)用 move 再判斷吃此時蛇頭已經(jīng)移動了就必須用移動前的坐標做判斷邏輯上更繞。先判斷再移動代碼讀起來順暢得多。isHitWall之所以放在isHitSelf之后是因為如果蛇頭和墻壁重合時同時也和自己的身體重合報哪個錯都合理。但實際游戲里蛇頭撞墻后不再移動此時蛇身不可能超過邊界所以先后順序影響不大保持這個順序只是因為讀代碼時先近后遠更自然。4.6 開始、結(jié)束、重繪private start(): void { this.score 0 this.snake.reset() this.food.generate(this.snake.body) this.status running this.lastMoveTime performance.now() } private over(): void { this.status over } private draw(): void { const { ctx } this ctx.clearRect(0, 0, CONFIG.canvasWidth, CONFIG.canvasHeight) ctx.fillStyle CONFIG.colorBg ctx.fillRect(0, 0, CONFIG.canvasWidth, CONFIG.canvasHeight) this.food.draw(ctx) this.snake.draw(ctx) // 游戲狀態(tài)文字 if (this.status idle) { this.drawCenterText(按 Enter 開始游戲) } else if (this.status paused) { this.drawCenterText(暫停中按空格繼續(xù)) } else if (this.status over) { this.drawCenterText(游戲結(jié)束得分 ${this.score}按 Enter 重來) } } private drawCenterText(text: string): void { const { ctx } this ctx.save() ctx.fillStyle #333 ctx.font bold 24px sans-serif ctx.textAlign center ctx.textBaseline middle ctx.fillText(text, CONFIG.canvasWidth / 2, CONFIG.canvasHeight / 2) ctx.restore() }draw 里的一個細節(jié)是 clearRect 之后用背景色鋪底。如果不鋪底背景默認是透明的看起來還行但如果你在 draw 里用了部分透明度的顏色比如半透明的蛇身下一幀繪制時會和上一幀殘留疊加形成拖影。先鋪一層不透明底色能徹底避免這個視覺錯誤。還有一個容易忽略的點drawCenterText 里的ctx.save()和ctx.restore()。save 保存當(dāng)前的繪圖狀態(tài)到棧里restore 恢復(fù)。這里之所以必須用是因為我改了textAlign和textBaseline。如果不恢復(fù)下一次繪制幾何圖形時這些文字對齊屬性會一直生效可能導(dǎo)致后續(xù)繪制出現(xiàn)莫名其妙的結(jié)果。但凡你在繪制過程中改了 Canvas 的全局狀態(tài)畫完就恢復(fù)是一個好習(xí)慣。5. 常見問題與排查技巧實錄寫貪吃蛇的過程當(dāng)中有幾類問題出現(xiàn)頻率極高。我把自己調(diào)試過程中踩過的坑整理一下按癥狀、原因、解法的方式列出來方便你對照排查。5.1 癥狀一蛇身顯示方向相反現(xiàn)象是蛇頭在最右但身體往右排看起來蛇在倒著走。排查后發(fā)現(xiàn)是初始化時 push 的順序?qū)е碌摹Ｈ绻愕拇a寫成this.body.push({ x: startX i, y: startY })i 從 0 遞增那么第 0 項是 startX第 1 項是 startX 1第 2 項是 startX 2以此類推。但我們的設(shè)計是 body[0] 永遠是蛇頭而蛇向右走時頭必須在最右邊。所以 body[0] 的 x 必須最大。正確的寫法是this.body.push({ x: startX - i, y: startY })這樣第 0 項 x 最大向右走時頭部插入的新位置永遠比原來大 1視覺和邏輯都是正確的。這個坑本質(zhì)上是數(shù)組第 0 項是蛇頭這個約定沒有貫徹到底。我建議在代碼注釋里寫上第 0 項為蛇頭以后自己看代碼也不會犯迷糊。5.2 癥狀二快速連按方向鍵導(dǎo)致蛇反向瞬移假設(shè)蛇向右移動玩家按了一下上緊接著按了一下左。如果沒有 pendingDirection 緩沖第二次按鍵后 direction 變成左但蛇頭還在向右移動下一次 move 時 head.x - 1 就會讓蛇頭直接往左而蛇身第二節(jié)還在原來的位置蛇頭就直接撞進了第二節(jié)的位置游戲可能瞬間判負。玩家會覺得莫名其妙。解法就是我在 Snake 類里實現(xiàn)的 setDirection 加 pendingDirection 機制。在設(shè)置方向時檢查新方向是否為當(dāng)前方向的反向或同向如果是就直接丟棄。然后再利用 movedThisTurn 做緩沖只允許方向變化一次多余的進入末位等待。這是最穩(wěn)妥的做法。5.3 癥狀三方向鍵按下時頁面跟著滾動如果你沒在 keydown 里調(diào) preventDefault方向鍵默認會讓瀏覽器滾動頁面尤其是你沒有給頁面設(shè)置 overflow hidden 的時候。用戶按下方向鍵游戲畫面沒反應(yīng)滾動條倒是動了。解決方式是 keydown 回調(diào)里對方向鍵統(tǒng)一調(diào)用 e.preventDefault()這在 bindEvents里已經(jīng)處理了。5.4 癥狀四游戲結(jié)束后蛇還在畫布上畫面有殘留游戲結(jié)束后 status 變成 overloop 里走的是 draw 分支draw 會先清空畫布再重繪食物和蛇所以畫面理論上不會殘留舊幀。如果你發(fā)現(xiàn)殘留多半是清屏寫錯了比如ctx.clearRect(0, 0, 100, 100)clearRect 的區(qū)域小于畫布實際尺寸導(dǎo)致邊緣沒清掉。用 CONFIG.canvasWidth 和 CONFIG.canvasHeight 代替魔法數(shù)字可以解決。5.5 癥狀五食物生成到蛇身上食物重新生成時應(yīng)該把蛇身的所有坐標傳給 generate 方法作為禁止區(qū)域。留意這個調(diào)用時機應(yīng)該在蛇移動并且長大完成之后調(diào)用否則傳的蛇身還是舊的缺少剛長出來的那一節(jié)。這個順序我一般在 update 里固定為move - 分數(shù) - 重新生成食物。5.6 癥狀六requestAnimationFrame 沒有啟動或者被瀏覽器節(jié)流瀏覽器為了省電會對后臺標簽頁的 requestAnimationFrame 做節(jié)流長時間掛后臺可能完全停止回調(diào)。這會導(dǎo)致什么你切出去一分鐘再切回來發(fā)現(xiàn)蛇沒有按照時間戳累計跳躍移動而是重新在這個位置繼續(xù)走。這不是 bug而是瀏覽器行為。如果你希望切回來時游戲立即補上這一分鐘的移動可以在 loop 里檢測 timestamp - lastMoveTime 如果大于某個閾值就只更新一次避免蛇一步跨出十萬八千里。我試過這個方案效果不錯帶來的問題是游戲難度會在切回來瞬間拔高所以也可以選擇接受瀏覽器節(jié)流不做額外處理。5.7 關(guān)于獲取 canvas 上下文時的感嘆號代碼里出現(xiàn)了這樣的寫法this.ctx canvas.getContext(2d)!TypeScript 里getContext的返回值類型是CanvasRenderingContext2D | null。當(dāng)你非常確定 canvas 元素存在且能拿到 2d 上下文時可以用非空斷言!來消除 null。但如果 canvas 的 id 寫錯了或者 canvas 元素還沒渲染到 DOM 就拿它這里會拋出運行時錯誤而不是編譯錯誤。比較穩(wěn)妥的寫法是判空后拋出明確錯誤const ctx canvas.getContext(2d) if (!ctx) throw new Error(無法獲取 canvas 上下文)這個寫法更安全錯誤信息也更明確。教學(xué)項目里直接用非空斷言省事但心里要清楚它到底在做什么別在團隊項目里隨手用感嘆號。5.8 關(guān)于分數(shù)和速度的平衡最后聊一個很多人做完游戲后都會問的問題怎么讓游戲越來越難最常用的方法是分數(shù)越高速度越快。我之前試過在 update 里動態(tài)計算const BASE_SCORE 10 const EXTRA_SCORE this.score * 0.5 const LIMIT_SPEED 60 // 最快間隔毫秒 CONFIG.snakeSpeed Math.max(LIMIT_SPEED, BASE_SPEED - EXTRA_SCORE)但這么做有個副作用蛇速變快后玩家的反應(yīng)時間變短如果速度增長過于陡峭游戲很快就變得不可玩。建議每次只減少 5 到 10 毫秒并且設(shè)置一個下限比如 60 毫秒保證游戲的可行性。具體閾值建議你在真機上調(diào)因為不同人的反應(yīng)速度和顯示器刷新率會有差異。我自己的實測經(jīng)驗60 毫秒是最快的極限再快人眼已經(jīng)很難判斷蛇頭位置了。80 毫秒到 100 毫秒是高手還能玩普通玩家勉強跟得上的甜點區(qū)。你也可以用累加得分的方式來分段提速比如每吃 5 個食物提升一檔速度這樣玩家有明顯的節(jié)奏感而不是每吃一個就變快一點那種體驗反而很累。還有一個值得嘗試的擴展方向食物得分可以多樣化。給普通食物 10 分偶爾出現(xiàn)一個特殊食物 50 分限時出現(xiàn)幾秒后消失。這會迫使玩家在追高分的風(fēng)險和穩(wěn)定推進之間做取舍。當(dāng)然這是進階玩法了基礎(chǔ)版先把狀態(tài)機跑通再往上疊加復(fù)雜度。蛇向前的方向判斷我最后再強調(diào)一遍在 move 里方向的計算用 this.direction而不是 this.pendingDirection。this.pendingDirection 只是緩沖真正的移動方向是在每次移動完成時從 pendingDirection 同步過來的。如果搞反了會出現(xiàn)按一下方向鍵蛇立刻轉(zhuǎn)向但畫面還沒移動視覺上非常割裂。這個順序我在調(diào)試時栽過跟頭所以拿出來單獨提醒你。代碼寫到這里貪吃蛇的核心類就全部完成了。你可以打開瀏覽器按 Enter 開始用方向鍵或 WASD 控制空格暫停死了按 Enter 重來。整個過程跑通之后再回頭去讀 snake.ts 和 game.ts 這兩個文件會發(fā)現(xiàn)所有的復(fù)雜性都被類的邊界切成了小塊。這個感覺就是面向?qū)ο笤O(shè)計在實戰(zhàn)項目中最直接的回報。 用TypeScript類組織貪吃蛇：面向?qū)ο笥螒蜷_發(fā)實戰(zhàn)
1. 整體設(shè)計思路為什么用類來組織貪吃蛇我見過不少初學(xué)者寫貪吃蛇習(xí)慣把所有邏輯塞進一個 main 函數(shù)或者全用全局變量堆。全局變量一多代碼就成了一鍋粥。這次我們用 TypeScript 的類來組織但很多人會問一句貪吃蛇這么小有必要搞類嗎我覺得有必要。不是小題大做而是貪吃蛇這個項目其實覆蓋了面向?qū)ο笤O(shè)計里最典型的幾個問題誰負責(zé)數(shù)據(jù)、誰負責(zé)行為、誰負責(zé)協(xié)調(diào)、誰負責(zé)渲染。如果一開始就把職責(zé)劃清楚后面加計分、加速、障礙物這些功能都會順手很多。整款游戲的核心邏輯可以拆成三大塊。第一塊是蛇類負責(zé)蛇的狀態(tài)、移動規(guī)則、碰撞自檢、以及自身的繪制。第二塊是食物類負責(zé)食物坐標的隨機生成與繪制。第三塊是游戲控制器類負責(zé)把上面兩塊組合起來再承擔(dān)游戲循環(huán)、分數(shù)結(jié)算、鍵盤監(jiān)聽、開始結(jié)束狀態(tài)的切換。project-root/ ├─ src/ │ ├─ type.ts # 共享類型定義 │ ├─ food.ts # 食物類 │ ├─ snake.ts # 蛇類 │ ├─ game.ts # 游戲控制器類 │ └─ index.ts # 入口文件 ├─ index.html └─ tsconfig.json這個拆分有一個好處每個文件只做一件事。type.ts 里沒有邏輯只放類型snake.ts 里不碰鍵盤事件game.ts 里不關(guān)心蛇身格子到底是什么顏色。將來你如果想換成貪吃蛇雙人對戰(zhàn)版基本只需要創(chuàng)建兩個 Snake 實例再改一下控制器——這就是低耦合帶來的實際收益。1.1 類型先行先定義數(shù)據(jù)形狀再寫邏輯寫 TypeScript 項目我習(xí)慣的第一步永遠是定義類型。別看類型定義只是幾行 interface它相當(dāng)于整個項目的地基。地基歪了上面蓋什么都是歪的。貪吃蛇這個項目我認為最少需要這三樣類型/** 方向枚舉 */ export enum Direction { Up Up, Down Down, Left Left, Right Right } /** 坐標結(jié)構(gòu) */ export interface Point { x: number y: number } /** 蛇身和食物的通用格子結(jié)構(gòu) */ export interface Cell { x: number y: number }方向用枚舉還是用字符串字面量聯(lián)合類型都可以但我個人更推薦枚舉。原因很實在枚舉給每個方向一個語義名字代碼里不會出現(xiàn)裸字符串。你想想如果有人寫snake.faceTo(left)一旦字母拼錯整個方向判斷就廢了。用Direction.Left就完全沒這個問題編輯器還能給你直接提示省去翻代碼確認的麻煩。坐標為什么要分開 Point 和 Cell嚴格來說這兩個都是{ x: number; y: number }但語義完全不同。Point 強調(diào)空間上的一個點Cell 強調(diào)的是畫布上的一個格子。如果你在代碼里直接混用看moveTo(point)和moveTo(cell)的時候你很難一眼判斷參數(shù)到底是什么意思。TypeScript 是結(jié)構(gòu)化類型系統(tǒng)兩個形狀相同的接口是可以互相賦值的但它們的存在本身就在提醒你——這里的坐標代表什么含義。1.2 配置參數(shù)集中管理別寫死魔法數(shù)字寫游戲最忌諱的就是各種數(shù)字散落在代碼的各個角落比如畫布寬度 400、格子大小 20、蛇初始長度 3這些魔法數(shù)字如果你在每個方法里重復(fù)寫后期想要調(diào)整的時候得滿文件去搜。像我之前做某個項目時就吃過這種虧改一個參數(shù)要按三遍 CtrlF。我建議的做法是直接在 type.ts 里定一個配置對象/** 游戲參數(shù)配置 */ export const CONFIG { canvasWidth: 600, canvasHeight: 600, gridSize: 20, snakeInitLength: 4, snakeSpeed: 150, // 單位毫秒數(shù)值越大越慢 colorSnakeHead: #2d5016, colorSnakeBody: #4e8d3f, colorFood: #d1483b, colorBg: #f5f2e6 } as constas const會讓這些值的類型變成字面量類型比如canvasWidth的類型就是600而不是number。這有什么好處好處是如果你后續(xù)不小心寫了一個CONFIG.canvasWidth 800TypeScript 會直接在編譯階段報錯提醒你正在篡改一個只讀配置。對游戲這類運行時狀態(tài)變化頻繁的程序來說這個保護很值。還有一個細節(jié)蛇的移動速度我用snakeSpeed: 150表示每 150 毫秒走一格。這個值直接決定了游戲的難度。100 毫秒手感偏快200 毫秒手感偏慢150 毫秒是我調(diào)試下來比較舒服的檔位。如果你的玩家群體是小朋友建議放寬到 200。2. 食物類把地基打扎實很多人覺得食物類太簡單了就是把一個點隨機放在畫布上然后畫個圓。但食類有幾個細節(jié)值得琢磨比如隨機生成的坐標必須對齊網(wǎng)格否則蛇頭永遠吃不到食物食物不能生成在蛇身上否則一開局就穿模食物被吃掉后要能重新生成。2.1 食物類的職責(zé)范圍食物類的職責(zé)我限定為兩件生成一個當(dāng)前場景內(nèi)有效的坐標以及把自己畫在畫布上。它不關(guān)心蛇在哪里也不關(guān)心分數(shù)怎么加。那我怎么保證食物不生成在蛇身上答案是通過生成方法接收一個不可用區(qū)域參數(shù)由調(diào)用方來告訴它哪些坐標不能選。這個設(shè)計叫做依賴倒置。食物類并不直接引用 Snake 類型而是接收一個坐標數(shù)組。這樣食物類就不依賴蛇類將來如果棋盤上有障礙物也只需要把障礙物的坐標一并傳進來食物類不需要改一個字符。import { CONFIG } from ./type /** 食物類 */ export class Food { position: { x: number; y: number } constructor() { this.position { x: 0, y: 0 } } /** * 生成一個不包含在 forbiddenCells 里的隨機坐標 * param forbiddenCells 不可選的坐標蛇身等 */ generate(forbiddenCells: { x: number; y: number }[] []): void { // 計算行列數(shù)避免坐標越界 const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize while (true) { // 隨機取 0 ~ rowNum-1 之間的整數(shù) const newX Math.floor(Math.random() * colNum) const newY Math.floor(Math.random() * rowNum) // 如果這個坐標沒人占用則確定位置 const conflict forbiddenCells.some( cell cell.x newX cell.y newY ) if (!conflict) { this.position { x: newX, y: newY } return } } } /** 繪制食物 */ draw(ctx: CanvasRenderingContext2D): void { const { x, y } this.position // 給食物留一點內(nèi)邊距不然看起來像粘在一起 const radius CONFIG.gridSize / 2 - 3 ctx.save() ctx.shadowColor CONFIG.colorFood ctx.shadowBlur 6 ctx.fillStyle CONFIG.colorFood ctx.beginPath() // 注意這里換算的是像素中心點 ctx.arc( x * CONFIG.gridSize CONFIG.gridSize / 2, y * CONFIG.gridSize CONFIG.gridSize / 2, radius, 0, Math.PI * 2 ) ctx.fill() ctx.restore() } }2.2 隨機生成算法為什么用 while(true)你看那個while (true)可能會有點慌這玩意兒不會死循環(huán)嗎理論上如果棋盤被蛇占滿了確實會死循環(huán)。但貪吃蛇的棋盤大小時 30 × 30一共 900 個格子蛇身要達到 900 格這個可能性在實際游戲中幾乎為零。就算真的發(fā)生了那也是勝利的場面——棋盤都被蛇占滿了游戲早該結(jié)束了。不過從工程嚴謹?shù)慕嵌葋碚f我會給這個循環(huán)加一個最大嘗試次數(shù)。這個習(xí)慣是我自己后期養(yǎng)成的因為哪怕概率再低一個無法終止的循環(huán)在代碼評審里都是個隱患。比如可以改成嘗試 1000 次還找不到空位就拋異常。但在教學(xué)項目里while(true)配合占位判斷已經(jīng)完全夠用注釋里寫清楚前提就行。2.3 食物的繪制技巧食物的繪制我用的是shadowBlur加光暈效果這是讓食物看起來有質(zhì)感的低成本方式。不透明度和陰影的配合讓它像一顆水果糖而不是一個干巴巴的色塊。這里有個繪制坐標系容易混的地方。游戲邏輯里的坐標是格子坐標一格是 20 像素。比如{ x: 3, y: 5 }表示從左上角開始橫著數(shù)第 4 格、豎著數(shù)第 6 格。但 canvas 繪圖用的是像素坐標所以繪制的時候必須做一個換算像素X 格子X × 格子大小 格子大小 / 2 像素Y 格子Y × 格子大小 格子大小 / 2加一半格子大小的原因是為了讓圓心落在格子的正中心。如果不加圖案會偏在格子的左上角視覺上看起來很別扭。這個換算方法在蛇類繪制里也會用到建議你把它當(dāng)成一個固定的心法記下來。3. 蛇類實現(xiàn)游戲的核心到重點了。蛇類是貪吃蛇整個代碼里最復(fù)雜的類核心就是那幾件事數(shù)據(jù)怎么存、移動怎么做、碰撞怎么檢測、自己會不會咬到自己、吃到食物怎么變長、以及怎么把自己畫出來。3.1 蛇的數(shù)據(jù)結(jié)構(gòu)怎么選蛇在棋盤上的形態(tài)是一連串連續(xù)格子而且隨時會在頭部新增一格尾部可能減少一格。這種頭部增、尾部減的操作典型的先進先出邏輯天然適合用隊列。在 JavaScript 里數(shù)組的unshift在頭部插入、pop在尾部刪除剛好模擬了最自然的思路。但這里有一個性能上的點在教學(xué)里我會特意提一下unshift的時間復(fù)雜度是 O(n)因為數(shù)組頭部插入會引發(fā)后續(xù)所有元素的內(nèi)存移動。貪吃蛇的蛇身長度通常在幾十格這個量級這一點性能損失完全可忽略。如果你貪吃蛇以后要做到 500 格以上可以考慮用雙向鏈表存儲蛇身。在教學(xué)項目里用數(shù)組就行容易理解也容易調(diào)試。蛇類還用一個direction字段記錄當(dāng)前朝向一個pendingDirection記錄下一次移動的方向。為什么要兩個方向因為玩家在一幀之內(nèi)可能連續(xù)按兩個方向鍵如果不做緩沖第二個按鍵會覆蓋第一個按鍵導(dǎo)致蛇沒有按玩家的意圖轉(zhuǎn)向。而如果按下即生效又會出現(xiàn)一個經(jīng)典的 bug蛇正在向左走玩家按了向上再快速按了向右蛇會直接掉頭——蛇不允許直接 180 度轉(zhuǎn)向這個約束后面細說。3.2 蛇類的 TypeScript 實現(xiàn)import { CONFIG, Direction } from ./type interface Cell { x: number y: number } /** 蛇類管理蛇身狀態(tài)、移動規(guī)則與碰撞檢測 */ export class Snake { /** 蛇身第 0 項為蛇頭 */ body: Cell[] /** 當(dāng)前移動方向 */ direction: Direction /** 緩沖方向本輪移動尚未消費的最新轉(zhuǎn)向指令 */ private pendingDirection: Direction /** 本輪是否已經(jīng)移動過防止一幀內(nèi)多次移動 */ private movedThisTurn: boolean constructor() { // 初始蛇身從中間向左延伸 const gridX CONFIG.canvasWidth / CONFIG.gridSize const gridY CONFIG.canvasHeight / CONFIG.gridSize const startX Math.floor(gridX / 2) const startY Math.floor(gridY / 2) this.body [] for (let i 0; i CONFIG.snakeInitLength; i) { this.body.push({ x: startX - i, y: startY }) } this.direction Direction.Right this.pendingDirection Direction.Right this.movedThisTurn false } /** 獲取蛇頭坐標 */ get head(): Cell { return this.body[0] } /** 設(shè)置下一次移動的方向帶轉(zhuǎn)向合法性校驗 */ setDirection(newDir: Direction): void { // 左、右是橫向上、下是縱向 const isOpposite (this.direction Direction.Up newDir Direction.Down) || (this.direction Direction.Down newDir Direction.Up) || (this.direction Direction.Left newDir Direction.Right) || (this.direction Direction.Right newDir Direction.Left) // 如果是相反方向忽略 if (isOpposite) return // 如果相同方向忽略 if (this.direction newDir) return // 如果這一輪已經(jīng)移動過只更新緩沖方向下一輪再消費 if (this.movedThisTurn) { this.pendingDirection newDir } else { // 這一輪還沒移動直接生效 this.direction newDir this.pendingDirection newDir } } /** 蛇移動一步 */ move(grow: boolean): void { const head this.body[0] let newHead: Cell { x: head.x, y: head.y } switch (this.direction) { case Direction.Up: newHead.y - 1 break case Direction.Down: newHead.y 1 break case Direction.Left: newHead.x - 1 break case Direction.Right: newHead.x 1 break } // 頭部插入新格子 this.body.unshift(newHead) // 只有吃到食物才保留尾部否則移除尾部 if (!grow) { this.body.pop() } // 修正蛇頭坐標到棋盤范圍內(nèi)撞墻的場景留給控制器處理 const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize newHead.x (newHead.x colNum) % colNum newHead.y (newHead.y rowNum) % rowNum this.body[0] newHead // 移動完成消費緩沖方向 this.direction this.pendingDirection this.movedThisTurn true } /** 是否與自身發(fā)生碰撞 */ isHitSelf(): boolean { const head this.body[0] // 從索引 1 開始檢查因為索引 0 就是頭本身 return this.body.slice(1).some(segment segment.x head.x segment.y head.y) } /** 蛇頭是否撞到邊界 */ isHitWall(): boolean { const head this.body[0] const rowNum CONFIG.canvasHeight / CONFIG.gridSize const colNum CONFIG.canvasWidth / CONFIG.gridSize return head.x 0 || head.x colNum || head.y 0 || head.y rowNum } /** 判斷某個坐標是否與蛇身重合 */ isOnSnake(x: number, y: number): boolean { return this.body.some(segment segment.x x segment.y y) } /** 重置蛇狀態(tài)重新開局用 */ reset(): void { const gridX CONFIG.canvasWidth / CONFIG.gridSize const gridY CONFIG.canvasHeight / CONFIG.gridSize const startX Math.floor(gridX / 2) const startY Math.floor(gridY / 2) this.body [] for (let i 0; i CONFIG.snakeInitLength; i) { this.body.push({ x: startX - i, y: startY }) } this.direction Direction.Right this.pendingDirection Direction.Right this.movedThisTurn false } /** 繪制蛇 */ draw(ctx: CanvasRenderingContext2D): void { const size CONFIG.gridSize this.body.forEach((segment, index) { const px segment.x * size const py segment.y * size // 是否蛇頭 const isHead index 0 // 內(nèi)邊距讓蛇身看起來是一節(jié)一節(jié)的 const padding isHead ? 1 : 3 ctx.fillStyle isHead ? CONFIG.colorSnakeHead : CONFIG.colorSnakeBody // 用圓角矩形或正方形繪制蛇身 ctx.fillRect(px padding, py padding, size - padding * 2, size - padding * 2) // 給蛇頭畫出兩個眼睛增強辨識度 if (isHead) { ctx.fillStyle #fff const eyeSize 3 if (this.direction Direction.Right) { ctx.fillRect(px size - 8, py 4, eyeSize, eyeSize) ctx.fillRect(px size - 8, py size - 8, eyeSize, eyeSize) } else if (this.direction Direction.Left) { ctx.fillRect(px 5, py 4, eyeSize, eyeSize) ctx.fillRect(px 5, py size - 8, eyeSize, eyeSize) } else if (this.direction Direction.Up) { ctx.fillRect(px 4, py 5, eyeSize, eyeSize) ctx.fillRect(px size - 8, py 5, eyeSize, eyeSize) } else { // Down ctx.fillRect(px 4, py size - 8, eyeSize, eyeSize) ctx.fillRect(px size - 8, py size - 8, eyeSize, eyeSize) } } }) } }3.3 移動邏輯中的關(guān)鍵設(shè)計我在這里用了movedThisTurn這個標志位它在游戲循環(huán)里承擔(dān)著重要的作用。requestAnimationFrame 是每幀都會回調(diào)的但貪吃蛇不需要每幀都移動——它應(yīng)該按照snakeSpeed的節(jié)奏來走。于是我們只會每隔一段時間調(diào)用一次move()。但在一次移動完成之后如果用戶在這一幀里連續(xù)按了兩次方向鍵第一次的轉(zhuǎn)向已經(jīng)生效第二次的轉(zhuǎn)向只能進入 pendingDirection 緩沖區(qū)等下一輪移動時再消費。這個機制看起來簡單實際解決了兩個大問題。第一個問題是反向瞬移蛇頭正在向右走玩家在下一次移動前按了上又按了左如果沒有緩沖左方向會覆蓋上方向而左恰好是右的反方向蛇會瞬間穿過自己的身體。第二個問題是輸入丟失如果只用一個 direction而且每次鍵盤事件都直接覆蓋 direction那么玩家在短時間內(nèi)按的上和左只有最后一次生效看起來像是按鍵失靈。有了 pendingDirection按鍵就變成了隊列的感覺雖然只緩沖一個但手感已經(jīng)完全不同。還有就是move(grow: boolean)這個參數(shù)設(shè)計。grow 為 false 時移動完要把尾巴 pop 掉這樣蛇身長度保持不變。grow 為 true 時不 pop蛇身長度加一。這比吃到食物后再調(diào)一個專門的方法來加一節(jié)更符合直覺因為增長本來就應(yīng)該發(fā)生在移動這個瞬間。3.4 撞墻策略不穿墻還是穿墻我在move里做了一個邊界取模的兜底newHead.x (newHead.x colNum) % colNum newHead.y (newHead.y rowNum) % rowNum這個東西的意思是如果你的坐標到了 -1就把它修正成 colNum - 1如果到了 colNum就回到 0。也就是說蛇頭會從左邊穿出去、右邊鉆出來類似環(huán)屏效果。這在早期貪吃蛇里是一種常見玩法。但你可能想問既然蛇類里已經(jīng)做了邊界修正為什么還有一個isHitWall方法兩種玩法都存在經(jīng)典模式下蛇撞到邊界游戲結(jié)束穿墻模式則不然。把這個選擇交給控制器更合理——控制器知道當(dāng)前游戲該用哪種模式。在實際項目中我通常建議默認使用撞墻結(jié)束因為穿墻模式會讓玩家的策略變得完全不同難度把控也更含糊。在這個項目里我選擇在控制器里檢查撞墻結(jié)束游戲move里的取模只是防御性代碼確保極端情況下蛇頭始終在畫布內(nèi)。4. 游戲控制器類把一切串起來控制器類的名字我起的是 Game整個游戲的主循環(huán)、狀態(tài)管理、事件監(jiān)聽、Canvas 上下文管理都集中在它身上。它操作蛇和食物這兩個業(yè)務(wù)類但自身不關(guān)心蛇的數(shù)據(jù)結(jié)構(gòu)也不關(guān)心食物怎么畫它的工作是決策。4.1 游戲狀態(tài)機貪吃蛇看起來是實時游戲但邏輯上是一個狀態(tài)機至少包含這幾種狀態(tài)等待開始、運行中、暫停、結(jié)束。狀態(tài)不同事件處理和渲染行為完全不同。type GameStatus idle | running | paused | over export class Game { private canvas: HTMLCanvasElement private ctx: CanvasRenderingContext2D private snake: Snake private food: Food private status: GameStatus idle private score 0 private lastMoveTime 0 private animationId 0 constructor(canvas: HTMLCanvasElement) { this.canvas canvas // 這里在正式項目中應(yīng)該做空值處理但教學(xué)環(huán)節(jié)先保證存在 this.ctx canvas.getContext(2d)! this.snake new Snake() this.food new Food() this.food.generate() this.bindEvents() } }狀態(tài)機的好處在于任何外部輸入進來先看狀態(tài)再決定要不要響應(yīng)。比如游戲結(jié)束狀態(tài)下按方向鍵沒有任何意義暫停狀態(tài)下按空格應(yīng)該恢復(fù)運行中按空格應(yīng)該暫停。這個東西用 if 堆也能寫但狀態(tài)一多就會亂。我在項目里用狀態(tài)字符串加 switch 來處理。4.2 事件綁定與防止方向鍵滾動頁面鍵盤事件綁在 document 上而不是 canvas 上。為什么因為玩家按鍵盤時焦點不一定在 canvas 上如果綁在 canvas 上很可能出現(xiàn)按了沒反應(yīng)。而綁 document 能保證無論焦點在哪都能響應(yīng)。方向鍵的默認行為會讓頁面滾動必須preventDefault()。這是新手最容易忽略的問題不處理的話會出現(xiàn)按一下方向鍵蛇沒動頁面先滾了。private bindEvents(): void { document.addEventListener(keydown, (e) { const keyMap: Recordstring, Direction { ArrowUp: Direction.Up, ArrowDown: Direction.Down, ArrowLeft: Direction.Left, ArrowRight: Direction.Right, w: Direction.Up, s: Direction.Down, a: Direction.Left, d: Direction.Right } const dir keyMap[e.key] if (dir) { // 防止方向鍵滾動頁面 e.preventDefault() this.handleDirection(dir) } if (e.key || e.key Space) { e.preventDefault() this.handleSpace() } if (e.key Enter) { e.preventDefault() this.handleEnter() } }) }同時支持字母鍵和方向鍵這個體驗細節(jié)很加分。很多玩家習(xí)慣左手控制 WASD右手可能還握著鼠標。如果你只做了方向鍵會損失一部分玩家的舒適度。4.3 按鍵響應(yīng)與狀態(tài)流轉(zhuǎn)private handleDirection(dir: Direction): void { if (this.status ! running) return this.snake.setDirection(dir) } private handleSpace(): void { if (this.status running) { this.status paused } else if (this.status paused) { this.status running // 恢復(fù)時重置計時避免瞬間移動一次 this.lastMoveTime performance.now() } } private handleEnter(): void { if (this.status idle || this.status over) { this.start() } }這里有一個細節(jié)暫?；謴?fù)后lastMoveTime要重置為當(dāng)前時間。如果不重置暫停期間過去的時間會計入移動間隔恢復(fù)后瞬間就走一步玩家會感覺蛇跳了一下。類似的坑還有瀏覽器標簽頁切換回來后的大間隔問題也靠這個辦法解決。4.4 游戲循環(huán)用 requestAnimationFrame 加時間差控制游戲循環(huán)是控制器的靈魂。我用 requestAnimationFrame 驅(qū)動渲染但移動的節(jié)拍單獨用時間差控制。private loop (timestamp: number): void { // 記錄動畫幀ID便于取消 this.animationId requestAnimationFrame(this.loop) if (this.status ! running) { // 不管暫停還是結(jié)束畫面不動但為了方便顯示暫停文字還是重繪一次 this.draw() return } // 距離上次移動是否達到設(shè)定間隔 if (timestamp - this.lastMoveTime CONFIG.snakeSpeed) { this.update() this.lastMoveTime timestamp } this.draw() }為什么不直接setInterval來控制蛇移動誠實地講setInterval在這個場景其實也能用但有個一致性問題setInterval的回調(diào)可能會因為主線程忙而出現(xiàn)積壓導(dǎo)致多次快速連續(xù)執(zhí)行而且它和渲染不同步可能出現(xiàn)蛇移動了畫面卻沒更新。requestAnimationFrame 天然和瀏覽器渲染幀率同步在 60Hz 的屏幕上是 16.67ms 觸發(fā)一次移動節(jié)奏通過時間差來卡穩(wěn)定且不掉幀。loop定義為箭頭函數(shù)的原因是requestAnimationFrame(this.loop)里的 this 上下文如果換成一個普通函數(shù)在回調(diào)執(zhí)行時 this 會指向 window。箭頭函數(shù)則自動綁定當(dāng)前實例。4.5 更新邏輯碰撞檢測的先后順序update()是整個單幀決策的集中地。我處理碰撞的順序是先吃食物再撞自己再撞墻。private update(): void { const head this.snake.body[0] const foodPos this.food.position // 吃了食物嗎 const isEating head.x foodPos.x head.y foodPos.y // 讓蛇移動吃到食物就增長 this.snake.move(isEating) if (isEating) { this.score 10 this.food.generate(this.snake.body) } if (this.snake.isHitSelf()) { this.over() return } if (this.snake.isHitWall()) { this.over() return } }先判斷吃再調(diào)用 move。這里有個潛在的問題如果先調(diào)用 move 再判斷吃此時蛇頭已經(jīng)移動了就必須用移動前的坐標做判斷邏輯上更繞。先判斷再移動代碼讀起來順暢得多。isHitWall之所以放在isHitSelf之后是因為如果蛇頭和墻壁重合時同時也和自己的身體重合報哪個錯都合理。但實際游戲里蛇頭撞墻后不再移動此時蛇身不可能超過邊界所以先后順序影響不大保持這個順序只是因為讀代碼時先近后遠更自然。4.6 開始、結(jié)束、重繪private start(): void { this.score 0 this.snake.reset() this.food.generate(this.snake.body) this.status running this.lastMoveTime performance.now() } private over(): void { this.status over } private draw(): void { const { ctx } this ctx.clearRect(0, 0, CONFIG.canvasWidth, CONFIG.canvasHeight) ctx.fillStyle CONFIG.colorBg ctx.fillRect(0, 0, CONFIG.canvasWidth, CONFIG.canvasHeight) this.food.draw(ctx) this.snake.draw(ctx) // 游戲狀態(tài)文字 if (this.status idle) { this.drawCenterText(按 Enter 開始游戲) } else if (this.status paused) { this.drawCenterText(暫停中按空格繼續(xù)) } else if (this.status over) { this.drawCenterText(游戲結(jié)束得分 ${this.score}按 Enter 重來) } } private drawCenterText(text: string): void { const { ctx } this ctx.save() ctx.fillStyle #333 ctx.font bold 24px sans-serif ctx.textAlign center ctx.textBaseline middle ctx.fillText(text, CONFIG.canvasWidth / 2, CONFIG.canvasHeight / 2) ctx.restore() }draw 里的一個細節(jié)是 clearRect 之后用背景色鋪底。如果不鋪底背景默認是透明的看起來還行但如果你在 draw 里用了部分透明度的顏色比如半透明的蛇身下一幀繪制時會和上一幀殘留疊加形成拖影。先鋪一層不透明底色能徹底避免這個視覺錯誤。還有一個容易忽略的點drawCenterText 里的ctx.save()和ctx.restore()。save 保存當(dāng)前的繪圖狀態(tài)到棧里restore 恢復(fù)。這里之所以必須用是因為我改了textAlign和textBaseline。如果不恢復(fù)下一次繪制幾何圖形時這些文字對齊屬性會一直生效可能導(dǎo)致后續(xù)繪制出現(xiàn)莫名其妙的結(jié)果。但凡你在繪制過程中改了 Canvas 的全局狀態(tài)畫完就恢復(fù)是一個好習(xí)慣。5. 常見問題與排查技巧實錄寫貪吃蛇的過程當(dāng)中有幾類問題出現(xiàn)頻率極高。我把自己調(diào)試過程中踩過的坑整理一下按癥狀、原因、解法的方式列出來方便你對照排查。5.1 癥狀一蛇身顯示方向相反現(xiàn)象是蛇頭在最右但身體往右排看起來蛇在倒著走。排查后發(fā)現(xiàn)是初始化時 push 的順序?qū)е碌摹Ｈ绻愕拇a寫成this.body.push({ x: startX i, y: startY })i 從 0 遞增那么第 0 項是 startX第 1 項是 startX 1第 2 項是 startX 2以此類推。但我們的設(shè)計是 body[0] 永遠是蛇頭而蛇向右走時頭必須在最右邊。所以 body[0] 的 x 必須最大。正確的寫法是this.body.push({ x: startX - i, y: startY })這樣第 0 項 x 最大向右走時頭部插入的新位置永遠比原來大 1視覺和邏輯都是正確的。這個坑本質(zhì)上是數(shù)組第 0 項是蛇頭這個約定沒有貫徹到底。我建議在代碼注釋里寫上第 0 項為蛇頭以后自己看代碼也不會犯迷糊。5.2 癥狀二快速連按方向鍵導(dǎo)致蛇反向瞬移假設(shè)蛇向右移動玩家按了一下上緊接著按了一下左。如果沒有 pendingDirection 緩沖第二次按鍵后 direction 變成左但蛇頭還在向右移動下一次 move 時 head.x - 1 就會讓蛇頭直接往左而蛇身第二節(jié)還在原來的位置蛇頭就直接撞進了第二節(jié)的位置游戲可能瞬間判負。玩家會覺得莫名其妙。解法就是我在 Snake 類里實現(xiàn)的 setDirection 加 pendingDirection 機制。在設(shè)置方向時檢查新方向是否為當(dāng)前方向的反向或同向如果是就直接丟棄。然后再利用 movedThisTurn 做緩沖只允許方向變化一次多余的進入末位等待。這是最穩(wěn)妥的做法。5.3 癥狀三方向鍵按下時頁面跟著滾動如果你沒在 keydown 里調(diào) preventDefault方向鍵默認會讓瀏覽器滾動頁面尤其是你沒有給頁面設(shè)置 overflow hidden 的時候。用戶按下方向鍵游戲畫面沒反應(yīng)滾動條倒是動了。解決方式是 keydown 回調(diào)里對方向鍵統(tǒng)一調(diào)用 e.preventDefault()這在 bindEvents里已經(jīng)處理了。5.4 癥狀四游戲結(jié)束后蛇還在畫布上畫面有殘留游戲結(jié)束后 status 變成 overloop 里走的是 draw 分支draw 會先清空畫布再重繪食物和蛇所以畫面理論上不會殘留舊幀。如果你發(fā)現(xiàn)殘留多半是清屏寫錯了比如ctx.clearRect(0, 0, 100, 100)clearRect 的區(qū)域小于畫布實際尺寸導(dǎo)致邊緣沒清掉。用 CONFIG.canvasWidth 和 CONFIG.canvasHeight 代替魔法數(shù)字可以解決。5.5 癥狀五食物生成到蛇身上食物重新生成時應(yīng)該把蛇身的所有坐標傳給 generate 方法作為禁止區(qū)域。留意這個調(diào)用時機應(yīng)該在蛇移動并且長大完成之后調(diào)用否則傳的蛇身還是舊的缺少剛長出來的那一節(jié)。這個順序我一般在 update 里固定為move - 分數(shù) - 重新生成食物。5.6 癥狀六requestAnimationFrame 沒有啟動或者被瀏覽器節(jié)流瀏覽器為了省電會對后臺標簽頁的 requestAnimationFrame 做節(jié)流長時間掛后臺可能完全停止回調(diào)。這會導(dǎo)致什么你切出去一分鐘再切回來發(fā)現(xiàn)蛇沒有按照時間戳累計跳躍移動而是重新在這個位置繼續(xù)走。這不是 bug而是瀏覽器行為。如果你希望切回來時游戲立即補上這一分鐘的移動可以在 loop 里檢測 timestamp - lastMoveTime 如果大于某個閾值就只更新一次避免蛇一步跨出十萬八千里。我試過這個方案效果不錯帶來的問題是游戲難度會在切回來瞬間拔高所以也可以選擇接受瀏覽器節(jié)流不做額外處理。5.7 關(guān)于獲取 canvas 上下文時的感嘆號代碼里出現(xiàn)了這樣的寫法this.ctx canvas.getContext(2d)!TypeScript 里getContext的返回值類型是CanvasRenderingContext2D | null。當(dāng)你非常確定 canvas 元素存在且能拿到 2d 上下文時可以用非空斷言!來消除 null。但如果 canvas 的 id 寫錯了或者 canvas 元素還沒渲染到 DOM 就拿它這里會拋出運行時錯誤而不是編譯錯誤。比較穩(wěn)妥的寫法是判空后拋出明確錯誤const ctx canvas.getContext(2d) if (!ctx) throw new Error(無法獲取 canvas 上下文)這個寫法更安全錯誤信息也更明確。教學(xué)項目里直接用非空斷言省事但心里要清楚它到底在做什么別在團隊項目里隨手用感嘆號。5.8 關(guān)于分數(shù)和速度的平衡最后聊一個很多人做完游戲后都會問的問題怎么讓游戲越來越難最常用的方法是分數(shù)越高速度越快。我之前試過在 update 里動態(tài)計算const BASE_SCORE 10 const EXTRA_SCORE this.score * 0.5 const LIMIT_SPEED 60 // 最快間隔毫秒 CONFIG.snakeSpeed Math.max(LIMIT_SPEED, BASE_SPEED - EXTRA_SCORE)但這么做有個副作用蛇速變快后玩家的反應(yīng)時間變短如果速度增長過于陡峭游戲很快就變得不可玩。建議每次只減少 5 到 10 毫秒并且設(shè)置一個下限比如 60 毫秒保證游戲的可行性。具體閾值建議你在真機上調(diào)因為不同人的反應(yīng)速度和顯示器刷新率會有差異。我自己的實測經(jīng)驗60 毫秒是最快的極限再快人眼已經(jīng)很難判斷蛇頭位置了。80 毫秒到 100 毫秒是高手還能玩普通玩家勉強跟得上的甜點區(qū)。你也可以用累加得分的方式來分段提速比如每吃 5 個食物提升一檔速度這樣玩家有明顯的節(jié)奏感而不是每吃一個就變快一點那種體驗反而很累。還有一個值得嘗試的擴展方向食物得分可以多樣化。給普通食物 10 分偶爾出現(xiàn)一個特殊食物 50 分限時出現(xiàn)幾秒后消失。這會迫使玩家在追高分的風(fēng)險和穩(wěn)定推進之間做取舍。當(dāng)然這是進階玩法了基礎(chǔ)版先把狀態(tài)機跑通再往上疊加復(fù)雜度。蛇向前的方向判斷我最后再強調(diào)一遍在 move 里方向的計算用 this.direction而不是 this.pendingDirection。this.pendingDirection 只是緩沖真正的移動方向是在每次移動完成時從 pendingDirection 同步過來的。如果搞反了會出現(xiàn)按一下方向鍵蛇立刻轉(zhuǎn)向但畫面還沒移動視覺上非常割裂。這個順序我在調(diào)試時栽過跟頭所以拿出來單獨提醒你。代碼寫到這里貪吃蛇的核心類就全部完成了。你可以打開瀏覽器按 Enter 開始用方向鍵或 WASD 控制空格暫停死了按 Enter 重來。整個過程跑通之后再回頭去讀 snake.ts 和 game.ts 這兩個文件會發(fā)現(xiàn)所有的復(fù)雜性都被類的邊界切成了小塊。這個感覺就是面向?qū)ο笤O(shè)計在實戰(zhàn)項目中最直接的回報。