From 270622ad66692cafd8c1988401d52596ee607452 Mon Sep 17 00:00:00 2001 From: "Glitch (glitch-hello-website)" Date: Tue, 1 Mar 2022 18:14:02 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=B4=F0=9F=93=9A=20Checkpoint=20./scrip?= =?UTF-8?q?t.js:9517054/7485=20./index.html:9517054/1430=20./style.css:951?= =?UTF-8?q?7054/254?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 10 ++++++++-- script.js | 44 ++++++++++++++++++++++++-------------------- style.css | 7 +++++++ 3 files changed, 39 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 4f3c131..2ec64a5 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,13 @@

- welcome to snek! - welcome to snek! + welcome to snek!
+
+
+ diff --git a/script.js b/script.js index 7e5f8cd..528aeda 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,13 @@ +// get elements from page const info = document.getElementById("info"); const highscore = document.getElementById("highscore"); const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext("2d"); const game = { size: 15, speed: 1000 / 15, // 15 frames per second - highscore: 0, - snake: { + snek: { body: [ [3, 7], [4, 7], @@ -18,25 +19,26 @@ const game = { newdir: null, }, apple: [12, 7], + highscore: 0, }; // reset the game board (but not the highscore) function reset() { game.apple = [12, 7]; - game.snake.body = [ + game.snek.body = [ [3, 7], [4, 7], [5, 7], [6, 7], [7, 7], ]; - game.snake.dir = null; - game.snake.newdir = null; + game.snek.dir = null; + game.snek.newdir = null; } // check if the x and y coordinate is part of the snek -function inSnake(x, y) { - for (let part of game.snake.body) { +function inSnek(x, y) { + for (let part of game.snek.body) { if (part[0] === x && part[1] === y) return true; } return false; @@ -48,7 +50,7 @@ function draw() { ctx.clearRect(0, 0, 500, 500); for (let i = 0; i < game.size; i++) { for (let j = 0; j < game.size; j++) { - ctx.fillStyle = inSnake(i, j) + ctx.fillStyle = inSnek(i, j) ? "#38e070" : i === game.apple[0] && j === game.apple[1] ? "#eb4034" @@ -60,26 +62,29 @@ function draw() { // update the game board function update() { - game.snake.dir = game.snake.newdir; + game.snek.dir = game.snek.newdir; - const b = game.snake.body; + const b = game.snek.body; const l = b[b.length - 1]; const next = move(); // check if the snek ate the apple if (game.apple[0] === next[0] && game.apple[1] === next[1]) { + // the apple shouldnt be on top of the snek + // try 30 times to place the apple for (let i = 0; i < 30; i++) { const x = Math.floor(Math.random() * game.size); const y = Math.floor(Math.random() * game.size); game.apple = [x, y]; - if (inSnake(game.apple[0], game.apple[1])) break; + + if (!inSnek(game.apple[0], game.apple[1])) break; } } else { b.shift(); } // check if the snek crashed into itself - if (inSnake(next[0], next[1])) { + if (inSnek(next[0], next[1])) { reset(); } @@ -91,18 +96,17 @@ function update() { b.push(next); // move the snek // update score display - if (game.dir !== null) { + if (game.snek.dir !== null) { const score = b.length - 5; - const highest = score > game.highscore ? score : game.highscore; + if(score > game.highscore) game.highscore = score; // update high score if necessary info.innerText = `${score < 15 ? "length" : "longth"}: ${score}`; - highscore.innerText = `${score > highscore ? "former highscore" : "highscore"}: ${highscore}`; - game.highscore = highest; - } + highscore.innerText = `highscore: ${game.highscore}`; + } // calculate where the snek will move to function move() { const [x, y] = l; - switch (game.snake.dir) { + switch (game.snek.dir) { case "left": return [x - 1, y]; case "right": @@ -119,8 +123,8 @@ function update() { // change direction on keypress document.addEventListener("keydown", (e) => { - const s = game.snake; - if (s.dir !== s.newdir) update(); + const s = game.snek; + if (s.dir !== s.newdir) update(); // avoid snek from crashing into itself switch (e.key) { case "ArrowLeft": return s.dir !== "right" ? (s.newdir = "left") : 0; diff --git a/style.css b/style.css index 5e4166f..8f5867a 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,16 @@ +/* basic styling so the webpage doesnt look awful */ + body { margin: 2em auto; padding: 0; + max-width: 375px; text-align: center; } #display { font: 18px/1.3 serif; } + +ul { + text-align: left; +}