Flappy Bird Game Demo - HTML Canvas JavaScript

Open In Editor Publish Your Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Simple Flappy Bird — Demo</title>
  <style>
    :root{
      --bg:#70c5ce;
      --ground:#ded895;
      --bird:#ffdd57;
      --pipe:#2b8f4a;
      --text:#333;
    }
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}
    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#9de0e6, var(--bg));padding:20px;box-sizing:border-box}
    .game{
      width:420px;height:600px;background:linear-gradient(#9adbe6,#6fcbd8);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.2);position:relative;overflow:hidden;
      display:flex;flex-direction:column;
    }
    canvas{display:block;background:transparent;flex:1}
    .ui{
      position:absolute;left:0;right:0;top:0;padding:12px 16px;color:var(--text);display:flex;justify-content:space-between;align-items:center;pointer-events:none;
    }
    .ui .score{font-weight:700;font-size:20px;pointer-events:none}
    .info{pointer-events:none;font-size:13px;opacity:0.95}
    .overlay{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
      pointer-events:auto;
    }
    .panel{
      background:rgba(255,255,255,0.95);padding:18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.12);text-align:center;width:85%;
    }
    button{background:#2b8f4a;color:white;border:none;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer}
    footer{font-size:12px;color:#444;margin-top:6px}
    .small{font-size:13px;color:#666}
    @media (max-width:480px){
      .game{width:320px;height:560px}
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="game" id="gameRoot" role="application" aria-label="Flappy style game">
      <canvas id="gameCanvas" width="420" height="600" aria-hidden="false"></canvas>

<div class="ui" aria-hidden="true">
        <div class="score" id="scoreLabel">Score: 0</div>
        <div class="info">Space / Click to flap</div>
      </div>

<div class="overlay" id="startOverlay">
        <div class="panel">
          <h2 style="margin:0 0 8px 0">Flappy — Simple Demo</h2>
          <div class="small" style="margin-bottom:12px">Tap/click or press Space to flap. Survive as long as you can!</div>
          <button id="startBtn">Start Game</button>
          <footer>Created for classroom/demo use</footer>
        </div>
      </div>

<div class="overlay" id="gameOverOverlay" style="display:none;pointer-events:auto">
        <div class="panel" id="gameOverPanel">
          <h2 style="margin:0 0 8px 0">Game Over</h2>
          <div class="small" id="finalScore">Score: 0</div>
          <div style="margin-top:12px;display:flex;gap:8px;justify-content:center">
            <button id="restartBtn">Play Again</button>
            <button id="menuBtn" style="background:#6c757d">Menu</button>
          </div>
        </div>
      </div>
    </div>
  </div>

(function(){
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d', { alpha: true });
    const W = canvas.width;
    const H = canvas.height;

// UI elements
    const scoreLabel = document.getElementById('scoreLabel');
    const startOverlay = document.getElementById('startOverlay');
    const startBtn = document.getElementById('startBtn');
    const gameOverOverlay = document.getElementById('gameOverOverlay');
    const finalScore = document.getElementById('finalScore');
    const restartBtn = document.getElementById('restartBtn');
    const menuBtn = document.getElementById('menuBtn');

// Game constants (easy to tweak for difficulty)
    const GRAVITY = 0.45;
    const FLAP_V = -8.5;
    const PIPE_SPEED = 2.2;
    const PIPE_GAP = 140;     // vertical gap between top and bottom pipe
    const PIPE_WIDTH = 60;
    const PIPE_INTERVAL = 1400; // ms between pipes
    const BIRD_RADIUS = 14;
    const FLOOR_HEIGHT = 60;

// Game state
    let bird, pipes, lastPipeTime, running, score, highScore;
    let lastFrame = 0;

function resetGame(){
      bird = { x: Math.round(W*0.28), y: Math.round(H*0.5), vy: 0, rotation:0 };
      pipes = [];
      lastPipeTime = performance.now() - 300;
      running = false;
      score = 0;
      highScore = highScore || 0;
      scoreLabel.textContent = 'Score: 0';
    }

function spawnPipe(){
      // Choose gap center between safe margins
      const margin = 40;
      const minY = margin + PIPE_GAP/2;
      const maxY = H - FLOOR_HEIGHT - margin - PIPE_GAP/2;
      const gapY = Math.random() * (maxY - minY) + minY;
      pipes.push({ x: W + 10, gapY, passed:false });
    }

function startGame(){
      resetGame();
      startOverlay.style.display = 'none';
      gameOverOverlay.style.display = 'none';
      running = true;
      lastFrame = performance.now();
      window.requestAnimationFrame(loop);
    }

function endGame(){
      running = false;
      highScore = Math.max(highScore, score);
      finalScore.textContent = 'Score: ' + score + '   Best: ' + highScore;
      gameOverOverlay.style.display = 'flex';
    }

function flap(){
      if (!running){
        // start on first flap
        startGame();
      }
      bird.vy = FLAP_V;
    }

// Input handlers
    window.addEventListener('keydown', (e) => {
      if (e.code === 'Space') { e.preventDefault(); flap(); }
      if (e.code === 'Enter' && !running && gameOverOverlay.style.display!=='none') { startGame(); }
    });
    canvas.addEventListener('mousedown', (e)=>{ flap(); });
    canvas.addEventListener('touchstart', (e)=>{ e.preventDefault(); flap(); }, {passive:false});

// Buttons
    startBtn.addEventListener('click', startGame);
    restartBtn.addEventListener('click', startGame);
    menuBtn.addEventListener('click', ()=>{
      gameOverOverlay.style.display = 'none';
      startOverlay.style.display = 'flex';
      resetGame();
      renderFrame(); // show neutral screen
    });

function update(dt){
      // bird physics
      bird.vy += GRAVITY * dt;
      bird.y += bird.vy * dt;
      // simple rotation for visual effect
      bird.rotation = Math.max(-0.6, Math.min(0.9, bird.vy * 0.04));

// spawn pipes periodically
      const now = performance.now();
      if (now - lastPipeTime > PIPE_INTERVAL){
        spawnPipe();
        lastPipeTime = now;
      }

// move pipes
      for (let p of pipes){
        p.x -= PIPE_SPEED * dt;
      }
      // remove offscreen pipes
      while (pipes.length && pipes[0].x < -PIPE_WIDTH - 20) pipes.shift();

// scoring: when bird passes the pipe's x
      for (let p of pipes){
        if (!p.passed && (p.x + PIPE_WIDTH/2) < bird.x){
          p.passed = true;
          score += 1;
          scoreLabel.textContent = 'Score: ' + score;
        }
      }

// collision checks
      // floor and ceiling
      if (bird.y + BIRD_RADIUS > H - FLOOR_HEIGHT){
        bird.y = H - FLOOR_HEIGHT - BIRD_RADIUS;
        endGame();
      }
      if (bird.y - BIRD_RADIUS < 0){
        bird.y = BIRD_RADIUS;
        bird.vy = 0;
      }

// pipes collision (approximate using circle-rect collision)
      for (let p of pipes){
        const rx = p.x;
        const rw = PIPE_WIDTH;
        const gapTop = p.gapY - PIPE_GAP/2;
        const gapBottom = p.gapY + PIPE_GAP/2;

// top pipe rect: x: rx..rx+rw, y: 0..gapTop
        // bottom pipe rect: x: rx..rx+rw, y: gapBottom..H-FLOOR_HEIGHT
        if (circleIntersectsRect(bird.x, bird.y, BIRD_RADIUS, rx, 0, rw, gapTop) ||
            circleIntersectsRect(bird.x, bird.y, BIRD_RADIUS, rx, gapBottom, rw, H - FLOOR_HEIGHT - gapBottom)){
          endGame();
        }
      }
    }

// Utility: circle vs rect collision
    function circleIntersectsRect(cx, cy, r, rx, ry, rw, rh){
      // find closest point on rect to circle center
      const closestX = Math.max(rx, Math.min(cx, rx + rw));
      const closestY = Math.max(ry, Math.min(cy, ry + rh));
      const dx = cx - closestX;
      const dy = cy - closestY;
      return (dx*dx + dy*dy) <= r*r;
    }

function renderFrame(){
      // clear
      ctx.clearRect(0,0,W,H);

// background sky gradient handled by canvas clear; draw clouds/simple shapes as decoration
      // draw distant ground
      ctx.save();
      ctx.fillStyle = '#8ad2c8';
      ctx.fillRect(0, H - FLOOR_HEIGHT, W, FLOOR_HEIGHT);
      ctx.restore();

// draw pipes
      for (let p of pipes){
        drawPipe(p.x, p.gapY - PIPE_GAP/2, PIPE_WIDTH, PIPE_GAP);
      }

// draw bird (simple circle with beak and eye)
      ctx.save();
      ctx.translate(bird.x, bird.y);
      ctx.rotate(bird.rotation);
      // body
      ctx.beginPath();
      ctx.fillStyle = '#ffdd57';
      ctx.strokeStyle = '#e6c84a';
      ctx.lineWidth = 2;
      ctx.arc(0, 0, BIRD_RADIUS, 0, Math.PI*2);
      ctx.fill();
      ctx.stroke();
      // wing (simple arc)
      ctx.beginPath();
      ctx.fillStyle = '#f4c542';
      ctx.ellipse(-3, 3, 8, 5, -0.6, 0, Math.PI*2);
      ctx.fill();
      // eye
      ctx.beginPath();
      ctx.fillStyle = '#333';
      ctx.arc(5, -3, 3.2, 0, Math.PI*2);
      ctx.fill();
      // beak
      ctx.beginPath();
      ctx.fillStyle = '#ff9a2e';
      ctx.moveTo(BIRD_RADIUS-2, 0);
      ctx.lineTo(BIRD_RADIUS+10, -5);
      ctx.lineTo(BIRD_RADIUS+10, 5);
      ctx.closePath();
      ctx.fill();

ctx.restore();

// foreground ground detail (a simple pattern)
      ctx.save();
      ctx.fillStyle = '#d9c78a';
      for (let i=-20;i<W;i+=28){
        ctx.fillRect(i, H - FLOOR_HEIGHT, 16, 8);
      }
      ctx.restore();

// if game not started, show hint on canvas
      if (!running && startOverlay.style.display !== 'flex'){
        // nothing — overlays handle instructions
      }
    }

function drawPipe(x, top, width, gap){
      // top pipe
      ctx.save();
      ctx.fillStyle = '#2b8f4a';
      ctx.fillRect(x, 0, width, top);
      // cap/top edge
      ctx.fillStyle = '#246e3a';
      ctx.fillRect(x-2, top - 10, width+4, 10);
      // bottom pipe
      const bottomY = top + gap;
      ctx.fillStyle = '#2b8f4a';
      ctx.fillRect(x, bottomY, width, H - FLOOR_HEIGHT - bottomY);
      ctx.fillStyle = '#246e3a';
      ctx.fillRect(x-2, bottomY, width+4, 10);
      ctx.restore();
    }

function loop(now){
      if (!lastFrame) lastFrame = now;
      const deltaMs = Math.min(40, now - lastFrame); // clamp dt to avoid big jumps
      const dt = deltaMs / (1000/60); // scale to ~60fps units
      lastFrame = now;

if (running){
        update(dt);
      }

renderFrame();

if (running){
        window.requestAnimationFrame(loop);
      }
    }

// initial setup
    resetGame();
    renderFrame();

// expose a simple accessibility feature: announce score change (visually label only)
    // No ARIA live region added to keep code lightweight — teachers can extend if needed.

})();
  </script>
</body>
</html>

Flappy Bird Game Demo - HTML Canvas JavaScript

Recommended

Developer Portfolio HTML Template

CSS Animation Container HTML Structure

Titan's games v0.2

HTML

CSS

JS

Recommended

Developer Portfolio HTML Template

CSS Animation Container HTML Structure

Titan's games v0.2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS