Flappy Car Game

Here is the complete HTML code for a playable Flappy Bird-style game where you control a car dodging traffic, ready to run in your browser. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Traffic Racer · Flappy Car</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { background: #1a2a32; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Roboto, system-ui, sans-serif; } .game-wrapper { background: #0f1a1f; padding: 20px 25px 25px 25px; border-radius: 32px; box-shadow: 0 20px 30px rgba(0,0,0,0.6); } canvas { display: block; margin: 0 auto; border-radius: 18px; background: #2d4a5a; box-shadow: inset 0 0 0 2px #3f6275, 0 10px 15px rgba(0,0,0,0.5); cursor: pointer; } .info-panel { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: #c0d9e5; font-weight: 600; letter-spacing: 0.5px; padding: 0 6px; } .score-box { background: #1f3a44; padding: 8px 20px; border-radius: 40px; font-size: 1.5rem; color: #f2e9c0; box-shadow: inset 0 2px 5px rgba(0,0,0,0.4); } .restart-btn { background: #3f6275; border: none; color: white; font-weight: bold; font-size: 1.1rem; padding: 8px 24px; border-radius: 40px; cursor: pointer; box-shadow: 0 5px 0 #1d2f38; transition: all 0.08s ease; letter-spacing: 0.5px; } .restart-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1d2f38; } .restart-btn:hover { background: #4e7a91; } .hint { font-size: 0.9rem; color: #9ab8c7; display: flex; gap: 12px; } .hint span { background: #1f3a44; padding: 4px 12px; border-radius: 30px; } </style> </head> <body> <div class="game-wrapper"> <canvas id="gameCanvas" width="400" height="600"></canvas> <div class="info-panel"> <div class="score-box">🏁 <span id="scoreDisplay">0</span></div> <div class="hint"><span>␣ / ↑</span> <span>R restart</span></div> <button class="restart-btn" id="restartButton">↻ RESTART</button> </div> </div> <script> (function() { // ---------- CANVAS & CONTEXT ---------- const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreSpan = document.getElementById('scoreDisplay'); // ---------- FIXED DIMENSIONS ---------- const LANE_COUNT = 3; const LANE_WIDTH = 90; const ROAD_LEFT = 65; const ROAD_RIGHT = ROAD_LEFT + LANE_COUNT * LANE_WIDTH; // 335 const CAR_WIDTH = 54; const CAR_HEIGHT = 84; // ---------- GAME STATE ---------- let gameActive = false; let score = 0; // Player car (x = left position) let player = { x: ROAD_LEFT + LANE_WIDTH * 1 + (LANE_WIDTH - CAR_WIDTH) / 2, // middle lane y: 500, width: CAR_WIDTH, height: CAR_HEIGHT }; // Obstacles (traffic cars) let obstacles = []; // Control flags let upPressed = false; let downPressed = false; // Speed & physics const BASE_SPEED = 3.2; const MAX_SPEED = 7.5; const ACCELERATION = 0.15; let currentSpeed = BASE_SPEED; // Spawn control let frameCounter = 0; const SPAWN_INTERVAL = 55; // frames // ---------- HELPER FUNCTIONS ---------- function resetGame() { gameActive = true; score = 0; currentSpeed = BASE_SPEED; obstacles = []; player.x = ROAD_LEFT + LANE_WIDTH * 1 + (LANE_WIDTH - CAR_WIDTH) / 2; player.y = 500; upPressed = false; downPressed = false; frameCounter = 0; updateScoreDisplay(); } function updateScoreDisplay() { scoreSpan.textContent = Math.floor(score); } // ---------- COLLISION DETECTION (AABB) ---------- function checkCollision(rect1, rect2) { return (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y); } // ---------- SPAWN OBSTACLE ---------- function spawnObstacle() { // random lane (0,1,2) const laneIndex = Math.floor(Math.random() * LANE_COUNT); const laneX = ROAD_LEFT + laneIndex * LANE_WIDTH; // random width (slightly smaller than lane) const obsWidth = 46 + Math.floor(Math.random() * 10); // 46-55 const obsHeight = 78; // ensure car fits in lane const offsetX = (LANE_WIDTH - obsWidth) / 2; const x = laneX + offsetX; const y = -obsHeight - Math.random() * 30; // start above canvas obstacles.push({ x: x, y: y, width: obsWidth, height: obsHeight, lane: laneIndex }); } // ---------- UPDATE GAME ---------- function updateGame() { if (!gameActive) return; // 1. move player (vertical only, but we keep horizontal fixed) // up/down movement (clamped) const MOVE_STEP = 5.2; if (upPressed && player.y > 20) { player.y -= MOVE_STEP; } if (downPressed && player.y < 540) { player.y += MOVE_STEP; } // 2. speed dynamics (smooth increase) if (currentSpeed < MAX_SPEED) { currentSpeed = Math.min(currentSpeed + ACCELERATION * 0.2, MAX_SPEED); } // 3. move obstacles downward for (let i = obstacles.length - 1; i >= 0; i--) { const obs = obstacles[i]; obs.y += currentSpeed; // 4. collision detection with player if (checkCollision(player, obs)) { gameActive = false; return; // stop update } // 5. remove if off screen (below canvas) and increase score if (obs.y > canvas.height + 30) { obstacles.splice(i, 1); // increase score when car passes safely if (gameActive) { score += 1; updateScoreDisplay(); } } } // 6. spawn new obstacles frameCounter++; if (frameCounter >= SPAWN_INTERVAL) { spawnObstacle(); frameCounter = 0; // occasionally spawn double (rare) if (Math.random() < 0.2 && gameActive) { spawnObstacle(); } } // 7. edge case: if player goes too far up/down, still fine // but we clamp inside movement } // ---------- DRAWING ---------- function drawBackground() { // asphalt ctx.fillStyle = '#2d4a5a'; ctx.fillRect(0, 0, canvas.width, canvas.height); // road ctx.fillStyle = '#3a3f44'; ctx.fillRect(ROAD_LEFT - 8, 0, LANE_COUNT * LANE_WIDTH + 16, canvas.height); // lane markings (dashed) ctx.strokeStyle = '#e8eef2'; ctx.lineWidth = 4; ctx.setLineDash([22, 18]); for (let i = 1; i < LANE_COUNT; i++) { const laneX = ROAD_LEFT + i * LANE_WIDTH; ctx.beginPath(); ctx.moveTo(laneX, 0); ctx.lineTo(laneX, canvas.height); ctx.strokeStyle = '#cbd8e0'; ctx.lineWidth = 3; ctx.stroke(); } ctx.setLineDash([]); // road edges ctx.fillStyle = '#5c6b73'; ctx.fillRect(ROAD_LEFT - 12, 0, 6, canvas.height); ctx.fillRect(ROAD_RIGHT + 6, 0, 6, canvas.height); // subtle guardrails ctx.fillStyle = '#7f8c8d'; ctx.fillRect(ROAD_LEFT - 18, 0, 6, canvas.height); ctx.fillRect(ROAD_RIGHT + 12, 0, 6, canvas.height); } function drawCar(x, y, w, h, color, isPlayer = false) { // body ctx.fillStyle = color; ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = 10; ctx.beginPath(); ctx.roundRect(x, y, w, h, 12); ctx.fill(); // windshield / windows ctx.shadowBlur = 4; ctx.fillStyle = '#1e272e'; ctx.beginPath(); ctx.roundRect(x + 6, y + 10, w - 12, 18, 6); ctx.fill(); ctx.fillStyle = '#34495e'; ctx.beginPath(); ctx.roundRect(x + 6, y + h - 30, w - 12, 16, 6); ctx.fill(); // headlights / taillights ctx.fillStyle = '#f1c40f'; ctx.beginPath(); ctx.arc(x + 8, y + 6, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + w - 8, y + 6, 5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#e74c3c'; ctx.beginPath(); ctx.arc(x + 8, y + h - 6, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + w - 8, y + h - 6, 5, 0, Math.PI * 2); ctx.fill(); // wheels ctx.fillStyle = '#2c3e50'; ctx.shadowBlur = 6; ctx.fillRect(x - 4, y + 14, 6, 18); ctx.fillRect(x + w - 2, y + 14, 6, 18); ctx.fillRect(x - 4, y + h - 34, 6, 18); ctx.fillRect(x + w - 2, y + h - 34, 6, 18); ctx.shadowBlur = 0; } // roundRect utility CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; this.moveTo(x + r, y); this.lineTo(x + w - r, y); this.quadraticCurveTo(x + w, y, x + w, y + r); this.lineTo(x + w, y + h - r); this.quadraticCurveTo(x + w, y + h, x + w - r, y + h); this.lineTo(x + r, y + h); this.quadraticCurveTo(x, y + h, x, y + h - r); this.lineTo(x, y + r); this.quadraticCurveTo(x, y, x + r, y); return this; }; function drawScene() { drawBackground(); // draw obstacles (traffic cars) for (let obs of obstacles) { // alternate colors const colors = ['#d35400', '#8e44ad', '#16a085', '#c0392b', '#2c3e50']; const colorIdx = Math.abs(obs.x) % colors.length; drawCar(obs.x, obs.y, obs.width, obs.height, colors[colorIdx], false); } // draw player car (bright yellow) drawCar(player.x, player.y, player.width, player.height, '#f5b041', true); // game over overlay if (!gameActive) { ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#f1f2f6'; ctx.font = 'bold 32px "Segoe UI", Roboto, sans-serif'; ctx.textAlign = 'center'; ctx.shadowColor = 'black'; ctx.shadowBlur = 16; ctx.fillText('GAME OVER', canvas.width/2, 220); ctx.font = '22px "Segoe UI", sans-serif'; ctx.fillText('score: ' + Math.floor(score), canvas.width/2, 280); ctx.font = '18px sans-serif'; ctx.fillStyle = '#d5e8d4'; ctx.fillText('click restart', canvas.width/2, 350); ctx.shadowBlur = 0; } // small HUD (speed) ctx.fillStyle = '#d9e2e8'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'right'; ctx.fillText('⚡' + currentSpeed.toFixed(1), canvas.width - 12, 28); } // ---------- GAME LOOP ---------- function gameLoop() { if (gameActive) { updateGame(); } drawScene(); requestAnimationFrame(gameLoop); } // ---------- EVENT HANDLERS ---------- function handleKeyDown(e) { const key = e.key; if (key === 'ArrowUp' || key === ' ' || key === 'Space') { e.preventDefault(); upPressed = true; } if (key === 'ArrowDown') { e.preventDefault(); downPressed = true; } if (key === 'r' || key === 'R') { e.preventDefault(); resetGame(); } } function handleKeyUp(e) { const key = e.key; if (key === 'ArrowUp' || key === ' ' || key === 'Space') { e.preventDefault(); upPressed = false; } if (key === 'ArrowDown') { e.preventDefault(); downPressed = false; } } // restart via button document.getElementById('restartButton').addEventListener('click', () => { resetGame(); }); // also click on canvas to restart if game over canvas.addEventListener('click', () => { if (!gameActive) { resetGame(); } }); // prevent page scroll on space/arrows window.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault(); } }); // main listeners document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); // ---------- INIT & START ---------- // initial reset (game starts active) resetGame(); // start loop gameLoop(); // extra: prevent context menu on canvas canvas.addEventListener('contextmenu', (e) => e.preventDefault()); })(); </script> </body> </html> ``` ### Gameplay & Mechanics The core loop is simple: steer your car vertically to avoid oncoming traffic while your speed gradually increases. - **Controls & Feedback**: Use the **Up Arrow** or **Spacebar** to move your car up, and the **Down Arrow** to move down. The game provides immediate visual feedback through smooth movement and a live score counter. - **Progression & Difficulty**: Your score increases by 1 for each traffic car you safely pass. The game's speed steadily rises, making traffic patterns more challenging over time. A "Game Over" screen appears upon collision, and you can restart instantly via the button, the "R" key, or by clicking the canvas. - **Visual & Audio Cues**: The game features a clear road with lane markings, distinct car sprites for the player and traffic, and a subtle speed indicator. While there is no audio, the visual feedback and score updates keep you informed of your progress.