Update script.js

js/script.js

@@ -2,113 +2,119 @@ const canvas = document.querySelector(".canvas");
 const ctx = canvas.getContext("2d");
 
 const scale = 20;
-const rows = canvas.height/scale; //25
-const columns = canvas.width/scale; //25
+const rows = canvas.height / scale;
+const columns = canvas.width / scale;
 
-let snake = [];
-snake[0] = {
-  x: (Math.floor(Math.random() * columns)) * scale,
-  y: (Math.floor(Math.random() * rows)) * scale
-}
-
-let food = {
-  x: (Math.floor(Math.random() * columns)) * scale,
-  y: (Math.floor(Math.random() * rows)) * scale
-}
+// DOM Elements
+const scoreElement = document.getElementById("score_value");
+const resetButton = document.getElementById("reset");
 
-let d = "right";
+// Initial Variables
+let snake, food, direction, score, play;
 
+// Initialize game
+function init() {
+  snake = [
+    {
+      x: (Math.floor(Math.random() * columns)) * scale,
+      y: (Math.floor(Math.random() * rows)) * scale
+    }
+  ];
+
+  // Place food randomly, ensuring it's not on the snake
+  do {
+    food = {
+      x: (Math.floor(Math.random() * columns)) * scale,
+      y: (Math.floor(Math.random() * rows)) * scale
+    };
+  } while (food.x === snake[0].x && food.y === snake[0].y);
+
+  direction = "right";
+  score = 0;
+  updateScore();
+
+  clearInterval(play);
+  play = setInterval(draw, 100);
+}
 
-document.onkeydown = direction;
-function direction(event){
-  let key = event.keyCode;
-  if(key == 37 && d != "right"){
-    d = "left"
-  }
-  else if(key == 38 && d != "down"){
-    d = "up"
-  }
-  else if(key == 39 && d != "left"){
-    d = "right"
-  }
-  else if(key == 40 && d != "up"){
-    d = "down"
-  }
+// Update score display
+function updateScore() {
+  scoreElement.innerText = score;
 }
 
-let play = setInterval(drow,100);
+// Event listener for direction change
+document.onkeydown = (event) => {
+  const key = event.keyCode;
+  if (key == 37 && direction != "right") direction = "left";
+  else if (key == 38 && direction != "down") direction = "up";
+  else if (key == 39 && direction != "left") direction = "right";
+  else if (key == 40 && direction != "up") direction = "down";
+};
 
-function drow() {
-  ctx.clearRect(0,0,canvas.width,canvas.height);
+// Reset game when reset button is clicked
+resetButton.onclick = init;
 
-  for (let i=0; i<snake.length; i++) {
+// Main draw function
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Draw snake
+  snake.forEach((segment) => {
     ctx.fillStyle = "orange";
     ctx.strokeStyle = "red";
-    ctx.fillRect(snake[i].x,snake[i].y,scale,scale);
-    ctx.strokeRect(snake[i].x,snake[i].y,scale,scale);
-  }
-
+    ctx.fillRect(segment.x, segment.y, scale, scale);
+    ctx.strokeRect(segment.x, segment.y, scale, scale);
+  });
 
-  //drow food
+  // Draw food
   ctx.fillStyle = "red";
   ctx.strokeStyle = "red";
   ctx.fillRect(food.x, food.y, scale, scale);
   ctx.strokeRect(food.x, food.y, scale, scale);
 
+  // Move snake
   let snakex = snake[0].x;
   let snakey = snake[0].y;
-  if(d == "left") snakex -= scale;
-  if(d == "up") snakey -= scale;
-  if(d == "right") snakex += scale;
-  if(d == "down") snakey += scale;
 
-  if(snakex > canvas.width){
-    snakex = 0;
-  }
-  if(snakey > canvas.height){
-    snakey = 0;
-  }
-  if(snakex < 0){
-    snakex = canvas.width;
-  }
-  if(snakey < 0){
-    snakey = canvas.height;
-  }
-
-  if(snakex == food.x && snakey == food.y){
+  if (direction == "left") snakex -= scale;
+  if (direction == "up") snakey -= scale;
+  if (direction == "right") snakex += scale;
+  if (direction == "down") snakey += scale;
+
+  // Wrap-around logic
+  if (snakex >= canvas.width) snakex = 0;
+  if (snakey >= canvas.height) snakey = 0;
+  if (snakex < 0) snakex = canvas.width - scale;
+  if (snakey < 0) snakey = canvas.height - scale;
+
+  // Check if food is eaten
+  if (snakex === food.x && snakey === food.y) {
+    score++;
+    updateScore();
     food = {
       x: (Math.floor(Math.random() * columns)) * scale,
       y: (Math.floor(Math.random() * rows)) * scale
-    }
-  }
-  else{
+    };
+  } else {
     snake.pop();
   }
 
-  let newHead = {
-    x : snakex,
-    y : snakey
-  }
+  // New head
+  const newHead = { x: snakex, y: snakey };
 
-  if(eatSelf(newHead,snake)) {
+  // Check for self-collision
+  if (eatSelf(newHead, snake)) {
     clearInterval(play);
-    alert("The moment before disaster");
+    alert(`Game Over! Your score: ${score}`);
   }
 
   snake.unshift(newHead);
-
 }
 
+// Check if the snake eats itself
+function eatSelf(head, array) {
+  return array.some(segment => head.x === segment.x && head.y === segment.y);
+}
 
-
-
-// game over
-function eatSelf(head,array){
-  for(let i=0; i<array.length;i++){
-    if(head.x == array[i].x && head.y == array[i].y){
-      return true;
-
-    }
-  }
-  return false;
-}
+// Initialize the game for the first time
+init();