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

Improve appearance

Browse Source
This commit is contained in:
Pierre HUBERT 2020-03-23 18:25:46 +01:00
parent 6029210098
commit c87382a891
6 changed files with 72 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/MachineScript.ttf Normal file
View File

Binary file not shown.

BIN
assets/grass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

64
assets/style.css Normal file
View 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;
}

7
index.html
View File

@ -4,22 +4,23 @@
<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>
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
View File

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

4
style.css
View File

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