Snake Game — Sumino Apps

A modern, responsive Snake arcade game built by Sumino Apps using React 18, TypeScript, Tailwind CSS, and Ant Design.

© 2026 Sumino Apps. All rights reserved.

Quick Start

npm install
npm run dev

---

Tech Stack

Tool	Purpose
React 18 + TypeScript	UI & game state
Vite 5	Dev server & bundler
Tailwind CSS 3	Utility styling
Ant Design 5	UI components (buttons, modals)
Web Audio API	Retro sound effects

---

Project Structure

src/
├── types/
│   └── index.ts            # Shared TypeScript types
├── constants/
│   └── gameConfig.ts       # Grid size, speeds, score constants
├── hooks/
│   ├── useSnakeGame.ts     # All game logic (state, loop, collisions)
│   ├── useCellSize.ts      # Responsive cell size based on viewport
│   └── useSound.ts         # Web Audio API retro sound effects
├── components/
│   ├── GameBoard.tsx       # SVG-free canvas — abs-positioned divs
│   ├── ScoreBoard.tsx      # Score / Best / Level / Speed tiles
│   ├── Controls.tsx        # Start · Pause · Restart buttons
│   ├── DirectionPad.tsx    # Mobile D-pad (hidden on desktop)
│   └── GameOverModal.tsx   # Ant Design Modal with results
└── App.tsx                 # Root: wires everything together

---

Features

• 20×20 grid with scanline CRT overlay
• Responsive — cell size auto-adjusts to viewport (15–24 px/cell)
• Collision detection — walls + self
• Gradually increasing speed — every 50 pts = 1 level, interval drops 12 ms/level (min 70 ms)
• High score persisted to localStorage
• Retro sounds via Web Audio API (eat · level up · game over)
• Swipe controls on the board for mobile
• D-pad overlay on mobile (hidden on ≥ sm breakpoint)
• Ant Design dark theme via ConfigProvider
• Keyboard: Arrow keys, WASD, Space/P/Esc to pause

---

Setup in an Existing React Project

1. Install dependencies

npm install antd @ant-design/icons
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Tailwind — add to tailwind.config.js:

content: ['./index.html', './src/**/*.{ts,tsx}'],

3. CSS — add to your index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Copy the src/types, src/constants, src/hooks, and src/components folders.

5. Wrap your app with <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}> from antd.

6. Mount <App /> (or inline <GameBoard … /> directly).

---

Controls

Action	Desktop	Mobile
Start	Space / any arrow	Tap Start button
Move	Arrow keys / WASD	D-pad or swipe on board
Pause	Space, P, or Esc	Pause button
Restart	Restart button	Restart button

---

Tuning Difficulty

Edit src/constants/gameConfig.ts:

export const INITIAL_SPEED   = 200;  // ms per tick (lower = faster start)
export const MIN_SPEED       = 70;   // fastest possible speed
export const SPEED_DECREMENT = 12;   // ms shaved off per level
export const POINTS_PER_FOOD  = 10;  // points per apple
export const POINTS_PER_LEVEL = 50;  // points needed to advance a level