在挑戰鐵人賽之前,其實我也完全沒有想過貪吃蛇要怎麼做,所以為了做這次的貪吃蛇遊戲,我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇
老師在 hahow 上面開的 動畫互動網頁特效入門(JS/CANVAS)
這堂課,課堂上是透過 JS 搭配 Canvas 來實現貪吃蛇,瞭解原理之後,我這次會改用 ReactJS 來實現,不會使用到 Canvas ,內容上會有部分參考到這堂課的內容,所以也已事先取得吳哲宇老師的同意
,在得到他的鼓勵之後來參加鐵人賽,因此在這邊特別聲明一下。有上過這堂課的同學也歡迎私下互相來交流,下面也附上這堂課的參考連結。
我覺得貪吃蛇遊戲最核心的部分就是那條蛇的運作原理。這邊我會說明一下蛇這個物件要如何來構成,以及他是如何運作的。
首先我們來解剖一下這條蛇,如下圖所示,蛇會由兩個部分來構成,一個是頭部,一個是身體。
頭部是一個紀錄 x 及 y 座標的物件,身體則是一個佇列(Queue),佇列的行為是先進先出(First In First Out, FIFO),佇列中每一個元素是跟頭部一樣記錄著 x 及 y 座標的物件,有了這些座標,我們就可以根據座標的位置在我們地圖的畫面上畫出一條蛇。
接下來講蛇的移動,在每一次更新畫面的時候,頭部會根據目前的移動方向,移動到新的位置,而舊的頭部的位置,會被 push 進去佇列當中,成為身體的一部分,此時佇列的長度會變長,但是由於蛇在還沒吃到食物之前,身體的長度是固定的,所以為了讓身體保持同樣的長度,會從佇列的尾部拿掉一個元素,所以在每一次的畫面更新,就可以讓蛇看起來不斷的往前進。
根據上述的說明,我們紀錄蛇的資料會如下:
const defaultSnake = {
headPosition: {
x: 0,
y: 0,
},
body: [],
maxLength: 2,
direction: {
x: 1,
y: 0,
},
speed: SNAKE_INITIAL_SPEED,
};
下面來說明一下每個參數代表的意義及用途
body = [{0, 0}, {1, 0}, {2, 0}, {3, 0}];
有了這些參數,我們就可以順利的在畫面中劃出貪吃蛇了。