Start navigation inside project
This commit is contained in:
parent
a6952b8dda
commit
6147311aaa
28
index.html
Normal file
28
index.html
Normal 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
16
levels/1.json
Normal 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
18
levels/2.json
Normal 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
78
script.js
Normal 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();
|
Loading…
Reference in New Issue
Block a user