サウンドネットワークのインタラクティブホワイトボードに基づくマルチプレイヤー数独ゲームの実装方法

この記事の筆者は、サウンドネットワークコミュニティの開発者「tjss」です。Vue のコードテンプレートとSoundNet のインタラクティブホワイトボードに基づいて、複数人での対話をサポートする数独ゲームを作成しました。この記事では、彼の実装プロセスを記録します. 独自のミニゲームやアプリケーションを実装してみてください.

Shengwang Interactive whiteboardの SDK と Window Manager に基づいてシーンウィンドウプラグインを開発し、マルチプレイヤー数独ゲームを実現しました。ゲームでは、すべてのプレイヤーがホワイトボードルームに入り、数独ゲームプラグインを表示し、同時に参加して、部屋にいる友達と一緒に数独問題を解決することができます。

準備

1. Shengwang アカウントを登録し、実名で認証して、バックグラウンドでプロジェクトを作成し、開発に使用する Appid とトークンを取得します。

2. Vue 開発の基本を理解する。

3. Agora のインタラクティブホワイトボード製品、いくつかの基本的なインターフェースと機能を理解するには、公式ドキュメントを読むだけで十分です。

4. 開発環境を構築します。

NodeJs バージョン 16.0.0
@View/cli 4.5.1
VSCode コード開発ツール

インタラクティブホワイトボードサービスを有効にして構成する

まず、実名で認証された Shengwang アカウントが必要です。コンソール (console.agora.io) に入り、Shengwang コンソールでインタラクティブホワイトボードサービスを開きます。

ここで、インタラクティブホワイトボードはサービスとして表示されますが、コンソールはアイテムのリストを表示するだけで、サービスを直接表示しないことに注意してください。

ここに画像の説明を挿入

今回は、まずプロジェクトを作成し、「構成」をクリックしてプロジェクトの詳細を入力すると、中のページでサービスの内容を確認できます。

この時点で、インタラクティブホワイトボードサービスを見つけて、クリックして開きます。私のものはすでにオンになっているため、構成ボタンが表示されます。

ここに画像の説明を挿入

公式ウェブサイトで提供されているコードテンプレートを使用する

現時点では、シーンウィンドウプラグインをゼロから作成する必要はありません. Acoustic Network はコードテンプレートを提供します. このテンプレートに基づいて、インタラクティブホワイトボードで使用するプラグインを簡単に実装できます.

テンプレートのアドレス:

https://github.com/netless-io/community-app-template

開発環境をセットアップしたら、Git または Zip を介してテンプレートコードをダウンロードできます。

README.md の開発環境構成に注意してください。

1. .env ファイルにホワイトボードルームの UUID とトークンを設定します.このディレクトリに .env.example ファイルをコピーし、名前を .env または .env.local に変更し、必要なホワイトボード設定情報を入力してください。Netless Workshopで専用のホワイトボード構成を申請できます。

2. npm install を実行して依存関係をインストールします

3. ローカル開発用に npm start を実行する

プロジェクト構造

Vue版のプラグインテンプレートを元に作成者が開発し、プロジェクトを直接開いてsrcの内容を修正するだけで、基本的にはVueでの開発と同じです。コードが Git コマンドを介してプルされた場合、ブランチを Vue ブランチに切り替える必要があります。

プロジェクトの構造は次のとおりです。

ここに画像の説明を挿入

プレイグラウンドディレクトリは基本的に変更する必要はなく、実装するプラグインは src ディレクトリで完了します。
index.ts ファイルは、プラグイン名など、プラグインのデータ設定です。その他のロジックは基本的に変更する必要はありません。

onst Sudoku: NetlessApp = {
  kind: "Sudoku",
  setup(context) {
    const box = context.getBox();
    box.mountStyles(styles);
    const $content = document.createElement("div");
    $content.className = "app-counter";
    box.mountContent($content);
    const app = createApp(App).provide("context", context);
    app.mount($content);
    context.emitter.on("destroy", () => {
      app.unmount();
    });
  },
};
export default Sudoku;

数独ゲームのルール

数独グリッドは 9x9 のスペースで構成されます。プレイヤーは 1 ～ 9 の数字のみを使用でき、各 3×3 の家には 1 ～ 9 の数字のみを含めることができ、各列には 1 ～ 9 の数字のみを含めることができ、各行には 1 ～ 9 の数字のみを含めることができます。各列または行で 1 回だけ使用できます。すべての数独グリッドが正しい数字で満たされると、ゲームは終了します。（ネットより抜粋）

データ同期の核となる考え方

1. Interactive whiteboard SDK が提供する createStorage メソッドを使用して、数独ボードを初期化してデータを保存し、同時に自分の chessBoard を更新します。

const chessBoard = ref();
const context = inject<AppContext>("context");
const storage = context.createStorage("chessBoard", { chessBoard: ChessBoard.init() });
chessBoard.value = deepCopy(storage.state.chessBoard)

2. Vue インターフェースの onMounted コールバック関数に格納された値の更新モニターを追加して、プレーヤーがグリッドを埋めるときに最新のグリッドデータをブロードキャストし、他のプレーヤーが更新通知を受信して、インターフェースを再レンダリングできるようにします。 .

onMounted(() => {
  initAppData()
  storage.addStateChangedListener((diff) => {
    chessBoard.value = deepCopy(diff.chessBoard?.newValue)
    if (finish(chessBoard.value.gridItems)) {
      statistics(chessBoard.value.gridItems)
      finishTag.value = true
    }
  })
});

3. グリッドを埋めたら、SDK の setState メソッドを使用して数独ボードのデータを更新します。

if (e.data && e.data > 0) {
    grid.number = parseInt(e.data)
    grid.userId = uid.value
    grid.color = rgb
  } else {
    grid.number = 0
    grid.userId = ''
    grid.color = new Rgb(233, 233, 233)
  }
  storage.setState({ chessBoard: chessBoard.value })

数独ゲームインターフェース

作成者は、このインタラクティブゲームのコア機能を実現することを優先しているため、設計されたゲームインターフェイスは比較的シンプルです。

ここに画像の説明を挿入

数独のデータ構造

export class ChessBoard {
    gridItems: GridItem[][]
}

ゲームオーバー後に各プレイヤーが記入したエントリーの数をカウントする必要があるため、グリッド値を更新する際にどのプレイヤーが記入したかも記録されます。デフォルトフィールドは、グリッドが自動的に生成され、プレーヤーが入力する必要がないことを示します。

export class GridItem {
    number: number
    color: Rgb
    userId: string
    default: boolean
}

プロジェクトを実行する

ツールバーの下部にあるボタンをクリックして、実装したプラグインアイコンを見つけ、クリックして開きます。

ここに画像の説明を挿入

プラグインを開くと、数独の問題が初期化され、createStorage メソッドによって保存されます。ルームに入るすべてのプレイヤーはこのデータを取得でき、その後の数独の更新はプレイヤーによって同期的に変更されます。このプロジェクトの焦点は、プラグインの開発とデータの同期について学ぶことであるため、ゲームのインターフェイスとコンテンツは比較的単純です。

ここに画像の説明を挿入

次のステップでは、複数の Web ページを開き、localhost:3000 と入力してインタラクティブホワイトボードルームに入ります。これは、テンプレートの uid がランダムに生成されているためです。これは、さまざまなプレイヤーが入ったことを意味します。

ここに画像の説明を挿入

他のプレーヤーがボックスに記入すると、他のプレーヤーはこのグリッドに記入できなくなり、ゲーム終了時に各プレーヤーが記入した正しい数字がカウントされて表示されます。

ここに画像の説明を挿入

ゲームオーバー

ここに画像の説明を挿入

要約する

公式のシーンベースのプラグインテンプレートを使用して、いくつかの楽しいインタラクティブなシーン機能を簡単に実装できます。この単純なプロジェクトでは、時間が急いでいたため、最適化する時間がありませんでした. 時間があるときに後で磨きます. たとえば、さまざまなプレーヤーが記入した数字は、さまざまな色で区別され、時間制限メカニズムが追加されます。興味のある友達、楽しいリアルタイムインタラクティブ機能を開発しましょう〜

今すぐ Agora SDK にサインアップして、1 か月あたり 10,000 分間無料で使用できます。開発プロセス中に質問がある場合は、Shengwang 開発者コミュニティの公式エンジニアと連絡を取ることができます。