AI game creator

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

No:40170

←

Prev Next

→

Flappy bird
Developer User15541｜Date and time 24/2/1 11:12:32
Build time 17.328 sec｜Game capacity 4.18KB｜

Script

Sure! Here's a simple implementation of Flappy Bird game using HTML and JavaScript:

To use this code, you would also need to have the following image files available in the same directory as the HTML file: `emozi_all/bird.png`, `emozi_chicken.png`, and `emozi_rabbit.png`. Please note that this implementation is a simplified version of Flappy Bird, and you may need to make further adjustments or improvements based on your specific requirements and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple implementation of Flappy Bird game using HTML and JavaScript:

```html
<!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="400"></canvas>

// Basic game variables
    let birdY = canvas.height / 2;
    let velocity = 0;
    let gravity = 0.5;
    let obstacles = [];
    let isGameOver = false;
    let score = 0;

// Load pictogram images
    const birdImage = new Image();
    birdImage.src = 'bird.png';

const pipeNorthImage = new Image();
    pipeNorthImage.src = 'pipeNorth.png';

const pipeSouthImage = new Image();
    pipeSouthImage.src = 'pipeSouth.png';

// Game functions
    function drawBird() {
      ctx.drawImage(birdImage, 50, birdY, 40, 40);
    }

function generateObstacles() {
      const minY = -200; // Minimum pipe Y position
      const gap = 140; // Gap between top and bottom pipes
      const maxHeight = canvas.height - gap;
      const pipeWidth = 70;

const randomHeight = Math.floor(Math.random() * maxHeight) + minY;

obstacles.push({
        x: canvas.width,
        y: randomHeight,
        width: pipeWidth,
        height: canvas.height,
      });
    }

function drawObstacles() {
      for (let i = 0; i < obstacles.length; i++) {
        const pipeNorth = obstacles[i];
        const pipeSouth = {
          x: pipeNorth.x,
          y: pipeNorth.y + pipeNorth.height + 140,
          width: pipeNorth.width,
          height: canvas.height,
        };

ctx.drawImage(pipeNorthImage, pipeNorth.x, pipeNorth.y, pipeNorth.width, pipeNorth.height);
        ctx.drawImage(pipeSouthImage, pipeSouth.x, pipeSouth.y, pipeSouth.width, pipeSouth.height);
      }
    }

function checkCollision() {
      for (let i = 0; i < obstacles.length; i++) {
        const pipe = obstacles[i];

if (
          birdY < pipe.y + pipe.height &&
          birdY + 40 > pipe.y &&
          50 < pipe.x + pipe.width &&
          90 > pipe.x
        ) {
          return true; // Collision detected
        }
      }

return false; // No collision
    }

function updateScore() {
      ctx.font = '30px Arial';
      ctx.fillStyle = 'black';
      ctx.fillText(`Score: ${score}`, 10, 50);
    }

function gameLoop() {
      if (isGameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

velocity += gravity;
      birdY += velocity;

drawBird();
      drawObstacles();
      updateScore();

if (birdY > canvas.height || birdY < 0 || checkCollision()) {
        isGameOver = true;
        alert(`Game Over! Your Score: ${score}`);
        location.reload(); // Restart the game
      }

obstacles.forEach((pipe) => {
        pipe.x -= 2; // Adjust pipe speed here

if (pipe.x === canvas.width - 200) {
          generateObstacles();
          score++;
        }
      });

// Remove obstacles that are off-screen
      if (obstacles[0] && obstacles[0].x < -70) {
        obstacles.shift();
      }

requestAnimationFrame(gameLoop);
    }

// Starting point
    function startGame() {
      generateObstacles();
      gameLoop();
    }

// Event listeners for mouse click or touch
    document.addEventListener('click', () => {
      if (!isGameOver) velocity = -10; // Adjust jump height here
    });

document.addEventListener('touchstart', () => {
      if (!isGameOver) velocity = -10; // Adjust jump height here
    });

// Start the game
    startGame();
  </script>
</body>
</html>
```

To use this code, you would also need to have the following image files available in the same directory as the HTML file: `bird.png`, `pipeNorth.png`, and `pipeSouth.png`.

Please note that this implementation is a simplified version of Flappy Bird, and you may need to make further adjustments or improvements based on your specific requirements and preferences.