A pixel art driving game built with Phaser 3 and vanilla JavaScript.
Cruise the Mt. Fuji backroads by day or cut up in Tokyo traffic at night
all behind the wheel of a Nissan Skyline R32 GTR.
| Key | Action |
|---|---|
W / ↑ |
Accelerate |
S / ↓ |
Brake |
A / ← |
Steer Left |
D / → |
Steer Right |
+---------------------------------------------------------------+
| LEVEL SELECT |
+---------------------------------------------------------------+
| |
| ☀ Day — MT. Fuji Backroads |
| Difficulty : Easy |
| Traffic : None |
| |
| ☽ Night — Tokyo City |
| Difficulty : Hard |
| Traffic : Oncoming + same direction NPC cars |
| |
+---------------------------------------------------------------+
+---------------------------+----------------------------------------+
| Framework | Phaser 3.60 |
+---------------------------+----------------------------------------+
| Language | Vanilla JavaScript (ES6 Classes) |
+---------------------------+----------------------------------------+
| Rendering | HTML5 Canvas / Phaser Graphics API |
+---------------------------+----------------------------------------+
| Physics | Manual (no Phaser physics engine) |
+---------------------------+----------------------------------------+
| Assets | None — fully procedural pixel art |
+---------------------------+----------------------------------------+
| Hosting | GitHub Pages |
+---------------------------+----------------------------------------+
skyline-drive/
index.html ← loads Phaser + entry point
js/
main.js ← Phaser config, boots the game
constants.js ← colors, lane positions, speeds, pixel sizes
scenes/
MenuScene.js ← main menu, level select
DayScene.js ← Mt. Fuji backroads logic
NightScene.js ← Tokyo night + traffic logic
objects/
PlayerCar.js ← R32 GTR pixel art + movement
Road.js ← pseudo-3D scrolling road, 4 lanes
TrafficCar.js ← NPC cars (night only)
backgrounds/
DayBackground.js ← sky, Fuji, cherry blossoms, grass
NightBackground.js ← city skyline, neon signs, stars
Just clone and open:
git clone https://github.com/osteph32/skyline-drive.git
cd skyline-driveThen open index.html in your browser. That's it.
💡 Tip: Use the Live Server VS Code extension for auto-reload while developing. Right click
index.html→ Open with Live Server.
- 3D perspective road with scrolling lane markings
- Two levels with unique backgrounds
- Parallax depth layers — sky, mountains, trees, and buildings scroll at different speeds
- R32 GTR pixel art car with brake light glow
- Traffic system with oncoming and same-direction NPC cars scaled by perspective
- Collision detection with screen shake and speed penalty
- Speed and distance HUD
Oliver Stephenson linkedin.com/in/ostephenson32 · github.com/osteph32