Games like Flappy Bird's game

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

No:2065

6599

←

Prev Next

→

Games like Flappy Bird
Developer User3481｜Date and time 23/6/20 0:12:48
Build time 40.738 sec｜Game capacity 3.576KB｜

Script

ゲームの概要：プレイヤーは鳥を操作して、パイプの隙間をくぐり抜けながらスコアを競います。鳥を操作するには、画面をタップまたはクリックすると鳥が上昇します。パイプにぶつかるとゲームオーバーになります。絵文字がランダムに表示され、スマホでも遊べるように大きなタップエリアを用意しました。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>フラッピー鳥</title>
    <style>
      canvas {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");
      var width = window.innerWidth;
      var height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
      var birdX = width / 4-50;
      var birdY = height / 2;
      var birdSize = 40;
      var gravity = 1;
      var velocity = 0;
      var flapPower = 15;
      var gameState = "playing";
      var pipeGap = 250;
      var pipeDistance = 400;
      var pipeWidth = 70;
      var score = 0;
      var emojiList = ['🐤', '🐦', '🐧', '🦢', '🦅', '🐓', '🪶', '🦆', '🦉'];
      
      function update() {
        if (gameState === "playing") {
          // Update bird's velocity and position
          velocity += gravity;
          birdY += velocity;
          
          // Check collision with pipes
          if ((birdX + birdSize > pipeDistance) && 
              (birdX < pipeDistance + pipeWidth)) {
            if ((birdY < pipeGap) || 
                (birdY + birdSize > pipeGap + pipeGap)) {
              gameState = "gameover";
            }
          }
          
          // Update pipes and score
          if (pipeDistance + pipeWidth <= birdX) {
            pipeDistance += pipeDistance;
            pipeGap = Math.random() * (height - 200) + 100;
            score += 1;
          }
        }
      }
      
      function render() {
        ctx.clearRect(0, 0, width, height);
        
        // Draw pipes
        ctx.fillStyle = "green";
        ctx.fillRect(pipeDistance, 0, pipeWidth, pipeGap);
        ctx.fillRect(pipeDistance, pipeGap + pipeGap, pipeWidth, height - pipeGap - pipeGap);
        
        // Draw bird
        ctx.fillStyle = "yellow";
        ctx.fillRect(birdX, birdY, birdSize, birdSize);
        ctx.font = "bold 50px Arial";
        ctx.fillText(emojiList[Math.floor(Math.random() * emojiList.length)], birdX, birdY + birdSize);
        
        // Draw score
        ctx.fillStyle = "black";
        ctx.font = "bold 50px Arial";
        ctx.fillText(score, width - 100, 100);
        
        // Draw game over message
        if (gameState === "gameover") {
          ctx.fillStyle = "red";
          ctx.font = "bold 100px Arial";
          ctx.fillText("Game Over", width / 2 - 300, height / 2);
        }
      }
      
      function flap() {
        if (gameState === "playing") {
//console.warn("flap");
          velocity = -flapPower;
        } else if (gameState === "gameover") {
          location.reload();
        }
      }
      
      // Update and render every 30 milliseconds
      setInterval(function() {
        update();
        render();
      }, 30);
      
      // Flap the bird when clicked
      canvas.addEventListener("click", flap);
    </script>
  </body>
</html>