WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Drift Racer Game HTML: Menu, Levels, HUD
21
azerty
Open In Editor
Video
Publish Your Code
0
Recommended
11 March 2024
PingPong Game
26 September 2024
Stack Game
12 January 2026
Game
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drift Racer - Second Person</title> <link rel="stylesheet" href="drift_style.css"> </head> <body> <div id="game-container"> <canvas id="gameCanvas"></canvas> <!-- Main Menu --> <div id="main-menu"> <h1>DRIFT RACER</h1> <div class="menu-buttons"> <button id="free-mode-btn">FREE MODE</button> <button id="level-mode-btn">LEVEL MODE (1-99)</button> </div> <div class="instructions"> <p><strong>Controls:</strong></p> <p>WASD or Arrows - Drive</p> <p>SPACE - Brake / Drift</p> <p>Goal: Drift and dodge obstacles!</p> </div> </div> <!-- Level Selection --> <div id="level-select" class="hidden"> <h2>SELECT LEVEL</h2> <div class="levels-grid"> <button class="level-btn" data-level="1">1</button> <button class="level-btn" data-level="2">2</button> <button class="level-btn" data-level="3">3</button> <button class="level-btn" data-level="4">4</button> <button class="level-btn" data-level="5">5</button> <button class="level-btn" data-level="6">6</button> <button class="level-btn" data-level="7">7</button> <button class="level-btn" data-level="8">8</button> <button class="level-btn" data-level="9">9</button> <button class="level-btn" data-level="10">10</button> <button class="level-btn" data-level="11">11</button> <button class="level-btn" data-level="12">12</button> </div> <button id="back-btn">BACK</button> </div> <!-- HUD --> <div id="hud" class="hidden"> <div id="level-display">Level: <span id="current-level">1</span></div> <div id="score-display">Score: <span id="score">0</span></div> <div id="drift-display">Drift: <span id="drift-points">0</span></div> <div id="speed-display">Speed: <span id="speed">0</span> km/h</div> </div> <!-- Game Over --> <div id="game-over" class="hidden"> <h1>CRASH!</h1> <p>You hit an obstacle!</p> <p>Score: <span id="final-score">0</span></p> <button onclick="location.reload()">TRY AGAIN</button> </div> <!-- Win --> <div id="level-complete" class="hidden"> <h1>LEVEL COMPLETE!</h1> <p>Score: <span id="level-score">0</span></p> <button id="next-level-btn">NEXT LEVEL</button> </div> </div> <script src="drift_game.js"></script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a3a1a 0%, #0d1f0d 100%); font-family: 'Arial', sans-serif; overflow: hidden; } #game-container { position: relative; width: 1200px; height: 700px; border: 4px solid #333; border-radius: 10px; overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); } #gameCanvas { display: block; width: 100%; height: 100%; } /* Main Menu */ #main-menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); z-index: 100; } #main-menu h1 { font-size: 64px; color: #fff; text-shadow: 0 0 30px #ff4444, 0 0 60px #ff4444; margin-bottom: 50px; letter-spacing: 10px; } .menu-buttons { display: flex; gap: 30px; margin-bottom: 40px; } .menu-buttons button { padding: 20px 50px; font-size: 24px; font-weight: bold; color: #fff; background: linear-gradient(135deg, #e94560 0%, #c23a51 100%); border: 3px solid #fff; border-radius: 10px; cursor: pointer; transition: all 0.3s; } .menu-buttons button:hover { transform: scale(1.1); box-shadow: 0 0 30px rgba(233, 69, 96, 0.8); } .instructions { background: rgba(0, 0, 0, 0.5); padding: 20px 40px; border-radius: 10px; color: #aaa; text-align: center; } .instructions p { margin: 5px 0; } /* Level Selection */ #level-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); z-index: 100; } #level-select h2 { color: #fff; font-size: 40px; margin-bottom: 30px; text-shadow: 0 0 20px #4da8da; } .levels-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin-bottom: 30px; } .level-btn { width: 80px; height: 80px; font-size: 28px; font-weight: bold; color: #fff; background: linear-gradient(135deg, #4da8da 0%, #2d7a9e 100%); border: 3px solid #fff; border-radius: 10px; cursor: pointer; transition: all 0.3s; } .level-btn:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(77, 168, 218, 0.8); background: linear-gradient(135deg, #6fc5ea 0%, #4da8da 100%); } #back-btn { padding: 15px 40px; font-size: 18px; color: #fff; background: #333; border: 2px solid #fff; border-radius: 8px; cursor: pointer; } #back-btn:hover { background: #555; } /* HUD */ #hud { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; pointer-events: none; z-index: 50; } #level-display, #score-display, #drift-display, #speed-display { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 18px; font-weight: bold; border: 2px solid rgba(255, 255, 255, 0.3); } #drift-display { color: #ffcc00; text-shadow: 0 0 10px #ffcc00; } #speed-display { color: #00ff00; } /* Game Screens */ #game-over, #level-complete { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.9); color: #fff; z-index: 200; } #game-over h1 { font-size: 60px; color: #ff4444; text-shadow: 0 0 30px #ff0000; margin-bottom: 20px; } #level-complete h1 { font-size: 50px; color: #00ff00; text-shadow: 0 0 30px #00ff00; margin-bottom: 20px; } #game-over p, #level-complete p { font-size: 24px; margin-bottom: 10px; } #game-over button, #level-complete button, #next-level-btn { margin-top: 30px; padding: 15px 50px; font-size: 20px; font-weight: bold; color: #fff; background: linear-gradient(135deg, #e94560 0%, #c23a51 100%); border: 3px solid #fff; border-radius: 10px; cursor: pointer; transition: all 0.3s; } #game-over button:hover, #level-complete button:hover { transform: scale(1.1); box-shadow: 0 0 30px rgba(233, 69, 96, 0.8); } .hidden { display: none !important; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */// Drift Racer - Second Person Car Game window.onload = function() { const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 1200; canvas.height = 700; // Game state let gameStarted = false; let gameOver = false; let currentLevel = 1; let score = 0; let driftPoints = 0; let gameMode = 'free'; // 'free' or 'level' let levelProgress = 0; let levelTarget = 500; // Road let roadOffset = 0; const roadWidth = 400; const grassWidth = (canvas.width - roadWidth) / 2; // Car (second person view - we see the back of our car) const car = { x: canvas.width / 2, y: 500, width: 60, height: 100, speed: 0, maxSpeed: 15, angle: 0, driftAngle: 0, isDrifting: false }; // Obstacles let obstacles = []; let policeCars = []; // Keys const keys = {}; // Menu buttons document.getElementById('free-mode-btn').addEventListener('click', () => { gameMode = 'free'; startGame(); }); document.getElementById('level-mode-btn').addEventListener('click', () => { document.getElementById('main-menu').classList.add('hidden'); document.getElementById('level-select').classList.remove('hidden'); }); document.querySelectorAll('.level-btn').forEach(btn => { btn.addEventListener('click', function() { currentLevel = parseInt(this.dataset.level); gameMode = 'level'; levelTarget = currentLevel * 500; startGame(); }); }); document.getElementById('back-btn').addEventListener('click', () => { document.getElementById('level-select').classList.add('hidden'); document.getElementById('main-menu').classList.remove('hidden'); }); document.getElementById('next-level-btn').addEventListener('click', () => { currentLevel++; gameMode = 'level'; levelTarget = currentLevel * 500; startGame(); }); function startGame() { document.getElementById('main-menu').classList.add('hidden'); document.getElementById('level-select').classList.add('hidden'); document.getElementById('hud').classList.remove('hidden'); document.getElementById('current-level').textContent = currentLevel; // Reset car car.x = canvas.width / 2; car.y = 500; car.speed = 0; car.angle = 0; car.driftAngle = 0; car.isDrifting = false; // Reset game state score = 0; driftPoints = 0; levelProgress = 0; obstacles = []; policeCars = []; gameOver = false; gameStarted = true; gameLoop(); } function spawnObstacle() { const side = Math.random() > 0.5 ? 'left' : 'right'; obstacles.push({ x: side === 'left' ? grassWidth + Math.random() * 50 : grassWidth + roadWidth - 50 - Math.random() * 50, y: -50, width: 40, height: 40, type: Math.random() > 0.5 ? 'cone' : 'barrier' }); } function spawnPolice() { const side = Math.random() > 0.5 ? 'left' : 'right'; policeCars.push({ x: side === 'left' ? grassWidth + Math.random() * 30 : grassWidth + roadWidth - 30, y: -80, width: 50, height: 90, speed: 12 + currentLevel * 0.5 // Police get faster in higher levels }); } function drawGrass() { // Left grass ctx.fillStyle = '#2d5a27'; ctx.fillRect(0, 0, grassWidth, canvas.height); // Right grass ctx.fillRect(grassWidth + roadWidth, 0, grassWidth, canvas.height); // Grass texture ctx.strokeStyle = '#3d7a37'; ctx.lineWidth = 2; for (let y = 0; y < canvas.height; y += 30) { const offsetY = (y + roadOffset) % 30; for (let x = 10; x < grassWidth; x += 40) { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + 10, y - 10); ctx.stroke(); } for (let x = grassWidth + roadWidth + 10; x < canvas.width; x += 40) { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + 10, y - 10); ctx.stroke(); } } } function drawRoad() { // Road surface ctx.fillStyle = '#333'; ctx.fillRect(grassWidth, 0, roadWidth, canvas.height); // Road lines ctx.strokeStyle = '#fff'; ctx.lineWidth = 4; ctx.setLineDash([40, 30]); ctx.lineDashOffset = -roadOffset; // Center line ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); // Side lines ctx.strokeStyle = '#ffcc00'; ctx.lineWidth = 6; ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(grassWidth + 5, 0); ctx.lineTo(grassWidth + 5, canvas.height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(grassWidth + roadWidth - 5, 0); ctx.lineTo(grassWidth + roadWidth - 5, canvas.height); ctx.stroke(); } function drawCar() { ctx.save(); ctx.translate(car.x, car.y); ctx.rotate(car.driftAngle); // Car shadow ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.fillRect(-car.width / 2 + 5, -car.height / 2 + 5, car.width, car.height); // Car body - Red with white hood // Main red body ctx.fillStyle = '#cc0000'; ctx.fillRect(-car.width / 2, -car.height / 2 + 20, car.width, car.height - 20); // White hood ctx.fillStyle = '#ffffff'; ctx.fillRect(-car.width / 2, -car.height / 2 + 20, car.width, 30); // White trunk ctx.fillRect(-car.width / 2, car.height / 2 - 15, car.width, 15); // Black rear window ctx.fillStyle = '#111'; ctx.fillRect(-car.width / 2 + 8, -car.height / 2 + 50, car.width - 16, 25); // Black side windows ctx.fillStyle = '#111'; ctx.fillRect(-car.width / 2 + 5, -car.height / 2 + 80, 12, 30); ctx.fillRect(car.width / 2 - 17, -car.height / 2 + 80, 12, 30); // Headlights (at top since we're viewing from behind) ctx.fillStyle = '#ffffcc'; ctx.fillRect(-car.width / 2 + 8, -car.height / 2 + 52, 12, 8); ctx.fillRect(car.width / 2 - 20, -car.height / 2 + 52, 12, 8); // Tail lights ctx.fillStyle = '#ff0000'; ctx.fillRect(-car.width / 2 + 5, car.height / 2 - 10, 10, 6); ctx.fillRect(car.width / 2 - 15, car.height / 2 - 10, 10, 6); // Wheels ctx.fillStyle = '#111'; ctx.fillRect(-car.width / 2 - 8, -car.height / 2 + 25, 10, 25); ctx.fillRect(car.width / 2 - 2, -car.height / 2 + 25, 10, 25); ctx.fillRect(-car.width / 2 - 8, car.height / 2 - 50, 10, 25); ctx.fillRect(car.width / 2 - 2, car.height / 2 - 50, 10, 25); // Drift smoke effect if (car.isDrifting && car.speed > 5) { ctx.fillStyle = 'rgba(200, 200, 200, 0.5)'; for (let i = 0; i < 5; i++) { const smokeX = (Math.random() - 0.5) * car.width; const smokeY = car.height / 2 + Math.random() * 30; const smokeSize = 10 + Math.random() * 20; ctx.beginPath(); ctx.arc(smokeX, smokeY, smokeSize, 0, Math.PI * 2); ctx.fill(); } } ctx.restore(); } function drawObstacle(obs) { if (obs.type === 'cone') { // Orange cone ctx.fillStyle = '#ff6600'; ctx.beginPath(); ctx.moveTo(obs.x, obs.y + obs.height); ctx.lineTo(obs.x + obs.width / 2, obs.y); ctx.lineTo(obs.x + obs.width, obs.y + obs.height); ctx.closePath(); ctx.fill(); // White stripes ctx.fillStyle = '#fff'; ctx.fillRect(obs.x + 5, obs.y + obs.height * 0.4, obs.width - 10, 5); } else { // Traffic barrier ctx.fillStyle = '#ffcc00'; ctx.fillRect(obs.x, obs.y, obs.width, obs.height); ctx.fillStyle = '#000'; ctx.fillRect(obs.x + 5, obs.y + 5, obs.width - 10, obs.height - 10); ctx.fillStyle = '#ffcc00'; ctx.fillRect(obs.x + 10, obs.y + 10, obs.width - 20, 10); } } function drawPoliceCar(police) { ctx.save(); ctx.translate(police.x, police.y); // Police car body - white and black ctx.fillStyle = '#fff'; ctx.fillRect(-police.width / 2, -police.height / 2, police.width, police.height); // Black stripe ctx.fillStyle = '#111'; ctx.fillRect(-police.width / 2, -10, police.width, 20); // Police lights ctx.fillStyle = '#0000ff'; ctx.fillRect(-15, -5, 12, 10); ctx.fillStyle = '#ff0000'; ctx.fillRect(3, -5, 12, 10); // Siren effect const time = Date.now() / 100; if (Math.floor(time) % 2 === 0) { ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 50, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } function updateCar() { // Acceleration if (keys['KeyW'] || keys['ArrowUp']) { car.speed = Math.min(car.speed + 0.3, car.maxSpeed); } else if (keys['KeyS'] || keys['ArrowDown']) { car.speed = Math.max(car.speed - 0.5, -5); } else { car.speed *= 0.98; // Friction } // Steering if (keys['KeyA'] || keys['ArrowLeft']) { car.angle -= 0.03; if (car.isDrifting) { car.driftAngle -= 0.05; } } if (keys['KeyD'] || keys['ArrowRight']) { car.angle += 0.03; if (car.isDrifting) { car.driftAngle += 0.05; } } // Drift if (keys['Space'] && car.speed > 5) { car.isDrifting = true; car.driftAngle += (car.angle - car.driftAngle) * 0.1; driftPoints += Math.abs(car.speed) * 2; score += Math.floor(Math.abs(car.speed)); } else { car.isDrifting = false; car.driftAngle = car.driftAngle * 0.9; } // Move car car.x += Math.sin(car.angle) * car.speed; // Keep car on road const leftBound = grassWidth + car.width / 2; const rightBound = grassWidth + roadWidth - car.width / 2; if (car.x < leftBound) { car.x = leftBound; car.speed *= 0.8; } if (car.x > rightBound) { car.x = rightBound; car.speed *= 0.8; } // Update road offset for scrolling effect roadOffset += car.speed; // Update score score += Math.floor(car.speed / 10); // Level mode progress if (gameMode === 'level') { levelProgress += car.speed; if (levelProgress >= levelTarget) { winLevel(); } } } function updateObstacles() { // Spawn obstacles if (Math.random() < 0.02) { spawnObstacle(); } // Spawn police in level mode if (gameMode === 'level' && Math.random() < 0.01 + currentLevel * 0.002) { spawnPolice(); } // Update obstacles obstacles.forEach(obs => { obs.y += car.speed; }); // Update police policeCars.forEach(police => { police.y += car.speed * 0.8; // Police move with road if (gameMode === 'level') { // Police chase player if (police.x < car.x) police.x += 1; if (police.x > car.x) police.x -= 1; } }); // Remove off-screen obstacles obstacles = obstacles.filter(obs => obs.y < canvas.height + 50); policeCars = policeCars.filter(police => police.y < canvas.height + 50); // Check collisions const carBounds = { left: car.x - car.width / 2 + 10, right: car.x + car.width / 2 - 10, top: car.y - car.height / 2 + 20, bottom: car.y + car.height / 2 }; // Check obstacle collision for (let obs of obstacles) { if (carBounds.right > obs.x && carBounds.left < obs.x + obs.width && carBounds.bottom > obs.y && carBounds.top < obs.y + obs.height) { crash(); return; } } // Check police collision for (let police of policeCars) { if (carBounds.right > police.x - police.width / 2 && carBounds.left < police.x + police.width / 2 && carBounds.bottom > police.y - police.height / 2 && carBounds.top < police.y + police.height / 2) { crash(); return; } } } function crash() { gameOver = true; gameStarted = false; document.getElementById('final-score').textContent = score; document.getElementById('game-over').classList.remove('hidden'); } function winLevel() { gameStarted = false; document.getElementById('level-score').textContent = score; document.getElementById('level-complete').classList.remove('hidden'); } function gameLoop() { if (!gameStarted || gameOver) return; // Clear ctx.clearRect(0, 0, canvas.width, canvas.height); // Update updateCar(); updateObstacles(); // Draw drawGrass(); drawRoad(); obstacles.forEach(obs => drawObstacle(obs)); policeCars.forEach(police => drawPoliceCar(police)); drawCar(); // Update HUD document.getElementById('score').textContent = score; document.getElementById('drift-points').textContent = driftPoints; document.getElementById('speed').textContent = Math.floor(car.speed * 10); requestAnimationFrame(gameLoop); } // Event listeners document.addEventListener('keydown', (e) => { keys[e.code] = true; if (['KeyW', 'KeyA', 'KeyS', 'KeyD', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(e.code)) { e.preventDefault(); } }); document.addEventListener('keyup', (e) => { keys[e.code] = false; }); // Initialize HUD document.getElementById('current-level').textContent = currentLevel; };
