Spaces:

openfree
/

kdbjwb

Running

App Files Files Community

openfree commited on 12 days ago

Commit

c319e21

•

1 Parent(s): 89b7ff2

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +212 -19

index.html CHANGED Viewed

@@ -1,19 +1,212 @@
-<!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>Fortress Game</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: #1a1a1a;
+        }
+        #gameCanvas {
+            background: #000;
+            border: 2px solid #444;
+        }
+        .controls {
+            position: fixed;
+            bottom: 20px;
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            background: #444;
+            color: white;
+            border: none;
+            border-radius: 4px;
+        }
+        button:hover {
+            background: #555;
+        }
+        #power {
+            color: white;
+            position: fixed;
+            top: 20px;
+            left: 20px;
+        }
+        #angle {
+            color: white;
+            position: fixed;
+            top: 50px;
+            left: 20px;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <div id="power">Power: 50</div>
+    <div id="angle">Angle: 45°</div>
+    <div class="controls">
+        <button id="powerDown">Power -</button>
+        <button id="powerUp">Power +</button>
+        <button id="angleDown">Angle -</button>
+        <button id="angleUp">Angle +</button>
+        <button id="fire">FIRE!</button>
+    </div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const powerDisplay = document.getElementById('power');
+        const angleDisplay = document.getElementById('angle');
+        let power = 50;
+        let angle = 45;
+        let projectiles = [];
+        let targets = [];
+        let isGameOver = false;
+        // Tank properties
+        const tank = {
+            x: 50,
+            y: canvas.height - 30,
+            width: 40,
+            height: 20,
+            barrelLength: 30
+        };
+        // Generate random targets
+        for(let i = 0; i < 3; i++) {
+            targets.push({
+                x: Math.random() * (canvas.width - 200) + 400,
+                y: canvas.height - 30,
+                width: 30,
+                height: 30,
+                isHit: false
+            });
+        }
+        function drawTank() {
+            ctx.fillStyle = '#4a4';
+            ctx.fillRect(tank.x, tank.y, tank.width, tank.height);
+            // Draw barrel
+            ctx.beginPath();
+            ctx.strokeStyle = '#4a4';
+            ctx.lineWidth = 5;
+            const radians = angle * Math.PI / 180;
+            ctx.moveTo(tank.x + tank.width/2, tank.y);
+            ctx.lineTo(
+                tank.x + tank.width/2 + Math.cos(radians) * tank.barrelLength,
+                tank.y - Math.sin(radians) * tank.barrelLength
+            );
+            ctx.stroke();
+        }
+        function drawTargets() {
+            targets.forEach(target => {
+                if(!target.isHit) {
+                    ctx.fillStyle = '#a44';
+                    ctx.fillRect(target.x, target.y, target.width, target.height);
+                }
+            });
+        }
+        function fire() {
+            const radians = angle * Math.PI / 180;
+            projectiles.push({
+                x: tank.x + tank.width/2 + Math.cos(radians) * tank.barrelLength,
+                y: tank.y - Math.sin(radians) * tank.barrelLength,
+                vx: Math.cos(radians) * power / 10,
+                vy: -Math.sin(radians) * power / 10
+            });
+        }
+        function update() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawTank();
+            drawTargets();
+            // Update and draw projectiles
+            projectiles.forEach((proj, index) => {
+                proj.x += proj.vx;
+                proj.y += proj.vy;
+                proj.vy += 0.2; // gravity
+                ctx.beginPath();
+                ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2);
+                ctx.fillStyle = '#fff';
+                ctx.fill();
+                // Check for collisions with targets
+                targets.forEach(target => {
+                    if(!target.isHit &&
+                       proj.x > target.x &&
+                       proj.x < target.x + target.width &&
+                       proj.y > target.y &&
+                       proj.y < target.y + target.height) {
+                        target.isHit = true;
+                        projectiles.splice(index, 1);
+                    }
+                });
+                // Remove projectiles that are off screen
+                if(proj.y > canvas.height || proj.x > canvas.width) {
+                    projectiles.splice(index, 1);
+                }
+            });
+            // Check win condition
+            if(targets.every(target => target.isHit)) {
+                ctx.fillStyle = '#fff';
+                ctx.font = '48px Arial';
+                ctx.fillText('YOU WIN!', canvas.width/2 - 100, canvas.height/2);
+                isGameOver = true;
+            }
+            if(!isGameOver) {
+                requestAnimationFrame(update);
+            }
+        }
+        // Controls
+        document.getElementById('powerDown').addEventListener('click', () => {
+            if(power > 10) power -= 5;
+            powerDisplay.textContent = `Power: ${power}`;
+        });
+        document.getElementById('powerUp').addEventListener('click', () => {
+            if(power < 100) power += 5;
+            powerDisplay.textContent = `Power: ${power}`;
+        });
+        document.getElementById('angleDown').addEventListener('click', () => {
+            if(angle > 0) angle -= 5;
+            angleDisplay.textContent = `Angle: ${angle}°`;
+        });
+        document.getElementById('angleUp').addEventListener('click', () => {
+            if(angle < 90) angle += 5;
+            angleDisplay.textContent = `Angle: ${angle}°`;
+        });
+        document.getElementById('fire').addEventListener('click', fire);
+        update();
+    </script>
+</body>
+</html>