はじめに

この記事は 「MM2025 開発記」 シリーズ第8回です。

前回の記事ではEDGEを使ったゲーム用ドット絵制作について紹介しました。

今回は、Mainクラスはどのような役割をしているのか、どうやって全体管理をしているのか、などについて紹介します。

`Main`クラスの役割

今回作成した応募作品では、

など、いろいろな要素が組み合わさっている。このような複雑な構成の中で、Mainクラスはそれらをまとめる重要な役割を果たしている。

冒頭でも説明したように、今回作成したゲームは大まかに「Canvasを利用したゲーム」部分と「TextAlive App APIを利用した音楽系」部分に分かれている。

このように全く別の処理を行っている2つを、Mainクラスがつなげている。具体的には、TextAliveのイベントを受け取り、「再生位置」「再生終了」といった音楽側の情報を、ゲーム内のイベント（ゴール出現など）に変換している。

例えば、MM2025 開発記 # 6 で解説した、TextAlive App APIを利用して楽曲の情報などを取得する部分・Playerの初期化部分はMainクラスに含まれている。

ここでは、Mainクラスの中の代表的なコードについて少し紹介していく。

index.js

onPlayEnd() {
  console.log("再生終了");
  if (goalX === null) {
    goalX = scrollX + canvas.width - 200;
    gameStarted = true;
    gameLoop();
  }
}

楽曲が終了したらゴール演出へ移動する。
楽曲が終了するのはTextAlive側のイベントだが、それを利用してゲーム全体の処理を行うため、Mainクラスに記述している。

index.js

_resize() {
  canvas.width  = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
}

ゲームプレイヤーごとの設定ではなく、アプリ全体に関わる問題のためMainクラスに記述している。

本作品では、以下のようなグローバル変数を使用している。
本来はクラスにまとめる方が良いとされるが、自分が初心者であり、設計しやすくしたかったため、そっちを優先してゲーム全体の状態はグローバル変数で保持するようにした。

index.js

let taPlayer;
let gameStarted = false;
let score = 0;
let scrollX = 0;

今回の記事では、応募作品におけるMainクラスの役割や、やっていることについて解説しました。

次回は、Canvasゲームループ部分のコードについて紹介していきます。