オブジェクト移動ゲーム

このゲームは、矢印キーでプレイヤーを移動させ、落下するオブジェクトを避けるという内容です。オブジェクトに当たるとゲームオーバーになります。スマートフォンでもプレイ可能で、絵文字を使用していませんが、部分的にゲーム化したものとなっています。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

オブジェクト移動ゲームを作ります。

以下が実際のプログラムです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オブジェクト移動ゲーム</title>
</head>
<body>
  <h1>オブジェクト移動ゲーム</h1>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

let x = canvas.width / 2;
    let y = canvas.height - 30;
    let dx = 0;
    let dy = 0;

const objectWidth = 50;
    const objectHeight = 50;
    let objectX = (canvas.width - objectWidth) / 2;
    let objectY = 0;
    const objectSpeed = 2;

function drawObject() {
      ctx.beginPath();
      ctx.rect(objectX, objectY, objectWidth, objectHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawObject();

if (objectY + objectHeight >= canvas.height) {
        alert("Game over!");
        document.location.reload();
      }

if (x + dx < 0 || x + dx > canvas.width) {
        dx = -dx;
      }
      if (y + dy < 0 || y + dy > canvas.height) {
        dy = -dy;
      }
      x += dx;
      y += dy;

if (objectY + objectHeight >= y && objectX >= x && objectX + objectWidth <= x + objectWidth) {
        dy = -dy;
      }

objectY += objectSpeed;

requestAnimationFrame(draw);
    }

draw();

function keyUpHandler(event) {
      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        dx = 0;
      }
      else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
        dy = 0;
      }
    }

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
  </script>
</body>
</html>
```

このゲームは、矢印キーでプレイヤーを移動させ、落下するオブジェクトを避けるという内容です。オブジェクトに当たるとゲームオーバーになります。

スマートフォンでもプレイ可能で、絵文字を使用していませんが、部分的にゲーム化したものとなっています。