Rules Screen add

assets/style.css

@@ -21,7 +21,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: url(./grass.png);
+    background: url(./map/grass.png);
 }
 
 #backlayer {
@@ -62,4 +62,9 @@ a:hover {
 
 canvas {
     margin-bottom: 20px;
+}
+
+#rulesScreen {
+    text-align: center;
+    z-index: 2;
 }

index.html

@@ -17,6 +17,7 @@
         <ul id="levelChoice"></ul>
 
         <p>Use the arrows to navigate. Press p to make a pause.</p>
+        <a href=#-1 id="rulesBtn" >Rules</a>
     </div>
 
 
@@ -25,7 +26,14 @@
 
         <div id="canvasTarget"></div>
 
-        <a href=# id="stopGameBtn" value="Stop game">Stop Game</a>
+        <a href=# id="menuBtn">Stop Game</a>
+    </div>
+
+
+    <div id="rulesScreen">
+        <h1>Rules</h1>
+
+        <a href=# id="menuBtn">Go back to menu</a>
     </div>
 
     <script src="script.js"></script>

script.js

@@ -67,19 +67,26 @@ function playAudio(url) {
 // Get elements
 const startScreen = byId("startScreen")
 const gameScreen = byId("gameScreen")
+const rulesScreen = byId("rulesScreen")
 const levelChoicesTarget = byId("levelChoice")
-const stopGameBtn = byId("stopGameBtn")
+const stopGameBtn = byId("menuBtn")
 const canvasTarget = byId("canvasTarget")
 const scoreTarget = byId("scoreTarget")
+const rulesBtn = byId("rulesBtn")
 
-// Get images
+// Get map texture
 const imgGrass = new Image();
-imgGrass.src = './assets/grass.png';
-const imgWall = new Image();
-imgWall.src = './assets/wall.jpg';
-const imgApple = new Image();
-imgApple.src = './assets/apple.png';
+imgGrass.src = './assets/map/grass.png';
 
+// Get wall texture
+const imgWall = new Image();
+imgWall.src = './assets/wall/wall.jpg';
+
+// Get food texture
+const imgApple = new Image();
+imgApple.src = './assets/food/apple.png';
+
+// Get snake texture
 let imgSnakeHeadUp = new Image();
 imgSnakeHeadUp.src = './assets/snake/snake_head_up.png';
 let imgSnakeHeadLeft = new Image();
@@ -98,8 +105,19 @@ imgSnakeBody.src = './assets/snake/snake_body.png';
 function showMainScreen() {
     startScreen.style.display = "unset";
     gameScreen.style.display = "none";
+    rulesScreen.style.display = "none";
 }
 
+/**
+ * Show rules screen
+ */
+function showRulesScreen() {
+    startScreen.style.display = "none";
+    gameScreen.style.display = "none";
+    rulesScreen.style.display = "unset";
+}
+
+
 /**
  * Start a new game
  * 
@@ -109,6 +127,7 @@ function showMainScreen() {
 async function startGame(gameID) {
     startScreen.style.display = "none";
     gameScreen.style.display = "unset";
+    rulesScreen.style.display = "none";
 
     // Fetch level information
     let level;
@@ -403,8 +422,12 @@ function changeWindow() {
 
     if(gameID > 0)
         startGame(gameID);
-    else
-        showMainScreen();
+    else{
+        if(gameID == -1)
+            showRulesScreen();
+        else
+            showMainScreen();
+    }
 }