Chrono Shift: Entropy Bridge

Precision platforming on the edge of temporal collapse.

Comment

Inspiration

Chrono Shift: Entropy Bridge was born out of a passion for hardcore, high-tension platformers like Celeste, Super Meat Boy, and Geometry Dash, combined with a fascination for quantum physics and thermodynamic entropy. We wanted to create a gaming experience where the environment itself feels unstable and alive where remaining still for even $0.40\text{s}$ means structural collapse, and where an ever-present, chasing temporal void leaves zero room for hesitation.

Our design philosophy was guided by a strict technical constraint: Zero heavy external engines. We set out to prove that an intense, visual-rich, and audio-immersive 2D platformer could be engineered from scratch using only raw browser primitives HTML5 Canvas, pure Vanilla JavaScript, and the Web Audio API.

What it does

Chrono Shift: Entropy Bridge puts players in control of a time-runner navigating through 200 procedurally generated chambers across 10 Cyber Worlds.

Key features include:

• Precision Platforming Mechanics: Variable elevation steps, dynamic platform gaps up to $130\text{px}$, and high-flying jump impulse physics ($v_y = -14.2\text{ px/frame}$).

• **Crumbling Quantum Bridges: **Amber-hued platform segments collapse after $t_{\text{collapse}} = 0.40\text{s}$ of player contact, requiring immediate reflex jumping.

• **The Entropy Void & Surge Mechanics: **A chasing death-wall that continuously advances at base speed $v_{\text{base}}$. If a player pulls too far ahead ($d > 480\text{px}$), a surge dynamic increases void speed by $1.35\times$ to maintain high tension.

• Hyper Void Difficulty Toggle: Switches gameplay parameters dynamically, raising void velocity to $v_{\text{hyper}} = 1.35 \times v_{\text{base}}$ and tightening hazard trigger frames.

• Procedural Hazards & Traps: Drop crates with full Axis-Aligned Bounding Box (AABB) collision physics, proximity-triggered pop-up spikes, and laser gates.

• Synthesized Web Audio SFX: Real-time audio synthesis generating dynamic sound effects for jumping, platform crumbling, heartbeat warnings, and level clearing without external audio assets.

• Ergonomic Cross-Device Support: Adaptive resolution container ($100\text{dvh}$ viewport scaling) with thumb-zone virtual controls designed after user ergonomics sketches. How we built it

The application was engineered without external game frameworks (such as Phaser or PixiJS) to keep the footprint minimal and performance at a rock-solid $60\text{ FPS}$ ($16.67\text{ms}$ frame budget).

• Graphics & Rendering: Rendered directly to an HTML5 using a fixed internal virtual coordinate system ($V_{\text{WIDTH}} = 960$, $V_{\text{HEIGHT}} = 540$) and dynamically scaled via: $$S = \frac{W_{\text{viewport}}}{V_{\text{WIDTH}}}$$

• Physics & Kinematics: Custom 2D physics engine calculating position updates on every frame step: $$x(t + \Delta t) = x(t) + v_x \cdot \Delta t$$$$y(t + \Delta t) = y(t) + v_y \cdot \Delta t + \frac{1}{2} g (\Delta t)^2$$ where gravity $g = 0.58\text{ px/frame}^2$ and friction coefficient $\mu = 0.80$.

• Procedural Level Generation: Seeded PRNG algorithm using the Mulberry32 algorithm: $$t = a + \text{0x6D2B79F5}$$

Ensuring reproducible, fair chamber layouts across all 200 levels.

• Audio Synthesizer: Direct Web Audio API integration using OscillatorNode frequency sweeps (sine, triangle, sawtooth) and GainNode exponential volume ramps: $$V(t) = V_0 \cdot e^{-\lambda t}$$

• UI & Layout: Tailored with Tailwind CSS for glassmorphic overlays and custom CSS for ultra-responsive, zero-latency touch controls using pointer events (pointerdown, pointerup, pointercancel).

Challenges we ran into

  1. 2-Pass AABB Collision & Solid Crate Interactions Initial collision logic caused players to fall through or get stuck inside drop crates. We solved this by implementing a two-pass Axis-Aligned Bounding Box (AABB) resolution algorithm:

  2. Pass 1 (Horizontal): Evaluates $x$-axis overlaps to block forward/backward player clipping against crate sides ($x_{\text{player}} + w_{\text{player}} = x_{\text{crate}}$).

  3. Pass 2 (Vertical): Evaluates $y$-axis velocity vectors. Landing is registered only when $v_y \ge 0$ and the previous frame position was above the surface ($y_{\text{old}} + h_{\text{player}} \le y_{\text{crate}}$), enabling seamless landing and top-walking physics.

  4. Viewport Distortion & Mobile Touch Response

Mobile browsers presented challenges with dynamic address bar resizing and accidental gesture zooming. We resolved this by:

• Enforcing dynamic viewport height units (100dvh). • Replacing standard touch handlers with unified Pointer Events, complete with active press listeners and auto-release safety checks on window blur to prevent run-on player movement bugs. • Implementing a device orientation check that prompts users to rotate into landscape mode for optimal field of view.

  1. Checkpoint Respawn Safe Zones

Earlier iterations occasionally spawned players directly into laser gates or on top of crumbling tiles upon death. We refactored level generation so that any platform containing a Checkpoint Beacon is mathematically guaranteed to be a solid tile ($\text{crumbling} = \text{false}$) with a minimum clear hazard padding of $d_{\text{safe}} = 180\text{px}$.

Accomplishments that we're proud of

• Zero external runtime dependencies: The entire game logic, procedural generator, collision engine, UI layer, and audio synthesizer live within a lightweight, ultra-fast codebase.

• Silky Smooth 60 FPS Performance: Constant frame rate across low-end mobile devices and high-refresh desktop displays.

• Responsive Control Ergonomics: Mobile controls were directly modeled after user interface sketches, offering separated thumb zones with active visual feedback for high-speed play.

• Rich Tactical Gameplay Balance: A clean difficulty progression across 200 chambers with flexible options for both standard players and hardcore speedrunners (Hyper Void Mode). What we learned

• Sub-Pixel Precision & Frame Timing: How to tune jump arcs, coyote time ($100\text{ms}$ landing buffer), and gravity parameters to make platforming feel tactile rather than slippery.

• Web Audio Synthesis: Deep insights into manipulating frequency modulation, harmonics, and exponential decay envelopes to create custom retro sound effects without external audio files.

• User-Centric UI/UX Iteration: The value of continuous refinement based on direct user input, screenshots, and visual feedback sketches to perfect control layout and camera tracking.

What's next for Chrono Shift: Entropy Bridge

Our primary goal for the next phase of development is to release Chrono Shift: Entropy Bridge as a standalone, native mobile application on both the Apple App Store and Google Play Store. Planned roadmap steps include:

  1. Mobile App Store Packaging: Wrapping the web application into native iOS and Android binaries using Capacitor / Cordova or a custom WebKit container to enable single-tap downloads and offline playability worldwide.

  2. Native Mobile Features:

o Haptic Vibration Feedback: Utilizing device vibration APIs to give tactile feedback when jumping, landing, or encountering void surges. o Game Controller Support: Native Bluetooth gamepad integration (Xbox, PlayStation, MFi controllers).

  1. Global Speedrun Leaderboards: Cloud-synced leaderboards allowing players to compete for the fastest chamber escape times globally.

  2. Custom Cosmetics & Skins: Unlockable runner avatars and void particle themes awarded for clearing Cyber Worlds in Hyper Void mode.

Built With

  • 2d-physics
  • audio-synthesis
  • canvas-api
  • css3
  • custom-engine
  • custom-physics
  • font-awesome
  • frontend
  • game-development
  • google-fonts
  • html5
  • interactive-media
  • javascript
  • localstorage
  • mobile-responsive
  • mulberry32
  • procedural-generation
  • single-file
  • tailwindcss
  • vanilla-js
  • web-apis
  • web-app
  • web-audio-api
Share this project:

Updates