Spaces:

robennong
/

sparklesnake

Running

App Files Files Community

robennong commited on Mar 30

Commit

c906018

verified ·

1 Parent(s): 707a7c4

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +951 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sparklesnake
-emoji: 📉
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sparklesnake
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,951 @@
-<!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>Neon Snake - The Sparkling Adventure</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+            color: white;
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="0.5" fill="white" opacity="0.1"/></svg>');
+            z-index: -1;
+            animation: stars 50s linear infinite;
+        }
+        @keyframes stars {
+            0% { background-position: 0 0; }
+            100% { background-position: 1000px 1000px; }
+        }
+        .game-container {
+            position: relative;
+            width: 500px;
+            height: 500px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 0 40px rgba(100, 65, 255, 0.5);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+        }
+        canvas {
+            background-color: rgba(15, 10, 40, 0.7);
+            display: block;
+        }
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 10;
+        }
+        .game-title {
+            font-size: 3rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+            background: linear-gradient(90deg, #ff00cc, #3333ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+        }
+        .btn {
+            padding: 12px 30px;
+            font-size: 1.2rem;
+            background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
+            border: none;
+            color: white;
+            border-radius: 50px;
+            cursor: pointer;
+            margin: 10px;
+            box-shadow: 0 0 20px rgba(252, 176, 69, 0.5);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 0 30px rgba(252, 176, 69, 0.8);
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                transparent,
+                transparent,
+                transparent,
+                rgba(255, 255, 255, 0.2),
+                transparent,
+                transparent,
+                transparent
+            );
+            animation: shine 3s infinite;
+        }
+        @keyframes shine {
+            0% { transform: rotate(0deg) translate(-30%, -30%); }
+            100% { transform: rotate(360deg) translate(-30%, -30%); }
+        }
+        .score-display {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            font-size: 1.5rem;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 20px;
+            border-radius: 50px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+        }
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+            width: 100%;
+        }
+        .control-btn {
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.2s ease;
+        }
+        .control-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .control-btn i {
+            font-size: 1.5rem;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        .sparkle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: white;
+            border-radius: 50%;
+            pointer-events: none;
+            transform: scale(1);
+            opacity: 0;
+            animation: sparkle 1s forwards;
+        }
+        @keyframes sparkle {
+            0% {
+                transform: translate(var(--tx), var(--ty)) scale(0);
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.8;
+            }
+            100% {
+                transform: translate(var(--tx), var(--ty)) scale(1.5);
+                opacity: 0;
+            }
+        }
+        .game-over {
+            text-align: center;
+        }
+        .final-score {
+            font-size: 2rem;
+            margin: 20px 0;
+            color: #fcb045;
+        }
+        .instructions {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 10px;
+            font-size: 1rem;
+            max-width: 250px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .power-ups {
+            position: absolute;
+            bottom: 100px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 10px;
+            font-size: 1rem;
+            max-width: 250px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .power-up-item {
+            display: flex;
+            align-items: center;
+            margin: 5px 0;
+        }
+        .power-up-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        .hidden {
+            display: none;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            .game-container {
+                width: 90vw;
+                height: 90vw;
+            }
+            .game-title {
+                font-size: 2rem;
+            }
+            .instructions, .power-ups {
+                max-width: 200px;
+                font-size: 0.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div class="score-display hidden">
+            Score: <span id="score">0</span>
+        </div>
+        <div class="overlay" id="startScreen">
+            <h1 class="game-title">Neon Snake</h1>
+            <button class="btn" id="startBtn">Start Game</button>
+            <button class="btn" id="howToPlayBtn">How to Play</button>
+        </div>
+        <div class="overlay hidden" id="gameOverScreen">
+            <div class="game-over">
+                <h1 class="game-title">Game Over!</h1>
+                <div class="final-score">Your score: <span id="finalScore">0</span></div>
+                <button class="btn" id="restartBtn">Play Again</button>
+            </div>
+        </div>
+        <div class="instructions hidden" id="instructions">
+            <h3>How to Play</h3>
+            <p>Use arrow keys or on-screen controls to guide the snake 🐍</p>
+            <p>Eat the colorful food to grow larger and earn points 💎</p>
+            <p>Avoid hitting the walls or your own tail ⚠️</p>
+            <p>Special power-ups appear occasionally - grab them for bonuses ✨</p>
+            <button class="btn" id="backBtn" style="margin-top: 10px;">Back</button>
+        </div>
+        <div class="power-ups hidden">
+            <h3>Power-Ups</h3>
+            <div class="power-up-item">
+                <div class="power-up-color" style="background: gold;"></div>
+                <span>+5 points</span>
+            </div>
+            <div class="power-up-item">
+                <div class="power-up-color" style="background: #ff00ff;"></div>
+                <span>Speed boost</span>
+            </div>
+            <div class="power-up-item">
+                <div class="power-up-color" style="background: #00ffff;"></div>
+                <span>Invincibility</span>
+            </div>
+        </div>
+        <div class="controls hidden">
+            <div class="control-btn" id="upBtn"><i class="fas fa-arrow-up"></i></div>
+            <div class="control-btn" id="leftBtn"><i class="fas fa-arrow-left"></i></div>
+            <div class="control-btn" id="downBtn"><i class="fas fa-arrow-down"></i></div>
+            <div class="control-btn" id="rightBtn"><i class="fas fa-arrow-right"></i></div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            const startScreen = document.getElementById('startScreen');
+            const gameOverScreen = document.getElementById('gameOverScreen');
+            const instructionsScreen = document.getElementById('instructions');
+            const scoreDisplay = document.querySelector('.score-display');
+            const gameScore = document.getElementById('score');
+            const finalScore = document.getElementById('finalScore');
+            const startBtn = document.getElementById('startBtn');
+            const restartBtn = document.getElementById('restartBtn');
+            const howToPlayBtn = document.getElementById('howToPlayBtn');
+            const backBtn = document.getElementById('backBtn');
+            // Control buttons
+            const upBtn = document.getElementById('upBtn');
+            const leftBtn = document.getElementById('leftBtn');
+            const downBtn = document.getElementById('downBtn');
+            const rightBtn = document.getElementById('rightBtn');
+            // Set canvas size
+            canvas.width = canvas.parentElement.offsetWidth;
+            canvas.height = canvas.parentElement.offsetHeight;
+            // Game variables
+            let snake = [];
+            let food = {};
+            let powerUp = null;
+            let direction = 'right';
+            let nextDirection = 'right';
+            let gridSize = 20;
+            let tileCountX = Math.floor(canvas.width / gridSize);
+            let tileCountY = Math.floor(canvas.height / gridSize);
+            let speed = 7; // Initial speed
+            let speedBoost = 0;
+            let score = 0;
+            let gameLoop;
+            let invincible = false;
+            let gameRunning = false;
+            let foodType = 'normal';
+            let powerUpActive = false;
+            let powerUpTime = 0;
+            // Colors
+            const colors = {
+                snakeHead: '#4dffea',
+                snakeBody: '#00ff9d',
+                snakeTail: '#009dff',
+                normalFood: '#ff3e3e',
+                powerFood: '#FFD700',
+                speedFood: '#ff00ff',
+                invincibleFood: '#00ffff',
+                powerUpText: '#ffffff',
+                speedBoost: '#ff0000'
+            };
+            // Initialize game
+            function initGame() {
+                snake = [];
+                for (let i = 3; i >= 0; i--) {
+                    snake.push({
+                        x: i,
+                        y: 0
+                    });
+                }
+                direction = 'right';
+                nextDirection = 'right';
+                speed = 7;
+                speedBoost = 0;
+                score = 0;
+                invincible = false;
+                powerUp = null;
+                powerUpActive = false;
+                foodType = 'normal';
+                spawnFood();
+                updateScore();
+                // Hide screens
+                startScreen.classList.add('hidden');
+                gameOverScreen.classList.add('hidden');
+                instructionsScreen.classList.add('hidden');
+                // Show game elements
+                scoreDisplay.classList.remove('hidden');
+                document.querySelector('.power-ups').classList.remove('hidden');
+                document.querySelector('.controls').classList.remove('hidden');
+                gameRunning = true;
+            }
+            // Main game loop
+            function gameUpdate() {
+                if (!gameRunning) return;
+                // Clear canvas with partial transparency for trail effect
+                ctx.fillStyle = 'rgba(15, 10, 40, 0.2)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                // Update direction
+                direction = nextDirection;
+                // Move snake
+                let headX = snake[0].x;
+                let headY = snake[0].y;
+                if (direction === 'right') headX++;
+                if (direction === 'left') headX--;
+                if (direction === 'up') headY--;
+                if (direction === 'down') headY++;
+                // Wrap around screen
+                if (headX < 0) headX = tileCountX - 1;
+                if (headX >= tileCountX) headX = 0;
+                if (headY < 0) headY = tileCountY - 1;
+                if (headY >= tileCountY) headY = 0;
+                // Check for collision with self (unless invincible)
+                if (!invincible) {
+                    for (let i = 0; i < snake.length; i++) {
+                        if (snake[i].x === headX && snake[i].y === headY) {
+                            gameOver();
+                            return;
+                        }
+                    }
+                }
+                // Create new head
+                const newHead = {
+                    x: headX,
+                    y: headY
+                };
+                snake.unshift(newHead);
+                // Check if snake ate food
+                if (headX === food.x && headY === food.y) {
+                    // Play sound (not included in this example)
+                    // Add sparkles
+                    createSparkles(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2, foodType);
+                    // Different effects based on food type
+                    if (foodType === 'power') {
+                        score += 5; // Bonus points for power food
+                    } else if (foodType === 'speed') {
+                        speedBoost = 3;
+                    } else if (foodType === 'invincible') {
+                        invincible = true;
+                        setTimeout(() => {
+                            invincible = false;
+                        }, 10000); // 10 seconds of invincibility
+                    } else {
+                        score++; // Normal food
+                    }
+                    updateScore();
+                    // Spawn new food
+                    spawnFood();
+                    // Random chance to spawn a power-up
+                    if (Math.random() < 0.1 && !powerUp) {
+                        spawnPowerUp();
+                    }
+                } else if (powerUp && headX === powerUp.x && headY === powerUp.y) {
+                    // Snake ate power-up
+                    createSparkles(powerUp.x * gridSize + gridSize/2, powerUp.y * gridSize + gridSize/2, 'power');
+                    // Activate power-up effect
+                    if (Math.random() < 0.7) {
+                        // Speed boost (more common)
+                        speedBoost = 5;
+                    } else {
+                        // Invincibility (less common)
+                        invincible = true;
+                        setTimeout(() => {
+                            invincible = false;
+                        }, 5000); // 5 seconds of invincibility
+                    }
+                    score += 2;
+                    updateScore();
+                    powerUp = null;
+                } else {
+                    // Remove tail (unless we ate food)
+                    snake.pop();
+                }
+                // Draw food
+                drawFood();
+                if (powerUp) {
+                    drawPowerUp();
+                }
+                // Draw snake
+                drawSnake();
+                // Check if power-up should disappear
+                if (powerUp && powerUpTime + 5000 < Date.now()) {
+                    powerUp = null;
+                }
+                // Calculate speed with any boosts
+                const currentSpeed = speed + speedBoost;
+                speedBoost = Math.max(0, speedBoost - 0.1);
+                // Schedule next frame
+                setTimeout(gameUpdate, 1000 / currentSpeed);
+            }
+            // Draw the snake
+            function drawSnake() {
+                for (let i = 0; i < snake.length; i++) {
+                    // Calculate color gradient from head to tail
+                    let ratio = i / snake.length;
+                    let r, g, b;
+                    if (invincible) {
+                        // Rainbow effect when invincible
+                        r = Math.floor(Math.sin(ratio * Math.PI + Date.now() * 0.01) * 127 + 128);
+                        g = Math.floor(Math.sin(ratio * Math.PI + Date.now() * 0.01 + 2) * 127 + 128);
+                        b = Math.floor(Math.sin(ratio * Math.PI + Date.now() * 0.01 + 4) * 127 + 128);
+                    } else {
+                        // Normal gradient
+                        r = 0 + ratio * (0x4d - 0);
+                        g = 0xff - ratio * (0xff - 0x9d);
+                        b = 0xff - ratio * (0xff - 0x3e);
+                    }
+                    ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+                    // Add glow effect
+                    if (i === 0) { // Head has stronger glow
+                        ctx.shadowBlur = 15;
+                        ctx.shadowColor = `rgb(${r}, ${g}, ${b})`;
+                    } else {
+                        ctx.shadowBlur = 8 - (5 * ratio);
+                        ctx.shadowColor = `rgba(${r}, ${g}, ${b}, ${0.5 + ratio * 0.5})`;
+                    }
+                    // Draw snake segment
+                    ctx.fillRect(
+                        snake[i].x * gridSize,
+                        snake[i].y * gridSize,
+                        gridSize - 2,
+                        gridSize - 2
+                    );
+                    // Reset shadow
+                    ctx.shadowBlur = 0;
+                    // Draw eyes on head
+                    if (i === 0) {
+                        ctx.fillStyle = 'white';
+                        let eyeSize = gridSize / 5;
+                        let eyeOffsetX = gridSize / 3;
+                        let eyeOffsetY = gridSize / 3;
+                        // Position eyes based on direction
+                        if (direction === 'right') {
+                            ctx.fillRect(
+                                snake[i].x * gridSize + gridSize - eyeSize - 2,
+                                snake[i].y * gridSize + eyeOffsetY,
+                                eyeSize,
+                                eyeSize
+                            );
+                            ctx.fillRect(
+                                snake[i].x * gridSize + gridSize - eyeSize - 2,
+                                snake[i].y * gridSize + gridSize - eyeOffsetY - eyeSize,
+                                eyeSize,
+                                eyeSize
+                            );
+                        } else if (direction === 'left') {
+                            ctx.fillRect(
+                                snake[i].x * gridSize + 2,
+                                snake[i].y * gridSize + eyeOffsetY,
+                                eyeSize,
+                                eyeSize
+                            );
+                            ctx.fillRect(
+                                snake[i].x * gridSize + 2,
+                                snake[i].y * gridSize + gridSize - eyeOffsetY - eyeSize,
+                                eyeSize,
+                                eyeSize
+                            );
+                        } else if (direction === 'up') {
+                            ctx.fillRect(
+                                snake[i].x * gridSize + eyeOffsetX,
+                                snake[i].y * gridSize + 2,
+                                eyeSize,
+                                eyeSize
+                            );
+                            ctx.fillRect(
+                                snake[i].x * gridSize + gridSize - eyeOffsetX - eyeSize,
+                                snake[i].y * gridSize + 2,
+                                eyeSize,
+                                eyeSize
+                            );
+                        } else if (direction === 'down') {
+                            ctx.fillRect(
+                                snake[i].x * gridSize + eyeOffsetX,
+                                snake[i].y * gridSize + gridSize - eyeSize - 2,
+                                eyeSize,
+                                eyeSize
+                            );
+                            ctx.fillRect(
+                                snake[i].x * gridSize + gridSize - eyeOffsetX - eyeSize,
+                                snake[i].y * gridSize + gridSize - eyeSize - 2,
+                                eyeSize,
+                                eyeSize
+                            );
+                        }
+                    }
+                }
+            }
+            // Draw food
+            function drawFood() {
+                ctx.shadowBlur = 15;
+                if (foodType === 'power') {
+                    ctx.fillStyle = colors.powerFood;
+                    ctx.shadowColor = 'rgba(255, 215, 0, 0.7)';
+                } else if (foodType === 'speed') {
+                    ctx.fillStyle = colors.speedFood;
+                    ctx.shadowColor = 'rgba(255, 0, 255, 0.7)';
+                } else if (foodType === 'invincible') {
+                    ctx.fillStyle = colors.invincibleFood;
+                    ctx.shadowColor = 'rgba(0, 255, 255, 0.7)';
+                } else {
+                    ctx.fillStyle = colors.normalFood;
+                    ctx.shadowColor = 'rgba(255, 62, 62, 0.7)';
+                }
+                // Draw rotating diamond shape
+                const centerX = food.x * gridSize + gridSize / 2;
+                const centerY = food.y * gridSize + gridSize / 2;
+                const size = gridSize - 4;
+                const rotation = (Date.now() * 0.05) % 360;
+                ctx.save();
+                ctx.translate(centerX, centerY);
+                ctx.rotate(rotation * Math.PI / 180);
+                ctx.beginPath();
+                ctx.moveTo(0, -size/2);
+                ctx.lineTo(size/2, 0);
+                ctx.lineTo(0, size/2);
+                ctx.lineTo(-size/2, 0);
+                ctx.closePath();
+                ctx.fill();
+                ctx.restore();
+                ctx.shadowBlur = 0;
+            }
+            // Draw power-up
+            function drawPowerUp() {
+                if (!powerUp) return;
+                ctx.shadowBlur = 20;
+                ctx.shadowColor = 'rgba(255, 255, 255, 0.8)';
+                const size = gridSize - 4;
+                const centerX = powerUp.x * gridSize + gridSize / 2;
+                const centerY = powerUp.y * gridSize + gridSize / 2;
+                // Draw pulsing star
+                const pulse = 0.8 + 0.2 * Math.sin(Date.now() * 0.01);
+                ctx.save();
+                ctx.translate(centerX, centerY);
+                ctx.scale(pulse, pulse);
+                ctx.fillStyle = 'rgba(255, 215, 0, 0.8)';
+                // Draw star shape
+                ctx.beginPath();
+                for (let i = 0; i < 5; i++) {
+                    const angle = (i * 2 * Math.PI / 5) - Math.PI/2;
+                    const outerX = Math.cos(angle) * size/2;
+                    const outerY = Math.sin(angle) * size/2;
+                    const innerX = Math.cos(angle + Math.PI/5) * size/4;
+                    const innerY = Math.sin(angle + Math.PI/5) * size/4;
+                    if (i === 0) ctx.moveTo(outerX, outerY);
+                    else ctx.lineTo(outerX, outerY);
+                    ctx.lineTo(innerX, innerY);
+                }
+                ctx.closePath();
+                ctx.fill();
+                ctx.restore();
+                ctx.shadowBlur = 0;
+            }
+            // Spawn food at random location
+            function spawnFood() {
+                // Decide food type randomly
+                const r = Math.random();
+                if (r < 0.1) {
+                    foodType = 'power'; // 10% chance
+                } else if (r < 0.2) {
+                    foodType = 'speed'; // 10% chance
+                } else if (r < 0.25) {
+                    foodType = 'invincible'; // 5% chance
+                } else {
+                    foodType = 'normal'; // 75% chance
+                }
+                // Find empty spot
+                let emptySpot = false;
+                let foodX, foodY;
+                while (!emptySpot) {
+                    foodX = Math.floor(Math.random() * tileCountX);
+                    foodY = Math.floor(Math.random() * tileCountY);
+                    emptySpot = true;
+                    // Check if spot is occupied by snake
+                    for (let i = 0; i < snake.length; i++) {
+                        if (snake[i].x === foodX && snake[i].y === foodY) {
+                            emptySpot = false;
+                            break;
+                        }
+                    }
+                    // Check if spot is occupied by power-up
+                    if (powerUp && powerUp.x === foodX && powerUp.y === foodY) {
+                        emptySpot = false;
+                    }
+                }
+                food = {
+                    x: foodX,
+                    y: foodY
+                };
+            }
+            // Spawn power-up
+            function spawnPowerUp() {
+                let emptySpot = false;
+                let puX, puY;
+                while (!emptySpot) {
+                    puX = Math.floor(Math.random() * tileCountX);
+                    puY = Math.floor(Math.random() * tileCountY);
+                    emptySpot = true;
+                    // Check if spot is occupied by snake
+                    for (let i = 0; i < snake.length; i++) {
+                        if (snake[i].x === puX && snake[i].y === puY) {
+                            emptySpot = false;
+                            break;
+                        }
+                    }
+                    // Check if spot is occupied by food
+                    if (food.x === puX && food.y === puY) {
+                        emptySpot = false;
+                    }
+                }
+                powerUp = {
+                    x: puX,
+                    y: puY
+                };
+                powerUpTime = Date.now();
+            }
+            // Update score display
+            function updateScore() {
+                gameScore.textContent = score;
+            }
+            // Game over
+            function gameOver() {
+                gameRunning = false;
+                clearTimeout(gameLoop);
+                // Create explosion effect
+                for (let i = 0; i < snake.length; i++) {
+                    setTimeout(() => {
+                        createSparkles(
+                            snake[i].x * gridSize + gridSize/2,
+                            snake[i].y * gridSize + gridSize/2,
+                            'explosion'
+                        );
+                    }, i * 50);
+                }
+                // Show game over screen
+                setTimeout(() => {
+                    finalScore.textContent = score;
+                    gameOverScreen.classList.remove('hidden');
+                    scoreDisplay.classList.add('hidden');
+                    document.querySelector('.power-ups').classList.add('hidden');
+                    document.querySelector('.controls').classList.add('hidden');
+                }, 500);
+            }
+            // Create sparkle effects
+            function createSparkles(x, y, type) {
+                const colors = {
+                    normal: ['#ff3e3e', '#ff7b7b', '#ff9999'],
+                    power: ['#FFD700', '#FFEE58', '#FFF59D'],
+                    speed: ['#ff00ff', '#ff66ff', '#ff99ff'],
+                    invincible: ['#00ffff', '#66ffff', '#99ffff'],
+                    explosion: ['#ff0000', '#ff6600', '#ffff00']
+                };
+                const sparkleCount = type === 'explosion' ? 30 : 15;
+                const sparkleSize = type === 'explosion' ? 6 : 4;
+                const lifetime = type === 'explosion' ? '1s' : '0.8s';
+                for (let i = 0; i < sparkleCount; i++) {
+                    const sparkle = document.createElement('div');
+                    sparkle.className = 'sparkle';
+                    // Random properties for each sparkle
+                    const angle = Math.random() * Math.PI * 2;
+                    const distance = Math.random() * 30 + 20;
+                    const tx = Math.cos(angle) * distance;
+                    const ty = Math.sin(angle) * distance;
+                    const size = Math.random() * sparkleSize + sparkleSize/2;
+                    const delay = Math.random() * 0.2;
+                    const color = colors[type][Math.floor(Math.random() * colors[type].length)];
+                    sparkle.style.setProperty('--tx', tx + 'px');
+                    sparkle.style.setProperty('--ty', ty + 'px');
+                    sparkle.style.width = size + 'px';
+                    sparkle.style.height = size + 'px';
+                    sparkle.style.background = color;
+                    sparkle.style.left = x + 'px';
+                    sparkle.style.top = y + 'px';
+                    sparkle.style.animation = `sparkle ${lifetime} ${delay}s forwards`;
+                    document.body.appendChild(sparkle);
+                    // Remove sparkle after animation
+                    setTimeout(() => {
+                        sparkle.remove();
+                    }, 1000);
+                }
+            }
+            // Event listeners
+            startBtn.addEventListener('click', () => {
+                initGame();
+                gameUpdate();
+            });
+            restartBtn.addEventListener('click', () => {
+                initGame();
+                gameUpdate();
+            });
+            howToPlayBtn.addEventListener('click', () => {
+                startScreen.classList.add('hidden');
+                instructionsScreen.classList.remove('hidden');
+            });
+            backBtn.addEventListener('click', () => {
+                instructionsScreen.classList.add('hidden');
+                startScreen.classList.remove('hidden');
+            });
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (!gameRunning) return;
+                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 (gameRunning && direction !== 'down') nextDirection = 'up';
+            });
+            leftBtn.addEventListener('click', () => {
+                if (gameRunning && direction !== 'right') nextDirection = 'left';
+            });
+            downBtn.addEventListener('click', () => {
+                if (gameRunning && direction !== 'up') nextDirection = 'down';
+            });
+            rightBtn.addEventListener('click', () => {
+                if (gameRunning && direction !== 'left') nextDirection = 'right';
+            });
+            // Handle window resize
+            window.addEventListener('resize', () => {
+                const container = canvas.parentElement;
+                canvas.width = container.offsetWidth;
+                canvas.height = container.offsetHeight;
+                // Recalculate tile counts
+                tileCountX = Math.floor(canvas.width / gridSize);
+                tileCountY = Math.floor(canvas.height / gridSize);
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>