AI game creator

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

No:52765

408

←

Prev Next

→

Flappy bird
Developer User22126｜Date and time 24/3/24 14:09:42
Build time 1.585 sec｜Game capacity 0.212KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
      // 游戏画布相关变量
      var canvas;
      var canvasContext;

// 鸟的位置和速度相关变量
      var birdX = 50;
      var birdY = 300;
      var birdSpeedY = 0;
      const GRAVITY = 0.5;

// 管道位置相关变量
      var pipeGap = 100;
      var pipeSpacing = 250;
      var pipeWidth = 50;
      var pipeHeight = 300;
      var pipeList = [];
      var pipeColor = "#009900";

// 游戏状态
      var isGameOver = false;

// 初始化游戏
      function gameInit() {
        canvas = document.getElementById("gameCanvas");
        canvasContext = canvas.getContext("2d");
        document.addEventListener("keyup", handleInput);
        setInterval(updateGame, 20);
        createPipes();
      }

// 创建初始的管道
      function createPipes() {
        for (var i = 0; i < 4; i++) {
          var pipe = {
            x: canvas.width + i * pipeSpacing,
            topHeight: Math.floor(Math.random() * pipeHeight) + 100,
            bottomHeight: canvas.height - pipeGap - pipeHeight,
            isPassed: false,
          };
          pipeList.push(pipe);
        }
      }

// 更新游戏状态
      function updateGame() {
        moveBird();
        movePipes();
        drawGame();
        checkCollision();
      }

// 处理玩家输入
      function handleInput(event) {
        if (event.keyCode === 32 && !isGameOver) {
          birdSpeedY = -8;
        }
      }

// 移动鸟的位置
      function moveBird() {
        birdY += birdSpeedY;
        birdSpeedY += GRAVITY;

if (birdY < 0) {
          birdY = 0;
          birdSpeedY = 0;
        }

if (birdY + 25 > canvas.height) {
          gameOver();
        }
      }

// 移动管道的位置
      function movePipes() {
        for (var i = 0; i < pipeList.length; i++) {
          var pipe = pipeList[i];
          pipe.x -= 5;

// 当管道离开屏幕时，重新出现在右侧
          if (pipe.x < -pipeWidth) {
            pipe.x = canvas.width;

// 随机生成新的管道高度
            pipe.topHeight = Math.floor(Math.random() * pipeHeight) + 100;
            pipe.bottomHeight = canvas.height - pipeGap - pipeHeight;

// 标记新的管道为未通过状态
            pipe.isPassed = false;
          }
        }
      }

// 绘制游戏画面
      function drawGame() {
        // 绘制背景
        canvasContext.fillStyle = "#ffffff";
        canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// 绘制鸟
        canvasContext.fillStyle = "#ff0000";
        canvasContext.fillRect(birdX, birdY, 25, 25);

// 绘制管道
        for (var i = 0; i < pipeList.length; i++) {
          var pipe = pipeList[i];
          canvasContext.fillStyle = pipeColor;

// 绘制顶部管道
          canvasContext.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);

// 绘制底部管道
          canvasContext.fillRect(
            pipe.x,
            canvas.height - pipe.bottomHeight,
            pipeWidth,
            pipe.bottomHeight
          );
        }
      }

// 检查碰撞
      function checkCollision() {
        for (var i = 0; i < pipeList.length; i++) {
          var pipe = pipeList[i];

// 检查鸟是否与管道相交
          if (
            birdX + 25 > pipe.x &&
            birdX < pipe.x + pipeWidth &&
            (birdY < pipe.topHeight || birdY + 25 > canvas.height - pipe.bottomHeight)
          ) {
            gameOver();
          }

// 如果鸟通过了管道，增加分数并标记该管道为已通过
          if (!pipe.isPassed && pipe.x + pipeWidth < birdX) {
            pipe.isPassed = true;
            // 增加分数的逻辑
          }
        }
      }

// 游戏结束
      function gameOver() {
        isGameOver = true;
        // 游戏结束的逻辑
      }

// 启动游戏
      gameInit();
    </script>
  </body>
</html>