Improve appearance
This commit is contained in:
BIN
assets/MachineScript.ttf
Normal file
BIN
assets/MachineScript.ttf
Normal file
Binary file not shown.
BIN
assets/grass.png
Normal file
BIN
assets/grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
64
assets/style.css
Normal file
64
assets/style.css
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'MachineScript';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(./MachineScript.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #29292a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: MachineScript;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: url(./grass.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
#backlayer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000000d6;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#startScreen {
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#startScreen ul {
|
||||||
|
list-style: none;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: darkgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#gameScreen {
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
@@ -4,9 +4,11 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>My Snake</title>
|
<title>My Snake</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="backlayer"></div>
|
||||||
|
|
||||||
<div id="startScreen">
|
<div id="startScreen">
|
||||||
<h1>My Snake</h1>
|
<h1>My Snake</h1>
|
||||||
@@ -14,12 +16,11 @@
|
|||||||
Please choose a level:
|
Please choose a level:
|
||||||
<ul id="levelChoice"></ul>
|
<ul id="levelChoice"></ul>
|
||||||
|
|
||||||
<input type="submit" id="startGameBtn" value="Start game">
|
<p>Use the arrows to navigate. Press p to make a pause.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="gameScreen">
|
<div id="gameScreen">
|
||||||
<h1>Game</h1>
|
|
||||||
<p>Score: <span id="scoreTarget"></span></p>
|
<p>Score: <span id="scoreTarget"></span></p>
|
||||||
|
|
||||||
<div id="canvasTarget"></div>
|
<div id="canvasTarget"></div>
|
||||||
|
|||||||
13
script.js
13
script.js
@@ -55,7 +55,6 @@ function randInt(min, max) {
|
|||||||
const startScreen = byId("startScreen")
|
const startScreen = byId("startScreen")
|
||||||
const gameScreen = byId("gameScreen")
|
const gameScreen = byId("gameScreen")
|
||||||
const levelChoicesTarget = byId("levelChoice")
|
const levelChoicesTarget = byId("levelChoice")
|
||||||
const startGameBtn = byId("startGameBtn")
|
|
||||||
const stopGameBtn = byId("stopGameBtn")
|
const stopGameBtn = byId("stopGameBtn")
|
||||||
const canvasTarget = byId("canvasTarget")
|
const canvasTarget = byId("canvasTarget")
|
||||||
const scoreTarget = byId("scoreTarget")
|
const scoreTarget = byId("scoreTarget")
|
||||||
@@ -263,10 +262,12 @@ async function startGame(gameID) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Manage automated acceleration of snake
|
||||||
if(level.hasOwnProperty("acceleration"))
|
if(level.hasOwnProperty("acceleration"))
|
||||||
currDelay -= level.acceleration;
|
currDelay -= level.acceleration;
|
||||||
if(level.hasOwnProperty("minDelay") && currDelay <= level.minDelay)
|
if(level.hasOwnProperty("minDelay") && currDelay <= level.minDelay)
|
||||||
currDelay = level.minDelay
|
currDelay = level.minDelay
|
||||||
|
|
||||||
setTimeout(() => step(), currDelay);
|
setTimeout(() => step(), currDelay);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -347,16 +348,10 @@ window.addEventListener("hashchange", (e) => changeWindow())
|
|||||||
// Make game levels form lives
|
// Make game levels form lives
|
||||||
for (let index = 1; index < number_levels + 1; index++) {
|
for (let index = 1; index < number_levels + 1; index++) {
|
||||||
levelChoicesTarget.innerHTML += "<li>" +
|
levelChoicesTarget.innerHTML += "<li>" +
|
||||||
"<input type='radio' name='level' value='"+index+"' "+(index == 1 ? "checked" : "")+" />" +
|
"<li><a href='#"+index+"'>" +
|
||||||
" Level " + index + "</li>";
|
" Level " + index + "</a></li>";
|
||||||
}
|
}
|
||||||
|
|
||||||
startGameBtn.addEventListener("click", (ev) => {
|
|
||||||
ev.preventDefault();
|
|
||||||
|
|
||||||
const gameID = document.querySelector("input[name='level']:checked").value
|
|
||||||
location.href = "#" + gameID;
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// Stop game
|
// Stop game
|
||||||
|
|||||||
Reference in New Issue
Block a user