Comments
Neon Panda Runner
# Neon Panda Runner - Game Description
**Neon Panda Runner** is a high-intensity, visually striking 3D endless runner. Players control a cybernetic panda navigating winding futuristic tracks, dodging high-speed trains, hazards, and enemy swarms, while collecting coins and power-ups to survive.
---
## 🎮 Gameplay & Core Mechanics
* **Infinite Curved Track:** The game uses a custom WebGL vertex shader displacement technique to curve the track procedurally as you run, simulating hills and winding turns in real-time.
* **Energy-Based Survival:** The score acts as your energy/health pool. Colliding with obstacles or bad gates depletes your energy, while collecting items and hitting good gates increases it. If energy reaches zero, the game ends.
* **Math Gates:** Procedurally spawned holographic panels featuring math operators (`+`, `-`, `x`, `÷`) that scale or modify your energy count. Players must quickly calculate and choose the most rewarding side.
* **Dynamic Lane Easing:** The player moves smoothly across 3 lanes (Left, Center, Right) using responsive lane-switching math with frame-rate independent easing.
* **Combo System:** Successive gate-hits build a combo multiplier, triggering ambient visual screen flashes and high-score multipliers.
---
## 🛠️ Technology Stack
* **Graphics Engine:** [Three.js](https://threejs.org/) (WebGL) for rendering 3D geometries, materials, custom shaders, lights, and particle physics.
* **Build Tool & Dev Server:** [Vite](https://vitejs.dev/) for fast module bundling and running the development environment.
* **UI & Styles:** Semantic HTML5, CSS3 Custom Properties (variables), Outfit typography, and advanced CSS transforms/animations.
* **Deployment config:** Netlify-compatible configuration file (`netlify.toml`) for static hosting with optimized caching.
---
## 🌌 Aesthetics & Themes
The game features dynamic, distance-based theme transitions. As the player runs further, the world smoothly transitions every 1,000 meters through 5 distinct sci-fi and synthwave-inspired styles:
| Theme Name | Background Color | Emissive Rail Color | Aesthetic Description |
| :--- | :--- | :--- | :--- |
| **Classic City** | Sky Blue (`0x87CEEB`) | None | Daytime urban setting |
| **Sunset** | Warm Orange (`0xff7744`) | None | Golden hour cyberpunk skyline |
| **Cyberpunk Night**| Deep Blue-Black (`0x0a0a12`)| Neon Cyan (`0x00f0ff`) | Futuristic neon grid |
| **Matrix** | Dark Green (`0x001100`) | Neon Green (`0x00ff00`)| Digital cascade coding environment |
| **Alien Neon** | Deep Violet (`0x2a003e`) | Neon Magenta (`0xff00ff`)| Extraterrestrial synthwave dreamscape |
---
## 🕹️ Controls & Navigation
The game supports cross-platform controls:
* **Desktop (Keyboard):**
* `Arrow Left` / `A` — Move Left
* `Arrow Right` / `D` — Move Right
* `Arrow Up` / `W` / `Space` — Jump (allows leaping onto train rooftops)
* `Arrow Down` / `S` — Duck
* **Mobile (Touch Gestures):**
* `Swipe Left` / `Swipe Right` — Change Lane
* `Swipe Up` — Jump
* `Swipe Down` — Duck
* **HUD Controls:**
* **Music Toggle:** Mute/unmute the retro synthwave background track (`bgm.ogg`).
* **Fullscreen Toggle:** Switch between windowed and borderless fullscreen mode.
---
## 🚧 Obstacles & Hazards
* **High-Speed Trains:** Block lanes; players can slide off them or jump onto their roofs to collect floating coins.
* **Urban Obstacles:** Wooden crates and barrels that require quick lane changes.
* **Traps & Machinery:**
* *Swinging Hammers:* Pivoting hammers swinging across the road.
* *Crushers:* Blocks that slam down from above.
* *Spinning Spikes & Laser Blades:* Moving hazards that slide between lanes.
* **Enemy Swarms:** Minion formations and giant leaders that drain energy on collision.
---
## 💎 Items & Power-ups
* **Gold Coins:** Floating cylinders that add to your coins count and restore $+1$ energy.
* **Shield:** Renders the player temporarily immune to the next obstacle collision.
* **Magnet:** Activates a gravity well, pulling all coins within range directly to the player for 10 seconds.
---
## 🖥️ UI & Responsive Design
* **Glassmorphism Panels:** Utilizes frosted-glass overlays (`backdrop-filter`) for the start and game-over screens.
* **Absolute HUD Layout:** A persistent top-anchored HUD displays current energy, collected coins, and running distance.
* **Mobile-First Queries:** Custom media queries dynamically hide textual labels and shrink layout elements on smaller viewports, ensuring the canvas is fully visible and the controls remain accessible.
