BROWSER-BASED RACING EXPERIENCE

RACE.
DRIFT.
DOMINATE.

Experience high-speed racing directly in your browser. Dodge traffic, collect points, and push your reflexes to the limit in this synthwave-inspired arcade racer.

THE GRID

Start your engine. Use W,A,S,D or Arrow Keys to navigate. On mobile, use the on-screen controls.

SCORE 0
BEST 0
SPEED
0 MPH

NEONRACER

Avoid traffic. Collect energy. Survive the grid.

Move
Points
GAME MECHANICS

HIGH OCTANE FEATURES

Dynamic Speed

The longer you survive, the faster the environment moves. Test your reflexes as traffic density and speed increase dynamically.

Pixel-Perfect Collision

Custom built bounding-box collision detection ensures fair gameplay. Maneuver through tight gaps between traffic vehicles.

Cross-Platform Play

Play seamlessly on desktop with keyboard controls or on mobile devices using responsive touch interface.

BUILT WITH
MODERN TECH

This project demonstrates the power of vanilla web technologies to create engaging interactive experiences without heavy game engines.

HTML5 Canvas

Rendering Engine

Vanilla JS

Game Logic & Physics

Tailwind CSS

Responsive UI Styling

Responsive

Mobile First Design

How it works

The game utilizes the HTML5 <canvas> element to draw the game state via JavaScript's requestAnimationFrame loop. Entities (player, enemies, road markings) are updated mathematically every frame based on elapsed time (delta time) to ensure smooth 60fps performance. CSS3 is heavily used for the surrounding UI elements, creating a glassmorphic layer over the dark theme.

BUILT FOR SPEED.

Neon Racer is a passion project combining modern front-end web development practices with interactive game mechanics. The goal was to build a comprehensive portfolio piece that demonstrates proficiency in UI/UX design, responsive layouts, and logic-heavy JavaScript programming within a single cohesive experience.

CRAFTED WITH PRECISION