diff --git a/assets/MachineScript.ttf b/assets/MachineScript.ttf new file mode 100644 index 0000000..796a63d Binary files /dev/null and b/assets/MachineScript.ttf differ diff --git a/assets/grass.png b/assets/grass.png new file mode 100644 index 0000000..7eed7a1 Binary files /dev/null and b/assets/grass.png differ diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..89dd03d --- /dev/null +++ b/assets/style.css @@ -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; +} \ No newline at end of file diff --git a/index.html b/index.html index 47b1aa3..27c2d91 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,11 @@ My Snake - + + +

My Snake

@@ -14,12 +16,11 @@ Please choose a level: - +

Use the arrows to navigate. Press p to make a pause.

-

Game

Score:

diff --git a/script.js b/script.js index 97ba105..4255ed5 100644 --- a/script.js +++ b/script.js @@ -55,7 +55,6 @@ function randInt(min, max) { const startScreen = byId("startScreen") const gameScreen = byId("gameScreen") const levelChoicesTarget = byId("levelChoice") -const startGameBtn = byId("startGameBtn") const stopGameBtn = byId("stopGameBtn") const canvasTarget = byId("canvasTarget") const scoreTarget = byId("scoreTarget") @@ -263,10 +262,12 @@ async function startGame(gameID) { } } + // Manage automated acceleration of snake if(level.hasOwnProperty("acceleration")) currDelay -= level.acceleration; if(level.hasOwnProperty("minDelay") && currDelay <= level.minDelay) currDelay = level.minDelay + setTimeout(() => step(), currDelay); } @@ -347,16 +348,10 @@ window.addEventListener("hashchange", (e) => changeWindow()) // Make game levels form lives for (let index = 1; index < number_levels + 1; index++) { levelChoicesTarget.innerHTML += "
  • " + - "" + - " Level " + index + "
  • "; + "
  • " + + " Level " + index + "
  • "; } -startGameBtn.addEventListener("click", (ev) => { - ev.preventDefault(); - - const gameID = document.querySelector("input[name='level']:checked").value - location.href = "#" + gameID; -}) // Stop game diff --git a/style.css b/style.css deleted file mode 100644 index 233d14e..0000000 --- a/style.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - background-color: #29292a; - color: white; -} \ No newline at end of file