👴📚 Checkpoint
./script.js:9517054/7485 ./index.html:9517054/1430 ./style.css:9517054/254
This commit is contained in:
Glitch (glitch-hello-website)
parent
729f05d6ed
commit
270622ad66
3 changed files with 39 additions and 22 deletions
10
index.html
10
index.html
|
|
@ -12,7 +12,13 @@
|
|||
<body>
|
||||
<canvas id="canvas" height="375" width="375"></canvas>
|
||||
<br /><br />
|
||||
<span id="info">welcome to snek!</span>
|
||||
<span id="highscore">welcome to snek!</span>
|
||||
<span id="info">welcome to snek!</span><br />
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
44
script.js
44
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue