canvas 繪製貪吃蛇遊戲

// 分數記錄

let fraction = 0;

// 定義貪吃蛇的組成，方塊物件

class block

// 畫方法

draw()

}// 蛇類

class snake

draw()

};move()

if(this.direction == "left")

if(this.direction == "up")

if(this.direction == "down")

// 增加頭部

this.body.unshift(newhead);

// 進行判斷蛇頭是否碰到了蘋果，若碰到了則不刪除最後乙個方塊，反之刪除最後乙個方塊

// 進行檢測，如果生成在蛇身上，繼續生成，反之結束迴圈

while(true)

}break;

}// 分數加入

fraction++;

}else

};// 碰撞檢測

impactchecking()

// 檢視是否碰到自己身體

for(let i = 1; i < this.body.length; i++)}}

}// 實物，蘋果類

// 列

col;

// 行

row;

sizer;

constructor();

// 初始化蘋果

initialization()

// 畫蘋果的方法

draw()

}// 生成乙個蘋果

// 生成乙個蛇

setinterval(() => , 200);

// 對貪吃蛇控制

// 上下左右運動

$("body").keydown((event) =>

// 上

if(event.keycode == 38 && snake.direction != "down")

// 右

if(event.keycode == 39 && snake.direction != "left")

// 下

if(event.keycode == 40 && snake.direction != "up")

});思路，蛇由兩個類組成，方塊類和蛇類，蛇類的存在依賴於方塊類。蛇類當中的body儲存當前蛇類的所有的方塊。繪圖，直接遍歷body內部的所有繪圖方法。移動，根據儲存的私有變數方向用來對陣列中儲存的方塊物件進行更改

還有乙個蘋果類。用於進行隨機生成

吃蘋果，在移動方法中，如果蛇的頭方塊和蘋果方塊重合那麼吃到蘋果，重新呼叫生成蘋果方法。

碰撞檢測，如果行和列超過範圍，即碰撞發生

最重要的，座標行和列化，使用的時候乘以乙個數就行

canvas 繪製貪吃蛇遊戲

分數記錄 let fraction 0 定義貪吃蛇的組成，方塊物件 class block 畫方法 draw 蛇類 class snake draw move if this.direction left if this.direction up if this.direction down 增加頭...

canvas 繪製貪吃蛇遊戲

let canvas document.getelementbyid canvas let context canvas.getcontext 2d 分數記錄 let fraction 0 定義貪吃蛇的組成，方塊物件 class block 畫方法 draw 蛇類 class snake draw ...

canvas實現貪吃蛇

效果圖ps 這個只是思路，詳細可看 注釋 一 先把蛇畫出來 定義一下蛇的結構，用乙個陣列儲存一堆矩形，包含蛇頭 紅 和蛇身 灰 畫蛇 初始狀態 二 蛇能動 重點 蛇移動方式 自始至終都只有蛇頭在動 需要乙個儲存方向的變數 direction 根據方向進行移動，一次移動乙個格 根據按鍵改方向 三 隨機...