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

No:2480

129

Games like Metroidvania
Developer User3567｜Date and time 23/6/21 17:11:32
Build time 99.954 sec｜Game capacity 6.079KB｜

例えば、「エモの冒険」というタイトルのゲームを作ることにします。プレイヤーはエモというキャラクターになり、迷宮のような洞窟を冒険しながらモンスターを倒し、アイテムを集めて最終的にはボスを倒すことが目的です。まず、HTMLファイルを作成します。以下のように、画面上部にはスコアやアイテムの情報を表示し、下部にはゲーム画面を表示する枠を用意します。また、操作方法等を示す文章をページ上部に表示します。

エモの冒険

矢印キー：移動 / スペースキー：ジャンプ / Zキー：攻撃

SCORE：0　ITEM：0

次に、JavaScriptファイルを作成します。以下のように、プレイヤーの情報（座標、スピード、HPなど）やモンスターやアイテムの情報を定義し、画面上に表示するための関数や操作方法を設定します。以上のように、HTMLとJavaScriptを組み合わせて「エモの冒険」というゲームを作成しました。プレイヤーは矢印キーで移動し、スペースキーでジャンプ、Zキーで攻撃を行うことができます。迷宮のような洞窟を進み、モンスターやアイテムを集めながら最終的にはボスを倒しましょう！

→ 　

0　

0　

　

　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

例えば、「エモの冒険」というタイトルのゲームを作ることにします。プレイヤーはエモというキャラクターになり、迷宮のような洞窟を冒険しながらモンスターを倒し、アイテムを集めて最終的にはボスを倒すことが目的です。

まず、HTMLファイルを作成します。以下のように、画面上部にはスコアやアイテムの情報を表示し、下部にはゲーム画面を表示する枠を用意します。また、操作方法等を示す文章をページ上部に表示します。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>エモの冒険</title>
    <style>
      /* CSSでスタイルを指定 */
      body {
        background-color: #e5e5e5;
        padding: 0;
        margin: 0;
      }
      #info {
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
      }
      #game {
        background-color: #fff;
        border: 3px solid #333;
        margin: 0 auto;
        width: 90%;
        height: 80vh;
      }
    </style>
  </head>
  <body>
    <div id="info">
      <h1>エモの冒険</h1>
      <p>矢印キー：移動 / スペースキー：ジャンプ / Zキー：攻撃</p>
      <p>SCORE：0　ITEM：0</p>
    </div>
    <div id="game"></div>

<script src="game.js"></script>
  </body>
</html>
```

次に、JavaScriptファイルを作成します。以下のように、プレイヤーの情報（座標、スピード、HPなど）やモンスターやアイテムの情報を定義し、画面上に表示するための関数や操作方法を設定します。

```
// キャンバスの取得
const canvas = document.getElementById("game");
const context = canvas.getContext("2d");

// ゲームの情報（プレイヤー、モンスター、アイテムなど）
const player = {
  x: 50,
  y: 100,
  width: 50,
  height: 50,
  speed: 7,
  jumpSpeed: 17,
  jumpHeight: 200,
  dx: 0,
  dy: 0,
  jumping: false,
  grounded: false,
  hp: 100,
  damage: 10,
};
const monsters = [
  {
    x: 550,
    y: canvas.height - 100,
    width: 50,
    height: 50,
    speed: 5,
    hp: 30,
    damage: 5,
  },
];
const items = [
  {
    x: 400,
    y: canvas.height - 200,
    width: 50,
    height: 50,
    type: "health",
    value: 50,
  },
];

// キー操作の設定
const keys = {
  Space: false,
  ArrowLeft: false,
  ArrowRight: false,
  KeyZ: false,
};
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);

function keyDown(event) {
  if (event.code in keys) {
    keys[event.code] = true;
  }
}
function keyUp(event) {
  if (event.code in keys) {
    keys[event.code] = false;
  }
}

// プレイヤーの操作と移動などの処理
function updatePlayer() {
  if (keys.ArrowLeft) {
    player.dx = -player.speed;
  } else if (keys.ArrowRight) {
    player.dx = player.speed;
  } else {
    player.dx = 0;
  }
  if (keys.Space && !player.jumping && player.grounded) {
    player.dy = -player.jumpSpeed;
    player.jumping = true;
    player.grounded = false;
  }
  if (keys.KeyZ) {
    // 攻撃ボタンが押されたときの処理
  }

player.x += player.dx;
  player.y += player.dy;

// 画面の端に行った場合の処理（今回は反対側へ強制移動）
  if (player.x < -player.width) {
    player.x = canvas.width;
  } else if (player.x > canvas.width) {
    player.x = -player.width;
  }

// プレイヤーがジャンプ中の場合の処理
  if (player.jumping) {
    player.dy += 1; // ジャンプ中は重力を加算
    if (player.y > player.jumpHeight) {
      player.jumping = false;
    }
  }

// 画面下に落ちた場合の処理（プレイヤーのHPを減らす）
  if (player.y > canvas.height) {
    player.hp -= 10;
    player.x = 50;
    player.y = 100;
    player.dx = 0;
    player.dy = 0;
    player.jumping = false;
    player.grounded = false;
  }

// 画面にプレイヤーを描画
  context.fillStyle = "orange";
  context.fillRect(player.x, player.y, player.width, player.height);
}

// モンスターの移動などの処理
function updateMonsters() {
  monsters.forEach(function (monster) {
    // モンスターがプレイヤーの方向に向きを変える
    if (player.x < monster.x) {
      monster.dx = -monster.speed;
    } else {
      monster.dx = monster.speed;
    }

monster.x += monster.dx;

// 画面にモンスターを描画
    context.fillStyle = "green";
    context.fillRect(monster.x, monster.y, monster.width, monster.height);
  });
}

// アイテムの処理
function updateItems() {
  items.forEach(function (item, index) {
    // プレイヤーがアイテムに触れた場合の処理
    if (
      player.x < item.x + item.width &&
      player.x + player.width > item.x &&
      player.y < item.y + item.height &&
      player.y + player.height > item.y
    ) {
      if (item.type === "health") {
        player.hp += item.value;
      }
      items.splice(index, 1);
    }

// 画面にアイテムを描画
    context.fillStyle = "yellow";
    context.fillRect(item.x, item.y, item.width, item.height);
  });
}

// ゲームのループ
function loop() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  updatePlayer();
  updateMonsters();
  updateItems();
  context.fillText(`SCORE：${player.score}　ITEM：${player.items}`, 10, 30);

// プレイヤーのHPが0になった場合の処理
  if (player.hp <= 0) {
    alert("ゲームオーバー！");
    location.reload();
  }

requestAnimationFrame(loop);
}

requestAnimationFrame(loop);
```

以上のように、HTMLとJavaScriptを組み合わせて「エモの冒険」というゲームを作成しました。プレイヤーは矢印キーで移動し、スペースキーでジャンプ、Zキーで攻撃を行うことができます。迷宮のような洞窟を進み、モンスターやアイテムを集めながら最終的にはボスを倒しましょう！