• 

• 

• 

Inspiration

I have always been fascinated by the electric atmosphere of esports events like LCS and VCT. However, I noticed that while waiting in line at team booths, fans often just stand around. I wanted to change that.

I asked myself:

"How can I give a fan the feeling of a pro-player warm-up in under 60 seconds?"

Inspired by the aim trainers used by Cloud9 athletes in VALORANT and League of Legends, I set out to build HYPERDRIVE. My goal was to create a "micro-sport" — accessible enough for a casual fan to pick up instantly, but deep enough for competitive players to battle for the top spot on the Leaderboard.

---

What it does

C9 Reflex Trainer – HYPERDRIVE is a browser-based, high-performance aim trainer designed for rapid engagement.

• The Mission:
  The player has 60 seconds to eliminate Blue (C9) and Orange (JetBrains) targets.

• The Threat:
  The player must identify and avoid Red Bugs. Hitting a bug causes a system glitch and life loss.

• The Skill Gap (Anti-Mash System):
  Blind clicking is penalized. Missed shots reduce score, forcing precision instead of raw speed.

• Rampage Mode:
  At high combo counts, the game enters Rampage Mode:

  • Music speeds up
    
  • Grid distorts
    
  • Visual intensity doubles
    

---

How I built it

Performance was the highest priority. I intentionally avoided heavy engines like Unity to guarantee instant load times in any browser.

Core Engine

Built from scratch using Vanilla JavaScript and HTML5 Canvas with a custom requestAnimationFrame loop targeting 60+ FPS.

AI Assistance

Grok AI.

Rendering

Implemented a layered rendering pipeline with High-DPI (Retina) support for crisp visuals on modern displays.

Math

Linear interpolation (Lerp) is used for smooth cursor motion:

[ P_{new} = P_{start} \cdot (1 - t) + P_{end} \cdot t ]

Audio

Replaced the standard HTML <audio> tag with the Web Audio API, decoding MP3 files into memory buffers for millisecond-accurate playback with near-zero latency.

---

Challenges

The "Silent Crash"

Moving to Web Audio API caused CORS issues that silently crashed the game during local testing. I implemented robust try/catch blocks and fallback logic so the game remains playable even if audio fails.

Garbage Collection Stutters

Creating new particles per explosion caused frame drops. Solved using an Object Pool pattern to reuse memory instead of constantly allocating/deallocating.

Unfair Randomness

Pure RNG led to overlapping targets. I built a Spatial Grid System that tracks occupied cells, ensuring deterministic and fair spawns.

---

Accomplishments

• Game Feel ("Juice")
  Screen shake, chromatic aberration, and additive particle blending make every click feel powerful.

• Local Leaderboard
  Scores persist using localStorage, making the game event-ready with instant competition.

• Zero Dependencies
  No npm install. Pure, clean, portable code.

---

What I learned

• Browser User Interaction policies for AudioContext
  
• High-DPI Canvas handling via devicePixelRatio
  
• Esports booth UX requires UI that is bigger, louder, and faster than traditional home games

---

HYPERDRIVE is my exploration of how far modern browsers can be pushed to create fast, competitive, and visceral experiences—without engines, installs, or friction.

Built With

• canvas
• css3
• es6
• html5
• javascript
• localstorage
• vanilla-js
• web-audio-api