Flappy bird with dots's game

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

No:10805

←

Prev Next

→

Flappy bird with dots
Developer User4492｜Date and time 23/8/3 6:56:35
Build time 28.228 sec｜Game capacity 3.1KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript and enclosed in script tags:

In the given code, a simple version of Flappy Bird is implemented using dots as the bird and pipes. The game is designed to be played on a smartphone where the player can touch the screen to make the dot jump. The goal is to avoid the pipes and survive for as long as possible while collecting points. To run the code, save it as an HTML file (e.g., `flappy_dot.html`) and include appropriate image files (`emozi_rabbit.png` for the dot and `emozi_apple.png` for the pipes) in the same directory as the HTML file. Open the HTML file in a web browser on a smartphone and the Flappy Dot game will be playable.

←

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 and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Dot</title>
  <style>
    canvas {
        background-color: #f8f8f8;
        display: block;
        margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Game variables
    let score = 0;
    let dotX = 50;
    let dotY = canvas.height / 2;
    let gravity = 0.5;
    let velocity = 0;
    let gap = 150;
    let gameOver = false;

// Load dot image
    const dotImg = new Image();
    dotImg.src = 'dot.png';

// Load pipe image
    const pipeImg = new Image();
    pipeImg.src = 'pipe.png';

// Add event listener for touch
    canvas.addEventListener('touchstart', () => {
      if (!gameOver) {
        velocity = -10;
      }
    });

// Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw dot
      ctx.drawImage(dotImg, dotX, dotY);

// Update dot position
      dotY += velocity;
      velocity += gravity;

// Draw pipes
      let pipes = [
        { x: canvas.width, y: 0, width: 50, height: getRandomHeight() },
        { x: canvas.width, y: canvas.height - getRandomHeight(), width: 50, height: getRandomHeight() }
      ];

pipes.forEach(pipe => {
        ctx.drawImage(pipeImg, pipe.x, pipe.y, pipe.width, pipe.height);
        pipe.x -= 5;

if (isCollision(dotX, dotY, dotImg.width, dotImg.height, pipe.x, pipe.y, pipe.width, pipe.height)) {
          gameOver = true;
        }

if (pipe.x === 10) {
          score++;
        }
      });

// Draw score
      ctx.font = '20px Arial';
      ctx.fillText(`Score: ${score}`, 10, 30);

// Check game over condition
      if (dotY > canvas.height - dotImg.height || dotY < 0) {
        gameOver = true;
      }

if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

// Start the game
    gameLoop();

// Helper functions
    function getRandomHeight() {
      return Math.floor(Math.random() * 200) + 100;
    }

function isCollision(ax, ay, aw, ah, bx, by, bw, bh) {
      return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by;
    }
  </script>
</body>
</html>
```

To run the code, save it as an HTML file (e.g., `flappy_dot.html`) and include appropriate image files (`dot.png` for the dot and `pipe.png` for the pipes) in the same directory as the HTML file. Open the HTML file in a web browser on a smartphone and the Flappy Dot game will be playable.