フラッピーバード's game

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

No:15991

←

Prev Next

→

フラッピーバード
Developer はにわ｜Date and time 23/9/14 19:53:10
Build time 47.86 sec｜Game capacity 3.859KB｜

Script

了解しました。以下にフラッピーバードのゲームのHTMLファイルを実装します。

このHTMLファイルは、フラッピーバードのゲームを実装しています。スマホでの操作に対応しており、画面をタップすることでゲームが開始されます。プレイヤーは画面上部から重力の影響を受けて落下し、タップすることで上昇します。障害物を避けつつスコアを増やすことが目的となります。なお、絵文字は記述に使用していませんが、ゲーム内の要素に自由に利用していただけます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下にフラッピーバードのゲームのHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// プレイヤーの初期位置
    var playerX = 50;
    var playerY = 200;

// 重力
    var gravity = 1;

// ジャンプ力
    var jumpPower = -10;

// 障害物の初期位置
    var obstacle = { x: 400, y: 0, width: 50, height: Math.random() * 200 + 50 };

// 障害物の速度
    var obstacleSpeed = 3;

// スコア
    var score = 0;

// HTMLの要素
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var scoreText = document.createElement("p");

// ゲームのループ処理
    function gameLoop() {
      // 毎フレームの処理
      update();
      draw();

// 再帰的にゲームループを呼び出す
      requestAnimationFrame(gameLoop);
    }

// プレイヤーの移動と衝突判定
    function update() {
      if (start) {
        // スタート時の処理
        canvas.addEventListener("mousedown", startGame);
      } else {
        // スタート後の処理
        playerY += gravity;

if (playerY <= 0) {
          playerY = 0;
        } else if (playerY >= canvas.height) {
          playerY = canvas.height;
          gameover();
        }

if (obstacle.x + obstacle.width < 0) {
          // 障害物を超えたら新しい位置に再配置
          obstacle.x = canvas.width;
          obstacle.height =  Math.random() * 200 + 50;
          score++;
        } else {
          // 障害物を左に移動
          obstacle.x -= obstacleSpeed;
        }

// 衝突判定
        if (playerX + 50 > obstacle.x && playerX < obstacle.x + obstacle.width &&
            playerY + 50 > obstacle.y && playerY < obstacle.y + obstacle.height) {
          gameover();
        }
      }
    }

// ゲーム画面の描画
    function draw() {
      // 画面をクリア
      context.clearRect(0, 0, canvas.width, canvas.height);

if (start) {
        // スタート時の描画
        context.font = "30px Arial";
        context.fillText("Tap to Start", 120, 200);
      } else {
        // スタート後の描画
        // プレイヤーの描画
        context.fillStyle = "yellow";
        context.fillRect(playerX, playerY, 50, 50);

// 障害物の描画
        context.fillStyle = "green";
        context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

// スコアの描画
        scoreText.innerText = "Score: " + score;
        document.body.appendChild(scoreText);
      }
    }

// ゲーム開始
    function startGame() {
      start = false;
      canvas.removeEventListener("mousedown", startGame);
    }

// ゲームオーバー
    function gameover() {
      start = true;
      playerX = 50;
      playerY = 200;
      obstacle.x = 400;
      score = 0;
      document.body.removeChild(scoreText);
    }

// ゲームのループを開始
    gameLoop();
  </script>
</body>
</html>
```

このHTMLファイルは、フラッピーバードのゲームを実装しています。スマホでの操作に対応しており、画面をタップすることでゲームが開始されます。プレイヤーは画面上部から重力の影響を受けて落下し、タップすることで上昇します。障害物を避けつつスコアを増やすことが目的となります。

なお、絵文字は記述に使用していませんが、ゲーム内の要素に自由に利用していただけます。