💫🐽 Checkpoint

./index.html:9517054/2

LICENSE

@@ -1,54 +0,0 @@
-The LICENSE file for any project gives credit to the creator/author of the 
-project, copyright information for the project, and the legal terms under 
-which it's being shared. In other words, this is us using an MIT license to
-say "we wrote this and you can do whatever you want with it."
-
-******************************************************************************
-~glitch-hello-website
-******************************************************************************
-MIT License
-
-Copyright (c) 2021, Glitch, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
-
-
-******************************************************************************
-
-THIRD-PARTY SOFTWARE
-This is all the software we used to build this starter project. All of these
-licenses are compatible with the license above. We've included links so you
-can learn more if you want. 
-
-1. HK Grotesk: The font we're using. 
-
-
-******************************************************************************
-1. HK Grotesk
-URL: https://hanken.co/products/hk-grotesk
-******************************************************************************
-HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
-license. Full license text can be found at:
-
-https://hanken.co/pages/web-fonts-eula
-******************************************************************************
-END, HK Grotesk
-******************************************************************************

README.md

@@ -1,30 +0,0 @@
-# Hello website!
-
-This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄
-
-## What's in this project?
-
-← `README.md`: That's this file, where you can tell people what your cool website does and how you built it.
-
-← `index.html`: This is the main web page for your site. The HTML defines the structure and content of the page using _elements_. You'll see references in the HTML to the JS and CSS files. Try clicking the image in the center of the page!
-
-← `style.css`: CSS files add styling rules to your content. The CSS applies styles to the elements in your HTML page. The style rules also make the image move when you click it.
-
-← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. The code in the JavaScript file runs when the page loads, and when the visitor clicks the button you can add below.
-
-Open each file and check out the comments (in gray) for more info.
-
-## Try this next 🏗️
-
-Take a look in `TODO.md` for next steps you can try out in your new site!
-
-___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___
-
-![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
-
-## You built this with Glitch!
-
-[Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites.
-
-- Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions.
-- Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more.

index.html

@@ -2,14 +2,22 @@
 <html lang="en">
   <head>
     <title>snek</title>
-    
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="stylesheet" href="/style.css" />
-    <script src="/script.js" defer></script>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
   </head>
   <body>
     <canvas id="canvas" height="375" width="375"></canvas>
+    <br /><br />
+    <span id="info">welcome to snek!</span><br />
+    <span id="highscore"></span>
+    <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>

script.js

@@ -1,68 +1,153 @@
+// 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,
-  snake: {
+  speed: 1000 / 15, // 15 frames per second
+  snek: {
     body: [
-      [7, 3],
-      [7, 4],
-      [7, 5],
-      [7, 6],
+      [3, 7],
+      [4, 7],
+      [5, 7],
+      [6, 7],
       [7, 7],
     ],
-    dir: "right",
+    dir: null,
+    newdir: null,
   },
-  apple: [],
+  apple: [12, 7],
+  highscore: 0,
 };
 
+// reset the game board (but not the highscore)
+function reset() {
+  game.apple = [12, 7];
+  game.snek.body = [
+    [3, 7],
+    [4, 7],
+    [5, 7],
+    [6, 7],
+    [7, 7],
+  ];
+  game.snek.dir = null;
+  game.snek.newdir = null;
+}
+
+// check if the x and y coordinate is part of the snek
+function inSnek(x, y) {
+  for (let part of game.snek.body) {
+    if (part[0] === x && part[1] === y) return true;
+  }
+  return false;
+}
+
+// draw the game board
 function draw() {
   const size = 25;
   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(j, i) ? "green" : "black";
+      ctx.fillStyle = inSnek(i, j)
+        ? "#38e070"
+        : i === game.apple[0] && j === game.apple[1]
+        ? "#eb4034"
+        : "#333333";
       ctx.fillRect(i * size, j * size, size, size);
     }
   }
-
-  function inSnake(x, y) {
-    for (let part of game.snake.body) {
-      if (part[0] === x && part[1] === y) return true;
-    }
-    return false;
-  }
 }
 
+// update the game board
 function update() {
-  const s = game.snake;
+  game.snek.dir = game.snek.newdir;
 
+  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 (!inSnek(game.apple[0], game.apple[1])) break;
+    }
+  } else {
+    b.shift();
+  }
+
+  // check if the snek crashed into itself
+  if (inSnek(next[0], next[1])) {
+    reset();
+  }
+
+  // check if the snek fell out of the world
+  if (l[0] < 0 || l[0] >= game.size || l[1] < 0 || l[1] >= game.size) {
+    reset();
+  }
+
+  // uncomment to wrap
+  // if (next[0] < 0) next[0] = game.size - 1;
+  // if (next[0] >= game.size) next[0] = 0;
+  // if (next[1] < 0 ) next[1] = game.size - 1;
+  // if (next[1] >= game.size) next[1] = 0;
+
+  b.push(next); // move the snek
+
+  // update score display
+  if (game.snek.dir !== null) {
+    const score = b.length - 5;
+    if (score > game.highscore) game.highscore = score; // update high score if necessary
+    info.innerText = `${score < 15 ? "length" : "longth"}: ${score}`;
+    highscore.innerText = `highscore: ${game.highscore}\n`;
+  }
+
+  // calculate where the snek will move to
   function move() {
-    switch (s.dir) {
+    const [x, y] = l;
+    switch (game.snek.dir) {
       case "left":
-        return s.parts.push([x, y]);
+        return [x - 1, y];
       case "right":
-        return s.parts.push([x, y]);
+        return [x + 1, y];
       case "up":
-        return s.parts.push([x, y]);
+        return [x, y - 1];
       case "down":
-        return s.parts.push([x, y]);
+        return [x, y + 1];
+      default:
+        return [x, y];
     }
   }
 }
 
+// change direction on keypress
 document.addEventListener("keydown", (e) => {
-  const s = game.snake;
+  if (e.ctrlKey || e.shiftKey) return;
+
+  const s = game.snek;
+  if (s.dir !== s.newdir) update(); // avoid snek from crashing into itself
+  e.preventDefault();
   switch (e.key) {
-    case "Left":
-      return (s.dir = "left");
-    case "Right":
-      return (s.dir = "right");
-    case "Up":
-      return (s.dir = "up");
-    case "Down":
-      return (s.dir = "down");
+    case "ArrowLeft":
+      return s.dir !== "right" ? (s.newdir = "left") : 0;
+    case "ArrowRight":
+      return s.dir !== "left" ? (s.newdir = "right") : 0;
+    case "ArrowUp":
+      return s.dir !== "down" ? (s.newdir = "up") : 0;
+    case "ArrowDown":
+      return s.dir !== "up" ? (s.newdir = "down") : 0;
   }
 });
 
-draw();
-update();
+// the main game loop
+setInterval(() => {
+  update();
+  draw();
+}, game.speed);

style.css

@@ -0,0 +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;
+}