iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
Modern Web

派對動物嗨起來!系列 第 29

D29 - 結束是另一個開始

  • 分享至 

  • xImage
  •  

本系列文已改編成書「甚麼?網頁也可以做派對遊戲?使用 Vue 和 babylon.js 打造 3D 派對遊戲吧!」

書中不只重構了程式架構、改善了介面設計,還新增了 2 個新遊戲呦!ˋ( ° ▽、° )

新遊戲分別使用了陀螺儀與震動回饋,趕快買書來研究研究吧!ლ(╹∀╹ლ)

在此感謝深智數位的協助,歡迎大家前往購書,鱈魚感謝大家 (。・∀・)。

助教:「所以到底差在哪啊?沒圖沒真相,被你坑了都不知道。(´。_。`)」

鱈魚:「你對我是不是有甚麼很深的偏見啊 (っ °Д °;)っ,來人啊,上連結!」

Yes


遊戲狂歡後,我們現在回到大廳了。

最後的最後讓我們完成大廳的「結束派對」按鈕吧。

在 use-client-game-console 新增結束派對的功能。

src\composables\use-client-game-console.ts

...
import { RouteName } from '../router/router';
...
import { useRouter } from 'vue-router';

export function useClientGameConsole() {
  ...

  function endParty() {
    client?.value?.disconnect();
    router.push({
      name: RouteName.HOME
    });
  }
  return {
    ...
    endParty,
  }
}

現在回到大廳組件,實現結束派對功能。

src\views\game-console-lobby.vue

<template>
  ...
  <div class="absolute inset-0 flex">
    <div class="flex w-full h-full">
      <!-- 選單 -->
      <div class="w-1/3 flex flex-col p-12">
        <div class="flex flex-col flex-1 justify-center items-center gap-14">
          ...
          <btn-base
            :ref="mountElement"
            label="結束派對"
            ...
            @click="endParty"
          >
            ...
          </btn-base>
        </div>
        ...
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
...
async function startParty() {...}

function endParty() {
  gameConsole.setStatus('home');
  gameConsole.endParty();
}
...
</script>
...

現在選擇「結束派對」,不只遊戲機網頁會回到首頁,所有的玩家的搖桿頁面也會自動跳回至首頁了。

感謝所有讀者一同參與的 30 天派對之旅,其實派對還沒結束,只要保持赤子之心,繼續更新遊戲,我們就能一直嗨下去。✧*。٩(ˊᗜˋ*)و✧*。

在這次專案中,盡可能保持簡單,所以省略了許多功能,若大家有興趣可以加入更多細節,例如:

  • 玩家網頁意外斷線後,重啟網頁,會詢問玩家是否重新加入先前遊戲室
  • 玩家可自訂名稱與頭像
  • 新增遊戲排名,每個玩家可以依據排名得分
  • 新增玩家個人資料系統,玩家可以查看玩過甚麼遊戲、累積得分、累積遊玩時間與成就獎章等等資訊

等等更多可能性!ヽ(●`∀´●)ノ

那就有緣的話,讓我們明年鐵人賽再見囉!(´,,•ω•,,)

總結

  • 完成結束派對功能
  • 探討更多可能

以上程式碼已同步至 GitLab,大家可以前往下載:

GitLab - D29


上一篇
D28 - 第一隻企鵝
下一篇
D30 - 花絮和閒聊
系列文
派對動物嗨起來!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Isha Wang
iT邦新手 5 級 ‧ 2022-10-13 16:07:23

很精彩的分享,恭喜完賽!

鱈魚 iT邦研究生 5 級 ‧ 2022-10-13 16:33:40 檢舉

感謝支持 ♪(´▽`)

我要留言

立即登入留言