Change to:
This Snake Game was written in Html, Css and JavaScript Vanilla.
Game details:
Use the arrow keys or WASD key combinations to move the snake around the board.
It is to guide the snake to the food, which will make it grow in size, while avoiding the walls or the snake's body, as that will end the game.
The game also features a scoring system, so you can see how many points you have earned. The higher your score, the more points you will earn!
Users can start a new game whenever they want.
Start buttons location:
1. Home page.
2. GameOver page.
Restart the initial values of the game, cleaning the record counter.
Restart button location: Home page.
-
Reload action is activated only with the reload button.
-
Pause function is triggered with the pause button or keyboard space button.
Buttons location: Game page.
-
Record Shows the higher score got for the user.
-
Score Display the amount of points won for users during the game.
Record whiteboard location: Game page.
Score whiteboard location:
1. Game page.
2. GameOver page.
Colors:
The color palette used in the project includes bright colors to evoke feelings of joy and energy.
Color variations were used for color palette creation.
Design coherence requires bringing information about each basic element, like interface colors.
- Category: Shows the color category and general name.
- Color sample: it is a visual representation of the corresponding color.
- Color hex value: it’s the code name of the color in hexadecimal nomenclature.
- Color naming: represents the naming conventions used in the design system of the project.
Typography:
Typography families used in the app.
Typography documentation in the design system.
The typography information shown in the design system includes font-family, font-weight, font-size and letter-spacing. This is the same information used in web development.
Wireframes:
Wireframes are prototypes that serve as a visual guide that represents the skeletal framework of the game.
1. Whiteboard: Renders record ( higher score) and current Score that user achieves.
2. Board: Shows the snake and its food rendered.
3. Reload button: Redirect to the home page to allow users to start a new game.
4. Pause button: Enables the user to pause the game ( Desktop version: it can be triggered with the keyboard space button ).
Desktop layout design
The mobile version has
1. Whiteboard: Renders record ( higher score) and current Score that user achieves.
2. Board: Shows the snake and its food rendered.
3. Reload button: Redirect to the home page to allow users to start a new game.
4. Pause button: Enables the user to pause the game ( Desktop version: it can be triggered with the keyboard space button ).
--> as well as:
5. Controller: Allows the user to control the directions that the snake takes around the board ( Desktop version: it can be controlled either with the WASD combination or arrow buttons on the keyboard ).
Mobile layout design in portrait mode
Tablet (left) and mobile (right) wireframe in high fidelity and portrait mode.
Mobile layout design in landscape mode
Tablet (left) and mobile (right) wireframe in high fidelity and portrait mode.
Click the image and try the prototype of the game made in Figma. 👆
Use for the project development:
Employed in the project design:
© Mariangelica Rodriguez
