SnakeGame

Deployment

This project is available at: http://snake-game-sidgi.surge.sh

Technologies:

1. DOM elements
2. Canvas
3. Reading keyboard keys
4. Media queries through js
5. Touch events

Description

My Snake Game has 3 levels:

• Level 1

1. Snake wins when it gets 10pts;
2. After collision with square it absorbs that square and becomes bigger on the size of that square and gets 1pts for each square;
3. It looses after it hits itself;

• Level 2

1. Snake wins when it gets 10pts;
2. After collision with square it absorbs that square and becomes bigger on the size of that square and gets 1pts for each square;
3. It looses after it hits itself;
4. Speed faster

• Level 3

1. Snake wins when it gets 10pts;
2. After collision with square it absorbs that square and becomes bigger on the size of that square and gets 1pts for each
   square;
3. It looses after it hits itself or hits the border;
4. Speed faster

How to play on desktop

1. Link to website
2. Press start
3. Press the arrow keys to move snake
4. Eat red squares to win
5. Don't hit yourself and in a third level don't hit border as well
6. If you win press next level
7. If you lose press restart game, it will restart from the same level
8. Press space to pause/resume the game

How to play on mobile

1. Link to website
2. Change view to landscape and then back to portrtait - and it will change layout for mobile
3. Move snake with scrolling your finger on the phone (response to touch movements)

• Scroll top - Snake moves up
• Scroll down - Snake moves down
• Scroll right - Snake moves right
• Scroll left - Snake moves left

4. The rules are the same as in desktop
5. You can't pause the game

Difficulties facing during development:

• Learning canvas;
• Link the keyboard keys to actual movement of the snake;
• Make it mobile competable;
• Make it respond to touch movements
• Make my snake game using OOP (using classes and objects)
• Collision detection;

References:

1. https://www.youtube.com/watch?v=9TcU2C1AACw
2. https://www.youtube.com/watch?v=xGmXxpIj6vs
3. MDN
4. Google I am planning to foresee the problem with reading books, use resources such as eloiqueant js, Youtube and Google, and MDN.

• START GAME
• GAME IN THE MIDDLE
• AFTER YOU WON THE LEVEL
• AFTER YOU LOSE THE LEVEL
• AFTER YOU WON THE GAME