Spaces:

Sunghokim
/

dodging_ball

Running

App Files Files Community

Sunghokim commited on Dec 23, 2024

Commit

9d0ee73

verified ·

1 Parent(s): e137815

Update index.html

Browse files

Files changed (1) hide show

index.html +277 -19

index.html CHANGED Viewed

@@ -1,19 +1,277 @@
-<!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>Dodge Ball Game</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #1a1a1a;
+            font-family: Arial, sans-serif;
+        }
+        #gameContainer {
+            position: relative;
+            width: 800px;
+            height: 600px;
+            background: #2a2a2a;
+            overflow: hidden;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.3);
+        }
+        #player {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background: #5eff5e;
+            border-radius: 50%;
+            transition: transform 0.1s;
+        }
+        .ball {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #ff5e5e;
+            border-radius: 50%;
+        }
+        #score {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            color: white;
+            font-size: 24px;
+        }
+        #startScreen {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+        }
+        button {
+            padding: 15px 30px;
+            font-size: 20px;
+            background: #5eff5e;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+        button:hover {
+            background: #4acc4a;
+        }
+        .powerUp {
+            position: absolute;
+            width: 25px;
+            height: 25px;
+            background: #5e5eff;
+            border-radius: 50%;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="startScreen">
+            <h1>Dodge Ball</h1>
+            <button onclick="startGame()">Start Game</button>
+        </div>
+        <div id="player"></div>
+        <div id="score">Score: 0</div>
+    </div>
+    <script>
+        const gameContainer = document.getElementById('gameContainer');
+        const player = document.getElementById('player');
+        const scoreElement = document.getElementById('score');
+        const startScreen = document.getElementById('startScreen');
+        let score = 0;
+        let gameLoop;
+        let balls = [];
+        let powerUps = [];
+        let isGameRunning = false;
+        let playerSpeed = 5;
+        let keys = {};
+        player.style.left = '385px';
+        player.style.top = '285px';
+        function startGame() {
+            if (isGameRunning) return;
+            startScreen.style.display = 'none';
+            isGameRunning = true;
+            score = 0;
+            scoreElement.textContent = `Score: ${score}`;
+            balls = [];
+            powerUps = [];
+            gameLoop = setInterval(() => {
+                if (Math.random() < 0.03) createBall();
+                if (Math.random() < 0.01) createPowerUp();
+                updateGame();
+            }, 16);
+        }
+        function createBall() {
+            const ball = document.createElement('div');
+            ball.className = 'ball';
+            const side = Math.floor(Math.random() * 4);
+            let x, y, dx, dy;
+            switch(side) {
+                case 0: // top
+                    x = Math.random() * 800;
+                    y = -20;
+                    dx = (Math.random() - 0.5) * 4;
+                    dy = 2 + Math.random() * 2;
+                    break;
+                case 1: // right
+                    x = 820;
+                    y = Math.random() * 600;
+                    dx = -(2 + Math.random() * 2);
+                    dy = (Math.random() - 0.5) * 4;
+                    break;
+                case 2: // bottom
+                    x = Math.random() * 800;
+                    y = 620;
+                    dx = (Math.random() - 0.5) * 4;
+                    dy = -(2 + Math.random() * 2);
+                    break;
+                case 3: // left
+                    x = -20;
+                    y = Math.random() * 600;
+                    dx = 2 + Math.random() * 2;
+                    dy = (Math.random() - 0.5) * 4;
+                    break;
+            }
+            balls.push({ element: ball, x, y, dx, dy });
+            gameContainer.appendChild(ball);
+        }
+        function createPowerUp() {
+            const powerUp = document.createElement('div');
+            powerUp.className = 'powerUp';
+            const x = Math.random() * 750;
+            const y = Math.random() * 550;
+            powerUps.push({ element: powerUp, x, y });
+            powerUp.style.left = `${x}px`;
+            powerUp.style.top = `${y}px`;
+            gameContainer.appendChild(powerUp);
+        }
+        function updateGame() {
+            const playerRect = player.getBoundingClientRect();
+            const containerRect = gameContainer.getBoundingClientRect();
+            let playerX = parseInt(player.style.left);
+            let playerY = parseInt(player.style.top);
+            if (keys.ArrowLeft) playerX -= playerSpeed;
+            if (keys.ArrowRight) playerX += playerSpeed;
+            if (keys.ArrowUp) playerY -= playerSpeed;
+            if (keys.ArrowDown) playerY += playerSpeed;
+            playerX = Math.max(0, Math.min(770, playerX));
+            playerY = Math.max(0, Math.min(570, playerY));
+            player.style.left = `${playerX}px`;
+            player.style.top = `${playerY}px`;
+            // Update balls
+            for (let i = balls.length - 1; i >= 0; i--) {
+                const ball = balls[i];
+                ball.x += ball.dx;
+                ball.y += ball.dy;
+                if (ball.x < -50 || ball.x > 850 || ball.y < -50 || ball.y > 650) {
+                    gameContainer.removeChild(ball.element);
+                    balls.splice(i, 1);
+                    continue;
+                }
+                ball.element.style.left = `${ball.x}px`;
+                ball.element.style.top = `${ball.y}px`;
+                const ballRect = ball.element.getBoundingClientRect();
+                if (checkCollision(playerRect, ballRect)) {
+                    gameOver();
+                    return;
+                }
+            }
+            // Check power-ups
+            for (let i = powerUps.length - 1; i >= 0; i--) {
+                const powerUp = powerUps[i];
+                const powerUpRect = powerUp.element.getBoundingClientRect();
+                if (checkCollision(playerRect, powerUpRect)) {
+                    gameContainer.removeChild(powerUp.element);
+                    powerUps.splice(i, 1);
+                    score += 100;
+                    scoreElement.textContent = `Score: ${score}`;
+                    playerSpeed = 8;
+                    setTimeout(() => playerSpeed = 5, 3000);
+                }
+            }
+            score++;
+            scoreElement.textContent = `Score: ${score}`;
+        }
+        function checkCollision(rect1, rect2) {
+            return !(rect1.right < rect2.left ||
+                    rect1.left > rect2.right ||
+                    rect1.bottom < rect2.top ||
+                    rect1.top > rect2.bottom);
+        }
+        function gameOver() {
+            isGameRunning = false;
+            clearInterval(gameLoop);
+            startScreen.style.display = 'flex';
+            startScreen.querySelector('h1').textContent = `Game Over! Score: ${score}`;
+            balls.forEach(ball => gameContainer.removeChild(ball.element));
+            powerUps.forEach(powerUp => gameContainer.removeChild(powerUp.element));
+            balls = [];
+            powerUps = [];
+            player.style.left = '385px';
+            player.style.top = '285px';
+        }
+        document.addEventListener('keydown', (e) => {
+            keys[e.key] = true;
+        });
+        document.addEventListener('keyup', (e) => {
+            keys[e.key] = false;
+        });
+    </script>
+</body>
+</html>