Overview
Chase is a real-time, browser-driven interactive 3D simulation showcasing fluid motion calculations, state persistence, and spatial logic. Players control a responsive agent on a grid plane, dodging a scaling pursuer tracking their coordinate space. This architecture couples spatial rendering pipelines with functional state containers to demonstrate consistent gameplay across environments.
How to Use
To operate and customize the simulation experience, observe the primary vectors below:
- Movement Controls: Utilize the classic
W, A, S, and D keys or directional Arrow Keys on desktop. Alternatively, interact with the virtual thumb joystick located in the bottom-left corner of the viewport.
- Unified Joystick Input: The virtual joystick accepts both touch coordinates and desktop mouse clicks. Simply click or touch and drag inside the ring to guide the agent.
- Sound & Music: Click or tap the explicit sound control button in the control bar to activate synthesized sound effects and dynamic background loop tracks.
- Camera Perspectives: Use the camera control button to toggle between close-up Third-Person tracking and wide Strategic Top-down views instantly.
- Reset Options: Initiate the "Reset Simulation" command anytime to discard session data, clear stage scaling, and return variables to their default positions.
- Demo Automation: The interface transitions to a read-only sandboxed demonstration loop if zero user input occurs for 45 seconds. Interacting anywhere on the viewport instantly exits this mode, restoring your active run state.
Technical Details
This single-page application is built on top of high-efficiency web standards to maximize runtime performance:
- State Administration: Managed with Redux to ensure predictable transitions, deterministic game ticks, and clean frame rollback behaviors during sandbox restoration.
- 3D Graphics: Rendered in real-time using Three.js via WebGL, utilizing local geometric allocations and buffer disposals to reduce continuous garbage collection overhead.
- Obstacle Avoidance Logic: The enemy tracking module uses dynamic raycasting and repulsive vector calculation to safely steer around trees.
- Procedural Synthesized Audio: Generates responsive sound effects and a dynamic ambient backing loop on the fly via Tone.js, modifying the master BPM based on target proximity.
- Event Isolation: Pointer and keyboard event flows are isolated to prevent layout drift, keeping vertical page navigation natural.
Future Directions
Prospective iterations for Chase include:
- Intelligent Enemy Tracking: Transitioning the tracking enemy from direct vector chasing to grid-based A* (A-Star) pathfinding to avoid obstacles intelligently.
- Key-Mapping Configuration Panel: An overlay allowing players to configure and bind custom keys directly to movement actions.
- Gamepad API integration: Standard mapping for physical controllers (Xbox, PlayStation, or generic USB devices) via the native Gamepad browser listener.
- Telemetry Analytics Dashboard: Live graphing of player speed, escape vectors, and collection rate on a sidebar to monitor performance trends.