Spaces:

NamQT
/

nam

Running

App Files Files Community

NamQT commited on Apr 2, 2025

Commit

ee8a85a

verified ·

1 Parent(s): 0ff3ce5

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: nam
+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,315 @@
-<!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>Pixel Flapper</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @font-face {
+            font-family: 'Press Start 2P';
+            src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Press Start 2P', cursive;
+            background-color: #87CEEB;
+            touch-action: manipulation;
+        }
+        #gameCanvas {
+            display: block;
+            background-color: #87CEEB;
+            image-rendering: pixelated;
+        }
+        .pixel-border {
+            border: 4px solid #1E90FF;
+            box-shadow: 8px 8px 0 rgba(0, 0, 139, 0.3);
+        }
+        .pixel-button {
+            background-color: #1E90FF;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 16px;
+            cursor: pointer;
+            box-shadow: 4px 4px 0 rgba(0, 0, 139, 0.3);
+            transition: all 0.1s;
+        }
+        .pixel-button:hover {
+            transform: translate(2px, 2px);
+            box-shadow: 2px 2px 0 rgba(0, 0, 139, 0.3);
+        }
+        .pixel-button:active {
+            transform: translate(4px, 4px);
+            box-shadow: none;
+        }
+        .pixel-text {
+            color: #1E3A8A;
+            text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
+        }
+        .game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal {
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 30px;
+            border-radius: 8px;
+            text-align: center;
+            z-index: 10;
+            display: none;
+        }
+        /* Smoother animation */
+        canvas {
+            will-change: transform;
+        }
+    </style>
+</head>
+<body class="bg-blue-100">
+    <div class="game-container">
+        <canvas id="gameCanvas" class="pixel-border"></canvas>
+        <div id="startModal" class="modal pixel-border">
+            <h1 class="text-3xl mb-6 pixel-text">PIXEL FLAPPER</h1>
+            <p class="mb-6 text-blue-800">Press SPACE or TAP to flap!</p>
+            <button id="startButton" class="pixel-button">START GAME</button>
+        </div>
+        <div id="gameOverModal" class="modal pixel-border" style="display: none;">
+            <h1 class="text-3xl mb-4 text-red-600">GAME OVER</h1>
+            <p id="scoreText" class="text-xl mb-6 pixel-text">Score: 0</p>
+            <p id="highScoreText" class="text-lg mb-6 pixel-text">High Score: 0</p>
+            <button id="restartButton" class="pixel-button">PLAY AGAIN</button>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const startModal = document.getElementById('startModal');
+        const gameOverModal = document.getElementById('gameOverModal');
+        const startButton = document.getElementById('startButton');
+        const restartButton = document.getElementById('restartButton');
+        const scoreText = document.getElementById('scoreText');
+        const highScoreText = document.getElementById('highScoreText');
+        // Set canvas size (slightly smaller for better mobile play)
+        canvas.width = 360;
+        canvas.height = 540;
+        // Game state
+        let gameRunning = false;
+        let score = 0;
+        let highScore = localStorage.getItem('pixelFlapperHighScore') || 0;
+        let frames = 0;
+        let lastFrameTime = 0;
+        let gameSpeed = 1;
+        // Bird properties (made slightly larger and more responsive)
+        const bird = {
+            x: 80,
+            y: canvas.height / 2,
+            width: 36,
+            height: 36,
+            velocity: 0,
+            gravity: 0.4,  // Reduced gravity for easier control
+            jumpForce: -9, // Slightly reduced jump force for smoother jumps
+            color: '#FFD700'
+        };
+        // Pipes (wider gap and slower initial speed)
+        let pipes = [];
+        const pipeWidth = 60;
+        const pipeGap = 180;  // Increased gap for easier play
+        const pipeSpeed = 2.5; // Slower initial speed
+        let pipeFrequency = 100; // frames
+        // Game functions
+        function startGame() {
+            gameRunning = true;
+            score = 0;
+            bird.y = canvas.height / 2;
+            bird.velocity = 0;
+            pipes = [];
+            frames = 0;
+            gameSpeed = 1;
+            startModal.style.display = 'none';
+            gameOverModal.style.display = 'none';
+            lastFrameTime = performance.now();
+            requestAnimationFrame(animate);
+        }
+        function endGame() {
+            gameRunning = false;
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('pixelFlapperHighScore', highScore);
+            }
+            scoreText.textContent = `Score: ${score}`;
+            highScoreText.textContent = `High Score: ${highScore}`;
+            gameOverModal.style.display = 'block';
+        }
+        function animate(currentTime) {
+            if (!gameRunning) return;
+            // Calculate delta time for smooth animation
+            const deltaTime = currentTime - lastFrameTime;
+            lastFrameTime = currentTime;
+            // Clear canvas
+            ctx.fillStyle = '#87CEEB';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Update bird with delta time
+            bird.velocity += bird.gravity * (deltaTime / 16);
+            bird.y += bird.velocity * (deltaTime / 16);
+            // Check if bird hits the ground or ceiling
+            if (bird.y + bird.height > canvas.height || bird.y < 0) {
+                endGame();
+            }
+            // Generate pipes
+            if (frames % pipeFrequency === 0) {
+                const gapPosition = Math.random() * (canvas.height - pipeGap - 120) + 60;
+                pipes.push({
+                    x: canvas.width,
+                    gapPosition: gapPosition,
+                    passed: false
+                });
+                // Gradually increase difficulty
+                if (pipeFrequency > 70) {
+                    pipeFrequency -= 1;
+                }
+                gameSpeed += 0.005;
+            }
+            // Update and draw pipes
+            for (let i = pipes.length - 1; i >= 0; i--) {
+                pipes[i].x -= pipeSpeed * gameSpeed;
+                // Check for collision (with more forgiving hitbox)
+                if (
+                    bird.x + bird.width - 5 > pipes[i].x + 5 &&
+                    bird.x + 5 < pipes[i].x + pipeWidth - 5 &&
+                    (bird.y + 5 < pipes[i].gapPosition ||
+                     bird.y + bird.height - 5 > pipes[i].gapPosition + pipeGap)
+                ) {
+                    endGame();
+                }
+                // Check if bird passed the pipe
+                if (!pipes[i].passed && bird.x > pipes[i].x + pipeWidth) {
+                    pipes[i].passed = true;
+                    score++;
+                }
+                // Remove pipes that are off screen
+                if (pipes[i].x + pipeWidth < 0) {
+                    pipes.splice(i, 1);
+                }
+                // Draw pipes
+                ctx.fillStyle = '#1E90FF';
+                ctx.fillRect(pipes[i].x, 0, pipeWidth, pipes[i].gapPosition);
+                ctx.fillRect(pipes[i].x, pipes[i].gapPosition + pipeGap, pipeWidth, canvas.height - pipes[i].gapPosition - pipeGap);
+                // Pipe borders
+                ctx.fillStyle = '#1E3A8A';
+                ctx.fillRect(pipes[i].x - 2, 0, 2, pipes[i].gapPosition);
+                ctx.fillRect(pipes[i].x - 2, pipes[i].gapPosition + pipeGap, 2, canvas.height - pipes[i].gapPosition - pipeGap);
+                ctx.fillRect(pipes[i].x + pipeWidth, 0, 2, pipes[i].gapPosition);
+                ctx.fillRect(pipes[i].x + pipeWidth, pipes[i].gapPosition + pipeGap, 2, canvas.height - pipes[i].gapPosition - pipeGap);
+            }
+            // Draw bird
+            ctx.fillStyle = bird.color;
+            ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
+            // Bird eyes
+            ctx.fillStyle = '#1E3A8A';
+            ctx.fillRect(bird.x + 24, bird.y + 10, 8, 8);
+            // Bird beak
+            ctx.fillStyle = '#FF6347';
+            ctx.fillRect(bird.x + 36, bird.y + 14, 12, 8);
+            // Draw score
+            ctx.fillStyle = '#1E3A8A';
+            ctx.font = '24px "Press Start 2P", cursive';
+            ctx.textAlign = 'center';
+            ctx.fillText(score, canvas.width / 2, 50);
+            frames++;
+            requestAnimationFrame(animate);
+        }
+        function flap() {
+            if (!gameRunning && startModal.style.display === 'none' && gameOverModal.style.display === 'none') {
+                startGame();
+            }
+            bird.velocity = bird.jumpForce;
+        }
+        // Event listeners (optimized for responsiveness)
+        startButton.addEventListener('click', startGame);
+        restartButton.addEventListener('click', startGame);
+        // More responsive controls
+        document.addEventListener('keydown', (e) => {
+            if (e.code === 'Space' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                flap();
+            }
+        });
+        // Touch controls with immediate response
+        canvas.addEventListener('mousedown', flap);
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            flap();
+        }, { passive: false });
+        // Show start screen initially
+        startModal.style.display = 'block';
+        // Responsive canvas sizing
+        function resizeCanvas() {
+            const scale = Math.min(
+                window.innerWidth / canvas.width,
+                window.innerHeight / canvas.height
+            ) * 0.9; // Slightly smaller to ensure full visibility
+            canvas.style.width = `${canvas.width * scale}px`;
+            canvas.style.height = `${canvas.height * scale}px`;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+        // Pre-warm the animation for smoother start
+        requestAnimationFrame(() => {});
+    </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=NamQT/nam" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>