iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
2
Modern Web

以經典小遊戲為主題之ReactJS應用練習系列 第 12

Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃

  • 分享至 

  • xImage
  •  

事前聲明

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

動畫互動網頁特效入門(JS/CANVAS)


蛇的原理

我覺得貪吃蛇遊戲最核心的部分就是那條蛇的運作原理。這邊我會說明一下蛇這個物件要如何來構成,以及他是如何運作的。

蛇的構造

首先我們來解剖一下這條蛇,如下圖所示,蛇會由兩個部分來構成,一個是頭部,一個是身體。
頭部是一個紀錄 x 及 y 座標的物件,身體則是一個佇列(Queue),佇列的行為是先進先出(First In First Out, FIFO),佇列中每一個元素是跟頭部一樣記錄著 x 及 y 座標的物件,有了這些座標,我們就可以根據座標的位置在我們地圖的畫面上畫出一條蛇。

snake-queue

蛇的移動方法

接下來講蛇的移動,在每一次更新畫面的時候,頭部會根據目前的移動方向,移動到新的位置,而舊的頭部的位置,會被 push 進去佇列當中,成為身體的一部分,此時佇列的長度會變長,但是由於蛇在還沒吃到食物之前,身體的長度是固定的,所以為了讓身體保持同樣的長度,會從佇列的尾部拿掉一個元素,所以在每一次的畫面更新,就可以讓蛇看起來不斷的往前進。

snake-move

蛇的資料結構

根據上述的說明,我們紀錄蛇的資料會如下:

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

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


上一篇
Day11 - 貪吃蛇篇:前言及功能構想
下一篇
Day13 - 貪吃蛇篇:頁面佈局規劃
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言