Govind-S-B · jnakaigen · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,40 +1,19 @@
-# miniHACKATHON #0
-Welcome to our 3-hour Mini Hackathon! Geared towards beginners and first-timers, this rapid event is your chance to explore, build, and ship your project. Unleash your creativity and enjoy the journey of creating something new! 🚀  
-
-# Getting Started
-## Fork the Repository
-- Click on the "Fork" button in the top right corner to create your own copy of this repository.
-## Creating your Project
-- Navigate to the root directory of your forked repository.
-- Create a new folder with your team's name.
-- Add your source code files to this folder.
-- Inside the folder, create a README.md file with the following information:
 ```
-# [Team Name]
+# [Gen]
 
 ### Team Members:
-- [Member 1]
-- [Member 2]
-- [Member 3]
+- Janaki Ratheesh
+
 
 ### Project Title:
-[Your Project's Title]
+Snake game website
 
 ### Description:
-[Brief description of what you built]
+A classic implementation of the Snake game using HTML, CSS, and JavaScript
 
 ### How we Built It:
-[Brief description of the tools, languages, or technologies used]
+JavaScript, CSS, and HTML were utilised in the process.
 
 ### How to Use It:
-[Brief instructions on how to use your project]
-
+In the game, the player earns points by maneuvering the snake to eat pieces of food that appear at random locations on the screen. The snake has to be moved using arrows. Each time the snake eats food, it grows longer and moves faster, making the game progressively more difficult.The game ends when the snake either moves into the screen’s border or moves into itself.The objective of the game is to eat as much food as possible before the game ends.
 ```
-## Updating the Index
-- Open the index.md file in the root directory.
-- Add your team name and project title in the following format:
-```
-- [Team Name]: [Project Title]
-```
-
-Make a PR when you are done with the project , alright now hack away !
diff --git a/design.html b/design.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #game-board {
+        position: relative;
+        height: 300px;
+        width: 300px;
+        border: 2px solid rgb(245, 8, 8);
+        background-color: black;
+      }
+      .dot {
+        background: url("snake.png");
+        background-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="game-board"></div>
+    <div
+      id="game-over"
+      style="
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 300px;
+        height: 300px;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        text-align: center;
+        padding-top: 140px;
+      "
+    >
+      Game Over
+      <button id="restart-button" style="display: block; margin: 20px auto">
+        Restart
+      </button>
+    </div>
+
+    <script>
+      var dotSize = 20;
+      var direction = "Right";
+      var snake = [{ top: 0, left: 0 }];
+      var food = null;
+      var initialInterval = 200;
+      var intervalDecrease = 5;
+      var gameInterval;
+      var isGameOver = false;
+
+      // Rest of your JavaScript code...
+
+      function createDot(top, left, id) {
+        var dot = document.createElement("img");
+        dot.src = "snake.png";
+        dot.style.position = "absolute";
+        dot.style.height = `${dotSize}px`;
+        dot.style.width = `${dotSize}px`;
+        dot.style.top = `${top}px`;
+        dot.style.left = `${left}px`;
+        dot.id = id;
+        return dot;
+      }
+
+      function updateGameBoard() {
+        document.getElementById("game-board").innerHTML = "";
+        snake.forEach(function (dot, index) {
+          var dotElement = createDot(dot.top, dot.left, `snake-dot-${index}`);
+          document.getElementById("game-board").appendChild(dotElement);
+        });
+
+        if (food === null) {
+          food = {
+            top: Math.floor(Math.random() * 15) * dotSize,
+            left: Math.floor(Math.random() * 15) * dotSize,
+          };
+        }
+        var foodElement = createDot(food.top, food.left, "food-dot");
+        document.getElementById("game-board").appendChild(foodElement);
+      }
+
+      function updateSnake() {
+        function updateSnake() {
+          if (isGameOver) return;
+        }
+        var head = Object.assign({}, snake[0]); // copy head
+        switch (direction) {
+          case "Left":
+            head.left -= dotSize;
+            break;
+          case "Right":
+            head.left += dotSize;
+            break;
+          case "Up":
+            head.top -= dotSize;
+            break;
+          case "Down":
+            head.top += dotSize;
+            break;
+        }
+
+        // Check if the snake hit the border
+        if (
+          head.left < 0 ||
+          head.top < 0 ||
+          head.left >= 300 ||
+          head.top >= 300
+        ) {
+          isGameOver = true;
+          clearInterval(gameInterval);
+          document.getElementById("game-over").style.display = "block";
+          return;
+        }
+        // Check if the snake hit itself
+        for (var i = 0; i < snake.length; i++) {
+          if (snake[i].top === head.top && snake[i].left === head.left) {
+            isGameOver = true;
+            clearInterval(gameInterval);
+            document.getElementById("game-over").style.display = "block";
+            return;
+          }
+        }
+
+        snake.unshift(head);
+
+        if (food && food.top === head.top && food.left === head.left) {
+          food = null; // eat the food
+        } else {
+          snake.pop(); // remove tail
+        }
+      }
+
+      if (food && food.top === head.top && food.left === head.left) {
+        food = null; // eat the food
+        score++; // increase score
+
+        // Increase speed
+        clearInterval(gameInterval);
+        gameInterval = setInterval(function () {
+          updateSnake();
+          updateGameBoard();
+        }, initialInterval - score * intervalDecrease);
+      }
+
+      function handleKeydown(event) {
+        switch (event.code) {
+          case "ArrowLeft":
+            direction = "Left";
+            break;
+          case "ArrowRight":
+            direction = "Right";
+            break;
+          case "ArrowUp":
+            direction = "Up";
+            break;
+          case "ArrowDown":
+            direction = "Down";
+            break;
+        }
+      }
+
+      document
+        .getElementById("restart-button")
+        .addEventListener("click", function () {
+          // Hide the "Game Over" screen
+          document.getElementById("game-over").style.display = "none";
+
+          // Reset the game state
+          direction = "Right";
+          snake = [{ top: 0, left: 0 }];
+          food = null;
+          isGameOver = false;
+
+          // Start the game again
+          gameInterval = setInterval(function () {
+            updateSnake();
+            updateGameBoard();
+          }, initialInterval - score * intervalDecrease);
+        });
+
+      setInterval(function () {
+        updateSnake();
+        updateGameBoard();
+      }, 200);
+
+      window.addEventListener("keydown", handleKeydown);
+    </script>
+  </body>
+</html>
diff --git a/index.md b/index.md
@@ -0,0 +1 @@
+Gen: Snake game website
diff --git a/player.png b/player.png
diff --git a/snake.png b/snake.png