期末專題-2048 Game

張綺文
海大 SwiftUI iOS / Flutter App 程式設計
5 min readJun 26, 2018

一個完全不知道要做什麼~

彼得潘說可以做2048的遊戲,所以就試試囉~~

1. 圖片

進入遊戲的畫面

此畫面的圖片為gif動圖~~

遊戲介面

遊戲介面的部分有遊戲版面和分數版面,另外還有3個button,比較特別的是“一鍵加速”,他可以直接讓你拿到2048的分數~

彈跳小視窗和輸入名字介面

上面兩張圖為失敗或獲勝時會跳出的小視窗,有Restart和輸入成績兩部分,而輸入成績的介面名字欄位規定一定要填寫,不然會跳出小視窗!

排行榜介面

上面兩張圖為排行榜的畫面,有特別做分數的排序,第一名還有特別給予動態的獎盃和煙火~~但此排行榜沒有編輯的功能,因為本人覺得成績不能隨便改!所以只有刪除的功能!

2. App操作gif

此頁面為作弊的一鍵加速和輸入成績的頁面
左邊的頁面顯示了重新開始的功能,而右邊的頁面顯示了當玩家為輸的時候

3. 架構圖

此次的架構圖很簡單,只有開始頁面和輸入名字頁面和排行榜頁面,因為遊戲主畫面均用程式碼來完成

4. 額外功能

  1. 可以播放gif格式圖片
  2. 2048遊戲背後強大的邏輯概念

5. 遊戲設計介紹

前言:這次為了寫出2048的小遊戲,個人上網看了外國的影片還有中國網站 的大略介紹,只能說2048小遊戲對我來說似乎有點太難~但又不想放棄這個idea!所以就硬著頭皮寫下所以就硬著頭皮寫下去了~~(以下附上教學影片和網站教學:

教學影片:https://www.youtube.com/watch?v=BCL1ZGUX_qs(共有8部)

網站教學:【swift】实战入门之手把手教你编写2048

http://blog.scarlettbai.com/index.php/archives/54.html(共有3篇)

A. 大致簡略說明一下,遊戲主畫面主要由遊戲面板和計分面板構成,而遊戲面板由一塊背景和16塊小塊塊構成

a. NumberTileGameViewController為負責初始化設定和整個版面的建構,是2048遊戲主畫面的view controller

b. GameModel和AccessoryViews為定義一些主畫面要用的class及function,還有用到protocol協定,負責class間的資料傳送

c. 而AuxiliaryModels主要負責動作的function,還有遊戲版的結構

d. AppearanceProvider則定義了一些顏色

e. 而為了讓遊戲玩起來更加順暢,畫面更接近手機2048 App,在GameModel中有加入一些讓動作延遲的timer,還有輸贏判斷,最高分判斷,和隨機插入小塊塊之類的~~

B. start開始頁面則是放入gif動圖

以下附上參考影片:https://www.youtube.com/watch?v=Rm61mxcSD4U

a. start頁面為view controller,其實也沒做什麼事,就是放入gif動圖和將頁面導入遊戲主畫面

C. 輸入姓名之頁面

a. 此頁面其實沒什麼,只是個人覺得比較困難的地方在因為主畫面不是用拉的,所以很多介面傳資料的方式都不能用,就上網查了一下,最後用prorocol的方式傳送玩家分數,並顯示在Label上

b. 此頁面為RankTableViewController

D. 排行榜之頁面

a. 排行榜的頁面則是用老師上課所教的方法,只是多了分數排序和第一名的獎盃動圖gif,Player則用來記錄玩家姓名和分數

6. 最後放上github連結

--

--