ローグライクゲーム's game | AI game creator

Click here for free DL of the app version that can save data.

No:12759

96

ローグライクゲーム
Developer User4403｜Date and time 23/8/22 23:46:16
Build time 22.794 sec｜Game capacity 3.407KB｜

了解です。以下にローグライクゲームのサンプルプログラムを示します。

このサンプルでは、mapという変数にゲームのマップ情報を保持し、playerという変数にプレイヤーの位置情報を保持しています。drawMap関数では、mapの情報を元にHTML上でマップを描画しています。movePlayer関数では、与えられた方向に移動可能であればプレイヤーを移動させ、drawMap関数を呼び出して再描画します。キーボード操作によりプレイヤーを移動させることができます。このサンプルはスマートフォンで操作することを前提としておらず、キーボード操作でプレイヤーを移動させます。スマートフォンでのタッチ操作に対応させる場合、適宜書き換える必要があります。また、絵文字は一部のデバイスやブラウザでは表示されない場合がありますので、その点にもご注意ください。

→ 　

0　

0　

　
　
　
　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

了解です。以下にローグライクゲームのサンプルプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Roguelike Game</title>
</head>
<body>
  <div id="game"></div>

<script>
    // ゲームオブジェクト
    const game = {
      map: [
        "########",
        "#......#",
        "#..@...#",
        "#......#",
        "########"
      ],
      player: {
        x: 3,
        y: 2
      },
      drawMap: function() {
        let output = "";
        for (let i = 0; i < this.map.length; i++) {
          output += "<div class='row'>";
          for (let j = 0; j < this.map[i].length; j++) {
            if (this.player.x === j && this.player.y === i) {
              output += "👦";
            } else if (this.map[i][j] === "#") {
              output += "🧱";
            } else if (this.map[i][j] === ".") {
              output += "　";
            }
          }
          output += "</div>";
        }
        document.getElementById("game").innerHTML = output;
      },
      movePlayer: function(direction) {
        switch (direction) {
          case "up":
            if (this.map[this.player.y - 1][this.player.x] === ".") {
              this.player.y--;
            }
            break;
          case "down":
            if (this.map[this.player.y + 1][this.player.x] === ".") {
              this.player.y++;
            }
            break;
          case "left":
            if (this.map[this.player.y][this.player.x - 1] === ".") {
              this.player.x--;
            }
            break;
          case "right":
            if (this.map[this.player.y][this.player.x + 1] === ".") {
              this.player.x++;
            }
            break;
        }
        this.drawMap();
      }
    };

// キーボード操作によるプレイヤーの移動
    document.addEventListener("keydown", function(event) {
      let direction = "";
      switch (event.keyCode) {
        case 37: // left arrow key
          direction = "left";
          break;
        case 38: // up arrow key
          direction = "up";
          break;
        case 39: // right arrow key
          direction = "right";
          break;
        case 40: // down arrow key
          direction = "down";
          break;
      }
      game.movePlayer(direction);
    });

// 初期描画
    game.drawMap();
  </script>

<style>
    .row {
      line-height: 25px;
    }
  </style>
</body>
</html>
```

このサンプルでは、mapという変数にゲームのマップ情報を保持し、playerという変数にプレイヤーの位置情報を保持しています。drawMap関数では、mapの情報を元にHTML上でマップを描画しています。movePlayer関数では、与えられた方向に移動可能であればプレイヤーを移動させ、drawMap関数を呼び出して再描画します。キーボード操作によりプレイヤーを移動させることができます。

このサンプルはスマートフォンで操作することを前提としておらず、キーボード操作でプレイヤーを移動させます。スマートフォンでのタッチ操作に対応させる場合、適宜書き換える必要があります。また、絵文字は一部のデバイスやブラウザでは表示されない場合がありますので、その点にもご注意ください。