diff --git a/assets/food/cherry.png b/assets/food/cherry.png new file mode 100644 index 0000000..4c0355f Binary files /dev/null and b/assets/food/cherry.png differ diff --git a/assets/style.css b/assets/style.css index 7aa1720..2dc5457 100644 --- a/assets/style.css +++ b/assets/style.css @@ -67,4 +67,9 @@ canvas { #rulesScreen { text-align: center; z-index: 2; +} + +img { + height: 50px; + width: 50px; } \ No newline at end of file diff --git a/index.html b/index.html index 08f1ddc..6ccc169 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,18 @@

Rules

Do not touch any map's border or any wall. (Do not harm your snake.. You are watched)

-

You have one job : eat food ! (Try not to feed him with its own tail)

+

You have one job : eat food ! (Try to not feed him with its own tail)

+
+

Know everything about the different blocks :

+ + Food : +
+ + Wall : +
+ +
Go back to menu diff --git a/script.js b/script.js index 96a7767..3514d52 100644 --- a/script.js +++ b/script.js @@ -66,13 +66,18 @@ function playAudio(url) { // Get elements const startScreen = byId("startScreen") -const gameScreen = byId("gameScreen") + const rulesScreen = byId("rulesScreen") +const rulesBtn = byId("rulesBtn") +const foodList = byId("foodList") +const wallList = byId("wallList") + +const gameScreen = byId("gameScreen") const levelChoicesTarget = byId("levelChoice") const stopGameBtn = byId("menuBtn") const canvasTarget = byId("canvasTarget") const scoreTarget = byId("scoreTarget") -const rulesBtn = byId("rulesBtn") + // Get map texture const imgGrass = new Image(); @@ -85,6 +90,8 @@ imgWall.src = './assets/wall/wall.jpg'; // Get food texture const imgApple = new Image(); imgApple.src = './assets/food/apple.png'; +const imgCherry = new Image(); +imgCherry.src = './assets/food/cherry.png'; // Get snake texture let imgSnakeHeadUp = new Image(); @@ -115,6 +122,13 @@ function showRulesScreen() { startScreen.style.display = "none"; gameScreen.style.display = "none"; rulesScreen.style.display = "unset"; + + // Display all food + foodList.appendChild(imgApple); + foodList.appendChild(imgCherry); + + // Display all wall + wallList.appendChild(imgWall); }