Trees Hate You
by enjoyooor
Write a complete, self-contained, single-file HTML game using Three.js and the Web Audio API based on the concept "Trees Hate You". The code must run immediately in any modern browser without any external image or audio assets. The final file must be fully functional, including all states, collision detection, and window resizing, without any placeholder code or "TODO" comments. ### Technical Architecture & Setup 1. **Three.js Core**: Load Three.js via a reliable CDN (e.g., `https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js`). 2. **2D Rendering in 3D**: - Use an `OrthographicCamera` pointing directly down the Z-axis at the XY plane to establish a stable 2D rendering viewport. - Handle window resizing dynamically, updating the camera's aspect ratio and renderer size while maintaining a fixed internal game coordinate system. 3. **UI Overlay**: To ensure crisp, high-performance pixel-art text without relying on external font files, use a CSS-styled HTML overlay layered directly on top of the Three.js canvas. Use system monospace fonts (`Courier New`, `monospace`) styled in uppercase, bold, and high-contrast colors to achieve a clean retro aesthetic. ### Visuals & Procedural Sprite Generation To avoid external image dependencies, generate the 2D pixel-art textures programmatically using small offscreen HTML Canvases, which are then converted to `THREE.CanvasTexture`. - **Texture Setup**: Ensure all textures use `THREE.NearestFilter` for both `minFilter` and `magFilter` to preserve sharp, pixelated edges when scaled. - **Background**: Set the renderer's clear color to a dark charcoal-gray (`#1C1E22`). - **Player Sprite**: Draw a blocky, minimalist, bright-yellow (`#FFEB3B`) humanoid figure. - **Tree Obstacles**: Draw symmetrical, retro-style teal/cyan (`#00F0FF`) pine/fir trees. - **Particles** (Optional): Create a simple particle system that spawns small yellow/teal square particles at the player's location upon a collision. ### Procedural Audio (Web Audio API) Modern browsers block audio until a user interaction occurs. Initialize a single `AudioContext` only after the player presses "Enter" on the title screen. Implement the following retro synthesized sound effects using oscillators and gain nodes: 1. **Start Game Sound**: A short, high-pitched rising sweep (e.g., a triangle wave rising from 150Hz to 600Hz over 0.2 seconds with a quick volume decay). 2. **Collision / Game Over Sound**: A low, explosive rumble (e.g., a sawtooth wave rapidly dropping from 300Hz to 40Hz over 0.6 seconds, combined with a quick volume fade, or procedurally generated white noise). 3. **Point Milestone Sound** (Optional): A short, bright dual-tone beep (e.g., a square wave playing at 880Hz for 0.05 seconds, immediately followed by 1760Hz for 0.05 seconds) triggered at score milestones. ### Game States & Flow - **State 1: Title Screen ("Trees Hate You")**: - Displays the title "Trees Hate You" in large, blocky text (dark green-gray text with a thick teal outline). - Displays flashing text: "PRESS ENTER TO PLAY". - Listening for the Enter key initializes the audio context, plays the Start Game Sound, and transitions to the gameplay state. - **State 2: Gameplay State**: - **Player Controls**: Use standard WASD and Arrow keys for 8-way movement. Keep the player bounded strictly within the visible screen borders. - **Obstacle Spawning**: Symmetrical teal trees spawn off-screen from all four edges and move across the screen in linear paths. - **Difficulty Scaling**: The score increases continuously over time. As the score increases, gradually ramp up the tree spawn rate and movement speed. - **Collision Detection**: Implement basic 2D bounding-box or bounding-circle collision detection between the player and the active trees. - **State 3: Game Over State**: - Triggered immediately upon collision. Stop the game loop, play the Collision Sound, and show a particle burst. - Display "GAME OVER" and the final score. - Display "PRESS ENTER TO RESTART" to reset game variables and return directly to the gameplay state. Provide the complete, clean, and fully commented HTML file.
