Snake game using Svelte

In this workshop we're going to work with Sveltejs

we'll be using the following concepts:

• responding to keyboard events
• passing data between components

Tools
VS Code for Linux
https://svelte.dev/

Extensions:

• Svelte for VS Code
• Prettier - Code formatter

How to get started:

Make sure you have npm installed
Clone the snake starter repo
Navigate to the starter folder and run npm install
To start the application use npm run dev

Components

You'll see that there are 4 seperate components:

• Food component

• Snake component

• SnakeBodies component

• App component

Food Component

1.0 In Food.svelte create two props named foodLeft & foodTop
1.1 Use these two props to control the location of food component
1.2 In App.svelte create two vars also called foodLeft & foodTop
1.3 Pass those vars as props to the food component
1.4 Play around with the values to confirm you control the location

Snake Body Component

2.0 Use the same logic to control the location of the body component
2.1 add a prop that confirms wich body component will show the eyes
2.2 add a prop that points the eyes in the right direction
2.3 use the direction prop to control the snake eyes
2.4 use an if statementto display the eyes

Creating Snake Bodies(tail,body,head)

3.0 A snakebody part is 50px x 50px
3.1 add a snakeBodies prop to the Snake.svelte component
3.2 create a snakeBodies array in the App.svelte component
3.3 loop trough the array to render the snakeBodies
3.4 use an index variable to determine wich part should be the head

KeyBoard Events

4.0 Every key on the keyboard has a code. Try to find out how to log it to the console.
4.1 Make sure you have a function that controls the direction using the keycodes
4.2 If done correctly, the snake eyes should move on your keyboard input

Moving the Snake

5.0 Remove the last element from the array
5.1 Extract the top & left values from the first element in the array
5.2 Adjust those values based on the direction
5.3 Create a new Head object using the top & left variables
5.4 Set snake bodies array to new array
5.5 Make sure the array keeps updating

OMNOM NOM NOM

6.0 Determine when the snake collides with the apple
6.1 Randomise the position of the food
6.2 Make sure the snake grows after eating the apple

GAME OVER

7.0 Track if the head collides with the body
7.1 Test your logic using an alert
7.2 Add the logic that checks if the snake is in the container

EXTRA

8.0 Reset the game on game over
8.1 Display the score using a reactive variable
8.2 Change the background and go ham on the styling

Sources/Tips:

Be sure to check out https://svelte.dev/, for more inspiration check out the examples section:)
Find out what a spread operator is.
Dont forget to remove the hardcoded css values.
Read up on setInterval()
CTRL - S
Will update with excercise source after workshop:)