Create the canvas

2020-03-23 14:16:25 +01:00
parent 6147311aaa
commit d9784e50a2
3 changed files with 29 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Snake</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    
@@ -20,6 +21,8 @@
    <div id="gameScreen">
        <h1>Game</h1>

+        <div id="canvasTarget"></div>
+
        <input type="button" id="stopGameBtn" value="Stop game">
    </div>

--- a/script.js
+++ b/script.js
@@ -1,4 +1,9 @@
+/**
+ * Game config
+ */
 const number_levels = 2;
+const cell_width = 10;
+const cell_height = 10;

 function byId(el) {
    return document.getElementById(el);
@@ -10,6 +15,7 @@ const gameScreen = byId("gameScreen")
 const levelChoicesTarget = byId("levelChoice")
 const startGameBtn = byId("startGameBtn")
 const stopGameBtn = byId("stopGameBtn")
+const canvasTarget = byId("canvasTarget")


 /**
@@ -26,6 +32,22 @@ function showMainScreen() {
 async function startGame(gameID) {
    startScreen.style.display = "none";
    gameScreen.style.display = "unset";
+
+    // Fetch level information
+    let level;
+    try {
+        level = await (await fetch("levels/"+gameID+".json")).json();
+    } catch(e) {
+        console.error(e);
+        alert("Could not load game level!");
+        return;
+    }
+
+    // Create & apply the canvas
+    const canvas = document.createElement("canvas");
+    canvas.width = cell_width * level.dimensions[0];
+    canvas.height = cell_height * level.dimensions[1];
+    canvasTarget.appendChild(canvas);
 }

 /**
--- a/style.css
+++ b/style.css
@@ -0,0 +1,4 @@
+body {
+    background-color: #29292a;
+    color: white;
+}