The Crawler
Write a highly polished, self-contained 3D browser game called "The Crawler" in a single HTML file under 2MB. Use Three.js (via CDN) for the 3D engine, vanilla JavaScript for the game logic, and raw CSS for a dark, gritty, blood-stained horror aesthetic. Ensure all image textu...
Write a highly polished, self-contained 3D browser game called "The Crawler" in a single HTML file under 2MB. Use Three.js (via CDN) for the 3D engine, vanilla JavaScript for the game logic, and raw CSS for a dark, gritty, blood-stained horror aesthetic. Ensure all image textures are downscaled and embedded directly inside the code as Base64 Data URIs to maintain the single-file constraint. Aesthetic & UI: Create a dark, PS1-style retro horror vibe. The main menu should have a dark radial gradient background with the title "THE CRAWLER" glowing in a soft, diffuse crimson red. Include a "Normal Mode" and "Extreme Mode". The in-game UI must feature a dynamic stamina bar, a boss health bar at the top, a player health bar at the bottom, and a "Blood Vials [ 3 / 3 ]" tracker in the top-left corner. Player Mechanics & Controls: Implement smooth first-person movement (WASD) with PointerLockControls for PC. Include a Sprint mechanic (Shift) and a Dodge Roll (Spacebar) that consumes stamina and provides brief invulnerability frames. Crucially, implement full Mobile Touch support: an invisible drag area on the top 60% of the screen to look around, a virtual D-Pad on the bottom-left, and four action buttons (Attack, Block, Dodge, Sprint) on the bottom-right. Combat System: Weapon: A first-person 3D sword constructed from geometric primitives floating in front of the camera. Attacking: A Minecraft-style charged attack system. Spamming click does minimal damage, while waiting for the charge meter to fill unleashes a heavy strike. Blocking/Parrying: Right-click to raise a guard. If the guard is hit by the boss, the shield breaks, mitigating the damage but placing the block on a cooldown. A perfectly timed block against the boss's pounce will "Parry" it, knocking the boss back and stunning it for 1 second. Healing: The player starts with 3 "Blood Vials". Pressing 'Q' (or the mobile Heal button) consumes a vial to restore 40% health, flashing the screen green. The Environment: A dark, circular arena bounded by a metallic ring. The floor is textured with a base64 stone grid. Place 8 destructible stone pillars in a circle. If the boss or a projectile hits a pillar, it loses health, visually shrinks, and eventually shatters. Boss AI ("The Crawler"): Build a terrifying, giant 8-legged spider out of Three.js sphere and cylinder primitives. Animate the legs procedurally as it walks. The boss AI must have several states: Chase: Relentlessly pursues the player. Spit Web: Shoots a projectile that damages the player and applies a "Web Trap" debuff, severely slowing the player down and disabling dodges until they spam the attack button 3 times to break free. Summon: Spawns 3-5 smaller, faster spider minions that chase the player and explode on contact. The player can instantly kill minions by swinging their sword. Pounce: The boss locks onto the player's position at the start of a 0.5-second windup animation, then leaps into the air and slams down on that location. The player must use this windup window to dodge out of the way.