Spaces:

ahmadreza13
/

modern_Snake

Running

App Files Files Community

ahmadreza13 commited on Jan 31

Commit

f77d11f

verified ·

1 Parent(s): 4dd65b9

Update index.html

Browse files

Files changed (1) hide show

index.html +433 -19

index.html CHANGED Viewed

@@ -1,19 +1,433 @@
-<!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>Snake Game - Mobile Friendly</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #1a1a1a;
+            font-family: 'Arial', sans-serif;
+            touch-action: none;
+        }
+        .game-container {
+            position: relative;
+            padding: 20px;
+            border-radius: 15px;
+            background: #2a2a2a;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            margin-bottom: 20px;
+        }
+        #gameCanvas {
+            border-radius: 10px;
+            background: #333;
+        }
+        .score {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            color: #fff;
+            font-size: 20px;
+            font-weight: bold;
+        }
+        .controls {
+            display: none;
+            margin-top: 20px;
+            gap: 10px;
+        }
+        .mobile-controls {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .control-btn {
+            width: 60px;
+            height: 60px;
+            border: none;
+            border-radius: 50%;
+            background: #4CAF50;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            touch-action: manipulation;
+        }
+        .control-btn:active {
+            transform: scale(0.9);
+            background: #45a049;
+        }
+        #up {
+            grid-column: 2;
+        }
+        #down {
+            grid-column: 2;
+            grid-row: 2;
+        }
+        #left {
+            grid-column: 1;
+            grid-row: 2;
+        }
+        #right {
+            grid-column: 3;
+            grid-row: 2;
+        }
+        #startBtn {
+            padding: 12px 30px;
+            font-size: 16px;
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+        }
+        .game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 20px 40px;
+            border-radius: 10px;
+            text-align: center;
+            display: none;
+            backdrop-filter: blur(5px);
+        }
+        @media (max-width: 600px) {
+            .mobile-controls {
+                display: grid;
+            }
+        }
+        .programmer-name {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 18px;
+            font-family: 'Courier New', monospace;
+            text-transform: uppercase;
+            letter-spacing: 5px;
+            cursor: pointer;
+            transition: all 0.5s ease;
+            animation: float 3s ease-in-out infinite;
+        }
+        .programmer-name:hover {
+            color: #4CAF50;
+            letter-spacing: 8px;
+            text-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateX(-50%) translateY(0);
+            }
+            50% {
+                transform: translateX(-50%) translateY(-10px);
+            }
+        }
+        .name-effect {
+            position: fixed;
+            width: 20px;
+            height: 20px;
+            background: rgba(76, 175, 80, 0.5);
+            border-radius: 50%;
+            pointer-events: none;
+            animation: ripple 1s ease-out;
+        }
+        @keyframes ripple {
+            0% {
+                transform: scale(0);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div class="score">Score: <span id="score">0</span></div>
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+        <div class="game-over" id="gameOver">
+            <h2>Game Over!</h2>
+            <p>Final Score: <span id="finalScore">0</span></p>
+            <button id="startBtn">Play Again</button>
+        </div>
+    </div>
+    <div class="mobile-controls">
+        <button class="control-btn" id="up">↑</button>
+        <button class="control-btn" id="left">←</button>
+        <button class="control-btn" id="right">→</button>
+        <button class="control-btn" id="down">↓</button>
+    </div>
+    <div class="programmer-name" id="programmerName">Ahmad Reza Anami</div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreElement = document.getElementById('score');
+        const finalScoreElement = document.getElementById('finalScore');
+        const gameOverElement = document.getElementById('gameOver');
+        const startBtn = document.getElementById('startBtn');
+        const controlButtons = {
+            up: document.getElementById('up'),
+            down: document.getElementById('down'),
+            left: document.getElementById('left'),
+            right: document.getElementById('right')
+        };
+        const gridSize = 20;
+        const tileCount = canvas.width / gridSize;
+        let snake = [];
+        let food = {};
+        let goldenFood = null;
+        let dx = gridSize;
+        let dy = 0;
+        let score = 0;
+        let gameLoop;
+        let goldenFoodInterval;
+        let growth = 0;
+        let gameSpeed = 100;
+        function initGame() {
+            snake = [
+                { x: 5 * gridSize, y: 5 * gridSize },
+                { x: 4 * gridSize, y: 5 * gridSize }
+            ];
+            spawnFood();
+            score = 0;
+            growth = 0;
+            goldenFood = null;
+            scoreElement.textContent = score;
+            dx = gridSize;
+            dy = 0;
+            gameSpeed = 100;
+            gameOverElement.style.display = 'none';
+            clearInterval(gameLoop);
+            clearInterval(goldenFoodInterval);
+            gameLoop = setInterval(update, gameSpeed);
+            goldenFoodInterval = setInterval(spawnGoldenFood, 5000);
+        }
+        function spawnFood() {
+            food = {
+                x: Math.floor(Math.random() * tileCount) * gridSize,
+                y: Math.floor(Math.random() * tileCount) * gridSize
+            };
+            if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
+                spawnFood();
+            }
+        }
+        function spawnGoldenFood() {
+            if (!goldenFood && Math.random() < 0.2) {
+                let newFood;
+                do {
+                    newFood = {
+                        x: Math.floor(Math.random() * tileCount) * gridSize,
+                        y: Math.floor(Math.random() * tileCount) * gridSize
+                    };
+                } while (snake.some(s => s.x === newFood.x && s.y === newFood.y) ||
+                        (newFood.x === food.x && newFood.y === food.y));
+                goldenFood = newFood;
+                setTimeout(() => {
+                    goldenFood = null;
+                }, 1000);
+            }
+        }
+        function update() {
+            let head = {
+                x: (snake[0].x + dx + canvas.width) % canvas.width,
+                y: (snake[0].y + dy + canvas.height) % canvas.height
+            };
+            if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
+                gameOver();
+                return;
+            }
+            snake.unshift(head);
+            if (head.x === food.x && head.y === food.y) {
+                score += 10;
+                growth += 1;
+                scoreElement.textContent = score;
+                spawnFood();
+                gameSpeed = Math.max(50, gameSpeed - 2);
+                clearInterval(gameLoop);
+                gameLoop = setInterval(update, gameSpeed);
+            } else if (goldenFood && head.x === goldenFood.x && head.y === goldenFood.y) {
+                score += 20;
+                growth += 2;
+                scoreElement.textContent = score;
+                goldenFood = null;
+            }
+            if (growth > 0) {
+                growth--;
+            } else {
+                snake.pop();
+            }
+            draw();
+        }
+        function draw() {
+            ctx.fillStyle = '#333';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            snake.forEach((segment, index) => {
+                const gradient = ctx.createLinearGradient(
+                    segment.x, segment.y,
+                    segment.x + gridSize, segment.y + gridSize
+                );
+                gradient.addColorStop(0, index === 0 ? '#4CAF50' : '#45a049');
+                gradient.addColorStop(1, index === 0 ? '#45a049' : '#3d8b40');
+                ctx.fillStyle = gradient;
+                ctx.fillRect(segment.x + 1, segment.y + 1, gridSize - 2, gridSize - 2);
+            });
+            ctx.fillStyle = '#ff4444';
+            ctx.shadowColor = 'rgba(255, 68, 68, 0.5)';
+            ctx.shadowBlur = 10;
+            ctx.beginPath();
+            ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2 - 2, 0, Math.PI * 2);
+            ctx.fill();
+            if (goldenFood) {
+                ctx.fillStyle = '#FFD700';
+                ctx.shadowColor = 'rgba(255, 215, 0, 0.5)';
+                ctx.beginPath();
+                ctx.arc(goldenFood.x + gridSize/2, goldenFood.y + gridSize/2, gridSize/2 - 1, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.shadowBlur = 0;
+        }
+        function gameOver() {
+            clearInterval(gameLoop);
+            clearInterval(goldenFoodInterval);
+            gameOverElement.style.display = 'block';
+            finalScoreElement.textContent = score;
+        }
+        // Control handlers
+        function handleDirectionChange(newDx, newDy) {
+            if ((dx === 0 && newDx !== 0) || (dy === 0 && newDy !== 0)) {
+                dx = newDx;
+                dy = newDy;
+            }
+        }
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            switch(e.key) {
+                case 'ArrowUp': handleDirectionChange(0, -gridSize); break;
+                case 'ArrowDown': handleDirectionChange(0, gridSize); break;
+                case 'ArrowLeft': handleDirectionChange(-gridSize, 0); break;
+                case 'ArrowRight': handleDirectionChange(gridSize, 0); break;
+            }
+        });
+        // Mobile controls
+        Object.entries(controlButtons).forEach(([direction, button]) => {
+            const handlePress = (e) => {
+                e.preventDefault();
+                switch(direction) {
+                    case 'up': handleDirectionChange(0, -gridSize); break;
+                    case 'down': handleDirectionChange(0, gridSize); break;
+                    case 'left': handleDirectionChange(-gridSize, 0); break;
+                    case 'right': handleDirectionChange(gridSize, 0); break;
+                }
+            };
+            button.addEventListener('touchstart', handlePress);
+            button.addEventListener('mousedown', handlePress);
+        });
+        startBtn.addEventListener('click', initGame);
+        initGame();
+        // Add interactive name effect
+        const programmerName = document.getElementById('programmerName');
+        programmerName.addEventListener('click', (e) => {
+            // Create ripple effect
+            const ripple = document.createElement('div');
+            ripple.classList.add('name-effect');
+            ripple.style.left = `${e.clientX - 10}px`;
+            ripple.style.top = `${e.clientY - 10}px`;
+            document.body.appendChild(ripple);
+            // Remove ripple after animation
+            setTimeout(() => {
+                ripple.remove();
+            }, 1000);
+            // Change text temporarily
+            const originalText = programmerName.textContent;
+            programmerName.textContent = "❤️ Snake Master ❤️";
+            programmerName.style.color = '#ff4444';
+            programmerName.style.textShadow = '0 0 15px rgba(255, 68, 68, 0.8)';
+            setTimeout(() => {
+                programmerName.textContent = originalText;
+                programmerName.style.color = 'rgba(255, 255, 255, 0.8)';
+                programmerName.style.textShadow = 'none';
+            }, 2000);
+        });
+        // Add mouse move effect
+        document.addEventListener('mousemove', (e) => {
+            const x = e.clientX;
+            const y = e.clientY;
+            const rect = programmerName.getBoundingClientRect();
+            const dist = Math.sqrt(
+                Math.pow(x - (rect.left + rect.width / 2), 2) +
+                Math.pow(y - (rect.top + rect.height / 2), 2)
+            );
+            const maxDist = 200;
+            const scale = 1 + (1 - Math.min(dist / maxDist, 1)) * 0.2;
+            programmerName.style.transform = `translateX(-50%) scale(${scale})`;
+        });
+    </script>
+</body>
+</html>