tezlm/snek
1
0
Fork 0
Code Issues Pull requests Releases Activity

👴📚 Checkpoint

Browse source 
./script.js:9517054/7485
./index.html:9517054/1430
./style.css:9517054/254
This commit is contained in:
Glitch (glitch-hello-website) 2022-03-01 18:14:02 +00:00
parent 729f05d6ed
commit 270622ad66
3 changed files with 39 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -12,7 +12,13 @@
<body> <body>
<canvas id="canvas" height="375" width="375"></canvas> <canvas id="canvas" height="375" width="375"></canvas>
<br /><br /> <br /><br />
<span id="info">welcome to snek!</span> <span id="info">welcome to snek!</span><br />
<span id="highscore">welcome to snek!</span> <span id="highscore"></span><br />
<br />
<ul>
<li>use arrow keys to move the snek</li>
<li>try to eat the apple</li>
<li>dont crash into yourself or the edges</li>
</ul>
</body> </body>
</html> </html>

44
script.js
View file

@ -1,12 +1,13 @@
// get elements from page
const info = document.getElementById("info"); const info = document.getElementById("info");
const highscore = document.getElementById("highscore"); const highscore = document.getElementById("highscore");
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const game = { const game = {
size: 15, size: 15,
speed: 1000 / 15, // 15 frames per second speed: 1000 / 15, // 15 frames per second
highscore: 0, snek: {
snake: {
body: [ body: [
[3, 7], [3, 7],
[4, 7], [4, 7],
@ -18,25 +19,26 @@ const game = {
newdir: null, newdir: null,
}, },
apple: [12, 7], apple: [12, 7],
highscore: 0,
}; };
// reset the game board (but not the highscore) // reset the game board (but not the highscore)
function reset() { function reset() {
game.apple = [12, 7]; game.apple = [12, 7];
game.snake.body = [ game.snek.body = [
[3, 7], [3, 7],
[4, 7], [4, 7],
[5, 7], [5, 7],
[6, 7], [6, 7],
[7, 7], [7, 7],
]; ];
game.snake.dir = null; game.snek.dir = null;
game.snake.newdir = null; game.snek.newdir = null;
} }
// check if the x and y coordinate is part of the snek // check if the x and y coordinate is part of the snek
function inSnake(x, y) { function inSnek(x, y) {
for (let part of game.snake.body) { for (let part of game.snek.body) {
if (part[0] === x && part[1] === y) return true; if (part[0] === x && part[1] === y) return true;
} }
return false; return false;
@ -48,7 +50,7 @@ function draw() {
ctx.clearRect(0, 0, 500, 500); ctx.clearRect(0, 0, 500, 500);
for (let i = 0; i < game.size; i++) { for (let i = 0; i < game.size; i++) {
for (let j = 0; j < game.size; j++) { for (let j = 0; j < game.size; j++) {
ctx.fillStyle = inSnake(i, j) ctx.fillStyle = inSnek(i, j)
? "#38e070" ? "#38e070"
: i === game.apple[0] && j === game.apple[1] : i === game.apple[0] && j === game.apple[1]
? "#eb4034" ? "#eb4034"
@ -60,26 +62,29 @@ function draw() {
// update the game board // update the game board
function update() { 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 l = b[b.length - 1];
const next = move(); const next = move();
// check if the snek ate the apple // check if the snek ate the apple
if (game.apple[0] === next[0] && game.apple[1] === next[1]) { 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++) { for (let i = 0; i < 30; i++) {
const x = Math.floor(Math.random() * game.size); const x = Math.floor(Math.random() * game.size);
const y = Math.floor(Math.random() * game.size); const y = Math.floor(Math.random() * game.size);
game.apple = [x, y]; game.apple = [x, y];
if (inSnake(game.apple[0], game.apple[1])) break;
if (!inSnek(game.apple[0], game.apple[1])) break;
} }
} else { } else {
b.shift(); b.shift();
} }
// check if the snek crashed into itself // check if the snek crashed into itself
if (inSnake(next[0], next[1])) { if (inSnek(next[0], next[1])) {
reset(); reset();
} }
@ -91,18 +96,17 @@ function update() {
b.push(next); // move the snek b.push(next); // move the snek
// update score display // update score display
if (game.dir !== null) { if (game.snek.dir !== null) {
const score = b.length - 5; 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}`; info.innerText = `${score < 15 ? "length" : "longth"}: ${score}`;
highscore.innerText = `${score > highscore ? "former highscore" : "highscore"}: ${highscore}`; highscore.innerText = `highscore: ${game.highscore}`;
game.highscore = highest; }
}
// calculate where the snek will move to // calculate where the snek will move to
function move() { function move() {
const [x, y] = l; const [x, y] = l;
switch (game.snake.dir) { switch (game.snek.dir) {
case "left": case "left":
return [x - 1, y]; return [x - 1, y];
case "right": case "right":
@ -119,8 +123,8 @@ function update() {
// change direction on keypress // change direction on keypress
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
const s = game.snake; const s = game.snek;
if (s.dir !== s.newdir) update(); if (s.dir !== s.newdir) update(); // avoid snek from crashing into itself
switch (e.key) { switch (e.key) {
case "ArrowLeft": case "ArrowLeft":
return s.dir !== "right" ? (s.newdir = "left") : 0; return s.dir !== "right" ? (s.newdir = "left") : 0;

7
style.css
View file

@ -1,9 +1,16 @@
/* basic styling so the webpage doesnt look awful */
body { body {
margin: 2em auto; margin: 2em auto;
padding: 0; padding: 0;
max-width: 375px;
text-align: center; text-align: center;
} }
#display { #display {
font: 18px/1.3 serif; font: 18px/1.3 serif;
} }
ul {
text-align: left;
}