snake_game_JS Used AI

Date: June 22, 2025
Duration: One day

I wanted to recreate one of the most nostalgic games — the Snake Game — in a way that's modern, responsive, and more polished than the typical clones. My goal was to learn more about canvas/grid logic and modular JS structure.

🔧 What I Implemented:
A grid-based movement system using a 2D array logic

Snake tail growth upon eating apples

Death upon self-collision or hitting borders

Apple spawning at random grid positions

Score and High Score tracking with localStorage

Three difficulty levels affecting snake speed

A power-up system (gold apple every 5 apples)

Sound effects for movement, eat, and game over

Clean UI with restart and mute buttons

⚙️ Technical Highlights:
Game logic controlled with setInterval (adjusted per difficulty)

Keyboard arrow keys for movement with input queue to prevent reverse errors

Audio toggle via JS + custom sound assets

Responsive layout using CSS Grid

Efficient snake-body tracking using arrays and shift/unshift logic

🚧 Challenges Faced:
Preventing the snake from reversing directly into itself

Keeping power-ups from spawning on the snake's body

Managing game state (pause, restart, game over) cleanly

Handling fast movement on higher difficulties without frame skipping

🧠 Lessons Learned:
Better understanding of timing/game loop logic

Modularizing game functions (reset, draw, update)

Enhanced canvas/grid visualization with clean CSS

How to manage localStorage for saving game state (score)

🏁 Result:
A polished, fully working snake game that goes beyond the classic — with difficulty control, golden apples, and a clean UI.
Built entirely with vanilla JavaScript and a creative mindset.