Start navigation inside project

This commit is contained in:
Pierre HUBERT 2020-03-23 14:09:28 +01:00
parent a6952b8dda
commit 6147311aaa
5 changed files with 142 additions and 0 deletions

28
index.html Normal file
View File

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

16
levels/1.json Normal file
View File

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

18
levels/2.json Normal file
View File

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

78
script.js Normal file
View File

@ -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();

2
server.sh Executable file
View File

@ -0,0 +1,2 @@
#!/bin/bash
python3 -m http.server 3006