Spaces:

blackeeee
/

slithering-snake-saga

Running

App Files Files Community

blackeeee commited on Oct 4, 2025

Commit

ef422a7

verified ·

1 Parent(s): 7992333

сделай змейку

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +334 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Slithering Snake Saga
-emoji: ⚡
-colorFrom: green
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Slithering Snake Saga 🐍
+colorFrom: gray
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,335 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slithering Snake Saga</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        canvas {
+            display: block;
+            margin: 0 auto;
+            background-color: #111827;
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
+        }
+        .game-container {
+            position: relative;
+        }
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            display: none;
+            justify-content: center;
+            gap: 10px;
+        }
+        @media (max-width: 768px) {
+            .controls {
+                display: flex;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="text-center mb-6">
+        <h1 class="text-4xl font-bold text-green-400 mb-2">Slithering Snake Saga</h1>
+        <p class="text-gray-300">Use arrow keys or tap buttons to control the snake</p>
+    </div>
+    <div class="game-container">
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+        <div class="controls">
+            <button id="upBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
+                ↑
+            </button>
+            <div class="flex flex-col gap-2">
+                <button id="leftBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
+                    ←
+                </button>
+                <button id="rightBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
+                    →
+                </button>
+            </div>
+            <button id="downBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
+                ↓
+            </button>
+        </div>
+    </div>
+    <div class="mt-6 flex gap-4 items-center">
+        <div class="bg-gray-800 p-3 rounded-lg">
+            <span class="text-green-400 font-bold">Score: </span>
+            <span id="score" class="text-white">0</span>
+        </div>
+        <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg">
+            Start Game
+        </button>
+        <button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg">
+            Reset
+        </button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            const scoreElement = document.getElementById('score');
+            const startBtn = document.getElementById('startBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const upBtn = document.getElementById('upBtn');
+            const downBtn = document.getElementById('downBtn');
+            const leftBtn = document.getElementById('leftBtn');
+            const rightBtn = document.getElementById('rightBtn');
+            // Game variables
+            let snake = [];
+            let food = {};
+            let direction = 'right';
+            let nextDirection = 'right';
+            let gameSpeed = 150;
+            let score = 0;
+            let gameInterval;
+            let gameRunning = false;
+            const gridSize = 20;
+            const tileCount = canvas.width / gridSize;
+            // Initialize game
+            function initGame() {
+                snake = [];
+                for (let i = 3; i >= 0; i--) {
+                    snake.push({ x: i * gridSize, y: 0 });
+                }
+                generateFood();
+                score = 0;
+                scoreElement.textContent = score;
+                direction = 'right';
+                nextDirection = 'right';
+                if (gameRunning) {
+                    clearInterval(gameInterval);
+                    gameInterval = setInterval(gameLoop, gameSpeed);
+                }
+                drawGame();
+            }
+            // Generate food at random position
+            function generateFood() {
+                food = {
+                    x: Math.floor(Math.random() * tileCount) * gridSize,
+                    y: Math.floor(Math.random() * tileCount) * gridSize
+                };
+                // Make sure food doesn't spawn on snake
+                for (let segment of snake) {
+                    if (segment.x === food.x && segment.y === food.y) {
+                        return generateFood();
+                    }
+                }
+            }
+            // Main game loop
+            function gameLoop() {
+                moveSnake();
+                checkCollision();
+                drawGame();
+            }
+            // Move the snake
+            function moveSnake() {
+                direction = nextDirection;
+                // Calculate new head position
+                const head = { x: snake[0].x, y: snake[0].y };
+                switch (direction) {
+                    case 'up':
+                        head.y -= gridSize;
+                        break;
+                    case 'down':
+                        head.y += gridSize;
+                        break;
+                    case 'left':
+                        head.x -= gridSize;
+                        break;
+                    case 'right':
+                        head.x += gridSize;
+                        break;
+                }
+                // Add new head
+                snake.unshift(head);
+                // Check if snake ate food
+                if (head.x === food.x && head.y === food.y) {
+                    score++;
+                    scoreElement.textContent = score;
+                    generateFood();
+                    // Increase speed every 5 points
+                    if (score % 5 === 0) {
+                        gameSpeed = Math.max(50, gameSpeed - 10);
+                        clearInterval(gameInterval);
+                        gameInterval = setInterval(gameLoop, gameSpeed);
+                    }
+                } else {
+                    // Remove tail if no food eaten
+                    snake.pop();
+                }
+            }
+            // Check for collisions
+            function checkCollision() {
+                const head = snake[0];
+                // Wall collision
+                if (
+                    head.x < 0 || head.x >= canvas.width ||
+                    head.y < 0 || head.y >= canvas.height
+                ) {
+                    gameOver();
+                }
+                // Self collision
+                for (let i = 1; i < snake.length; i++) {
+                    if (head.x === snake[i].x && head.y === snake[i].y) {
+                        gameOver();
+                    }
+                }
+            }
+            // Game over
+            function gameOver() {
+                clearInterval(gameInterval);
+                gameRunning = false;
+                startBtn.textContent = 'Restart Game';
+                alert(`Game Over! Your score: ${score}`);
+            }
+            // Draw game elements
+            function drawGame() {
+                // Clear canvas
+                ctx.fillStyle = '#111827';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                // Draw snake
+                snake.forEach((segment, index) => {
+                    const gradient = ctx.createLinearGradient(segment.x, segment.y, segment.x + gridSize, segment.y + gridSize);
+                    if (index === 0) {
+                        // Head - brighter green
+                        gradient.addColorStop(0, '#4ade80');
+                        gradient.addColorStop(1, '#22c55e');
+                    } else {
+                        // Body - darker green
+                        gradient.addColorStop(0, '#16a34a');
+                        gradient.addColorStop(1, '#15803d');
+                    }
+                    ctx.fillStyle = gradient;
+                    ctx.fillRect(segment.x, segment.y, gridSize - 1, gridSize - 1);
+                    // Add eyes to head
+                    if (index === 0) {
+                        ctx.fillStyle = 'white';
+                        // Right eye
+                        if (direction === 'right') {
+                            ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
+                            ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
+                        }
+                        // Left eye
+                        else if (direction === 'left') {
+                            ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
+                            ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
+                        }
+                        // Up eye
+                        else if (direction === 'up') {
+                            ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
+                            ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
+                        }
+                        // Down eye
+                        else if (direction === 'down') {
+                            ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
+                            ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
+                        }
+                    }
+                });
+                // Draw food
+                const foodGradient = ctx.createRadialGradient(
+                    food.x + gridSize/2, food.y + gridSize/2, 0,
+                    food.x + gridSize/2, food.y + gridSize/2, gridSize/2
+                );
+                foodGradient.addColorStop(0, '#ef4444');
+                foodGradient.addColorStop(1, '#dc2626');
+                ctx.fillStyle = foodGradient;
+                ctx.beginPath();
+                ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2 - 1, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            // Event listeners
+            startBtn.addEventListener('click', () => {
+                if (!gameRunning) {
+                    gameRunning = true;
+                    startBtn.textContent = 'Pause';
+                    initGame();
+                    gameInterval = setInterval(gameLoop, gameSpeed);
+                } else {
+                    gameRunning = false;
+                    clearInterval(gameInterval);
+                    startBtn.textContent = 'Resume';
+                }
+            });
+            resetBtn.addEventListener('click', () => {
+                clearInterval(gameInterval);
+                gameRunning = false;
+                startBtn.textContent = 'Start Game';
+                initGame();
+            });
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                switch (e.key) {
+                    case 'ArrowUp':
+                        if (direction !== 'down') nextDirection = 'up';
+                        break;
+                    case 'ArrowDown':
+                        if (direction !== 'up') nextDirection = 'down';
+                        break;
+                    case 'ArrowLeft':
+                        if (direction !== 'right') nextDirection = 'left';
+                        break;
+                    case 'ArrowRight':
+                        if (direction !== 'left') nextDirection = 'right';
+                        break;
+                }
+            });
+            // Touch controls
+            upBtn.addEventListener('click', () => {
+                if (direction !== 'down') nextDirection = 'up';
+            });
+            downBtn.addEventListener('click', () => {
+                if (direction !== 'up') nextDirection = 'down';
+            });
+            leftBtn.addEventListener('click', () => {
+                if (direction !== 'right') nextDirection = 'left';
+            });
+            rightBtn.addEventListener('click', () => {
+                if (direction !== 'left') nextDirection = 'right';
+            });
+            // Initialize game state
+            initGame();
+        });
+    </script>
+</body>
 </html>