Inspiration

We wanted to build something that was instantly playable, visually polished, and technically meaningful within a hackathon timeframe. Many projects rely on heavy frameworks or engines; instead, we challenged ourselves to create a complete, responsive game from scratch using only core web technologies. The idea was to explore performance-critical front-end systems while still delivering a fun, accessible experience.

What it does

Neon Drift is a fast-paced browser arcade game where players drift through a neon track, avoid hazards, collect energy orbs, and use powerups to survive as long as possible. The game features dynamic difficulty scaling, a combo-based scoring system, multiple powerups, and smooth real-time visuals. It runs directly in the browser on both desktop and mobile devices with no installation required.

How we built it

The game was built entirely with HTML, CSS, and vanilla JavaScript, using HTML5 Canvas for rendering. We implemented a custom game loop, collision detection, particle effects, and state management from scratch. Audio feedback is generated using the Web Audio API, and the UI is styled with CSS for a clean, modern look. The final project is deployed using GitHub Pages for easy access and sharing.

Challenges we ran into

Balancing performance and visual polish was a major challenge, especially while targeting smooth 60 FPS gameplay across different devices. Implementing responsive controls that worked well on both keyboard and touch input required careful tuning. Another challenge was managing game state and timing (powerups, collisions, difficulty scaling) without relying on external libraries or engines.

Accomplishments that we're proud of

Building a complete, polished game entirely from scratch Achieving smooth real-time gameplay with no external libraries Supporting both desktop and mobile input seamlessly Implementing dynamic difficulty, combo scoring, and powerups Delivering a finished, deployable product within a hackathon timeline

What we learned

We gained a deeper understanding of real-time systems in the browser, including animation loops, performance optimization, and input handling. We also learned how much polish and user feedback matter in making a project feel “finished,” even when the underlying mechanics are simple. Working without frameworks reinforced the importance of clean architecture and careful state management.

What's next for Neon Drift

Future improvements could include additional game modes, more diverse hazards and powerups, accessibility options, and visual themes. We’d also like to add post-game analytics, leaderboards, and optional multiplayer or challenge modes to expand replayability.

Built With

  • and-visual-polish-javascript-(es6)-?-game-logic
  • canvas
  • collision-detection
  • html5
  • html5-?-structure-and-canvas-based-rendering-css3-?-ui-styling
  • layout
  • state-management
Share this project:

Updates