Spaces:

joegjoeh10
/

fps

Running

App Files Files Community

joegjoeh10 commited on May 13, 2025

Commit

05f3324

verified ·

1 Parent(s): 5206fbe

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +345 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: fps
+emoji: 🐳
+colorFrom: purple
+colorTo: yellow
 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,345 @@
-<!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>FPS Bot Shooter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            background-color: #1a202c;
+            overflow: hidden;
+        }
+        #crosshair {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 30px;
+            height: 30px;
+            pointer-events: none;
+        }
+        .bot {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            background-color: #e53e3e;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-weight: bold;
+            transition: transform 0.1s;
+        }
+        .bullet-hole {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: black;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        #healthBar {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            width: 200px;
+            height: 30px;
+            background-color: #4a5568;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        #healthFill {
+            height: 100%;
+            width: 100%;
+            background-color: #48bb78;
+            transition: width 0.3s;
+        }
+        #scoreDisplay {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+        }
+        #ammoDisplay {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+        }
+        #gameOver {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 48px;
+            z-index: 100;
+        }
+        #restartBtn {
+            margin-top: 20px;
+            padding: 10px 20px;
+            background-color: #4299e1;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 24px;
+            cursor: pointer;
+        }
+        #restartBtn:hover {
+            background-color: #3182ce;
+        }
+        #weapon {
+            position: absolute;
+            bottom: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 150px;
+            height: 100px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M20 3h-3c0-1.7-1.3-3-3-3h-4c-1.7 0-3 1.3-3 3h-3c-1.1 0-2 0.9-2 2v15c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-15c0-1.1-0.9-2-2-2zM10 1h4c0.6 0 1 0.4 1 1h-6c0-0.6 0.4-1 1-1zM18 20h-14v-15h3v2h2v-2h4v2h2v-2h3v15z"/></svg>');
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
+        }
+        #reloadIndicator {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 18px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="crosshair">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="30" height="30">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+            </svg>
+        </div>
+        <div id="healthBar">
+            <div id="healthFill"></div>
+        </div>
+        <div id="scoreDisplay">Score: 0</div>
+        <div id="ammoDisplay">Ammo: 10/30</div>
+        <div id="weapon"></div>
+        <div id="reloadIndicator">Reloading...</div>
+        <div id="gameOver">
+            <div>GAME OVER</div>
+            <div id="finalScore">Score: 0</div>
+            <button id="restartBtn">Play Again</button>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        const gameContainer = document.getElementById('gameContainer');
+        const healthFill = document.getElementById('healthFill');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const ammoDisplay = document.getElementById('ammoDisplay');
+        const gameOverScreen = document.getElementById('gameOver');
+        const finalScore = document.getElementById('finalScore');
+        const restartBtn = document.getElementById('restartBtn');
+        const reloadIndicator = document.getElementById('reloadIndicator');
+        let health = 100;
+        let score = 0;
+        let ammo = 10;
+        let maxAmmo = 10;
+        let totalAmmo = 30;
+        let isReloading = false;
+        let gameActive = true;
+        let bots = [];
+        let bulletHoles = [];
+        let botSpawnInterval;
+        let botMoveInterval;
+        let botAttackInterval;
+        // Initialize game
+        function initGame() {
+            health = 100;
+            score = 0;
+            ammo = 10;
+            totalAmmo = 30;
+            isReloading = false;
+            gameActive = true;
+            // Clear existing bots and bullet holes
+            bots.forEach(bot => bot.element.remove());
+            bots = [];
+            bulletHoles.forEach(hole => hole.remove());
+            bulletHoles = [];
+            // Update UI
+            updateHealth();
+            updateScore();
+            updateAmmo();
+            // Hide game over screen
+            gameOverScreen.style.display = 'none';
+            // Start bot spawning and movement
+            botSpawnInterval = setInterval(spawnBot, 2000);
+            botMoveInterval = setInterval(moveBots, 50);
+            botAttackInterval = setInterval(botAttack, 1000);
+        }
+        // Update health bar
+        function updateHealth() {
+            healthFill.style.width = `${health}%`;
+            healthFill.style.backgroundColor = health > 50 ? '#48bb78' : health > 20 ? '#ed8936' : '#e53e3e';
+        }
+        // Update score display
+        function updateScore() {
+            scoreDisplay.textContent = `Score: ${score}`;
+        }
+        // Update ammo display
+        function updateAmmo() {
+            ammoDisplay.textContent = `Ammo: ${ammo}/${totalAmmo}`;
+        }
+        // Spawn a new bot
+        function spawnBot() {
+            if (!gameActive) return;
+            const botElement = document.createElement('div');
+            botElement.className = 'bot';
+            // Position bot randomly around the edges
+            const edge = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left
+            let x, y;
+            switch (edge) {
+                case 0: // top
+                    x = Math.random() * window.innerWidth;
+                    y = -50;
+                    break;
+                case 1: // right
+                    x = window.innerWidth + 50;
+                    y = Math.random() * window.innerHeight;
+                    break;
+                case 2: // bottom
+                    x = Math.random() * window.innerWidth;
+                    y = window.innerHeight + 50;
+                    break;
+                case 3: // left
+                    x = -50;
+                    y = Math.random() * window.innerHeight;
+                    break;
+            }
+            botElement.style.left = `${x}px`;
+            botElement.style.top = `${y}px`;
+            const bot = {
+                element: botElement,
+                x: x,
+                y: y,
+                health: 100,
+                speed: 1 + Math.random() * 2
+            };
+            gameContainer.appendChild(botElement);
+            bots.push(bot);
+        }
+        // Move bots towards player
+        function moveBots() {
+            if (!gameActive) return;
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            bots.forEach(bot => {
+                // Calculate direction to player
+                const dx = centerX - bot.x;
+                const dy = centerY - bot.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                // Normalize and apply speed
+                if (distance > 0) {
+                    bot.x += (dx / distance) * bot.speed;
+                    bot.y += (dy / distance) * bot.speed;
+                }
+                // Update position
+                bot.element.style.left = `${bot.x}px`;
+                bot.element.style.top = `${bot.y}px`;
+                // Check if bot reached player
+                if (distance < 50) {
+                    health -= 10;
+                    updateHealth();
+                    // Remove bot
+                    bot.element.remove();
+                    bots.splice(bots.indexOf(bot), 1);
+                    // Check game over
+                    if (health <= 0) {
+                        gameOver();
+                    }
+                }
+            });
+        }
+        // Bots attack player
+        function botAttack() {
+            if (!gameActive) return;
+            bots.forEach(bot => {
+                // 20% chance to attack
+                if (Math.random() < 0.2) {
+                    health -= 5;
+                    updateHealth();
+                    // Flash red when hit
+                    gameContainer.style.backgroundColor = '#e53e3e';
+                    setTimeout(() => {
+                        gameContainer.style.backgroundColor = '#1a202c';
+                    }, 100);
+                    // Check game over
+                    if (health <= 0) {
+                        gameOver();
+                    }
+                }
+            });
+        }
+        // Shoot at bots
+        function shoot(event) {
+            if (!gameActive || isReloading) return;
+            // Check if we have ammo
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ make a first person shooter where you play against bots