Change to:   

---

GromaSnake

This Snake Game was written in Html, Css and JavaScript Vanilla.    

      Game details:

How to play the game:     🎮

Use the arrow keys or WASD key combinations to move the snake around the board.

The objective of the game:     🎯

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.

Points:     🎰

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!

Functionalities:

Game start:

Users can start a new game whenever they want.

Start buttons location:

1. Home page.
2. GameOver page.

Restart as init:

Restart the initial values of the game, cleaning the record counter.

Restart button location:   Home page.

Reload and pause game:

1.  Reload action is activated only with the reload button.
   

2.   Pause function is triggered with the pause button or keyboard space button.
   
   

Buttons location:   Game page.

Show record points and score:

1.  Record Shows the higher score got for the user.
   

2.   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.

Design:

        Colors:

Color palette:

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.

Color details:

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.

go back to design section

        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.

go back to design section

        Components:

Start button documentation shown in the design system.

go back to design section

        Wireframes:

Wireframes are prototypes that serve as a visual guide that represents the skeletal framework of the game.

Game page:

Details:

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

Wireframe in high fidelity:

go back to design section

---

Details:

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

Wireframe in high fidelity:

Tablet (left) and mobile (right) wireframe in high fidelity and portrait mode.

go back to design section

---

Mobile layout design in landscape mode

Wireframe in high fidelity:

Tablet (left) and mobile (right) wireframe in high fidelity and portrait mode.

go back to design section

Interactive prototype

Click the image and try the prototype of the game made in Figma.     👆

Languages and tools:

Use for the project development:

           

Employed in the project design:

Professionals:

---

© Mariangelica Rodriguez