AI game creator

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

No:46311

←

Prev Next

→

Flappy bird
Developer User20055｜Date and time 24/2/24 16:25:46
Build time 8.251 sec｜Game capacity 2.475KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<html>
<head>
  <style>
    canvas {
      background-color: #70c5ce;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let birdY = 150;
    let gravity = 0.5;
    let velocity = 0;
    let obstacles = [
      { x: canvas.width, y: 0, width: 50, height: 150, passed: false },
      { x: canvas.width + 200, y: 0, width: 50, height: 200, passed: false },
      { x: canvas.width + 400, y: 0, width: 50, height: 100, passed: false }
    ];
    let score = 0;
    
    function drawBird() {
      ctx.fillStyle = '#f5b041';
      ctx.fillRect(50, birdY, 20, 20);
    }
    
    function drawObstacles() {
      ctx.fillStyle = '#87d37c';
      obstacles.forEach(obstacle => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
      });
    }
    
    function checkCollision(obstacle) {
      if (birdY < obstacle.height && 50 < obstacle.x + obstacle.width && 70 > obstacle.x) {
        return true;
      }
      return false;
    }
    
    function updateScore() {
      ctx.font = '16px Arial';
      ctx.fillStyle = '#fff';
      ctx.fillText(`Score: ${score}`, 10, 20);
    }
    
    function update() {
      velocity += gravity;
      birdY += velocity;
    
      if (birdY > canvas.height || obstacles.some(obstacle => checkCollision(obstacle))) {
        alert(`Game Over! Your score is: ${score}`);
        location.reload();
      }
    
      obstacles.forEach(obstacle => {
        obstacle.x -= 2;
    
        if (obstacle.x + obstacle.width < 0 && !obstacle.passed) {
          obstacle.passed = true;
          score++;
        }
      });
    
      if (obstacles[0].x < -50) {
        obstacles.shift();
        obstacles.push({
          x: canvas.width,
          y: Math.floor(Math.random() * canvas.height / 2),
          width: 50,
          height: Math.floor(Math.random() * canvas.height / 2),
          passed: false
        });
      }
    
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBird();
      drawObstacles();
      updateScore();
    }
    
    function start() {
      setInterval(update, 1000 / 60);
    }
    
    document.addEventListener('keydown', event => {
      if (event.key === ' ') {
        velocity = -10;
      }
    });
    
    start();
  </script>
</body>
</html>