Quoridor iOS Game:Part 2

遊戲功能、音樂、設定、排行榜、雙語、AdMod⋯⋯

Medium Part 1 文章

驗證(註冊/登入)、個人檔案頁面、角色頭像設計

MVVM 架構

Models、Views、View Models

Models(左)、View Models(中)、Views(右)

遊戲起始畫面

Touch screen to start

捨棄從 info.plist 來實作起始畫面,自己設計絕大多數遊戲都有的「起始畫面」,也就是點擊螢幕開始遊戲,並把 Firestore 的 snapshotListener 移至此的 onTapGesture(),同時也做了閃爍的動畫、放上了 App 名稱、自行設計的 App Icon,讓 Launch Screen 看起來更專業。

未登入時不會顯示起始畫面(左)、英文版起始畫面 GIF(中)、中文版起始畫面 GIF(右)

App 三個主要的 Tab 畫面

排行榜、遊戲主頁、個人頁面

這樣「自行設計的 TabView」與「個人頁面(含設定)」部分在 Part 1 有介紹過了,有興趣的朋友可以到 Part 1 去看看~

排行榜(左)、遊戲主頁(中)、個人頁面(右)

遊戲排行榜

可依「星星數」、「勝率」、「財富」做排序

中間以 List 來顯示資料,但移除了像 List 的背景顏色、Separator 來自訂畫面設計,讓整體融入 App,也能使用 List 方便的 refreshable(),這裡也將 refreshable()ProgressView() 的顏色從預設的灰色改成白色。

排行榜:依星星排序 GIF(左)、排行榜:依勝率排序(中)、排行榜:依財富排序(右)

遊戲主頁

對戰獎勵、排位賽、休閒模式、加入遊戲房間、看廣告賺金幣

當天未觀看過廣告(左)、看過廣告&玩了兩場(中)、看過廣告&玩了四場且未領取獎勵(右)

對戰獎勵

畫面中第一個的 Game Reward

這個設計是玩家只要每玩 4 場(不論牌位或休閒)就能領取對戰獎勵,會隨機獲得 $1 到 $200 的金幣,讓玩家有動力一直玩。也將遊玩的場次設計成了「進度條」顯示。

排位賽&休閒模式

畫面中二、三的 Create a Game

排位與休閒基本上都是玩一樣的遊戲,都能解對戰任務,遊完的場次和勝率也會記在一起,但有以下的不同:

  • 排位要花 $200 入場,休閒免費
  • 牌位贏了能獲得 $400 以及 1 顆星星,休閒無獎勵
  • 排位輸了拿不回入場費,也扣 1 顆星星,休閒無懲罰
  • 排位顏色使用玫瑰金,休閒顏色使用大地金

所以如果金幣不夠 $200 的話,就無法進入排位賽,只能多玩休閒賺遊戲場次任務,等有 $200 了才能再次挑戰。

加入遊戲

使用房號加入以創建的遊戲

房號的輸入使用自行設計的數字鍵盤、刪除鍵、Enter 鍵,並有動畫效果,如果房號不存在會跳出錯誤訊息,或如果是加入排位賽但金幣不夠 $200 也會跳出錯誤無法加入。

加入遊戲數字鍵盤 GIF(左)、加入遊戲數字鍵盤未輸入(中)、加入遊戲數字鍵盤輸入 7777(右)

看廣告賺金幣

Google AdMod

我們設計了看廣告就能賺取 $200!這足以玩一場排位賽了!非常多!所以也讓玩家一天只能看一次廣告,不能再多了,看完之後「Watch Video」的 Button 就會消失,還想看?明天再來。

看廣告賺金幣 GIF(左)、當日未觀看影片(中)、當日已看過影片(右)

Quoridor 遊戲介紹

雙人益智策略桌遊

創建遊戲房間

分成:房主、玩家

在遊戲房間裡,有兩位玩家,其中一位是房主,只有房主才能開始遊戲,但必須玩家按下「準備好了」。

遊戲可以是已經有兩位玩家,按下「開始遊戲」就會馬上進入遊戲畫面。也可以是只有一個玩家,按下「開始遊戲」就會由系統幫忙配對,排位只會配對到牌位,休閒只會配對到休閒。

不論是房主或是玩家,在還沒開始遊戲前,隨時都能按左上角的「退出房間」,狀況分成以下幾種:

  • 房間已有兩個人,玩家退出,房主依然是房主,房間剩一人
  • 房間已有兩個人,房主退出,玩家變成房主,房間剩一人
  • 房間只有一人,房主退出,Firestore 將房間刪除
只有一個玩家也能開始遊戲(左)、另一位玩家還沒準備好無法按下「開始遊戲」(中)、非房主只能按下「準備好了」(右)

自動配對

排位配排位、休閒配休閒

當房間只有房主一人時,按下開始遊戲就會進入配對狀態,系統會尋找同樣處於配對狀態,且遊戲類型相同的房間(排位或休閒),並將其中一個玩家加進另一間房,刪掉那間房,然後開始遊戲。

但如果不到房時,則會等待之後有玩家按下開始遊戲進入配對狀態時,找到我們,同時玩家如果覺得等太久,也能取消配對狀態離開房間。

遊戲自動配對 GIF(左)、等待配對(中)、取消配對(右)

主遊戲畫面

輪流、音效、投降、自動投降

遊戲簡介

玩家輪流進行,每次可以選擇蓋牆或是移動棋子,而每人只有 10 片牆,但蓋牆不能將對手鎖死,一定都要有路可以到對面。棋子無法跳過牆但可跳過對手的棋子,當其中一方的棋子抵達對面時,就贏得了勝利!

遊戲設計

  • 限制時間:每位玩家只有 40 秒可以思考與下棋,當時間到時,會自動換人,以避免有玩家故意掛機,而如果計時是到 0 秒了自動換人,則會視為玩家不在了,下一次的讀秒則改為 8 秒,以避免另一位玩家等太久,當連續 5 次都沒下棋的話,就會自動投降結束遊戲。右下角也會持續顯示輪到誰,以及讀秒。
  • 投降機制:在對局的任何時刻,如果有玩家想要投降,都可以直接輸掉這場遊戲
  • 論流:輪到哪個玩家,那個玩家就會有外框顏色提醒
  • 走棋下一步提示:當點選棋子時,會將下一步可走的位置做閃爍提示
  • 蓋牆:在選擇牆位時,牆的顏色都會調暗,當按下「Build Wall」確定了,才會真正蓋下去變成亮橘色
  • 不同的棋子顏色:房主為藍方,玩家為紅方
  • 音效:移動棋子或蓋牆,都有對應的音效
  • 震動:遊戲結束時,顯示的「You Win」和「You Lose」都有對應的震動,但要實機才有這個功能
  • 遊戲設定:遊玩時都能開啟或關閉震動,與調整背景音樂和音效的音量
  • 遊戲結束畫面:遊戲結束時,會顯示本場輸贏,以及金幣和星星的變化,但如果是休閒則不會顯示,因為沒變化
遊戲對局 GIF(左)、遊戲設定&投降按鈕(中)、遊戲結束畫面(右)

--

--