500&404 errors

static/js/snake.js

@@ -0,0 +1,174 @@
+const canvas = document.getElementById('snakeCanvas');
+const ctx = canvas.getContext('2d');
+
+const gridSize = 20;
+const tileSize = 100;
+const snakeSize = 60;
+const foodSize = 80;
+canvas.width = gridSize * tileSize;
+canvas.height = gridSize * tileSize;
+
+let snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }];
+let direction = { x: 0, y: 0 };
+let food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
+let score = 0;
+let gameOver = false;
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // draw grid of checkerboard pattern
+    for (let x = 0; x < gridSize; x++) {
+        for (let y = 0; y < gridSize; y++) {
+            ctx.fillStyle = (x + y) % 2 === 0 ? 
+            getComputedStyle(document.documentElement).getPropertyValue('--background-color') : 
+            getComputedStyle(document.documentElement).getPropertyValue('--secondary-background-color');
+            ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
+        }
+    }
+
+    // Draw snake
+    snake.forEach(segment => {
+        let nextVec = { x: 0, y: 0 };
+        // if there is a segment after the current segment
+        if (snake.indexOf(segment) < snake.length - 1) {
+            const nextSegment = snake[snake.indexOf(segment) + 1];
+            nextVec.x = nextSegment.x - segment.x;
+            nextVec.y = nextSegment.y - segment.y;
+        }
+
+        ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
+        if (nextVec.x === 0 && nextVec.y === 0) {
+            ctx.fillRect(
+                segment.x * tileSize + (tileSize - snakeSize) / 2,
+                segment.y * tileSize + (tileSize - snakeSize) / 2,
+                snakeSize,
+                snakeSize
+            );
+        } else if (nextVec.x > 0 || nextVec.y > 0) {
+            ctx.fillRect(
+                segment.x * tileSize + (tileSize - snakeSize) / 2,
+                segment.y * tileSize + (tileSize - snakeSize) / 2,
+                snakeSize + nextVec.x * (tileSize - snakeSize),
+                snakeSize + nextVec.y * (tileSize - snakeSize)
+            );
+        } else {
+            ctx.fillRect(
+                segment.x * tileSize + (tileSize - snakeSize) / 2 + nextVec.x * (tileSize - snakeSize),
+                segment.y * tileSize + (tileSize - snakeSize) / 2 + nextVec.y * (tileSize - snakeSize),
+                snakeSize + Math.abs(nextVec.x) * (tileSize - snakeSize),
+                snakeSize + Math.abs(nextVec.y) * (tileSize - snakeSize)
+            );
+        }
+        
+    });
+
+    // Draw food
+    ctx.fillStyle = '#ff4d4d';
+    ctx.fillRect(
+        food.x * tileSize + (tileSize - foodSize) / 2,
+        food.y * tileSize + (tileSize - foodSize) / 2,
+        foodSize,
+        foodSize
+    );
+}
+
+function update() {
+    if (gameOver) return;
+
+    // Move snake
+    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
+
+    // Add new head
+    snake.unshift(head);
+
+    // Check for food collision
+    if (head.x === food.x && head.y === food.y) {
+        score += 10; // Increase score
+        placeFood();
+    } else {
+        snake.pop(); // Remove tail if no food eaten
+    }
+
+    // Check for wall collision
+    if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
+        gameOver = true;
+        return;
+    }
+
+    // Check for self collision
+    for (let i = 1; i < snake.length; i++) {
+        if (head.x === snake[i].x && head.y === snake[i].y) {
+            gameOver = true;
+            return;
+        }
+    }
+}
+
+function placeFood() {
+    do {
+        food.x = Math.floor(Math.random() * gridSize);
+        food.y = Math.floor(Math.random() * gridSize);
+    } while (snake.some(segment => segment.x === food.x && segment.y === food.y));
+}
+
+function changeDirection(event) {
+    switch (event.key) {
+        case 'w':
+            if (direction.y === 0) direction = { x: 0, y: -1 };
+            break;
+        case 's':
+            if (direction.y === 0) direction = { x: 0, y: 1 };
+            break;
+        case 'a':
+            if (direction.x === 0) direction = { x: -1, y: 0 };
+            break;
+        case 'd':
+            if (direction.x === 0) direction = { x: 1, y: 0 };
+            break;
+    }
+}
+
+// Menu to start the game
+function menu() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.textAlign = 'center';
+    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text-color');
+    ctx.font = '200px Arial';
+    ctx.fillText('Snake Game', canvas.width / 2, canvas.height / 2);
+    ctx.font = '100px Arial';
+    ctx.fillText('Press W/A/S/D to move', canvas.width / 2, canvas.height / 2 + 100);
+    ctx.fillText('Click to start', canvas.width / 2, canvas.height / 2 + 200);
+
+    canvas.addEventListener('click', startGame);
+}
+
+function gameLoop() {
+    if (!gameOver) {
+        update();
+        draw();
+        setTimeout(gameLoop, 100);
+    } else {
+        document.removeEventListener('keydown', changeDirection);
+        document.getElementById('snake-score').value = score;
+        alert(`Game Over! Your score: ${score}`);
+        menu();
+    }
+}
+
+function startGame() {
+    snake = [{ x: 10, y: 10 }, { x: 10, y: 11 }, { x: 10, y: 12 }];
+    direction = { x: 1, y: 0 };
+    food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
+    score = 0;
+    gameOver = false;
+    canvas.removeEventListener('click', startGame);
+    document.addEventListener('keydown', changeDirection);
+    gameLoop();
+}
+
+menu();