Turbo Kart Dash
Create a complete Mario Kart–style arcade racing game using ONLY HTML, CSS, and vanilla JavaScript. VERY IMPORTANT REQUIREMENT: - Everything must be contained in ONE single HTML file. - Do not create separate CSS files. - Do not create separate JavaScript files. - Do not use e...
Create a complete Mario Kart–style arcade racing game using ONLY HTML, CSS, and vanilla JavaScript. VERY IMPORTANT REQUIREMENT: - Everything must be contained in ONE single HTML file. - Do not create separate CSS files. - Do not create separate JavaScript files. - Do not use external libraries, frameworks, CDNs, images, audio files, fonts, or assets. - All CSS must be inside a <style> tag. - All JavaScript must be inside a <script> tag. - The final answer must output only the complete working HTML code. LEGAL / ORIGINALITY REQUIREMENTS: - Do not use Nintendo, Mario, Mario Kart, or any copyrighted characters, names, logos, music, sounds, tracks, or images. - Make the game original, but inspired by colorful arcade kart racers. - Use original names such as “Turbo Kart Dash,” “Pixel Kart Rally,” or similar. GAME TYPE: - Make a polished browser-based kart racing game. - Use an HTML5 <canvas> for the main game rendering. - The game should feel like a retro arcade kart racer. - The game should work by simply opening the HTML file in a browser. CORE GAMEPLAY: - The player controls a small kart on a racing track. - Use a top-down or pseudo-3D racing view. - The kart should be able to accelerate, brake, reverse slowly, steer left/right, and drift. - Include smooth movement physics: - acceleration - deceleration - friction - max speed - turning sensitivity - drift/sliding effect - speed boost - The player must complete multiple laps around a track. - Add a clear start line / finish line. - Add checkpoints so laps only count when the player completes the track properly. CONTROLS: - Support both keyboard control schemes: - Arrow keys - WASD - Controls: - Up / W = accelerate - Down / S = brake or reverse - Left / A = steer left - Right / D = steer right - Space = drift - Shift = use boost if available - R = restart game - P = pause / unpause TRACK REQUIREMENTS: - Create an original colorful race track. - Track should have: - road surface - grass or off-road area - track boundaries - curves - at least one narrow section - start / finish line - visual decorations - The kart should slow down when driving off-road. - The kart should collide with hard barriers or track walls. - Add mini-map or track indicator if possible. RACERS / AI: - Add at least 3 computer-controlled opponent karts. - Opponent karts should drive around the track automatically. - They should follow waypoints around the track. - They should have different colors and slightly different speeds. - Add simple collision handling between player and AI racers. - Show racer positions or rank if possible. ITEMS / POWERUPS: - Add collectible items on the track, such as: - coins - boost pads - mystery item boxes - Coins should increase score. - Boost pads should temporarily increase speed. - Mystery item boxes can randomly give: - speed boost - shield - extra points - temporary handling improvement - Add visual feedback when an item is collected. HUD / UI: - Display a polished HUD showing: - current lap - total laps - timer - speed - score / coins - current position - boost status - pause status - Add a start screen with: - game title - controls - start button or “Press Enter to Start” - Add a countdown before the race starts: - 3 - 2 - 1 - GO! - Add a finish screen showing: - final time - score - coins collected - placement - restart instructions VISUAL DESIGN: - Make the game colorful, polished, and fun. - Use only shapes, gradients, shadows, and canvas drawing. - Create kart sprites using canvas shapes, not image files. - Add animated effects: - tire skid marks while drifting - boost flame behind kart - coin sparkle - item box glow - speed lines during boost - simple particle effects - Add camera following the player smoothly. - Add screen shake or flash when boosting or crashing. - Make the UI modern and readable. AUDIO: - Since no external files are allowed, create simple sound effects using the Web Audio API. - Add sound effects for: - starting countdown - coin pickup - boost - collision - lap completion - race finish - Include a mute button or M key to toggle sound. CODE QUALITY: - Write clean, organized code. - Use classes or structured objects for: - Player kart - AI racers - Track - Items - Particles - Game state - Add helpful comments explaining important sections. - Make the code easy to edit. - Avoid unnecessary complexity that would prevent the game from running smoothly. PERFORMANCE: - Use requestAnimationFrame for the game loop. - Keep performance smooth in modern browsers. - Make the canvas resize responsively to the browser window. - Keep gameplay working on different screen sizes. GAME STATES: Include these game states: - loading or setup - title screen - countdown - racing - paused - finished / results screen FINAL OUTPUT: - Output only one complete HTML file. - The file must include: - <!DOCTYPE html> - <html> - <head> - embedded <style> - <body> - <canvas> - embedded <script> - Do not include explanations before or after the code. - Do not use Markdown formatting. - Do not split the answer into multiple files. - The result must be playable immediately after saving as index.html and opening in a browser.