Cyber Snake

Live demo

---

<span id="top"></span>

Index

• <a href="#context">Context</a>
• <a href="#ux">UX</a>
  • <a href="#ux-overview">Overview</a>
  • <a href="#ux-stories">User stories</a>
  • <a href="#ux-wireframes">Wireframes</a>
  • <a href="#ux-design">Design</a>
• <a href="#features">Features</a>
  • <a href="#features-current">Current</a>
  • <a href="#features-future">Future</a>
• <a href="#technologies">Technologies Used</a>
• <a href="#testing">Testing</a>
  • <a href="#testing-auto">Automated</a>
  • <a href="#testing-manual">Manual</a>
  • <a href="#testing-responsive">Responsiveness</a>
  • <a href="#testing-resolved">Resolved issues</a>
  • <a href="#testing-unresolved">Unresolved issues</a>
• <a href="#deployment">Deployment</a>
• <a href="#credits">Credits</a>

---

<span id="context"></span>

Context

Cyber Snake is an homage to the Nokia version of the game, which many of us will remember fondly from the advent of mobile gaming. While Nokia's monochrome version of Snake wasn't released until 1998, the game concept dates back to 1976 when Blockade first appeared in arcades. Since then, there have been hundreds of versions released, and for good reason. It is considered a classic in terms of design and even appears in New York's Museum of Modern Art alongside the likes of Minecraft, Pong and Tetris.

The game concept is simple:

• Guide your snake by changing its direction up, down, left or right in order to eat as many food blobs as you can
• Every time you eat some food you score one point, your snake grows by one segment and a new food spawns in a random location
• The game ends when your snake's head collides with its body or, if walls are enabled, you hit a wall

This version offers classic Snake gameplay, a clean interface, satisfying graphical feedback, and the kind of 'personality' typified by games of the 90s. If you feel any pangs of nostalgia then it has achieved its aim!

<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div> <span id="ux"></span>

UX

<span id="ux-overview"></span>

Overview

The game has been designed with no 'fluff' to distract players from having some fun. All design decisions have been made with the following goals in mind:

• Mobile-first
• Customisable code
• Simplicity
• Intuitive navigation
• Crisp controls
• Satisfying feedback
• Replayability

<span id="ux-stories"></span>

User stories

As a player I want:

• To be able to jump straight into the game without needing further instructions
• A clean, uncluttered interface with all elements of the game within easy reach
• To be able to play on any device with simple, responsive controls
• To have options for both casual or more challenging gameplay
• To know how well I am doing
• Satisfying audio and visual feedback
• To have a reason to keep playing

As a developer/site owner I want:

• To be able to customise the look and feel of the game easily

Several individuals contributed to testing the game and provided feedback on its gameplay, responsiveness and aesthetics at various points in development. A snippet of their feedback:

Very smooth. Love the retro stuff. This game was as good as it got when I started gaming as a kid. Swipe controls amazingly responsive on my iPhone X, very playable and very enjoyable. Nice bit of wit at the end about how disappointing my performance was :laughing:

<span id="ux-wireframes"></span>

Wireframes

Wireframes for mobile and desktop can be accessed here.

Overall the wireframes were successfully followed when creating Cyber Snake, however there were some noteworthy deviations from the plan. These were:

1. Statistics menu

This was intended to live on a separate menu screen but was moved entirely to the scores menu. Rather that being able to pull up a screen showing, for example, the average score per game, this information is instead provided in comments such as "Your average score per game is X" or "You have been playing for Y minutes in total".

2. Advanced image manipulation

The initial idea was to have a more flashy landing screen which would respond to user mouse movements, and to have other visuals passing behind the game area during play, either using the HTML canvas or CSS animations. These features were outside the scope of the project and would have ultimately been a distraction if not handled elegantly.

3. Mobile control pad

HammerJS offers a much better solution to mobile control. Prior to discovering it, a directional pad/virtual joystick seemed like the most viable means of controlling the game on mobile.

<span id="ux-design"></span>

Design choices

Colours

The theme of the game is a blend of retro, cyber and neon, with the colour palatte intended to elicit thoughts of a futuristic cityscape at dusk. The background dominates most of the screen and is punctuated by fluorescent embers. Web-safe colours have been chosen for the core elements of the game (as far as possible), while more leeway has been given to the supporting colours.

Core

The colours used for the core game aspects are easy on the eyes when concentrating but give sufficient contrast for easily identifying the game pieces. The snake (Phlox) on the background (Cetacean Blue) is the most frequent combination and is highly evocative of the overall futuristic/neon theme. The pure white text is bright but not overpowering, and is further broken up by sparing use of Neon Carrot and Screamin' Green (used also in the sparks' palette) to differentiate desktop and mobile controls. The enigmatic "the messier things become" in Phlox matches the colour of the snake.

The border of the game area is Deep Carmine Pink if walls are enabled, or Wageningen Green if they are not. These colours intuitively suggests green for safe and red for danger. Without this distinction it would be difficult to immediately convey whether or not walls were enabled, so the colours are as close to primary as possible.

• #001440 (Cetacean Blue)
• #ffffff (White)
• #df00fe (Phlox)
• #ff3333 (Deep Carmine Pink)
• #339933 (Wageningen Green)

Food & Sparks

In keeping with the neon/cyber theme, a fluorescent colour palette has been used, which lends itself well to the glow effect on food and spark objects. A large number of colours has been used to amplify the spark effects, which can be quite dramatic in higher-scoring games. The temptation to include pink and purple hues (which are especially prominent in neon colour palettes) was resisted, so as to distinguish the neon purple snake.

• #ff355e (Radical Red)
• #fd5b78 (Wild Watermelon)
• #ff6037 (Outrageous Orange)
• #ff9966 (Atomic Tangerine)
• #ff9933 (Neon Carrot)
• #ffcc33 (Sunglow)
• #ffff66 (Laser Lemon)
• #ccff00 (Electric Lime)
• #66ff66 (Screamin' Green)
• #aaf0d1 (Magic Mint)
• #50bfe6 (Blizzard Blue)

Headings

For the glowing headings, a combination of brighter neon pink/purple is used to cement the feeling of a futuristic cyberscape.

• #e60073 (Red-Purple)
• #ff4da6 (Brilliant Rose)

Fonts

Orbitron

For consistency and simplicity this is the only font used. The blend of robotic straight lines and biologic curves is decidedly sci-fi and particularly fitting for Cyber Snake. This was chosen over more hard-edged retro typefaces because it hints at something more organic and less robotic, just as the snake's hard edges are juxtaposed with the round food globs.

Audio

The balance between adding ambience and the possibility of irritating players is a fine one, so only three sound used in the game: menu change, eat food and game over. If the player is not won over then the game can easily be muted.

• Menu change: a subtle mechanical click gives a touch of physicality even when out of the game
• Eat food: an retro pop/burst to bring about a positive response in the player for scoring points, with a suggestion of biological origins
• Game over: a shuddering halt/mechanical glitch in keeping with the futuristic theme

<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>

<span id="features"></span>

Features

<span id="features-current"></span>

Current

1. Menu screens

| Menu | Description | | :------ | :------------------------------------------------------------------------------------------------------------------------------