Kinetic Hook is a high-speed, physics-driven 2D platformer engineered purely using raw JavaScript and HTML5 Canvas. The project showcases dynamic physics simulation, real-time spatial manipulation, procedural audio generation, split-screen multiplayer capabilities, and a full Level Creator suite with local state persistence.
Key Technical Features
Physics & Grapple Mechanics
Custom 2D vector math implementation (Vector2).
Verlet-inspired rope constraint and pendulum momentum conversion.
Sub-stepping continuous collision detection (CCD) to avoid tunnel phasing.
Temporal Rewind Engine
State history ring-buffer cap (400 ticks).
Non-destructive position, velocity, and grapple state reversal via hold-key trigger.
Visual pulse feedback loop on active time reversal.
Web Audio API Synthesizer
Zero external audio assets; synthesizes melodic synth and bass tracks dynamically.
Custom pulse sequence generator with state-aware music tracks.
Dynamic gain controls with exponential decay curves.
Level Creator & Local Storage
Fully interactive editor with drag-to-create tools (platforms, hazards, anchors).
Custom screen-to-world coordinate transformation supporting panning and zooming.
State validation mechanics and local storage persistence API.
Architecture Breakdown
State Machine: Managed by an integrated central controller handling seamless transitions between state loading, account configuration, matrix select grid, game execution, and editor space.
Split-Screen System: Double-camera rendering system utilizing canvas clipping regions (`ctx.clip()`) to maintain independent viewports per player.
Inline UI Overlays: Built-in text canvas buffers replacing native browser alert/prompt routines to maintain state integrity and soft-lock prevention.