Rails7.0 | Railsでゲームを作成 | 06 | スタート画面 - 学生向けプログラミング入門

【05 | Spritesとゲームリソース】 << 【ホーム】 >> 【07 | フロアマップ】

↓↓クリックして頂けると励みになります。

スタート画面を作ります。

「frontend/game.js」ファイルを以下のように編集します。

記述編集　【RailsGame/frontend/game.js】

// initilize context
kaboom({
    scale: 3,
    width: 240,
    height: 160,
    background: [0, 0, 0],
    canvas: document.getElementById("screen"),
  });
 
loadSprite("floor", "/sprites/floor.png", { sliceX: 8 });

scene("play", () => {
    // 10x10　半角スペース10
    addLevel(
      [
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
        "          ",
      ],
      {
        width: 16,
        height: 16,
        " ": () => [sprite("floor", { frame: ~~rand(0, 8) })],
      }
    )
});

go("play");