Spaces:

Mankeysocks
/

snker

Running

App Files Files Community

Mankeysocks commited on Jul 26, 2025

Commit

26c1610

verified ·

1 Parent(s): 8ecfe5d

Create a mini-game inside GTA5 inspired by the classic Snake game, where players control a glowing digital "snake" using arrow keys. The twist: instead of collecting food, the snake navigates through an abstract virtual space shaped like a randomized keyboard key (e.g., "W", "E", "Shift", etc.), with the layout changing every time the game starts. Each round generates a unique glowing outline of a keyboard key using 3D shapes or Tron-style light paths. The snake must trace around the shape without colliding into itself or the boundaries. As the player progresses, the snake grows and the control sensitivity slightly increases, raising difficulty. The game is presented as a digital hacking side quest or arcade terminal in GTA5, possibly within a cybercafé or hidden hacker hideout. Visuals are neon-lit, synthwave-themed, with minimal UI and an immersive data-grid backdrop. Time challenges, score multipliers, and leaderboard integration keep replayability high. Optional integration allows players to earn small in-game cash or RP rewards based on performance. Ideal for both quick play and deeper mastery, it blends nostalgia with dynamic design in a modern GTA5 sandbox. - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: snker
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 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,546 @@
-<!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>GTA5 HACKER SNAKE</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+        body {
+            font-family: 'Orbitron', sans-serif;
+            background-color: #0a0a1a;
+            overflow: hidden;
+            user-select: none;
+        }
+        #gameCanvas {
+            border: 2px solid rgba(0, 255, 255, 0.3);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+        }
+        .grid-bg {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background:
+                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
+            background-size: 30px 30px;
+            z-index: -1;
+        }
+        .glow-text {
+            text-shadow: 0 0 10px cyan, 0 0 20px cyan;
+        }
+        .glow-box {
+            box-shadow: 0 0 15px cyan, inset 0 0 10px cyan;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 1; }
+            100% { opacity: 0.7; }
+        }
+        #keyOutline {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash 5s linear forwards;
+        }
+        @keyframes dash {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
+</head>
+<body class="text-cyan-400 h-screen flex flex-col items-center justify-center relative">
+    <div class="grid-bg"></div>
+    <div class="absolute top-4 left-4 flex items-center gap-2">
+        <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
+        <span class="text-xs">LIVE FEED</span>
+    </div>
+    <div class="absolute top-4 right-4 text-xs">
+        <div class="flex gap-4">
+            <span>CONNECTION: <span class="text-green-500">SECURE</span></span>
+            <span>USER: <span class="text-cyan-300">PLAYER_1</span></span>
+        </div>
+    </div>
+    <h1 class="text-4xl font-bold mb-2 glow-text">// HACKER_SNAKE.EXE</h1>
+    <p class="text-xs mb-6 pulse">TRACE THE KEY PATTERN WITHOUT COLLISION</p>
+    <div class="relative">
+        <canvas id="gameCanvas" width="500" height="500" class="bg-black"></canvas>
+        <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80">
+            <h2 class="text-2xl mb-4 glow-text">GTA5 HACKING TERMINAL</h2>
+            <p class="text-sm mb-6 text-center px-8">Navigate the digital snake around the key outline<br>using arrow keys to complete the hack</p>
+            <button id="startBtn" class="px-6 py-2 bg-cyan-900 hover:bg-cyan-700 glow-box rounded-md font-bold transition-all">
+                INITIATE HACK
+            </button>
+            <div class="mt-6 text-xs">
+                <p>HIGH SCORE: <span id="highScoreDisplay">0</span></p>
+                <p>LAST SCORE: <span id="lastScoreDisplay">0</span></p>
+            </div>
+        </div>
+        <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80">
+            <h2 class="text-2xl mb-2 glow-text">HACK TERMINATED</h2>
+            <p class="text-xl mb-2" id="finalScore">SCORE: 0</p>
+            <p class="text-sm mb-6" id="completionText">PARTIAL HACK COMPLETE</p>
+            <div class="flex gap-4">
+                <button id="restartBtn" class="px-4 py-2 bg-cyan-900 hover:bg-cyan-700 glow-box rounded-md font-bold transition-all">
+                    RETRY
+                </button>
+                <button id="quitBtn" class="px-4 py-2 bg-purple-900 hover:bg-purple-700 glow-box rounded-md font-bold transition-all">
+                    EXIT
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="mt-4 flex gap-8 text-sm">
+        <div>
+            <p>SCORE: <span id="scoreDisplay">0</span></p>
+            <p>TIME: <span id="timeDisplay">00:00</span></p>
+        </div>
+        <div>
+            <p>LEVEL: <span id="levelDisplay">1</span></p>
+            <p>MULTIPLIER: <span id="multiplierDisplay">1x</span></p>
+        </div>
+    </div>
+    <div class="absolute bottom-4 left-4 text-xs opacity-70">
+        <p>// GTA5 HACKING MINIGAME v1.0</p>
+        <p>// USE ARROW KEYS TO CONTROL</p>
+    </div>
+    <script>
+        // Game variables
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('startScreen');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const startBtn = document.getElementById('startBtn');
+        const restartBtn = document.getElementById('restartBtn');
+        const quitBtn = document.getElementById('quitBtn');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const timeDisplay = document.getElementById('timeDisplay');
+        const levelDisplay = document.getElementById('levelDisplay');
+        const multiplierDisplay = document.getElementById('multiplierDisplay');
+        const finalScore = document.getElementById('finalScore');
+        const completionText = document.getElementById('completionText');
+        const highScoreDisplay = document.getElementById('highScoreDisplay');
+        const lastScoreDisplay = document.getElementById('lastScoreDisplay');
+        // Game state
+        let snake = [];
+        let food = [];
+        let direction = 'right';
+        let nextDirection = 'right';
+        let gameSpeed = 150;
+        let gameLoop;
+        let score = 0;
+        let level = 1;
+        let multiplier = 1;
+        let startTime;
+        let elapsedTime = 0;
+        let timerInterval;
+        let highScore = localStorage.getItem('snakeHighScore') || 0;
+        let lastScore = localStorage.getItem('snakeLastScore') || 0;
+        let keyOutline = [];
+        let outlineCompleted = false;
+        let outlineProgress = 0;
+        // Possible key shapes (W, A, S, D, Shift, Ctrl, Space, etc.)
+        const keyShapes = [
+            // W key (simple version)
+            [
+                {x: 100, y: 100}, {x: 150, y: 50}, {x: 200, y: 100},
+                {x: 175, y: 100}, {x: 175, y: 200}, {x: 200, y: 200},
+                {x: 150, y: 250}, {x: 100, y: 200}, {x: 125, y: 200},
+                {x: 125, y: 100}, {x: 100, y: 100}
+            ],
+            // A key
+            [
+                {x: 100, y: 200}, {x: 150, y: 50}, {x: 200, y: 200},
+                {x: 175, y: 150}, {x: 125, y: 150}, {x: 100, y: 200}
+            ],
+            // S key
+            [
+                {x: 200, y: 50}, {x: 100, y: 50}, {x: 100, y: 125},
+                {x: 200, y: 125}, {x: 200, y: 200}, {x: 100, y: 200}
+            ],
+            // D key
+            [
+                {x: 100, y: 50}, {x: 150, y: 50}, {x: 175, y: 75},
+                {x: 175, y: 175}, {x: 150, y: 200}, {x: 100, y: 200},
+                {x: 100, y: 50}
+            ],
+            // Shift key (simple rectangle)
+            [
+                {x: 50, y: 225}, {x: 250, y: 225},
+                {x: 250, y: 275}, {x: 50, y: 275},
+                {x: 50, y: 225}
+            ],
+            // Space bar
+            [
+                {x: 50, y: 250}, {x: 250, y: 250},
+                {x: 250, y: 275}, {x: 50, y: 275},
+                {x: 50, y: 250}
+            ]
+        ];
+        // Initialize displays
+        highScoreDisplay.textContent = highScore;
+        lastScoreDisplay.textContent = lastScore;
+        // Start game
+        startBtn.addEventListener('click', startGame);
+        restartBtn.addEventListener('click', startGame);
+        quitBtn.addEventListener('click', () => {
+            gameOverScreen.classList.add('hidden');
+            startScreen.classList.remove('hidden');
+        });
+        function startGame() {
+            // Reset game state
+            snake = [
+                {x: 50, y: 250},
+                {x: 40, y: 250},
+                {x: 30, y: 250}
+            ];
+            direction = 'right';
+            nextDirection = 'right';
+            score = 0;
+            level = 1;
+            multiplier = 1;
+            elapsedTime = 0;
+            outlineCompleted = false;
+            outlineProgress = 0;
+            // Generate a random key outline
+            const randomShapeIndex = Math.floor(Math.random() * keyShapes.length);
+            keyOutline = keyShapes[randomShapeIndex];
+            // Adjust outline coordinates to fit better on canvas
+            keyOutline = keyOutline.map(point => ({
+                x: point.x + 100,
+                y: point.y + 100
+            }));
+            // Hide screens
+            startScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            // Update displays
+            scoreDisplay.textContent = score;
+            levelDisplay.textContent = level;
+            multiplierDisplay.textContent = multiplier + 'x';
+            // Start timer
+            startTime = Date.now();
+            if (timerInterval) clearInterval(timerInterval);
+            timerInterval = setInterval(updateTimer, 1000);
+            // Start game loop
+            if (gameLoop) clearInterval(gameLoop);
+            gameLoop = setInterval(gameStep, gameSpeed);
+            // Draw initial state
+            draw();
+        }
+        function updateTimer() {
+            elapsedTime = Math.floor((Date.now() - startTime) / 1000);
+            const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
+            const seconds = (elapsedTime % 60).toString().padStart(2, '0');
+            timeDisplay.textContent = `${minutes}:${seconds}`;
+        }
+        function gameStep() {
+            // Update direction
+            direction = nextDirection;
+            // Move snake
+            const head = {...snake[0]};
+            switch(direction) {
+                case 'up':
+                    head.y -= 10;
+                    break;
+                case 'down':
+                    head.y += 10;
+                    break;
+                case 'left':
+                    head.x -= 10;
+                    break;
+                case 'right':
+                    head.x += 10;
+                    break;
+            }
+            // Check for collisions with walls
+            if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
+                gameOver();
+                return;
+            }
+            // Check for collisions with self
+            for (let i = 0; i < snake.length; i++) {
+                if (head.x === snake[i].x && head.y === snake[i].y) {
+                    gameOver();
+                    return;
+                }
+            }
+            // Add new head
+            snake.unshift(head);
+            // Check for outline tracing
+            checkOutlineTracing(head);
+            // Check if snake should grow (based on outline progress)
+            if (outlineProgress % 5 === 0 && outlineProgress > 0 && !outlineCompleted) {
+                // Don't remove tail (snake grows)
+                multiplier = Math.floor(outlineProgress / 5) + 1;
+                multiplierDisplay.textContent = multiplier + 'x';
+            } else {
+                // Remove tail (snake doesn't grow)
+                snake.pop();
+            }
+            // Check if outline is completed
+            if (outlineProgress >= keyOutline.length - 1 && !outlineCompleted) {
+                outlineCompleted = true;
+                score += 100 * multiplier * level;
+                level++;
+                levelDisplay.textContent = level;
+                // Increase speed every 2 levels
+                if (level % 2 === 0) {
+                    gameSpeed = Math.max(50, gameSpeed - 10);
+                    clearInterval(gameLoop);
+                    gameLoop = setInterval(gameStep, gameSpeed);
+                }
+                // Generate new outline
+                const randomShapeIndex = Math.floor(Math.random() * keyShapes.length);
+                keyOutline = keyShapes[randomShapeIndex];
+                // Adjust outline coordinates to fit better on canvas
+                keyOutline = keyOutline.map(point => ({
+                    x: point.x + 100,
+                    y: point.y + 100
+                }));
+                outlineProgress = 0;
+                outlineCompleted = false;
+            }
+            // Update score
+            scoreDisplay.textContent = score;
+            // Redraw
+            draw();
+        }
+        function checkOutlineTracing(head) {
+            if (outlineCompleted) return;
+            // Check if head is close to the next point in outline
+            const nextPoint = keyOutline[outlineProgress + 1];
+            const distance = Math.sqrt(
+                Math.pow(head.x - nextPoint.x, 2) +
+                Math.pow(head.y - nextPoint.y, 2)
+            );
+            if (distance < 15) {
+                outlineProgress++;
+                score += 5 * multiplier;
+                // Bonus for completing segments
+                if (outlineProgress % 5 === 0) {
+                    score += 20 * multiplier;
+                }
+            }
+        }
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = 'rgba(0, 10, 20, 0.7)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw grid
+            drawGrid();
+            // Draw key outline
+            drawKeyOutline();
+            // Draw snake
+            drawSnake();
+            // Draw progress indicator
+            drawProgress();
+        }
+        function drawGrid() {
+            ctx.strokeStyle = 'rgba(0, 255, 255, 0.1)';
+            ctx.lineWidth = 1;
+            // Vertical lines
+            for (let x = 0; x < canvas.width; x += 30) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+            }
+            // Horizontal lines
+            for (let y = 0; y < canvas.height; y += 30) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
+            }
+        }
+        function drawKeyOutline() {
+            if (keyOutline.length < 2) return;
+            ctx.strokeStyle = 'rgba(255, 0, 255, 0.7)';
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.moveTo(keyOutline[0].x, keyOutline[0].y);
+            for (let i = 1; i <= outlineProgress; i++) {
+                ctx.lineTo(keyOutline[i].x, keyOutline[i].y);
+            }
+            ctx.stroke();
+            // Draw remaining outline in dimmer color
+            if (outlineProgress < keyOutline.length - 1) {
+                ctx.strokeStyle = 'rgba(255, 0, 255, 0.2)';
+                ctx.beginPath();
+                ctx.moveTo(keyOutline[outlineProgress].x, keyOutline[outlineProgress].y);
+                for (let i = outlineProgress + 1; i < keyOutline.length; i++) {
+                    ctx.lineTo(keyOutline[i].x, keyOutline[i].y);
+                }
+                ctx.stroke();
+            }
+            // Draw points
+            ctx.fillStyle = 'magenta';
+            for (let i = 0; i < keyOutline.length; i++) {
+                ctx.beginPath();
+                ctx.arc(keyOutline[i].x, keyOutline[i].y, 3, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        function drawSnake() {
+            // Draw head
+            const head = snake[0];
+            ctx.fillStyle = 'cyan';
+            ctx.beginPath();
+            ctx.arc(head.x, head.y, 6, 0, Math.PI * 2);
+            ctx.fill();
+            // Add glow effect
+            ctx.shadowColor = 'cyan';
+            ctx.shadowBlur = 10;
+            // Draw body
+            ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
+            for (let i = 1; i < snake.length; i++) {
+                ctx.beginPath();
+                ctx.arc(snake[i].x, snake[i].y, 4, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            // Remove glow
+            ctx.shadowColor = 'transparent';
+        }
+        function drawProgress() {
+            const progressPercent = (outlineProgress / (keyOutline.length - 1)) * 100;
+            ctx.fillStyle = 'rgba(0, 255, 255, 0.2)';
+            ctx.fillRect(20, 20, 200, 10);
+            ctx.fillStyle = 'cyan';
+            ctx.fillRect(20, 20, 200 * (progressPercent / 100), 10);
+            ctx.strokeStyle = 'cyan';
+            ctx.strokeRect(20, 20, 200, 10);
+            ctx.fillStyle = 'white';
+            ctx.font = '10px Orbitron';
+            ctx.fillText(`TRACE PROGRESS: ${Math.round(progressPercent)}%`, 20, 35);
+        }
+        function gameOver() {
+            clearInterval(gameLoop);
+            clearInterval(timerInterval);
+            // Update scores
+            lastScore = score;
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('snakeHighScore', highScore);
+            }
+            localStorage.setItem('snakeLastScore', lastScore);
+            // Update game over screen
+            finalScore.textContent = `SCORE: ${score}`;
+            const completionPercent = outlineProgress / (keyOutline.length - 1) * 100;
+            if (completionPercent < 30) {
+                completionText.textContent = "HACK FAILED - TRACE INCOMPLETE";
+            } else if (completionPercent < 70) {
+                completionText.textContent = "PARTIAL HACK COMPLETE";
+            } else {
+                completionText.textContent = "NEARLY COMPLETE - TRY AGAIN";
+            }
+            gameOverScreen.classList.remove('hidden');
+        }
+        // Handle keyboard input
+        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;
+            }
+        });
+        // Initial draw
+        draw();
+    </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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mankeysocks/snker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>