const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 1200; canvas.height = 800; const keys = {}; let gameRunning = true; let raceStartTime = Date.now(); window.addEventListener('keydown', (e) => { keys[e.key] = true; }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); class Kart { constructor(x, y, color, isPlayer = false) { this.x = x; this.y = y; this.width = 30; this.height = 40; this.color = color; this.angle = 0; this.speed = 0; this.maxSpeed = 6; this.acceleration = 0.2; this.friction = 0.05; this.turnSpeed = 0.08; this.isPlayer = isPlayer; this.lap = 0; this.checkpoints = new Set(); this.powerup = null; this.powerupDuration = 0; this.shield = false; this.lastPosition = { x, y }; } update() { this.lastPosition = { x: this.x, y: this.y }; if (this.isPlayer) { this.handleInput(); } else { this.handleAI(); } this.updatePowerup(); const rad = this.angle; this.x += Math.cos(rad) * this.speed; this.y += Math.sin(rad) * this.speed; this.speed *= (1 - this.friction); this.checkBounds(); this.checkCheckpoints(); } handleInput() { if (keys['ArrowUp']) { this.speed = Math.min(this.speed + this.acceleration, this.maxSpeed); } if (keys['ArrowDown']) { this.speed = Math.max(this.speed - this.acceleration * 1.5, -this.maxSpeed * 0.5); } if (keys['ArrowLeft'] && Math.abs(this.speed) > 0.5) { this.angle -= this.turnSpeed * (this.speed / this.maxSpeed); } if (keys['ArrowRight'] && Math.abs(this.speed) > 0.5) { this.angle += this.turnSpeed * (this.speed / this.maxSpeed); } if (keys[' '] && this.powerup) { this.usePowerup(); } } handleAI() { const track = game.track; const targetIndex = (this.checkpoints.size) % track.checkpoints.length; const target = track.checkpoints[targetIndex]; const dx = target.x - this.x; const dy = target.y - this.y; const targetAngle = Math.atan2(dy, dx); let angleDiff = targetAngle - this.angle; while (angleDiff > Math.PI) angleDiff -= Math.PI * 2; while (angleDiff < -Math.PI) angleDiff += Math.PI * 2; if (Math.abs(angleDiff) > 0.1) { this.angle += Math.sign(angleDiff) * this.turnSpeed; } const aiMaxSpeed = this.maxSpeed * (0.85 + Math.random() * 0.1); this.speed = Math.min(this.speed + this.acceleration, aiMaxSpeed); if (Math.random() < 0.002 && this.powerup) { this.usePowerup(); } } usePowerup() { if (this.powerup === 'boost') { this.speed = this.maxSpeed * 1.8; this.powerupDuration = 60; } else if (this.powerup === 'shield') { this.shield = true; this.powerupDuration = 180; } this.powerup = null; } updatePowerup() { if (this.powerupDuration > 0) { this.powerupDuration--; if (this.powerupDuration === 0) { this.shield = false; } } } checkBounds() { const track = game.track; if (this.x < track.bounds.left || this.x > track.bounds.right || this.y < track.bounds.top || this.y > track.bounds.bottom) { const innerBounds = track.innerBounds; const inInnerTrack = this.x > innerBounds.left && this.x < innerBounds.right && this.y > innerBounds.top && this.y < innerBounds.bottom; if (inInnerTrack) { this.x = this.lastPosition.x; this.y = this.lastPosition.y; this.speed *= -0.3; } } else { const innerBounds = track.innerBounds; const inInnerTrack = this.x > innerBounds.left && this.x < innerBounds.right && this.y > innerBounds.top && this.y < innerBounds.bottom; if (inInnerTrack) { this.x = this.lastPosition.x; this.y = this.lastPosition.y; this.speed *= -0.3; } } } checkCheckpoints() { const track = game.track; track.checkpoints.forEach((cp, index) => { const dx = this.x - cp.x; const dy = this.y - cp.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < cp.radius) { if (!this.checkpoints.has(index)) { this.checkpoints.add(index); if (index === 0 && this.checkpoints.size === track.checkpoints.length) { this.lap++; this.checkpoints.clear(); this.checkpoints.add(0); } } } }); } collectPowerup(powerup) { if (!this.powerup) { this.powerup = powerup.type; return true; } return false; } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); if (this.shield) { ctx.beginPath(); ctx.arc(0, 0, 35, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(100, 200, 255, 0.5)'; ctx.lineWidth = 3; ctx.stroke(); } ctx.fillStyle = this.color; ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); ctx.fillStyle = '#333'; ctx.fillRect(-this.width / 2 + 5, -this.height / 2 + 5, this.width - 10, 10); ctx.fillRect(-this.width / 2 + 5, this.height / 2 - 15, this.width - 10, 10); ctx.restore(); if (this.isPlayer) { ctx.fillStyle = 'yellow'; ctx.font = 'bold 16px Arial'; ctx.textAlign = 'center'; ctx.fillText('YOU', this.x, this.y - 40); } } } class Track { constructor() { this.bounds = { left: 50, right: canvas.width - 50, top: 50, bottom: canvas.height - 50 }; this.innerBounds = { left: 250, right: canvas.width - 250, top: 200, bottom: canvas.height - 200 }; this.checkpoints = [ { x: 600, y: 100, radius: 80 }, { x: 1000, y: 300, radius: 80 }, { x: 900, y: 600, radius: 80 }, { x: 500, y: 700, radius: 80 }, { x: 200, y: 400, radius: 80 } ]; } draw() { ctx.fillStyle = '#2d5016'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#4a7c2d'; ctx.fillRect(this.bounds.left, this.bounds.top, this.bounds.right - this.bounds.left, this.bounds.bottom - this.bounds.top); ctx.fillStyle = '#2d5016'; ctx.fillRect(this.innerBounds.left, this.innerBounds.top, this.innerBounds.right - this.innerBounds.left, this.innerBounds.bottom - this.innerBounds.top); ctx.strokeStyle = '#fff'; ctx.lineWidth = 4; ctx.setLineDash([20, 15]); const centerX = (this.bounds.left + this.bounds.right) / 2; const trackWidth = (this.bounds.right - this.bounds.left) / 2; ctx.beginPath(); ctx.moveTo(centerX, this.bounds.top); ctx.lineTo(centerX, this.bounds.bottom); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; const startX = 550; const startY = 70; const startWidth = 100; const startHeight = 60; for (let i = 0; i < 5; i++) { ctx.fillRect(startX + (i % 2) * 50, startY + Math.floor(i / 2) * 30, 50, 30); } ctx.fillStyle = '#fff'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.fillText('START', startX + 50, startY - 10); } } class Powerup { constructor(x, y) { this.x = x; this.y = y; this.radius = 20; this.type = Math.random() < 0.5 ? 'boost' : 'shield'; this.collected = false; this.respawnTime = 0; } update() { if (this.collected) { this.respawnTime--; if (this.respawnTime <= 0) { this.collected = false; this.type = Math.random() < 0.5 ? 'boost' : 'shield'; } } } draw() { if (!this.collected) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.type === 'boost' ? '#ff6b35' : '#4ecdc4'; ctx.fill(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.stroke(); ctx.fillStyle = '#fff'; ctx.font = 'bold 20px Arial'; ctx.textAlign = 'center'; ctx.fillText(this.type === 'boost' ? '⚡' : '🛡️', this.x, this.y + 7); } } checkCollision(kart) { if (this.collected) return false; const dx = kart.x - this.x; const dy = kart.y - this.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.radius + 20) { if (kart.collectPowerup(this)) { this.collected = true; this.respawnTime = 300; return true; } } return false; } } class Game { constructor() { this.track = new Track(); this.karts = [ new Kart(600, 120, '#e74c3c', true), new Kart(650, 120, '#3498db', false), new Kart(550, 120, '#2ecc71', false), new Kart(600, 160, '#f39c12', false), new Kart(650, 160, '#9b59b6', false) ]; this.player = this.karts[0]; this.powerups = [ new Powerup(900, 200), new Powerup(1050, 450), new Powerup(700, 650), new Powerup(300, 550), new Powerup(150, 250) ]; this.totalLaps = 3; this.raceFinished = false; } update() { if (this.raceFinished) return; this.karts.forEach(kart => kart.update()); this.powerups.forEach(powerup => { powerup.update(); this.karts.forEach(kart => { powerup.checkCollision(kart); }); }); this.checkRaceComplete(); this.updateHUD(); } draw() { this.track.draw(); this.powerups.forEach(powerup => powerup.draw()); this.karts.forEach(kart => kart.draw()); } checkRaceComplete() { if (this.player.lap >= this.totalLaps) { this.finishRace(); } } finishRace() { if (this.raceFinished) return; this.raceFinished = true; gameRunning = false; const finishTime = ((Date.now() - raceStartTime) / 1000).toFixed(2); const position = this.getPlayerPosition(); document.getElementById('resultText').textContent = position === 1 ? '🏆 Victory!' : 'Race Complete!'; document.getElementById('finalTime').textContent = `Time: ${finishTime}s`; document.getElementById('finalPosition').textContent = `Position: ${this.getPositionText(position)}`; document.getElementById('gameOver').classList.remove('hidden'); } getPlayerPosition() { const sorted = [...this.karts].sort((a, b) => { if (b.lap !== a.lap) return b.lap - a.lap; return b.checkpoints.size - a.checkpoints.size; }); return sorted.indexOf(this.player) + 1; } getPositionText(position) { const suffix = ['th', 'st', 'nd', 'rd']; const v = position % 100; return position + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]); } updateHUD() { const position = this.getPlayerPosition(); document.getElementById('position').textContent = this.getPositionText(position); document.getElementById('lap').textContent = `${Math.min(this.player.lap + 1, this.totalLaps)}/${this.totalLaps}`; const elapsedTime = ((Date.now() - raceStartTime) / 1000).toFixed(2); document.getElementById('time').textContent = elapsedTime + 's'; const speedPercent = Math.abs(this.player.speed / this.player.maxSpeed * 100).toFixed(0); document.getElementById('speed').textContent = speedPercent + '%'; let powerupText = 'None'; if (this.player.powerup) { powerupText = this.player.powerup === 'boost' ? '⚡ Boost (Space)' : '🛡️ Shield (Space)'; } else if (this.player.shield) { powerupText = '🛡️ Active'; } document.getElementById('powerupDisplay').textContent = powerupText; } } const game = new Game(); function gameLoop() { if (gameRunning) { game.update(); } game.draw(); requestAnimationFrame(gameLoop); } gameLoop(); document.getElementById('restartBtn').addEventListener('click', () => { location.reload(); });