iT邦幫忙

2023 iThome 鐵人賽

DAY 13
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 13

[Day 13] 為自己的遊戲添加排行榜吧!

  • 分享至 

  • xImage
  •  

今天我們要來介紹,一個跟專案資料庫相關的功能,那就是能夠上傳玩家分數的排行榜,讓即使是只有單人限定的遊戲,也可以通過排行榜來挑戰其他玩家的分數。

為了今天的排行榜,我用最短的時間做出了一個簡單的小遊戲,遊戲方法很簡單,在時間內抓到越多小動物的人,分數就越高。

在正式進入今天的介紹之前,要先確定自己的專案內有加載 Server 這個模組,從專案右側工具列書本上有顆球的圖示(載入模組)就可以查看,由於我們是製作光暈任務的關係,光暈的模組本身就有使用到 Server,所以已經自動的幫我們載入了,但如果是自己新增的空專案,就要額外確認是否有安裝 Server 模組了。

新增排行榜

首先我們要到專案右側的工具列,找到遊戲控制器圖示(資料庫),裡面有一個 玩家分數,這就是我們用來管理排行榜的地方。

點下去之後就會顯示如上圖的視窗,我們點選左上角的 +分數組 來新增一個分數組。

接著可以看到裡面有一些欄位,欄位下方也有一些基本的介紹,我們最主要需要填寫的,只有上面三個欄位,也就是 分數代碼分數標題分數排名長度,代碼的用途我們前陣子已經介紹及使用了不少次,標題固然就是給玩家們看的排行榜名字,長度則代表在遊戲成品頁面時,排行榜能同時顯示的資料筆數,最多似乎是 30 筆,而最下方的 排序方式,由於我們是分數越高的人越厲害,所以就是由高到低。

至於 兌換遊戲幣匯率,這是用於讓玩家根據分數得到遊戲幣的功能,因為 CG 上的資料庫還提供了商店系統,讓專案作者可以新增道具,並於商店中販售,所以才會有此功能,但我們暫時還不會用到,改天有機會的話我們再來跟商店系統一起介紹吧~

回到圖中,我在代碼部分填寫了 animal_score,而標題就是寫「動物分數」,因為小遊戲的分數是抓動物得到的,所以取這樣,排名長度的話我則設定了 20,這可以根據個人喜好去填,如果你說:「只有前三名有資格站在舞台上!」,那也可以設定為 3。

設定好之後儲存,就可以看到我們成功新增了一個分數組了,一個專案最多可以新增 100 個分數組,如果哪天有個分數組沒有要留了,或是代碼填錯的,也可以利用後方的垃圾桶按鈕移除。

上傳玩家分數

接著我們要來將玩家的分數上傳到專案資料庫中,首先是要找到用來處理遊戲結束的事件,因為遊戲結算通常都是在這個時候,確定遊戲結束且玩家的分數不再變動的時候,就可以將玩家的分數上傳了。

上圖就是我這次事件表中,處理遊戲結束的事件,就是當遊戲時間到的時候會暫停遊戲,並顯示玩家的分數後,結束遊戲,我們要在遊戲結束前將玩家的分數上傳,所以我們來新增動作 上傳玩家分數,在動作目錄 伺服器/分數 中。

上傳分數的玩家ID 我們可以直接填寫 {me.id},這個東西我在成品實作那一天有使用到,但是忘了介紹,me 是一個變數,但它不同於我之前所介紹的字串、數字、布林值,它裡面還可以儲存其他變數,是一種叫做 物件 的型別,這個比較複雜一點,改天我們再來詳談,總之 me 裡面有一些當前玩家的相關資料,例如 id、username、name 等等,而我們這次要取得的是儲存在 me 裡面的 id,也就是玩家代碼,所以我們在這個欄位填寫 {me.id},系統就知道我們要上傳分數的對象是目前正在遊玩的玩家了。

分數代碼,就是我們剛剛新增分數組時定義的分數代碼,只要填寫對應的代碼即可。

再來就是 玩家的分數 了,由於玩家分數是一個會隨時變動的數字,所以我在遊戲開始時就定義了一個變數叫做 score,代表分數的意思,這樣我就可以在玩家擊倒小動物時,讓變數的值增加,來達到得分、記錄分數的效果,所以在這個欄位,自然是要取出變數內的數字,因此我填寫了 {score}

上傳分數的計算方式 我們使用預設的 最高分,這樣只有在玩家的分數比之前的分數還高時,才會覆蓋掉之前的分數,其他就都不用改了,如果你想要鼓勵玩家,也可以改變下方對話框內的訊息內容。

確認新增動作之後,我們將該動作拉到 任務完成 的上方,這樣就可以確保當玩家的分數上傳完畢之後,才會執行任務完成的動作。

都設定好了之後我們就可以來玩一次,測試一下分數到底有沒有被上傳成功拉~

我得到了 470 分,看起來還行,點擊 排行榜 就可以看到其他人的分數了。

除了結算時彈出來的視窗可以看到排行榜以外,在遊戲成品的專屬網址中,也可以在右下角的地方看到排行榜,如果有多個排行榜,也可以點擊分數標題開啟下拉式選單,就可以選擇要查看的排行榜了。

CG 範例事件表

總結

今天介紹了如何使用 CG 專案內的分數組,也就是排行榜功能,當你的專案製作了一些有分數的小遊戲時,不妨就可以為你的小遊戲添加一個排行榜,讓玩家們有一個可以突破的目標,也可以促進玩家們遊玩小遊戲的慾望呢!


上一篇
[Day 12] 設定專案封面、將成品發布到 Gamelet.online
下一篇
[Day 14] 每位勇者都需要一枚勳章
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言