first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Snake Game</title>
+  <style>
+    body {
+      background: #111;
+      color: #fff;
+      font-family: sans-serif;
+      text-align: center;
+    }
+    canvas {
+      background: #222;
+      display: block;
+      margin: 20px auto;
+      border: 2px solid #fff;
+    }
+    h1 {
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Snake 🐍</h1>
+  <canvas id="game" width="400" height="400"></canvas>
+  <p>Use arrow keys to move. Eat the food, don’t hit yourself!</p>
+  <script>
+    const canvas = document.getElementById("game");
+    const ctx = canvas.getContext("2d");
+
+    const grid = 20;
+    let count = 0;
+
+    let snake = {
+      x: 160,
+      y: 160,
+      dx: grid,
+      dy: 0,
+      cells: [],
+      maxCells: 4
+    };
+
+    let food = {
+      x: 320,
+      y: 320
+    };
+
+    function getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min)) + min;
+    }
+
+    function loop() {
+      requestAnimationFrame(loop);
+
+      if (++count < 4) return;
+      count = 0;
+
+      ctx.clearRect(0,0,canvas.width,canvas.height);
+
+      snake.x += snake.dx;
+      snake.y += snake.dy;
+
+      if (snake.x < 0) snake.x = canvas.width - grid;
+      else if (snake.x >= canvas.width) snake.x = 0;
+      if (snake.y < 0) snake.y = canvas.height - grid;
+      else if (snake.y >= canvas.height) snake.y = 0;
+
+      snake.cells.unshift({x: snake.x, y: snake.y});
+
+      if (snake.cells.length > snake.maxCells) snake.cells.pop();
+
+      ctx.fillStyle = "red";
+      ctx.fillRect(food.x, food.y, grid-1, grid-1);
+
+      ctx.fillStyle = "lime";
+      snake.cells.forEach((cell, index) => {
+        ctx.fillRect(cell.x, cell.y, grid-1, grid-1);  
+
+        if (cell.x === food.x && cell.y === food.y) {
+          snake.maxCells++;
+          food.x = getRandomInt(0, 20) * grid;
+          food.y = getRandomInt(0, 20) * grid;
+        }
+
+        for (let i = index + 1; i < snake.cells.length; i++) {
+          if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
+            snake.x = 160;
+            snake.y = 160;
+            snake.cells = [];
+            snake.maxCells = 4;
+            snake.dx = grid;
+            snake.dy = 0;
+            food.x = getRandomInt(0, 20) * grid;
+            food.y = getRandomInt(0, 20) * grid;
+          }
+        }
+      });
+    }
+
+    document.addEventListener("keydown", e => {
+      if (e.key === "ArrowLeft" && snake.dx === 0) {
+        snake.dx = -grid; snake.dy = 0;
+      } else if (e.key === "ArrowUp" && snake.dy === 0) {
+        snake.dy = -grid; snake.dx = 0;
+      } else if (e.key === "ArrowRight" && snake.dx === 0) {
+        snake.dx = grid; snake.dy = 0;
+      } else if (e.key === "ArrowDown" && snake.dy === 0) {
+        snake.dy = grid; snake.dx = 0;
+      }
+    });
+
+    requestAnimationFrame(loop);
+  </script>
+</body>
+</html>