finished snakie

first check
ulianasunny31 · Feb 29, 2024 · 27a425d · 27a425d
1 parent 40a9b91
commit 27a425d
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 47 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -55,6 +55,7 @@ ul {
     font-size: 24px;
   }
 }
+
 .go-back-link {
   padding: 5px;
   text-decoration: none;
@@ -75,6 +76,11 @@ ul {
   color: #6d523e;
 }
 
+.green-page {
+  background-color: #6b8e71;
+  color: #ffffff;
+}
+
 /**
   |============================
   | HANGMAN STYLES
@@ -351,21 +357,47 @@ ul {
 */
 
 .snake-body {
-  background-color: #f8fae3;
+  background-color: #bad1c2;
+  padding: 10px;
+}
+
+.score-heading,
+#score-span {
+  font-family: "Rowdies", sans-serif;
+  font-size: 35px;
 }
 
 #score-span {
+  color: #215b63;
 }
 
 #snake-canvas {
-  background-color: #faf3e3;
+  background-color: #fefcf7;
 }
 
 .snake-container {
   display: flex;
   justify-content: center;
 }
 
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-top: 70px;
+}
+
+.game-intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.game-intro h2 {
+  color: #b8405e;
+}
+
 .keys-list {
   display: flex;
   flex-direction: row;
@@ -386,24 +418,3 @@ ul {
 .non-visible {
   display: none;
 }
-
-/* @media screen and (min-width: 768px) {
-  #snake-canvas {
-    width: 350px;
-    height: 350px;
-  }
-}
-
-@media screen and (min-width: 1158px) {
-  #snake-canvas {
-    width: 450px;
-    height: 450px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  #snake-canvas {
-    width: 500px;
-    height: 500px;
-  }
-} */
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Montserrat:ital,wght@0,700;1,700&family=Rowdies:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Kdam+Thmor+Pro&family=Montserrat:ital,wght@0,700;1,700&family=Rowdies:wght@400;700&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -27,7 +27,7 @@ <h2 class="project-name">Practice project 2</h2>
 
       <h2 class="project-name">Practice project 3</h2>
 
-      <a class="project-link" href="snakie.html">Snakie</a>
+      <a class="project-link" href="snakie.html">Snakie (Big Screen only)</a>
     </div>
   </body>
 </html>
diff --git a/js/declarations.js b/js/declarations.js
@@ -3,13 +3,13 @@ export const spanWord = document.querySelector(".word-span");
 export const restart = document.querySelector(".restart-btn");
 export const alphabet = document.querySelector(".alphabet-list");
 export const liItems = document.querySelectorAll(".alphabet-list-item");
-export const scoreInput = document.getElementById("score-input");
+export const scoreSpan = document.getElementById("score-span");
 export const keyNames = {
   KeyW: "up",
   KeyS: "down",
   KeyA: "left",
   KeyD: "right",
-  Space: "stop",
+  Space: "start",
   ArrowUp: "up",
   ArrowDown: "down",
   ArrowLeft: "left",

diff --git a/js/snakie.js b/js/snakie.js
@@ -1,22 +1,15 @@
 // //Declarations
-import { keyNames, scoreInput } from "./declarations.js";
+import { keyNames, scoreSpan } from "./declarations.js";
 const canvas = document.getElementById("snake-canvas");
 const ctx = canvas.getContext("2d");
 const width = canvas.width;
 const height = canvas.height;
 let score = 0;
-let block = 15;
+let block = 18;
 const blockWidth = width / block;
 const blockHeight = height / block;
-
-//the game
-drawGameBorder();
-let snakie = new Snakie();
-snakie.draw();
-//Snake creation
-
-//Apple point creation
-
+let intervalID;
+scoreSpan.innerHTML = ` ${score}`;
 class Block {
   constructor(column, row) {
     this.column = column;
@@ -51,7 +44,7 @@ class Block {
     return this.column === otherBlock.column && this.row === otherBlock.row;
   }
 }
-
+//Snake creation
 class Snakie {
   constructor() {
     this.body = [new Block(7, 5), new Block(6, 5), new Block(5, 5)];
@@ -61,9 +54,113 @@ class Snakie {
 
   draw() {
     for (let i = 0; i < this.body.length; i++) {
-      this.body[i].drawSquare("3F497F");
+      this.body[i].drawSquare("#3F497F");
     }
   }
+
+  move() {
+    let head = this.body[0];
+    let newHead;
+
+    this.direction = this.nextDirection;
+
+    switch (this.direction) {
+      case "right":
+        newHead = new Block(head.column + 1, head.row);
+        break;
+
+      case "down":
+        newHead = new Block(head.column, head.row + 1);
+        break;
+
+      case "left":
+        newHead = new Block(head.column - 1, head.row);
+        break;
+
+      case "up":
+        newHead = new Block(head.column, head.row - 1);
+        break;
+    }
+
+    if (this.checkingCollision(newHead)) {
+      drawGAMEOVERtext();
+      return;
+    }
+
+    this.body.unshift(newHead); // Add the new head to the beginning of the
+
+    if (newHead.equal(apple.position)) {
+      score++;
+      scoreSpan.innerHTML = ` ${score}`;
+      apple.move();
+    } else {
+      this.body.pop(); // Remove the last element from the body array
+    }
+  }
+
+  checkingCollision(head) {
+    let collisionLeft = head.column === 0;
+    let collisionRight = head.column === blockWidth - 1;
+    let collisionTop = head.row === 0;
+    let collisionBottom = head.row === blockHeight - 1;
+
+    const collision =
+      collisionTop || collisionBottom || collisionLeft || collisionRight;
+
+    let collisionBody = false;
+
+    for (let i = 0; i < this.body.length; i++) {
+      if (head.equal(this.body[i])) {
+        collisionBody = true;
+        break;
+      }
+    }
+
+    return collision || collisionBody;
+  }
+
+  setNormalDirection(newDirection) {
+    console.log("Setting direction to:", newDirection);
+    if (this.direction === "up" && newDirection == "down") {
+      return;
+    } else if (this.direction === "down" && newDirection === "up") {
+      return;
+    } else if (this.direction === "right" && newDirection === "left") {
+      return;
+    } else if (this.direction === "left" && newDirection === "right") {
+      return;
+    }
+
+    this.nextDirection = newDirection;
+  }
+
+  reset() {
+    this.body = [new Block(7, 5), new Block(6, 5), new Block(5, 5)];
+    this.direction = "right";
+    this.nextDirection = "right";
+  }
+}
+
+//Apple point creation
+class Apple {
+  constructor() {
+    this.position = new Block(10, 10);
+  }
+
+  draw() {
+    this.position.drawCircle("#B8405E");
+  }
+
+  move() {
+    //25 blocks total, 23 game blocks, +1 to beat math random function
+    let randomColumn = Math.floor(Math.random() * (blockWidth - 2)) + 1;
+    let randomRow = Math.floor(Math.random() * (blockHeight - 2)) + 1;
+    this.position = new Block(randomColumn, randomRow);
+  }
+
+  reset() {
+    this.position = new Block(10, 10);
+  }
 }
 
 //Functions
@@ -76,10 +173,52 @@ function drawGameBorder() {
 }
 
 function drawGAMEOVERtext() {
-  //   clearInterval(intervalID);
+  clearInterval(intervalID);
   ctx.font = "40px Courier";
   ctx.fillStyle = "#FF9F29";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillText("GAME OVER", width / 2, height / 2);
 }
+
+function doTheGame() {
+  ctx.clearRect(0, 0, width, height);
+  snakie.move();
+  snakie.draw();
+  apple.draw();
+  drawGameBorder();
+}
+
+function startTheGame() {
+  intervalID = setInterval(doTheGame, 110);
+}
+
+function restartAll() {
+  clearInterval(intervalID);
+  apple.reset();
+  snakie.reset();
+  doTheGame();
+}
+
+//the game
+const snakie = new Snakie();
+const apple = new Apple();
+
+drawGameBorder();
+
+document.addEventListener("keydown", function (event) {
+  let key = keyNames[event.code];
+
+  if (key !== undefined && key !== "start") {
+    snakie.setNormalDirection(key);
+  }
+
+  if (key === "start") {
+    if (!intervalID) {
+      startTheGame();
+    } else {
+      restartAll();
+      startTheGame();
+    }
+  }
+});
diff --git a/snakie.html b/snakie.html
@@ -7,20 +7,28 @@
     <link rel="stylesheet" href="./css/styles.css" />
   </head>
   <body class="snake-body">
-    <a class="beige-page go-back-link" href="index.html">Go back</a>
+    <a class="green-page go-back-link" href="index.html">Go back</a>
+    <div class="flex">
+      <div class="game-intro">
+        <h2>Press Space to start!</h2>
 
-    <h3>Score:<span id="score-span">sdvsvsvsv</span></h3>
-    <div class="snake-container">
-      <canvas id="snake-canvas" width="400" height="400"> </canvas>
+      <h3 class="score-heading">Score: <span id="score-span"></span> points.</span></h3>
+
     </div>
-    <div class="non-visible">
+
+      <div class="snake-container">
+        <canvas id="snake-canvas" width="450" height="450"> </canvas>
+      </div>
+      <div></div>
+    </div>
+    <!-- <div class="non-visible">
       <ul class="keys-list">
         <li>UP</li>
         <li>DOWN</li>
         <li>RIGHT</li>
         <li>LEFT</li>
       </ul>
-    </div>
+    </div> -->
     <script type="module" src="./js/snakie.js"></script>
   </body>
 </html>