iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
1
Modern Web

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

Day11 - 貪吃蛇篇:前言及功能構想

前言

談到經典小遊戲,除了圈圈叉叉遊戲之外,還有一個家喻戶曉的遊戲,就是貪吃蛇,雖然現在智慧型手機和各種遊戲機的遊戲越做越華麗,越來越炫砲,但是經典的遊戲終究還是無法從每個人的心中抹去,玩了各種現代手遊之後,無意間看到貪吃蛇,還是會手癢想要下去玩個幾回,回憶一下自己的青春歲月。

貪吃蛇的歷史

我覺得瞭解遊戲的歷史,能夠加深玩家及開發者對於遊戲的情感。為了做貪吃蛇,我也上網稍微瞭解一下這個遊戲的演進,這邊稍微講個大概,後面附上參考連結供大家詳細閱讀。

貪吃蛇最早的原型聽說是在1976年,世界上第一台微型計算機,也就是我們現在的個人電腦的祖先 - Altair 8800 ,是1975年發發布的。現在我們說回貪吃蛇的祖先,那是1976年發布的一款名為 Blockade 的街機遊戲。
Yes

隨著電子產品不斷的演進,遊戲也不斷的以不同的樣貌出現,1997年,諾基亞的一名叫做Taneli Armanto的工程師,編寫了一款貪吃蛇程序,直接命名為Snake,中文翻譯為貪吃蛇
taneli-armanto
A history of Finland's mobile games industry: It started with Snake
你知道貪吃蛇的歷史嗎?開開眼吧!


遊戲介紹及規則說明

在遊戲中,玩家操控一條細長的直線(俗稱蛇或蟲),它會不停前進,玩家只能操控蛇的頭部方向(上下左右),一路拾起觸碰到的食物,並要避免觸碰到自身或者其他障礙物。每次貪食蛇吃掉一件食物,它的身體便增長一些。吃掉一些食物後會使蛇的移動速度逐漸加快,讓遊戲的難度漸漸變大。遊戲設計大致分為四面都有牆(都不可穿越)以及某部分的牆可以穿越,以及四面牆都可以穿越的模式。
貪食蛇
Snake (video game genre)

功能構想

首先我們來規劃一下我們需要哪些物件及功能

我們需要的物件

  1. 地圖
    首先我們的需要有一個讓蛇可以在上面跑來跑去的地圖。
  2. 一條蛇
    然後我們需要一條蛇,這隻蛇可以在地圖上透過玩家的操作自由的移動。
  3. 食物
    我們需要給蛇吃的食物,當食物被蛇吃掉的時候,會在另一個地方再生成。
  4. 計分
    我們需要即時顯示目前吃了幾個食物,一個食物一分,這樣玩家看著分數增加,就會越來越謹慎,越來越緊張,增加刺激感,而且有了分數,跟朋友交流的時候,也可以互相來比較和比賽誰比較高分。
  5. 暫停鍵
    有一個暫停案件,可以切換暫停與繼續,暫停的時候蛇不會再移動。
  6. 上下左右按鈕
    一般在電腦上玩的時候,鍵盤上會有上下左右可以按,以前智慧型手機出來之前,也有上下左右可以操作,但是智慧型手機出現之後,就沒有上下左右鍵了,為了讓玩家在手機上也可以玩,我們想在畫面上做出可以讓玩家操作的上下左右按鈕。
  7. 開始遊戲按鈕
    開始遊戲之前,有一個開始按鈕,按下去之後開始遊戲。

制定遊戲規則

我們來制定一下我們要設計的遊戲,需要有哪些規則:

  1. 蛇可以活動的範圍是整張地圖,有些遊戲做成碰到牆壁就結束,有些做成可以穿牆,我們這次希望蛇是可以穿牆的,也就是從右邊出去,就會從左邊進來,依此類推,會這樣設計是因為我覺得這樣可以玩比較久。
  2. 蛇可以隨著吃的東西增加長度,吃一個食物就增加一個單位長度。
  3. 蛇隨著吃的食物變多,身體變長,速度也會變快,逐漸增加遊戲的難度。
  4. 蛇吃到自己的身體,遊戲就會結束,重新開始也重新計分。

接下來我們會按照今天所訂下的功能及規則,逐步的來實現我們的貪吃蛇。


上一篇
Day10 - Tic Tac Toe篇:Single Play機制
下一篇
Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言