Merge pull request 'Please master patrick fix this mess' (#27) from sageTheDm/pages:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/27

secret/snake/game.js

@@ -1,150 +1,95 @@
 "use strict";
 
-const upButton = document.getElementById("up");
+const cvs = document.getElementById("snake");
-const downButton = document.getElementById("down");
+const ctx = cvs.getContext("2d");
-const leftButton = document.getElementById("left");
+const box = 20;
-const rightButton = document.getElementById("right");
-const startButton = document.getElementById("start");
-const grid = document.createElement("div");
-grid.id = "grid";
-document.querySelector(".game").appendChild(grid);
 
-let snake = [{ x: 5, y: 5 }];
+let snake = [{ x: 9 * box, y: 10 * box }];
-let apple = { x: 8, y: 5 };
+let food = {
-let direction = { x: 0, y: 0 };
+  x: Math.floor(Math.random() * 19 + 1) * box,
-let gameInterval = null;
+  y: Math.floor(Math.random() * 19 + 1) * box,
-let isGameRunning = false;
+};
-const gridSize = 10;
+let score = 0;
+let d;
+let game;
 
-function initGame() {
+document.addEventListener("keydown", direction);
-  grid.style.display = "grid";
+function direction(event) {
-  grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
+  let key = event.keyCode;
-  grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
+  if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
-  grid.style.width = "350px";
+  else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
-  grid.style.height = "350px";
+  else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
-  document.getElementById("title").style.display = "none";
+  else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
-  document.getElementById("description").style.display = "none";
-
-  isGameRunning = true;
-  snake = [{ x: 5, y: 5 }];
-  apple = spawnApple();
-  direction = { x: 0, y: 0 };
-
-  clearInterval(gameInterval);
-  gameInterval = setInterval(gameLoop, 200);
-  render();
 }
 
-function spawnApple() {
+function collision(head, array) {
-  let newApple;
+  return array.some((part) => head.x == part.x && head.y == part.y);
-  do {
-    newApple = {
-      x: Math.floor(Math.random() * gridSize),
-      y: Math.floor(Math.random() * gridSize),
-    };
-  } while (
-    snake.some(
-      (segment) => segment.x === newApple.x && segment.y === newApple.y
-    )
-  );
-  return newApple;
 }
 
-function updateSnake() {
+function draw() {
-  const newHead = {
+  ctx.fillStyle = "#0f380f";
-    x: snake[0].x + direction.x,
+  ctx.fillRect(0, 0, cvs.width, cvs.height);
-    y: snake[0].y + direction.y,
-  };
 
-  if (newHead.x < 0) newHead.x = gridSize - 1;
+  ctx.fillStyle = "red";
-  if (newHead.y < 0) newHead.y = gridSize - 1;
+  ctx.fillRect(food.x, food.y, box, box);
-  if (newHead.x >= gridSize) newHead.x = 0;
+
-  if (newHead.y >= gridSize) newHead.y = 0;
+  for (let i = 0; i < snake.length; i++) {
+    ctx.fillStyle = i == 0 ? "lime" : "white";
+    ctx.fillRect(snake[i].x, snake[i].y, box, box);
+    ctx.strokeStyle = "black";
+    ctx.strokeRect(snake[i].x, snake[i].y, box, box);
+  }
+
+  let snakeX = snake[0].x;
+  let snakeY = snake[0].y;
+
+  if (d == "LEFT") snakeX -= box;
+  if (d == "UP") snakeY -= box;
+  if (d == "RIGHT") snakeX += box;
+  if (d == "DOWN") snakeY += box;
+
+  if (snakeX == food.x && snakeY == food.y) {
+    score++;
+    food = {
+      x: Math.floor(Math.random() * 19 + 1) * box,
+      y: Math.floor(Math.random() * 19 + 1) * box,
+    };
+  } else {
+    snake.pop();
+  }
+
+  let newHead = { x: snakeX, y: snakeY };
 
   if (
-    snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
+    snakeX < 0 ||
+    snakeX >= cvs.width ||
+    snakeY < 0 ||
+    snakeY >= cvs.height ||
+    collision(newHead, snake)
   ) {
-    gameOver();
+    clearInterval(game);
+    document.getElementById("restartBtn").style.display = "block";
     return;
   }
 
   snake.unshift(newHead);
 
-  if (newHead.x === apple.x && newHead.y === apple.y) {
+  ctx.fillStyle = "white";
-    apple = spawnApple();
+  ctx.font = "20px Arial";
-  } else {
+  ctx.fillText("Score: " + score, 10, 20);
-    snake.pop();
-  }
 }
 
-function render() {
+function restartGame() {
-  grid.innerHTML = "";
+  snake = [{ x: 9 * box, y: 10 * box }];
-
+  food = {
-  for (let y = 0; y < gridSize; y++) {
+    x: Math.floor(Math.random() * 19 + 1) * box,
-    for (let x = 0; x < gridSize; x++) {
+    y: Math.floor(Math.random() * 19 + 1) * box,
-      const cell = document.createElement("div");
+  };
-      cell.classList.add("cell");
+  score = 0;
-
+  d = "";
-      if ((x + y) % 2 === 0) {
+  document.getElementById("restartBtn").style.display = "none";
-        cell.classList.add("light-green");
+  game = setInterval(draw, 150);
-      } else {
-        cell.classList.add("dark-green");
-      }
-
-      if (snake.some((segment) => segment.x === x && segment.y === y)) {
-        cell.classList.add("snake");
-      }
-
-      if (apple.x === x && apple.y === y) {
-        cell.classList.add("apple");
-      }
-
-      grid.appendChild(cell);
-    }
-  }
 }
 
-function gameLoop() {
+document.getElementById("restartBtn").addEventListener("click", restartGame);
-  if (!isGameRunning) return;
+game = setInterval(draw, 150);
-  updateSnake();
-  render();
-}
-
-function gameOver() {
-  alert("Game Over!");
-  clearInterval(gameInterval);
-  isGameRunning = false;
-}
-
-function handleDirectionInput(key) {
-  switch (key) {
-    case "ArrowUp":
-    case "w":
-      if (direction.y === 0) direction = { x: 0, y: -1 };
-      break;
-    case "ArrowDown":
-    case "s":
-      if (direction.y === 0) direction = { x: 0, y: 1 };
-      break;
-    case "ArrowLeft":
-    case "a":
-      if (direction.x === 0) direction = { x: -1, y: 0 };
-      break;
-    case "ArrowRight":
-    case "d":
-      if (direction.x === 0) direction = { x: 1, y: 0 };
-      break;
-  }
-}
-
-upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
-downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
-leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
-rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
-startButton.addEventListener("click", () => {
-  if (!isGameRunning) initGame();
-});
-
-document.addEventListener("keydown", (event) => {
-  handleDirectionInput(event.key);
-});

secret/snake/index.html

@@ -38,7 +38,7 @@
             <p>▲ or W or arrow up = move up</p>
             <p>▼ or S or arrow down = move down</p>
           </div>
-          <canvas id="game"></canvas>
+          <canvas id="snake" width="400" height="400"></canvas>
         </article>
       </div>
 

secret/snake/test.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Snake Game - GameBoy Style</title>
+    <style>
+      /* Base Reset */
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        font-family: monospace;
+        background-color: #3a2d56;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      /* GameBoy Layout */
+      .gameboy {
+        background-color: #5f4c82;
+        width: 441px;
+        height: 735px;
+        border-radius: 20px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 10px;
+        position: relative;
+      }
+
+      @media (max-width: 768px) {
+        .gameboy {
+          width: 100vw;
+          height: 100vh;
+          border-radius: 0;
+        }
+      }
+
+      /* Screen */
+      .screen {
+        background-color: black;
+        border: 4px solid #0f380f;
+        width: 90%;
+        height: 55%;
+        margin-top: 20px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
+        overflow: hidden;
+      }
+
+      canvas {
+        border: 1px solid black;
+      }
+
+      /* Restart Button */
+      #restartBtn {
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+        margin-top: 20px;
+        background-color: #0f380f;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        display: none;
+      }
+
+      #restartBtn:hover {
+        background-color: #9bbc0f;
+      }
+
+      /* Titles */
+      h1 {
+        font-size: 1.8rem;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        color: #9bbc0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="gameboy">
+      <h1>Snake Game</h1>
+      <div class="screen">
+        <canvas id="snake" width="400" height="400"></canvas>
+      </div>
+      <button id="restartBtn">Restart</button>
+    </div>
+
+    <script>
+      "use strict";
+
+      const cvs = document.getElementById("snake");
+      const ctx = cvs.getContext("2d");
+      const box = 20;
+
+      let snake = [{ x: 9 * box, y: 10 * box }];
+      let food = {
+        x: Math.floor(Math.random() * 19 + 1) * box,
+        y: Math.floor(Math.random() * 19 + 1) * box,
+      };
+      let score = 0;
+      let d;
+      let game;
+
+      document.addEventListener("keydown", direction);
+      function direction(event) {
+        let key = event.keyCode;
+        if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
+        else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
+        else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
+        else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
+      }
+
+      function collision(head, array) {
+        return array.some((part) => head.x == part.x && head.y == part.y);
+      }
+
+      function draw() {
+        ctx.fillStyle = "#0f380f";
+        ctx.fillRect(0, 0, cvs.width, cvs.height);
+
+        ctx.fillStyle = "red";
+        ctx.fillRect(food.x, food.y, box, box);
+
+        for (let i = 0; i < snake.length; i++) {
+          ctx.fillStyle = i == 0 ? "lime" : "white";
+          ctx.fillRect(snake[i].x, snake[i].y, box, box);
+          ctx.strokeStyle = "black";
+          ctx.strokeRect(snake[i].x, snake[i].y, box, box);
+        }
+
+        let snakeX = snake[0].x;
+        let snakeY = snake[0].y;
+
+        if (d == "LEFT") snakeX -= box;
+        if (d == "UP") snakeY -= box;
+        if (d == "RIGHT") snakeX += box;
+        if (d == "DOWN") snakeY += box;
+
+        if (snakeX == food.x && snakeY == food.y) {
+          score++;
+          food = {
+            x: Math.floor(Math.random() * 19 + 1) * box,
+            y: Math.floor(Math.random() * 19 + 1) * box,
+          };
+        } else {
+          snake.pop();
+        }
+
+        let newHead = { x: snakeX, y: snakeY };
+
+        if (
+          snakeX < 0 ||
+          snakeX >= cvs.width ||
+          snakeY < 0 ||
+          snakeY >= cvs.height ||
+          collision(newHead, snake)
+        ) {
+          clearInterval(game);
+          document.getElementById("restartBtn").style.display = "block";
+          return;
+        }
+
+        snake.unshift(newHead);
+
+        ctx.fillStyle = "white";
+        ctx.font = "20px Arial";
+        ctx.fillText("Score: " + score, 10, 20);
+      }
+
+      function restartGame() {
+        snake = [{ x: 9 * box, y: 10 * box }];
+        food = {
+          x: Math.floor(Math.random() * 19 + 1) * box,
+          y: Math.floor(Math.random() * 19 + 1) * box,
+        };
+        score = 0;
+        d = "";
+        document.getElementById("restartBtn").style.display = "none";
+        game = setInterval(draw, 150);
+      }
+
+      document
+        .getElementById("restartBtn")
+        .addEventListener("click", restartGame);
+      game = setInterval(draw, 150);
+    </script>
+  </body>
+</html>