HTML5 PORTFOLIO // Snake game

← Back to home Back to top ↑

01 / PROJECT IDENTIFICATION

Project: Snake game

Authors: Lucas, Jephte and Ilhem

Project type: Static browser game

Primary technologies: HTML5, CSS3, JavaScript, Canvas 2D

Context: School project (CC Simone Veil High School)

Visual identity: Retro handheld console

Document type: Technical documentation

02 / PROJECT OVERVIEW

Snake is a browser version of the classic arcade game. The player moves a snake around a grid and eats randomly placed fruit to score points. The game is drawn on an HTML canvas displayed inside a handheld console illustration.

Primary objectives

  • Reproduce the classic Snake gameplay in the browser.
  • Offer keyboard and on-screen button controls.
  • Present the game inside a console-style interface.
  • Provide a landing page with a sign-up form.
  • Run without a server or external library.

03 / FILE ARCHITECTURE

The project is made of two pages and a folder of image assets. The game script is embedded directly in the game page.

Logical structure

projects/snake
├── enregistrement
│   └── snake.html        (landing page + sign-up form)
├── jeu
│   └── snakegame.html    (console + canvas + game script)
└── object
    ├── gameboydisk.png   (landing page background)
    ├── portable-retro-game-console-...jpg  (console background)
    ├── Couleurs_Cadre_transparents.png     (school logo)
    └── 427533.ico        (favicon)

Navigation: the landing page opens the game with the Play button, and the Select button of the game returns to the landing page.

04 / GAMEPLAY AND RULES

Objective

Eat the colored fruit to increase the score. The current score and the best score of the session are displayed on the canvas.

Rules

  • The grid is 10 × 10 tiles.
  • The snake starts in the center, motionless, with a short tail.
  • Eating a fruit adds one point and makes the tail grow.
  • Touching the snake's own body resets the game.
  • The walls are not solid: leaving one side of the grid brings the snake back on the opposite side.
  • The snake cannot reverse directly into itself.
  • The best score is kept until the page is reloaded.

05 / CONTROLS

Keyboard

Arrow keys   move the snake (also starts the game)
Space        pause (stops the snake)
Esc          reset the game

On-screen console buttons

D-pad arrows   move the snake
Center key     change the fruit color
Red button B   pause
Red button A   reset
Start          change the snake color
Select         return to the sign-up page

06 / GAME ENGINE

The engine is a single Snake object created by an immediately invoked function. It keeps its state private and exposes only the methods used by the interface.

State

  • player: current head position on the grid.
  • velocity: direction of movement (x, y).
  • trail: list of tiles occupied by the snake.
  • tail: current length of the snake.
  • fruit: position of the fruit.
  • points and pointsMax: score and best score.

Game loop

Every tick (8 per second):
  1. Move the head according to the velocity
  2. Wrap the head around the grid edges
  3. Add the new position to the trail
  4. Trim the trail to the tail length
  5. Detect collision with the body
  6. Detect fruit and place a new one
  7. Redraw the canvas

Public methods

start, reset, pause, action, startbut, middlebut and the setup helpers (keyboard, wall, tileCount, fixedTail).

07 / RENDERING

The game is drawn on a canvas of 400 × 400 pixels with the 2D context. Each tile measures 40 × 40 pixels (canvas size divided by the tile count).

Drawing order

  • Semi-transparent green background.
  • Snake tiles, one pixel smaller than the tile for a grid effect.
  • Fruit tile.
  • Help text and score in small-caps text.

Colors

The snake and fruit colors are generated randomly at load time and can be changed with the Start and center buttons.

08 / INTERFACE AND LANDING PAGE

Console layout

The console is a fixed-size container (600 × 1000 pixels) with an image background. The canvas, the D-pad, the two red buttons and the Select / Start buttons are positioned inside it with CSS.

Landing page

The landing page displays the title, the school logo, the credits and a form with a username and an email field. A small script scales the console image so that it always fits the window, from the smallest screens up to desktop.

The sign-up form is a visual element only: the entered values are not sent or stored.

09 / CONFIGURATION

The game is started at the end of the game page with the following lines: 

Snake.start(8);                 // 8 frames per second
Snake.setup.keyboard(true);     // enable keyboard controls
Snake.setup.fixedTail(false);   // the tail grows with each fruit

Adjustable options

  • Snake.start(fps): game speed.
  • Snake.setup.wall(true): solid walls, touching them resets the game.
  • Snake.setup.tileCount(n): grid size.
  • Snake.setup.fixedTail(true): the tail does not grow.

10 / KNOWN LIMITATIONS

  • The console layout has a fixed size and is not responsive on small screens.
  • The on-screen buttons use click events and the layout relies on a table.
  • The best score is not saved between sessions.
  • The sign-up form does not store any data.

Possible improvements

Responsive scaling of the game page, local storage of the best score, touch swipe controls, difficulty levels and a sound effect when eating a fruit.

11 / SOURCE CODE AND RESOURCES

GitHub profile: github.com/Luco667

Game page: /projects/snake/jeu/snakegame.html

Landing page: /projects/snake/enregistrement/snake.html

Hosting model: Static web hosting

Documentation format: HTML

This document describes the project's general behavior. Implementation-specific details should be verified against the actual source code.