Snake Neon Arcade Game
Snake Neon arcade game, vanilla JS, embedded in Ishaq Hassan's macOS-style portfolio. Keyboard, D-pad, joystick and swipe controls.
Snake Neon is a browser-based arcade game embedded inside Ishaq Hassan's macOS-style portfolio, written from scratch in vanilla JavaScript with an HTML5 canvas renderer. The game ships zero external dependencies, weighs under 60KB minified, and runs at a steady 60 frames per second on both desktop and mobile devices.
Game features
- 60fps rendering loop driven by requestAnimationFrame with delta-time interpolation, so the game speed stays consistent across high-refresh-rate displays and slower mobile GPUs.
- Neon visual style with custom glow shaders, a vignette pause overlay, particle trails on the snake head and a parallax starfield in the background.
- Desktop keyboard controls supporting arrow keys, WASD and ESC for pause, plus a single-key restart after game over.
- Three mobile control schemes (Wheel, D-Pad and Swipe) with a 25px dead zone, three-layer scroll lock to prevent page scroll during play, and a haptic feedback pulse on direction change.
- Heads-up display showing live score, snake length, elapsed time and a personal high-score tracker stored in localStorage.
- Smooth countdown animation when starting and an animated pause overlay with frosted-glass blur on resume.
How to play
Launch Snake from the portfolio dock by clicking the Snake icon, from Spotlight via Cmd+K and typing "snake", or by visiting ishaqhassan.dev/snake directly. On mobile, the game opens in a full-screen liquid-morph view with the chosen control scheme available immediately. Use Esc to pause at any time, or tap the pause icon in the heads-up display.
Why it exists
The portfolio is a macOS desktop simulation built entirely with vanilla HTML, CSS and JavaScript with no framework. Snake Neon is a small showcase of what is possible without React or Vue, using the browser's native canvas API, modern CSS and roughly 1,400 lines of hand-written game code. It demonstrates Ishaq Hassan's approach to mobile-first interaction design, performance budgeting, and zero-dependency delivery.
Frequently asked questions
How do I play Snake Neon?
Use the arrow keys or WASD on desktop. On mobile, pick one of three control schemes: Wheel (joystick), D-Pad (9-grid buttons), or full-screen Swipe gestures. Press ESC to pause.
Is the source code available?
The game is part of the open-source portfolio at github.com/ishaquehassan/ishaqhassan.dev.
What technology powers Snake Neon?
Pure vanilla JavaScript with a canvas-based renderer at 60fps using requestAnimationFrame. No framework or external dependency.