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

No:6831

130

←

Prev Next

→

Back to the Future
Developer User3898｜Date and time 23/7/3 22:08:38
Build time 29.618 sec｜Game capacity 2.246KB｜

Script

了解しました。では、「バックトゥザフューチャー」というゲームを作成します。このゲームでは、プレイヤーがタイムマシンを操作して未来に戻ることを目指します。以下が実装例です。

バックトゥザフューチャー

このプログラムでは、キーボードの矢印キーでタイムマシンを操作できます。タイムマシンはキャンバス上で操作可能な四角形として表示され、キー操作に応じて移動します。毎フレームごとにキャンバスをクリアし、タイムマシンを描画し続けることでアニメーションが実現されます。このゲームはシンプルな操作で遊べる部分的なゲーム化となっています。ご参考までにご確認ください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。では、「バックトゥザフューチャー」というゲームを作成します。このゲームでは、プレイヤーがタイムマシンを操作して未来に戻ることを目指します。

以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>バックトゥザフューチャー</title>
</head>
<body>
  <h1>バックトゥザフューチャー</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

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

function drawTimeMachine() {
      ctx.beginPath();
      ctx.rect(x, y, 30, 30);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

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

x += dx;
      y += dy;

requestAnimationFrame(draw);
    }

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

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

draw();
  </script>
</body>
</html>
```

このプログラムでは、キーボードの矢印キーでタイムマシンを操作できます。タイムマシンはキャンバス上で操作可能な四角形として表示され、キー操作に応じて移動します。毎フレームごとにキャンバスをクリアし、タイムマシンを描画し続けることでアニメーションが実現されます。

このゲームはシンプルな操作で遊べる部分的なゲーム化となっています。ご参考までにご確認ください。