Start navigation inside project

2020-03-23 14:09:28 +01:00 · 2020-03-23 14:09:28 +01:00 · 6147311aaa
commit 6147311aaa
parent a6952b8dda
5 changed files with 142 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Snake</title>
+</head>
+<body>
+    
+    <div id="startScreen">
+        <h1>My Snake</h1>
+
+        Please choose a level:
+        <ul id="levelChoice"></ul>
+
+        <input type="submit" id="startGameBtn" value="Start game">
+    </div>
+
+
+    <div id="gameScreen">
+        <h1>Game</h1>
+
+        <input type="button" id="stopGameBtn" value="Stop game">
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/levels/1.json
+++ b/levels/1.json
@ -0,0 +1,16 @@
+{
+    "dimensions": [80, 40],
+    "delay": 200,
+    "walls": [
+        [5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35]
+    ],
+    "food": [
+        [10,10]
+    ],
+    "snake": [
+      [60,60],
+      [60,59],
+      [60,58]
+    ]
+
+}
--- a/levels/2.json
+++ b/levels/2.json
@ -0,0 +1,18 @@
+{
+    "dimensions": [80, 40],
+    "delay": 200,
+    "walls": [
+        [5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35]
+    ],
+    "food": [
+        [10,10],
+        [10,11],
+        [10,12]
+    ],
+    "snake": [
+      [60,60],
+      [60,59],
+      [60,58]
+    ]
+
+}
--- a/script.js
+++ b/script.js
@ -0,0 +1,78 @@
+const number_levels = 2;
+
+function byId(el) {
+    return document.getElementById(el);
+}
+
+// Get elements
+const startScreen = byId("startScreen")
+const gameScreen = byId("gameScreen")
+const levelChoicesTarget = byId("levelChoice")
+const startGameBtn = byId("startGameBtn")
+const stopGameBtn = byId("stopGameBtn")
+
+
+/**
+ * Show main screen
+ */
+function showMainScreen() {
+    startScreen.style.display = "unset";
+    gameScreen.style.display = "none";
+}
+
+/**
+ * Start a new game
+ */
+async function startGame(gameID) {
+    startScreen.style.display = "none";
+    gameScreen.style.display = "unset";
+}
+
+/**
+ * Change the currently active window
+ */
+function changeWindow() {
+    
+    // Try to get game ID
+    const gameID = Number(window.location.hash.substr(1));
+
+    if(gameID > 0)
+        startGame(gameID);
+    else
+        showMainScreen();
+}
+
+
+
+
+
+
+
+// Initialize page
+
+/// Listen to events
+window.addEventListener("hashchange", (e) => changeWindow())
+
+
+// Make game levels form lives
+for (let index = 1; index < number_levels + 1; index++) {
+    levelChoicesTarget.innerHTML += "<li>" +
+        "<input type='radio' name='level' value='"+index+"' "+(index == 1 ? "checked" : "")+" />" +
+        " Level " + index + "</li>";
+}
+
+startGameBtn.addEventListener("click", (ev) => {
+    ev.preventDefault();
+
+    const gameID = document.querySelector("input[name='level']:checked").value
+    location.href = "#" + gameID;
+})
+
+
+// Stop game
+stopGameBtn.addEventListener("click", () => {
+    location.href = "#";
+})
+
+// Refresh current window
+changeWindow();
--- a/server.sh
+++ b/server.sh
@ -0,0 +1,2 @@
+#!/bin/bash
+python3 -m http.server 3006