diff --git a/index.html b/index.html index 674d1da..91f6199 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ My Snake + @@ -20,6 +21,8 @@

Game

+
+
diff --git a/script.js b/script.js index 74a1bb2..75abe5c 100644 --- 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); } /** diff --git a/style.css b/style.css new file mode 100644 index 0000000..233d14e --- /dev/null +++ b/style.css @@ -0,0 +1,4 @@ +body { + background-color: #29292a; + color: white; +} \ No newline at end of file