Snake Playground

I built this classic Snake game for my company’s 404 page as a easter egg. Then I found it funny and kinda fun, got addicted for a day, and added pathfinding algorithms and efficiency tracking.

The orange dots show the optimal path, and it tracks how efficiently you play compared to the computer’s solution.

The implementation uses React with a requestAnimationFrame game loop. I added an A* pathfinding algorithm that calculates the optimal route in real-time, plus an input queue system that buffers rapid key presses and applies them over two animation ticks (learned this the hard way because if you’re going one way, then turn, then go the opposite direction of before turn, you’d crash into yourself).

The efficiency tracking compares your move count against the A* solution, so don’t feel bad if you’re “only” 70% efficient. Though if you’re god-tier, you might get >100% since A* uses heuristics and isn’t always perfect.

Sometimes theres a small bug where you go over the food but not eat it, its mainly because of IEEE 754-1985 xD.

Use arrow keys or WASD to play. Source code is available by clicking “Edit on GitHub” at the top of this page.