pierre/SnakeGame
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Create the canvas

Browse Source
This commit is contained in:
Pierre HUBERT 2020-03-23 14:16:25 +01:00
parent 6147311aaa
commit d9784e50a2
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -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>

22
script.js
View File

@ -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);
}
/**

4
style.css Normal file
View File

@ -0,0 +1,4 @@
body {
background-color: #29292a;
color: white;
}