Food and Wall added to the page "rules"

assets/style.css

@@ -67,4 +67,9 @@ canvas {
 #rulesScreen {
     text-align: center;
     z-index: 2;
+}
+
+img {
+    height: 50px;
+    width: 50px;
 }

index.html

@@ -34,8 +34,18 @@
         <h1>Rules</h1>
 
         <p>Do not touch any map's border or any wall. (Do not harm your snake.. You are watched)</p>
-        <p>You have one job : eat food ! (Try not to feed him with its own tail)</p>
+        <p>You have one job : eat food ! (Try to not feed him with its own tail)</p>
 
+        <br>
+        <h2>Know everything about the different blocks :</h2>
+
+        Food :
+        <div id="foodList"></div>
+
+        Wall :
+        <div id="wallList"></div>
+
+        <br>
         <a href=# id="menuBtn">Go back to menu</a>
     </div>
 

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);
 }