事前聲明

在挑戰鐵人賽之前，其實我也完全沒有想過貪吃蛇要怎麼做，所以為了做這次的貪吃蛇遊戲，我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow 上面開的 動畫互動網頁特效入門（JS/CANVAS）這堂課，課堂上是透過 JS 搭配 Canvas 來實現貪吃蛇，瞭解原理之後，我這次會改用 ReactJS 來實現，不會使用到 Canvas ，內容上會有部分參考到這堂課的內容，所以也已事先取得吳哲宇老師的同意，在得到他的鼓勵之後來參加鐵人賽，因此在這邊特別聲明一下。有上過這堂課的同學也歡迎私下互相來交流，下面也附上這堂課的參考連結。

動畫互動網頁特效入門（JS/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,
};

下面來說明一下每個參數代表的意義及用途

1. headPosition
   這個參數是蛇的頭部，如上述說明，裡面記錄 x 及 y 的座標
2. body
   身體的部分資料類型是一個陣列，當陣列的行為是符合 FIFO 的時候，我們可以說他是一個佇列。這個陣列是一個 array of object ，內部是記錄身體每個元素的位置。

body = [{0, 0}, {1, 0}, {2, 0}, {3, 0}];

3. maxLenght
   紀錄目前蛇的長度，超出蛇的長度的部分，會被從body陣列中拿掉。
4. direction
   紀錄目前蛇的方向，接下來會往上下左右哪一個方向走，會由這個參數決定。
5. speed
   蛇目前的移動速度，根據我們昨天 Day11 的遊戲規則，當蛇吃到食物的時候，身體會變長，速度也會越來越快，所以目前蛇的速度有多快，由這個參數來決定，當吃到新的食物的時候，就會更新這個參數。

有了這些參數，我們就可以順利的在畫面中劃出貪吃蛇了。