๐Ÿ Snake

By Just Sparrow

Just Sparrow

0 subscribers

0 viewsยท2h ago

#game

Snake

A single-file take on the classic grid Snake game, rendered in the same picture-book aesthetic as Watermelon Game and Jumping Bird (warm dark-brown outlines, pastel fills, rounded canvas, Fredoka + Jua typography). A round sage-green snake with a face slithers across a square checkerboard board, eating apples to grow longer โ€” steer with a swipe or the arrow keys, don't bite the walls or your own tail, and beat your best.

How to Play

  1. Tap GAME START to begin (or just press an arrow key / swipe).
  2. Steer the snake: swipe up / down / left / right on the play area, or use the arrow keys / WASD.
  3. Eat each ๐ŸŽ apple to score +1 and grow one segment longer. A new apple appears in a random empty cell.
  4. The snake moves on its own, one cell per step, and speeds up gently as your score climbs.
  5. The game ends if the snake hits a wall or runs into its own body.
  6. Tap Play Again on the game-over screen, or ๐Ÿ  Home to return to the start screen.

You can't reverse straight back into yourself โ€” a 180ยฐ turn in a single step is ignored.

Features

The Snake

A round sage-green snake drawn cell-by-cell, every part outlined in warm dark-brown:

  • Rounded body segments in two alternating green shades so the coils stay readable.
  • A larger head with a face โ€” white eyes with dark pupils that look in the direction of travel.
  • A small red tongue that flicks in and out the front of the head.
  • Smooth slither โ€” movement is interpolated between grid steps, so the snake glides from cell to cell instead of snapping.

Apple Food

Each apple is a little red fruit with a brown outline, a stem, a green leaf, and a tiny smiling face โ€” matching the per-fruit faces in Watermelon Game. It does a brief grow-in pop when it spawns.

Square Board

The playfield is a true square grid โ€” the same number of cells across as down (17 ร— 17) โ€” sitting on a soft pastel-green checkerboard so each cell reads clearly.

Gentle Acceleration

The step interval starts slow and shrinks a little with every apple eaten, down to a floor โ€” the game gets harder without ever becoming twitchy.

Best-Score Persistence

The high score is stored in the browser. Beating it shows a โœจ New Best โœจ flourish on the game-over screen.

Sound Effects

All sounds are synthesized on the fly โ€” no external files.

  • Soft tick on every direction change.
  • Pentatonic eat chime when you grab an apple; pitch rises with the streak.
  • Short thud on collision.
  • Three-note descending arpeggio on game over.
  • Two-note ascending arpeggio on restart.

A ๐Ÿ”Š / ๐Ÿ”‡ mute button silences everything. Audio auto-resumes when the page returns from background.

Quality-of-Life Details

Two icon buttons sit below the playfield:

  • ๐Ÿ”Š / ๐Ÿ”‡ Mute (bottom-left): Silence all sound.
  • ๐Ÿ  Home (bottom-right): Reset the board and return to the start screen.

Other niceties:

  • Swipe + keyboard โ€” same game on phone and desktop.
  • Direction queue โ€” buffers your next turn so quick double-taps register.
  • Live rescale on resize โ€” cells are stored in grid coordinates, so the board stays consistent at any window size.
  • Game-over overlay with final score, best score, and a Play Again button.

Design

  • Portrait page (9:16) with a square play area โ€” fits entirely on a phone without scrolling.
  • Light-green checkerboard board with dark-brown outlines on every shape, matching the sibling games' hand-drawn picture-book feel.
  • Fully rounded canvas corners.
  • Green start/restart buttons with a layered inset shadow for a 3D pressable look โ€” color-matched to the snake's body so the palette stays cohesive.
  • Fredoka + Jua font (Google Fonts) for a rounded, child-friendly look.

Tech

  • Single HTML file โ€” no build step, no external assets (except a single Google Fonts link).
  • Canvas 2D for the whole playfield; snake and food stored in integer grid coordinates.
  • Fixed-timestep stepping with per-frame interpolation for smooth motion.
  • Web Audio API for all sound โ€” synthesized tones, no audio files.

Loading comments...

Other Codes

No other codes yet