Flappy Bird Game Demo - HTML Canvas JavaScript

1,106 iroger7

<!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>

CSS

Flappy Bird Game Demo - HTML Canvas JavaScript

Recommended