Back to Projects🐍 Snake Neon
🐍

Neon Arcade Snake

Snake Neon

JavaScriptCanvasGame
01

About Project

Snake Neon is a portfolio-quality mini-game built entirely with HTML5 Canvas, CSS3, and vanilla JavaScript — no frameworks, no build step, no external assets. The game engine runs on a requestAnimationFrame render loop with a tick-based grid simulation, supporting smooth continuous movement, directional queueing, and a 180° reversal lock. Every visual is crafted for a premium neon-arcade feel: the snake glows with a cyan-green gradient and shadowBlur, food pulses, particles burst on every bite, and the board shakes on game over. Sounds are synthesized at runtime via the Web Audio API, so the whole game works fully offline.

CategoryJavaScript
Tech StackJS · Canvas API · Web Audio
StatusActive
02

Key Features

🐍

Classic Gameplay

Grid-based snake on Canvas with continuous movement, wall/self/obstacle collision, and a reversal lock so you can't double back into yourself.

Power-Ups

Golden food (+50 bonus, time-limited), speed-boost food, and a temporary slow-motion power-up add strategic depth beyond the basic loop.

🔥

Combo Scoring

Eat food quickly in succession to build a combo multiplier (up to ×8) with a decay bar — rewards aggressive, skilled play.

🚀

Level Progression

Every 50 points raises the level, increasing speed and (from level 3) spawning obstacles. Level-up is announced with a toast and sound.

📱

Full Mobile Support

Large touch D-pad, swipe gestures on the board, and touch-action locking so the page never scrolls mid-game.

⚙️

Settings & Themes

Difficulty (Easy/Medium/Hard), grid size (15/20/25), sound toggle, a real light theme, and a high-score reset — all persisted in localStorage.

🎮

Game States

Polished overlay screens for Welcome, Playing, Paused, Game Over (with score breakdown), and a New High Score celebration.

🔊

Web Audio Sound

Eat, gold, boost, slow-mo, level-up, game-over, new-high, and click effects — all synthesized with oscillators, zero audio files.

03

Tech Stack

JavaScript
🎨Canvas API
🔊Web Audio
🌟CSS3
🗃️localStorage
📱Touch API
04

Project Preview

Snake Neon — Preview
🐍

A neon-arcade Snake game rendered on HTML5 Canvas. The board shows a glowing gradient snake chasing pulsing food, with a side panel tracking score, high score, level, speed, and difficulty. Power-ups, combo multipliers, and obstacles appear as you progress, all framed in a dark glassmorphic UI with a subtle animated grid.