diff --git a/assets/apple.png b/assets/food/apple.png
similarity index 100%
rename from assets/apple.png
rename to assets/food/apple.png
diff --git a/assets/grass.png b/assets/map/grass.png
similarity index 100%
rename from assets/grass.png
rename to assets/map/grass.png
diff --git a/assets/style.css b/assets/style.css
index cb83d83..7aa1720 100644
--- a/assets/style.css
+++ b/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;
}
\ No newline at end of file
diff --git a/assets/wall.jpg b/assets/wall/wall.jpg
similarity index 100%
rename from assets/wall.jpg
rename to assets/wall/wall.jpg
diff --git a/index.html b/index.html
index be66dd7..47306cd 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
Use the arrows to navigate. Press p to make a pause.
+ Rules
@@ -25,7 +26,14 @@
- Stop Game
+
+
+
+
+
+
Rules
+
+
diff --git a/script.js b/script.js
index 2accbff..96a7767 100644
--- a/script.js
+++ b/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();
+ }
}