Snake Game

This project is a modern, browser-based Snake game built with React and TypeScript, designed to deliver classic arcade gameplay with a polished UI on both desktop and mobile. The system focuses on clean separation of game logic and presentation, responsive layout, and stable real-time state updates in a fixed-interval game loop.

Links

GitHub Demo

The core focus of the project is on predictable game state management, cross-device input handling, and maintaining smooth performance without unnecessary re-renders.

Technologies

React 19TypeScript 6Vite 8Plain CSSCSS GridlocalStorage

Features

Classic Snake gameplay with self-collision detection
Wrap-around walls (exit one edge, re-enter from the opposite)
10 adjustable speed levels
High score tracking across sessions
Random emoji food items
Desktop controls (Arrow keys / WASD) with pause support (Space / Esc)
Mobile-friendly UI with responsive board scaling
On-screen D-pad and swipe gestures on the game board
Safe-area support for notched devices
Dark theme with glassmorphism panels and smooth animations

My Role in Project

Front-End Developer (React / TypeScript) Responsible for implementing game logic, UI/UX, responsive layout, input handling (keyboard, touch, swipe), state management, and local persistence.

Challenges & Focus

Running a stable game loop with React state without race conditions or stale direction valuesSupporting multiple input methods (keyboardD-padswipe) with consistent behaviorMaking the board fully responsive on small screens without breaking grid alignmentPreventing invalid direction changes (e.g.instant 180° turns)Persisting user preferences (speed levelhigh score) reliably in the browser

Technical Decisions

Custom Hook for Game Logic (useSnakeGame)

All core game state and rules live in a dedicated hook, keeping the UI component focused on rendering and user interaction.

useRef for Direction

The current direction is stored in a ref to avoid stale closures inside the interval-based game tick and to prevent invalid reverse moves.

Separation of Logic, UI, and Utilities

Game rules, rendering, and helper functions (food generation, wrapping, speed calculation) are split into separate modules for clarity and maintainability.

CSS Grid for the Board

The game board is rendered with CSS Grid instead of Canvas, enabling simpler styling, emoji food rendering, and responsive scaling.

Plain CSS instead of a UI Framework

Custom CSS was chosen for full control over animations, glassmorphism effects, and mobile-specific layout without extra dependencies.

localStorage for Lightweight Persistence

High score and speed level are stored locally without a backend, keeping the app fully static and deployable anywhere.

Optimizations & Solutions

Functional state updates in the game tick to work safely with React's batching
Memoized callbacks (useCallback) for direction changes, reset, and pause
Dynamic cell size calculation based on viewport width for mobile fit
Opposite-direction blocking to prevent accidental self-collision
Food spawn logic that avoids overlapping with the snake body

Trade-offs & Engineering Considerations

CSS Grid rendering was preferred over Canvas for simplicity and styling flexibility, at the cost of less scalability for very large grids or advanced visual effects.
The game loop uses setInterval instead of requestAnimationFrame, which is simpler but less frame-synced with the display.
No backend or multiplayer was intentionally omitted to keep the project lightweight and fully static.
Touch and keyboard inputs share one direction handler, with some mobile UX trade-offs (e.g., no diagonal movement).

Outcome

This project demonstrates practical front-end engineering beyond simple UI: managing real-time state in React, designing cross-device interactions, and structuring a small codebase for clarity and extensibility. It shows attention to UX details (responsive board, swipe, persistence) while keeping the architecture simple and maintainable.

Back