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

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

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

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

助教：「所以到底差在哪啊？沒圖沒真相，被你坑了都不知道。(´。＿。｀)」

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

現在讓我們追加一下搖桿訊號的 KeyName 定義。

• x-axis：X 軸訊號
• y-axis：Y 軸訊號
• a：通用按鍵，在企鵝遊戲中是攻擊按鍵

src\types\player.type.ts

/** 按鍵類型 */
export enum KeyName {
  ...
  A = 'a',
  X_AXIS = 'x-axis',
  Y_AXIS = 'y-axis',
}
...

最後讓我們加入將搖桿訊號發送至遊戲機的部分吧。

src\views\player-gamepad-the-first-penguin.vue

...
<script setup lang="ts">
...
function handleAnalogStickTrigger(data: { x: number, y: number }) {
  console.log(`[ handleAnalogStickTrigger ] : `, data);

  player.emitGamepadData([
    {
      name: 'x-axis',
      value: data.x,
    },
    {
      name: 'y-axis',
      value: data.y,
    }
  ]);
}
...
</script>
...

其實只要加上 emitGamepadData 就完成了！◝(≧∀≦)◟

最後將原本的確定按鈕改成 A 按鈕。

src\views\player-gamepad-the-first-penguin.vue

<template>
  <div ... >
    ...
    <gamepad-btn
      class="absolute bottom-10 right-20"
      size="6rem"
      @trigger="(status) => handleBtnTrigger('a', status)"
    >
      <div class="text-9xl">
        A
      </div>
    </gamepad-btn>
    ...
  </div>
</template>
...

回到最外層的玩家搖桿容器中，加入跳轉至企鵝遊戲搖桿的邏輯吧。

src\views\player-gamepad.vue

...
<script setup lang="ts">
...

function init() {
  ...
  player.onGameConsoleStateUpdate((state) => {
    const { status, gameName } = state;
    ...
    if (status === 'lobby') { ... }

    if (gameConsoleStore.status !== 'playing') return;

    console.log(`[ onStateUpdate ] gameName : `, gameName);
    if (gameName === 'the-first-penguin') {
      router.push({
        name: RouteName.PLAYER_GAMEPAD_THE_FIRST_PENGUIN
      });
    }
  });

  player.requestGameConsoleState();
}
init();
</script>
...

記得回復呼叫 init()。

同時也要回復遊戲機頁面容器的跳轉功能。

src\views\game-console.vue

<script setup lang="ts">
...
function init() {
  // 房間 ID 不存在，跳回首頁
  if (!gameConsoleStore.roomId) {
    router.push({
      name: RouteName.HOME
    });
    loading.hide();
    return;
  }

  gameConsole.onPlayerUpdate((players) => {
    gameConsoleStore.updateState({
      players,
    });
  });

  // 跳轉至遊戲大通
  router.push({
    name: RouteName.GAME_CONSOLE_LOBBY
  });
}
init();
</script>

現在讓我們建立房間，並選擇開始遊戲看看。

可以發現進入遊戲後玩家搖桿畫面自動切換成類比搖桿了！✧*｡٩(ˊᗜˋ*)و✧*｡

現在讓我們在企鵝遊戲場景中監聽並取得玩家搖桿資料並取代原本鍵盤控制事件。

src\games\the-first-penguin\game-scene.vue

...
<script setup lang="ts">
...
import { useClientGameConsole } from '../../composables/use-client-game-console';
...
const gameConsole = useClientGameConsole();
...
function initGamepadEvent() {
  gameConsole.onGamepadData((data) => {
    console.log('[ gameConsole.onGamepadData ] data : ', data);
  });
}
async function init() {
  ...

  initGamepadEvent();

  ...
}
...
</script>

現在遊戲機網頁可以收到來自玩家搖桿網頁的控制訊號了。

助教：「我有個問題…」

鱈魚：「你是不是想問：『伺服器沒有新增搖桿資料定義沒問題嗎？』」

助教：「不…」

鱈魚：「因為伺服器會轉送所有資料，所以就結果來說才沒關係，不過當然是新增一下最好啦(´,,•ω•,,)」

助教：「不，我是想問這篇怎麼這麼短 (°c＿°`)」

鱈魚：「這是怕大家消化不良的貼心刪減(。・ω・。)」

助教：「…(°c＿°`)」

總結

• 完成發送類比搖桿資料
• 完成遊戲機網頁接收玩家搖桿網頁控制訊號。

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

GitLab - D26