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

No:20356

←

Prev Next

→

ふわしっぽ
Developer User8984｜Date and time 23/10/9 6:52:38
Build time 18.711 sec｜Game capacity 3.375KB｜

Script

了解です。では、以下に必要な要件を満たすゲームを実装します。

ふわしっぽ

Score: 0

以上が、ふわしっぽというゲームの実装例です。このファイルを保存してブラウザで開くと、スマートフォン上で遊ぶことができます。画面上部にあるプレイヤー（ふわしっぽ）を左右に動かして、落ちてくる赤いブロックと衝突させることでスコアが加算されます。ブロックが画面下部まで落ちるとゲームオーバーとなり、得点が表示されます。ゲームオーバー後はリプレイすることも可能です。

←

Prev　Next

→ 　

Back　

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

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

了解です。では、以下に必要な要件を満たすゲームを実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ふわしっぽ</title>
  <style>
    body {
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>ふわしっぽ</h1>
  <p id="score">Score: 0</p>
  <canvas id="gameCanvas" width="300" height="400"></canvas>

// イベントリスナを設定
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// プレイヤーの初期位置
      playerX = canvas.width / 2;
      playerY = canvas.height - 30;

// ブロックの初期位置と速度
      blockX = Math.random() * (canvas.width - 50);
      blockY = 0;
      blockSpeed = 2;

// スコアの初期値
      score = 0;
    }

// キーを押したときの処理
    function keyDownHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = true;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = true;
      }
    }

// キーを離したときの処理
    function keyUpHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = false;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = false;
      }
    }

// フレームごとの処理
    function draw() {
      // 画面をクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
      ctx.fillStyle = "#0095DD";
      ctx.fillRect(playerX, playerY, 50, 10);

// ブロックを描画
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(blockX, blockY, 50, 50);

// スコアを表示
      ctx.fillStyle = "#000000";
      ctx.fillText("Score: " + score, 8, 20);

// プレイヤーの移動
      if (rightPressed && playerX < canvas.width - 50) {
        playerX += 7;
      } else if (leftPressed && playerX > 0) {
        playerX -= 7;
      }

// ブロックの落下
      blockY += blockSpeed;

// 衝突判定
      if (blockY + 50 >= playerY && blockX >= playerX && blockX <= playerX + 50) {
        score++;
        blockX = Math.random() * (canvas.width - 50);
        blockSpeed += 0.5;
      }

// ゲームオーバー判定
      if (blockY + 50 >= canvas.height) {
        alert("ゲームオーバー！\nScore: " + score);
        clearInterval(interval);
        window.location.reload();
      }
    }

// ゲームの開始
    init();
    var interval = setInterval(draw, 10);
  </script>
</body>
</html>
```