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 + Stop Game + + + +
+

Rules

+ + Go back to menu
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(); + } }