あの大人気ゲームをHTMLとjsで再現してみる

こんにちは、株式会社カドベヤの幅です
前回の投稿から滅茶苦茶間が空いてしまいました

こんにちは、株式会社カドベヤでエンジニアをしております幅です前回の投稿を読んでくださった方、ありがとうございますもしまだでしたら以下から読めるので良ければ読んでみてください。時事ネタなので今読んでも微妙かもしれませんが... 突然ですが、皆さんはゲームは好きですか？私はもっぱらオフラインでできるソロゲームをプレイしているのですが、今一番楽しみにしているタイトルといえば、ゼルダの伝説ティアーズオブザキングダムですね前作のブレスオブザワイルドがゲーム史に名を残すであろうレベルの大ヒット作

https://note.com/haba124/n/n04ef1841150a

この記事を書いている現在は「そろそろ次の書いてください」って言われてから2か月くらい経っています…本当にすみません…

実は別の記事を書いていたのですが難産となっていまして、一旦代わりに簡単に書けそうな記事でお茶を濁そうと思っています（書きかけのやつも次にちゃんと完成させたいです）

さて、自分はVtuber大好き人間なのですが、今Vtuber界隈で一番熱いゲームと言えば何かご存知でしょうか？そうです、スイカゲームです

画像はストアサイト（https://store-jp.nintendo.com/list/software/70010000043363.html）より

2021年にswitchで販売開始したこのゲームは紆余曲折あって2023年9月の中頃から爆発的に流行っていますね
単純明快なルール・かわいいUI・完全な実力ゲームにならない絶妙な運要素などが人気の鍵でしょうか？
自分はハイスコア3197を一回だけ出せましたが正直全然安定しません

さて、このゲームの配信を見たり自分でプレイしたりしながら、あるとき（二日前）自分は思いました

「これ物理演算ゲームのチュートリアルに良さそうだし自分でそれっぽいの作ってみるか（そしてそれを投稿のネタにしよう）」

というわけでやってみようと思います
7年目のエンジニアが作ったとは思えないお粗末な出来になると思いますが、1人日クオリティなのでご容赦ください
多分世の中的にはインターン生とかがこういうの作らされるんだろうな…

あと、今回の記事はバリバリにコード書くので、そのあたり何もご存知無い方からするとかなりつまらない内容かもです。ごめんなさい…

ふわっと要件定義と技術選定

ゲーム名までパクると良くないので、とりあえずバブルゲームという仮名で進めます。球体のものでくっつく感じが泡っぽいので…

さてバブルゲームを作る上で満たすべき項目を考えます。今回は参考元があるのでそこから要素を抽出しつつある程度簡略化していきます

箱型のフィールドがある
フィールドをクリックしてゲーム開始
クリックでフィールド上部からバブルを落とすことができる
同じ大きさのバブルが2つくっつくと消滅し、一回り大きい新しいバブルがその場に出来る
バブルが一定の高さ以上に積まれるとゲームオーバー
- クリックしてリスタートできる

とりあえずこんなところでしょうか？多分開発してたらもっと決めるべきことが出てきそうですがとりあえず進めます

技術ですがシンプルにHTML＋jsでやります。お遊びプロジェクトなのでビルドとかサーバー構築とか絶対にやりたくないです。できるだけシンプルにします

さてこのゲームを作成する上で一番大事なのは物理演算をどうやるのかですが、これも真面目に考えると時間がいくらあっても足りないので世にあるライブラリを使います。
検索してみたらMatter.jsというライブラリが人気だったので素直にそれに乗っかることにしました

コーディング開始

とりあえず適当にhtmlを書きます。というかテンプレをコピーして適当に弄ります

<!DOCTYPE html>

<html>

  <head>

    <title>Bubble Game</title>

    <meta charset="UTF-8" />

    <script src="

    https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js

    "></script>

    <script src="./main.js"></script>

    <link rel="stylesheet" type="text/css" href="./index.css" media="screen" />

  </head>



  <body>

    <div class="main">

      <div class="container">

      </div>

    </div>

  </body>

</html>

Matter.jsはCDNで配布されているのでそれをscriptタグで読み込んでいます。これでmain.js側でMatter.jsのコードを使えるはずです
bodyにはとりあえずmainのdivとゲーム画面を配置するためのcontainerのdivを作りました
cssはとりあえずcontainerを真ん中に置いてます。ゲーム画面のサイズは適当に縦長の長方形にしてます。relativeなのは多分そうした方があとでゲーム画面に重ねてゲームオーバーのメッセージとかをabsoluteで出しやすいだろうなという予想です

.container {

  position: relative;

  width: 420px;

  height: 700px;

  margin: 100px auto;

}

クラスを作る

こういうのを書くときに大枠からやる人と細部からやる人と2パターンいると思いますが、自分は前者のタイプです。なのでまず「こうだったらいいな」を書きます

// ゲームを管理するクラス

class BubbeGame{

  constructor(){}



  init(){}

}



window.onload = () => {

  // とりあえずゲーム作成

  const game = new BubbeGame()

  // とりあえず初期化すると思う

  game.init()

}

コンストラクタと初期化メソッドは役割が被っているようにも見えますが、ゲームを描画する場所の指定やゲームエンジンの初期化・登録はコンストラクタで行い、initでは画面描画の初期化や得点のリセットなどを行う予定です

ではコンストラクタを書きます。Matter.jsのチュートリアルを見ましたが、どうやらEngine,Render,Runnerあたりの登録が必要そうで、Renderの初期化時に描画先のHTML要素を指定してあげるみたいです。なのでそんな感じで書きます

const { Engine, Render, Runner } = Matter; // Matter.jsからとってくる



const WIDTH = 420; // 横幅

const HEIGHT = 700; // 鷹さ



class BubbeGame {

  engine;

  render;

  runner;

  constructor(container) {

    this.engine = Engine.create();

    this.render = Render.create({

      element: container,

      engine: this.engine,

      options: {

        width: WIDTH,

        height: HEIGHT,

      },

    });

    this.runner = Runner.create();

    Render.run(this.render);

    Runner.run(this.runner, this.engine);

  }



  init() {}

}



window.onload = () => {

  const container = document.querySelector(".container");

  // とりあえずゲーム作成

  const game = new BubbeGame(container);

  // とりあえず初期化すると思う

  game.init();

}

はい、この時点で何もないゲーム画面がページ上に出現しました

第一歩を踏み出せた感じがある

デフォルトで黒で塗りつぶしなようです。面倒なのでこのままにします
initの中身はいったん置いといて、ではクリックで球体を召喚できるようにしてみましょう

球体をつくる

Matter.jsではオブジェクトの作成はBodyクラスのメソッドから行いますが、四角形や円形などの簡単な形はBodiesにショートカットがあるみたいです
作成したオブジェクトはCompositeというクラスのaddメソッドで描画先とオブジェクトを指定することで可能になるようです

class BubbeGame {

  constructor(container) {

　  /* 略 */

    // クリック時の制御メソッドを登録

    container.addEventListener("click", this.handleClick.bind(this));

  }

 

  handleClick() {

    // 描画位置のX座標、y座標、円の半径を渡す

    const bubble = Bodies.circle(WIDTH / 2, 30, 20);

    Composite.add(this.engine.world, [bubble]);

  }

}

重力とか勝手にやってくれるの助かる

はい、球体が描画され、重力に従って落ちていくようになりました！
この時点で目標の3分の1くらい達成していると思います

壁を作る

このままだと落ちてしまうので画面上に地面と壁を作りましょう。
この処理は多分init内で書くといい感じになりそうです

  init() {

    // リセット時も使うので一旦全部消す

    Composite.clear(this.engine.world);



    // 地面と壁作成

    // 矩形の場合X座標、Y座標、横幅、高さの順に指定、最後にオプションを設定できる

    const ground = Bodies.rectangle(

      WIDTH / 2,

      HEIGHT - WALL_T / 2,

      WIDTH,

      WALL_T,

      {

        isStatic: true,

        label: "ground",

      }

    );

    const leftWall = Bodies.rectangle(WALL_T / 2, HEIGHT / 2, WALL_T, HEIGHT, {

      isStatic: true,

      label: "leftWall",

    });

    const rightWall = Bodies.rectangle(

      WIDTH - WALL_T / 2,

      HEIGHT / 2,

      WALL_T,

      HEIGHT,

      {

        isStatic: true,

        label: "rightWall",

      }

    );

    // 地面と壁を描画

    Composite.add(this.engine.world, [ground, leftWall, rightWall]);

  }

WALL_Tは壁の厚さで10を設定しています
壁は固定オブジェクトなのでisStatic: trueを渡します、これで壁が落ちることはありません
エディタのフォーマットで改行がそろってませんがとりあえずこれで壁が召喚出来てバブルが底にたまるようになります

動画撮るの忘れた

衝突させる

さて、いよいよこのゲームで一番大事な部分となる衝突時の処理です
とはいってもMatter.jsはデフォルトのエンジンでいい感じに衝突や跳ね返りの挙動はやってくれるので基本はそのままで大丈夫そうです
なので、「同じ大きさのバブルが衝突したら合体して大きくなる」というルールについてだけ追加していきたいと思います

まず、バブル作成時の処理でラベルを追加します。これは衝突したのが壁なのかバブルなのかを区別できるようにするためです

  handleClick() {

    const bubble = Bodies.circle(WIDTH / 2, 30, 20, {

      label: "bubble_0", // この0はサイズ識別子

    });

    Composite.add(this.engine.world, [bubble]);

  }

Matter.jsではEventsクラスのメソッドで衝突判定や描画更新といったイベントの際のハンドラを設定できますのでこれをコンストラクタで登録します

  constructor(container) {

　  /* 略 */

    // 衝突判定のタイミングごとに行ってほしいメソッドを登録

    Events.on(this.engine, "collisionStart", this.handleCollision.bind(this));

  }

handleCollisionの中身はややこしいのですが、まず引数としてpairsという名前の変数が与えられます。これはその判定時に得られた衝突の組み合わせすべての情報が入っている配列です。
各pair内には衝突した物体Ａと物体Ｂについての情報があります。座標や速度、作成時に付与したラベルなどです
というわけでやることは以下の通りです

pairsを全部forで回し、衝突がどのオブジェクトによるものなのかをチェックする
衝突がバブル同士かつ同じサイズの場合、2つのバブルを消す
2つのバブルがあった中間の座標に、一回り大きいバブルを作る

これをコードにしたのが以下の通りです

  handleCollision({ pairs }){

    for (const pair of pairs) {

      const { bodyA, bodyB } = pair;

      if (bodyA.label === bodyB.label && bodyA.label.startsWith("bubble_")) {

        const currentBubbleLevel = Number(bodyA.label.substring(7)); // この辺めっちゃ雑

        const newLevel = currentBubbleLevel + 1;

        const newX = (bodyA.position.x + bodyB.position.x) / 2;

        const newY = (bodyA.position.y + bodyB.position.y) / 2;

        const newRadius = newLevel * 10 + 20;

        const newBubble = Bodies.circle(newX, newY, newRadius, {

          label: "bubble_" + newLevel,

        });



        Composite.remove(this.engine.world, [bodyA, bodyB]);

        Composite.add(this.engine.world, [newBubble]);

      }

    }

  }