フラッピーバード's game

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

No:13686

←

Prev Next

→

フラッピーバード
Developer おまめちゃん｜Date and time 23/8/29 11:16:18
Build time 27.398 sec｜Game capacity 3.895KB｜

Script

了解です！以下に、JavaScriptを用いたフラッピーバードのゲームを実装したHTMLファイルの例を示します。

このHTMLファイルをブラウザで開くと、フラッピーバードのゲームがプレイできます。スマホでの操作にも対応しており、画面をタップすると鳥がジャンプします。パイプに衝突してしまうとゲームオーバーになり、再度画面をタップするとリスタートします。スコアは画面左上に表示されます。なお、絵文字の表示に対応していないブラウザでは、`game.birdImage`の値を他のテキストもしくは画像に置き換えてください。また、ゲームの仕様や見た目を変更したい場合は、該当する部分を修正してください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です！以下に、JavaScriptを用いたフラッピーバードのゲームを実装したHTMLファイルの例を示します。

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

start: function() {
        this.canvas.addEventListener('click', this.flap.bind(this));
        this.ctx = this.canvas.getContext('2d');
        this.draw();
      },

flap: function() {
        if (this.isGameOver) {
          this.reset();
        } else {
          this.birdY += this.jumpStrength;
        }
      },

reset: function() {
        this.birdY = 300;
        this.pipeX = 400;
        this.score = 0;
        this.isGameOver = false;
      },

draw: function() {
        if (this.isGameOver) {
          this.ctx.font = '30px Arial';
          this.ctx.fillText('Game Over', 120, 300);
          this.ctx.fillText('Click to restart', 120, 350);
          return;
        }

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.drawBird();
        this.moveBird();
        this.drawPipe();
        this.movePipe();

this.ctx.font = '24px Arial';
        this.ctx.fillText('Score: ' + this.score, 10, 30);

if (this.isColliding()) {
          this.isGameOver = true;
        } else {
          requestAnimationFrame(this.draw.bind(this));
        }
      },

drawBird: function() {
        this.ctx.font = this.birdSize + 'px Arial';
        this.ctx.fillText(this.birdImage, this.birdX, this.birdY);
      },

moveBird: function() {
        this.birdY += this.gravity;
      },

drawPipe: function() {
        this.ctx.fillStyle = 'green';
        this.ctx.fillRect(this.pipeX, this.pipeY, this.pipeWidth, this.pipeHeight);
        this.ctx.fillRect(this.pipeX, this.pipeY + this.pipeHeight + this.pipeGap, this.pipeWidth, this.canvas.height - this.pipeY - this.pipeHeight - this.pipeGap);
      },

movePipe: function() {
        this.pipeX -= this.pipeSpeed;

if (this.pipeX + this.pipeWidth < 0) {
          this.pipeX = this.canvas.width;
          this.score++;
        }
      },

isColliding: function() {
        if (this.birdY < 0 || this.birdY + this.birdSize > this.canvas.height) {
          return true;
        }

if (this.birdX + this.birdSize > this.pipeX && this.birdX < this.pipeX + this.pipeWidth) {
          if (this.birdY < this.pipeY + this.pipeHeight || this.birdY + this.birdSize > this.pipeY + this.pipeHeight + this.pipeGap) {
            return true;
          }
        }

return false;
      }
    };

game.start();
  </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、フラッピーバードのゲームがプレイできます。スマホでの操作にも対応しており、画面をタップすると鳥がジャンプします。パイプに衝突してしまうとゲームオーバーになり、再度画面をタップするとリスタートします。スコアは画面左上に表示されます。

なお、絵文字の表示に対応していないブラウザでは、`game.birdImage`の値を他のテキストもしくは画像に置き換えてください。また、ゲームの仕様や見た目を変更したい場合は、該当する部分を修正してください。