Spaces:

kimhyunwoo
/

game1

Running

App Files Files Community

kimhyunwoo commited on May 9, 2025

Commit

69c2f0c

verified ·

1 Parent(s): 51c0083

Update index.html

Browse files

Files changed (1) hide show

index.html +235 -18

index.html CHANGED Viewed

@@ -1,19 +1,236 @@
-<!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>
+<head>
+    <title>Emoji Bird</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #70c5ce; font-family: sans-serif; }
+        canvas { border: 1px solid #000; background-color: #70c5ce; }
+        #instructions { text-align: center; position: absolute; top: 20px; font-size: 16px; color: #fff; background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px;}
+    </style>
+</head>
+<body>
+    <div id="instructions">
+        Click or Press Space to Flap<br>
+        <i class="fas fa-mouse"></i> / <i class="fas fa-keyboard"></i> (Space)
+    </div>
+    <canvas id="gameCanvas"></canvas>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = 288;
+        canvas.height = 512;
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        function playSound(type) {
+            if (!audioCtx) return;
+            const oscillator = audioCtx.createOscillator();
+            const gainNode = audioCtx.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioCtx.destination);
+            gainNode.gain.setValueAtTime(0.05, audioCtx.currentTime);
+            if (type === 'flap') {
+                oscillator.type = 'triangle';
+                oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.15);
+            } else if (type === 'hit') {
+                oscillator.type = 'sawtooth';
+                oscillator.frequency.setValueAtTime(100, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.3);
+            } else if (type === 'point') {
+                oscillator.type = 'sine';
+                oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.1);
+            }
+            oscillator.start(audioCtx.currentTime);
+            oscillator.stop(audioCtx.currentTime + 0.3);
+        }
+        let bird = { x: 50, y: 150, size: 20, dy: 0, emoji: "🐦" };
+        const gravity = 0.25;
+        const flapStrength = -4.5;
+        let pipes = [];
+        const pipeWidth = 55;
+        const pipeGap = 110;
+        let score = 0;
+        let frame = 0;
+        let gameState = 'start'; // 'start', 'playing', 'over'
+        function drawBird() {
+            ctx.font = `${bird.size * 1.5}px Arial`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(bird.emoji, bird.x, bird.y);
+        }
+        function drawPipes() {
+            ctx.fillStyle = "#2E7D32"; // Darker green
+            pipes.forEach(p => {
+                ctx.fillRect(p.x, 0, pipeWidth, p.topHeight);
+                ctx.fillRect(p.x, p.topHeight + pipeGap, pipeWidth, canvas.height - (p.topHeight + pipeGap));
+            });
+        }
+        function updateBird() {
+            if (gameState === 'playing') {
+                bird.dy += gravity;
+                bird.y += bird.dy;
+            }
+            if ((bird.y + bird.size / 2 > canvas.height) || (bird.y - bird.size / 2 < 0)) {
+                if (gameState === 'playing') playSound('hit');
+                gameState = 'over';
+            }
+        }
+        function updatePipes() {
+            if (gameState !== 'playing') return;
+            if (frame % 100 === 0) { // Pipe generation frequency
+                const topHeight = Math.random() * (canvas.height - pipeGap - 150) + 75; // Ensure gap is not too high or low
+                pipes.push({ x: canvas.width, topHeight: topHeight, passed: false });
+            }
+            pipes.forEach(p => {
+                p.x -= 2; // Pipe speed
+            });
+            pipes = pipes.filter(p => p.x + pipeWidth > 0);
+            pipes.forEach(p => {
+                const birdLeft = bird.x - bird.size / 2;
+                const birdRight = bird.x + bird.size / 2;
+                const birdTop = bird.y - bird.size / 2;
+                const birdBottom = bird.y + bird.size / 2;
+                const pipeRight = p.x + pipeWidth;
+                const pipeBottomTop = p.topHeight; // Bottom of the top pipe
+                const pipeTopBottom = p.topHeight + pipeGap; // Top of the bottom pipe
+                if (birdRight > p.x && birdLeft < pipeRight) {
+                    if (birdTop < pipeBottomTop || birdBottom > pipeTopBottom) {
+                        if (gameState === 'playing') playSound('hit');
+                        gameState = 'over';
+                    }
+                }
+                if (!p.passed && p.x + pipeWidth < bird.x - bird.size / 2) {
+                    score++;
+                    p.passed = true;
+                    playSound('point');
+                }
+            });
+        }
+        function resetGame() {
+            bird.y = 150;
+            bird.dy = 0;
+            pipes = [];
+            score = 0;
+            frame = 0;
+            gameState = 'start';
+        }
+        function drawScore() {
+            ctx.fillStyle = "#fff";
+            ctx.font = "24px 'Press Start 2P', sans-serif";
+            ctx.textAlign = "left";
+            ctx.fillText("Score: " + score, 10, 30);
+        }
+        function drawStartScreen() {
+            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+            ctx.fillRect(0, canvas.height / 2 - 60, canvas.width, 120);
+            ctx.fillStyle = "#fff";
+            ctx.font = "20px 'Press Start 2P', sans-serif";
+            ctx.textAlign = "center";
+            ctx.fillText("Emoji Bird", canvas.width / 2, canvas.height / 2 - 20);
+            ctx.font = "14px 'Press Start 2P', sans-serif";
+            ctx.fillText("Click or Space to Start", canvas.width / 2, canvas.height / 2 + 20);
+            ctx.font = "40px Arial";
+            ctx.fillText("🐦", canvas.width / 2, canvas.height / 3);
+        }
+        function drawGameOverScreen() {
+            ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
+            ctx.fillRect(0, canvas.height / 2 - 70, canvas.width, 160);
+            ctx.fillStyle = "red";
+            ctx.font = "28px 'Press Start 2P', sans-serif";
+            ctx.textAlign = "center";
+            ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 30);
+            ctx.fillStyle = "#fff";
+            ctx.font = "18px 'Press Start 2P', sans-serif";
+            ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 10);
+            ctx.font = "12px 'Press Start 2P', sans-serif";
+            ctx.fillText("Click or Space to Restart", canvas.width / 2, canvas.height / 2 + 50);
+            ctx.font = "20px 'Font Awesome 6 Free'";
+            ctx.fillText('\uf071', canvas.width / 2, canvas.height / 2 + 80); // Font Awesome Warning Icon
+        }
+        function gameLoop() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (gameState === 'start') {
+                drawPipes(); // Draw static pipes for background
+                drawBird();
+                drawStartScreen();
+            } else if (gameState === 'playing') {
+                updateBird();
+                updatePipes();
+                drawPipes();
+                drawBird();
+                drawScore();
+                frame++;
+            } else if (gameState === 'over') {
+                drawPipes(); // Keep pipes visible
+                drawBird(); // Keep bird visible
+                drawScore(); // Show final score
+                drawGameOverScreen();
+            }
+            requestAnimationFrame(gameLoop);
+        }
+        function handleInput() {
+            if (gameState === 'start') {
+                gameState = 'playing';
+                bird.dy = flapStrength;
+                playSound('flap');
+            } else if (gameState === 'playing') {
+                bird.dy = flapStrength;
+                playSound('flap');
+            } else if (gameState === 'over') {
+                resetGame();
+            }
+        }
+        document.addEventListener('click', handleInput);
+        document.addEventListener('keydown', function(e) {
+            if (e.code === 'Space') {
+                e.preventDefault();
+                handleInput();
+            }
+        });
+        // Add a retro font via Google Fonts for better text rendering
+        const fontLink = document.createElement('link');
+        fontLink.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap';
+        fontLink.rel = 'stylesheet';
+        document.head.appendChild(fontLink);
+        fontLink.onload = () => { // Start game loop after font is loaded to prevent FOUT
+             gameLoop();
+        };
+        if (document.fonts) { // Fallback if onload doesn't fire as expected in some browsers
+            document.fonts.load('1em "Press Start 2P"').then(() => {
+                 if(gameState === 'start' && frame === 0) gameLoop(); // Ensure gameLoop is not called twice
+            });
+        } else {
+            gameLoop(); // For browsers not supporting document.fonts
+        }
+    </script>
+</body>
+</html>