Inspiration The idea for Junie's Code Rush was born from a simple question: How do we make programming feel as exciting as competitive gaming? As developers who love both coding and esports, we wanted to create something that captures the adrenaline rush of VALORANT's fast-paced action while celebrating the joy of writing code. When Cloud9 and JetBrains announced their hackathon, we saw the perfect opportunity to blend these worlds.
We were inspired by:
VALORANT's intensity: The 45-second bomb defusal rounds that keep your heart racing Coding satisfaction: That dopamine hit when your code compiles perfectly Event booth culture: The energy of hackathons where people gather, compete, and share experiences Accessibility: Making a game that anyone can pick up in seconds, no tutorial needed What We Learned Building this project was an incredible learning journey that pushed us to master several technologies:
Web Audio API Mastery: We dove deep into procedural audio generation, learning how to create music and sound effects entirely in code using oscillators, gain nodes, and audio scheduling. No external audio files needed!
Canvas Performance Optimization: Rendering 60 FPS gameplay with dynamic particles, smooth animations, and custom-drawn graphics taught us the importance of efficient rendering loops and requestAnimationFrame optimization.
Network Resilience: Implementing a robust leaderboard system with automatic fallback from cloud sync to localStorage taught us valuable lessons about graceful degradation and offline-first design.
Event-Driven Architecture: Managing complex game states, user interactions, and real-time updates required careful event handling and state management patterns.
Zero-Dependency Philosophy: Building everything in vanilla JavaScript (no frameworks!) taught us to deeply understand browser APIs and write more efficient code.
How We Built It Architecture Decision: We chose a single-file HTML approach for maximum portability and ease of deployment at event booths. Everything—HTML, CSS, JavaScript, and even the PWA manifest—lives in one file.
Development Process:
Core Game Loop (Week 1): Started with basic Canvas rendering and drag-and-drop mechanics. Implemented the physics for falling blocks and collision detection with the compile zone.
Audio System (Week 2): Built a complete procedural audio engine using Web Audio API. Created chord progressions for background music and synthesized all sound effects from scratch using oscillators and filters.
Visual Polish (Week 3): Hand-drew all block types using Canvas drawing APIs. Implemented particle effects for visual feedback and created custom SVG logos for Cloud9 and JetBrains branding.
Network Features (Week 4): Integrated JSONBin.io REST API for cloud leaderboard sync. Built automatic fallback system and implemented periodic refresh for booth displays.
Event Booth Optimization (Week 5): Added selfie capture using MediaDevices API, QR code generation for social sharing, auto-reset timers, and leaderboard-only display mode.
Technical Approach:
Canvas API: All graphics rendered using 2D context with custom drawing functions Web Audio API: Procedural music generation and real-time sound synthesis LocalStorage API: Persistent settings and offline leaderboard fallback Fetch API: RESTful communication with JSONBin.io for cloud sync Service Workers: PWA capabilities for offline support and installability MediaDevices API: Webcam access for player selfie capture Challenges We Faced Challenge 1: Audio Initialization Problem: Modern browsers block audio playback until user interaction. Solution: Implemented a click-to-start system with clear visual feedback and graceful handling of audio context states.
Challenge 2: Cross-Device Leaderboard Sync Problem: Network requests can fail at events with poor connectivity. Solution: Built a dual-layer system with cloud sync as primary and localStorage as automatic fallback. The game works perfectly offline.
Challenge 3: Performance on Low-End Devices Problem: Particle effects and animations caused frame drops on older hardware. Solution: Optimized rendering pipeline, implemented object pooling for particles, and used requestAnimationFrame with delta time for smooth 60 FPS gameplay.
Challenge 4: Touch vs Mouse Input Problem: Drag-and-drop needed to work seamlessly on both desktop and mobile. Solution: Unified event handling system that normalizes touch and mouse events, with proper touch-action CSS to prevent scrolling.
Challenge 5: Booth Kiosk Mode Problem: Players at events would walk away mid-game, leaving the booth stuck. Solution: Implemented 30-second idle detection with automatic reset, plus admin hotkeys for booth operators.
Challenge 6: Zero External Dependencies Problem: No npm packages meant building everything from scratch. Solution: Embraced vanilla JavaScript and browser APIs. This actually made deployment trivial—just one HTML file!
Log in or sign up for Devpost to join the conversation.