AI game creator

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

No:35779

145

←

Prev Next

→

Flappy bird
Developer User16635｜Date and time 24/1/15 8:59:05
Build time 12.74 sec｜Game capacity 3.477KB｜

Script

Sure, here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

This HTML file creates a canvas element where the game is displayed. The bird and pipes are represented by simple yellow circles and green rectangles respectively. The player can control the bird by pressing any key or tapping the screen (assuming smartphone operation). The score is displayed on the canvas. The game loop continuously updates the game elements and checks for collisions. The game ends if the bird collides with any of the pipes.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightblue;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Pictograms/icons can be added to represent the game elements
    
    const bird = {
      x: 50,
      y: canvas.height / 2,
      radius: 20,
      velocity: 0,
      gravity: 0.5,
      jump: -10
    };
    
    const pipes = [];
    const gap = 100;
    let gameOver = false;
    
    function drawBird() {
      ctx.fillStyle = 'yellow';
      ctx.beginPath();
      ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }
    
    function drawPipes() {
      ctx.fillStyle = 'green';
      for (let i = 0; i < pipes.length; i++) {
        const pipe = pipes[i];
        ctx.fillRect(pipe.x, 0, pipe.width, pipe.topHeight);
        ctx.fillRect(pipe.x, pipe.bottomY, pipe.width, pipe.bottomHeight);
      }
    }
    
    function generatePipes() {
      const pipeWidth = 80;
      const minWidth = bird.radius * 4;
      const maxWidth = canvas.width / 2;
      const topHeight = Math.random() * (canvas.height - gap - minWidth) + minWidth;
      const bottomHeight = canvas.height - topHeight - gap;
      const pipe = {
        x: canvas.width,
        width: pipeWidth,
        topHeight: topHeight,
        bottomY: topHeight + gap,
        bottomHeight: bottomHeight
      };
      pipes.push(pipe);
    }
    
    function moveBird() {
      bird.velocity += bird.gravity;
      bird.y += bird.velocity;
    }
    
    function movePipes() {
      for (let i = 0; i < pipes.length; i++) {
        const pipe = pipes[i];
        pipe.x -= 4;
        
        if (pipe.x + pipe.width < 0) {
          pipes.splice(i, 1);
          i--;
        }
        
        if (!gameOver && pipe.x === bird.x) {
          if (bird.y < pipe.topHeight || bird.y + bird.radius > pipe.bottomY) {
            gameOver = true;
          }
        }
      }
    }
    
    function drawScore() {
      ctx.fillStyle = 'black';
      ctx.font = '24px Arial';
      ctx.fillText('Score: ' + pipes.length, 10, 30);
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawBird();
      moveBird();
      drawPipes();
      movePipes();
      drawScore();
      
      if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }
    
    function jump() {
      if (!gameOver) {
        bird.velocity = bird.jump;
      }
    }
    
    document.addEventListener('keydown', jump);
    document.addEventListener('touchstart', jump);
    
    generatePipes();
    gameLoop();
  </script>
</body>
</html>
```