bitcloudTheFirst · bitcloudTheFirst · May 19, 2025
diff --git a/Projects/Snake/index.html b/Projects/Snake/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snake Game</title>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+        #starfield, #game {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+        #starfield {
+            background: #000;
+            z-index: 0;
+        }
+        #game {
+            background: transparent;
+            z-index: 1;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="starfield"></canvas>
+    <canvas id="game"></canvas>
+    <script src="starfield.js"></script>
+    <script src="snake.js"></script>
+</body>
+</html>
diff --git a/Projects/Snake/snake.js b/Projects/Snake/snake.js
@@ -0,0 +1,106 @@
+const canvas = document.getElementById('game');
+const ctx = canvas.getContext('2d');
+let scale = 20;
+let rows, cols;
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    rows = Math.floor(canvas.height / scale);
+    cols = Math.floor(canvas.width / scale);
+}
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+let snake = {
+    x: Math.floor(cols / 2) * scale,
+    y: Math.floor(rows / 2) * scale,
+    dx: scale,
+    dy: 0,
+    cells: [],
+    maxCells: 4
+};
+
+let food = getRandomFood();
+
+function getRandomFood() {
+    return {
+        x: Math.floor(Math.random() * cols) * scale,
+        y: Math.floor(Math.random() * rows) * scale
+    };
+}
+
+function loop() {
+    requestAnimationFrame(loop);
+    if (++count < 5) {
+        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 - scale;
+    } else if (snake.x >= canvas.width) {
+        snake.x = 0;
+    }
+
+    if (snake.y < 0) {
+        snake.y = canvas.height - scale;
+    } 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, scale, scale);
+
+    ctx.fillStyle = 'lime';
+    snake.cells.forEach((cell, index) => {
+        ctx.fillRect(cell.x, cell.y, scale, scale);
+
+        if (cell.x === food.x && cell.y === food.y) {
+            snake.maxCells++;
+            food = getRandomFood();
+        }
+
+        for (let i = index + 1; i < snake.cells.length; i++) {
+            if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
+                snake.maxCells = 4;
+                snake.cells = [];
+                snake.x = Math.floor(cols / 2) * scale;
+                snake.y = Math.floor(rows / 2) * scale;
+                snake.dx = scale;
+                snake.dy = 0;
+                food = getRandomFood();
+            }
+        }
+    });
+}
+
+let count = 0;
+document.addEventListener('keydown', e => {
+    if (e.key === 'ArrowLeft' && snake.dx === 0) {
+        snake.dx = -scale;
+        snake.dy = 0;
+    } else if (e.key === 'ArrowUp' && snake.dy === 0) {
+        snake.dy = -scale;
+        snake.dx = 0;
+    } else if (e.key === 'ArrowRight' && snake.dx === 0) {
+        snake.dx = scale;
+        snake.dy = 0;
+    } else if (e.key === 'ArrowDown' && snake.dy === 0) {
+        snake.dy = scale;
+        snake.dx = 0;
+    }
+});
+
+requestAnimationFrame(loop);
diff --git a/Projects/Snake/starfield.js b/Projects/Snake/starfield.js
@@ -0,0 +1,37 @@
+const starCanvas = document.getElementById('starfield');
+const starCtx = starCanvas.getContext('2d');
+let stars = [];
+const STAR_COUNT = 100;
+
+function resizeStarfield() {
+    starCanvas.width = window.innerWidth;
+    starCanvas.height = window.innerHeight;
+    stars = [];
+    for (let i = 0; i < STAR_COUNT; i++) {
+        stars.push({
+            x: Math.random() * starCanvas.width,
+            y: Math.random() * starCanvas.height,
+            speed: 0.5 + Math.random() * 1.5,
+            size: Math.random() * 2 + 0.5
+        });
+    }
+}
+
+function updateStars() {
+    starCtx.fillStyle = 'black';
+    starCtx.fillRect(0, 0, starCanvas.width, starCanvas.height);
+    starCtx.fillStyle = 'white';
+    for (const star of stars) {
+        star.y += star.speed;
+        if (star.y > starCanvas.height) {
+            star.y = 0;
+            star.x = Math.random() * starCanvas.width;
+        }
+        starCtx.fillRect(star.x, star.y, star.size, star.size);
+    }
+    requestAnimationFrame(updateStars);
+}
+
+window.addEventListener('resize', resizeStarfield);
+resizeStarfield();
+updateStars();