Spaces:

awacke1
/

AframeVR-Space-Shooter-With-3D-Editor

Running

App Files Files Community

awacke1 commited on Jul 12, 2024

Commit

7847be5

verified ·

1 Parent(s): ce95d07

Update index.html

Browse files

Files changed (1) hide show

index.html +172 -18

index.html CHANGED Viewed

@@ -1,19 +1,173 @@
-<!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>
+    <meta charset="utf-8">
+    <title>A-Frame Space Shooter with 3D Editor</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
+    <style>
+        .ui-panel {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 9999;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        .ui-panel button {
+            display: block;
+            margin: 5px 0;
+            padding: 5px 10px;
+        }
+        .animation-panel {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        .animation-panel input {
+            width: 50px;
+            margin-right: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="ui-panel">
+        <button onclick="addPrimitive('box')">Add Box</button>
+        <button onclick="addPrimitive('sphere')">Add Sphere</button>
+        <button onclick="addPrimitive('cylinder')">Add Cylinder</button>
+        <button onclick="addPrimitive('cone')">Add Cone</button>
+        <button onclick="addPrimitive('torus')">Add Torus</button>
+        <button onclick="toggleGameMode()">Toggle Game Mode</button>
+    </div>
+    <div class="animation-panel">
+        <h3>Animation Controls</h3>
+        <p>Velocity:</p>
+        <input id="vx" type="number" placeholder="X">
+        <input id="vy" type="number" placeholder="Y">
+        <input id="vz" type="number" placeholder="Z">
+        <p>Rotation (degrees):</p>
+        <input id="rx" type="number" placeholder="X">
+        <input id="ry" type="number" placeholder="Y">
+        <input id="rz" type="number" placeholder="Z">
+        <button onclick="applyAnimation()">Apply Animation</button>
+    </div>
+    <a-scene fog="type: linear; color: #87CEEB; near: 0; far: 50">
+        <a-sky color="#87CEEB"></a-sky>
+        <a-entity id="player" position="0 1.6 0">
+            <a-entity camera look-controls wasd-controls>
+                <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
+                          geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
+                          material="color: white; shader: flat"
+                          raycaster="objects: .enemy, .spawner, .editable"></a-entity>
+            </a-entity>
+        </a-entity>
+        <a-entity id="scoreBar" position="0 3 -5">
+            <a-box width="1" height="0.1" depth="0.1" color="#444444"></a-box>
+            <a-box id="scoreIndicator" width="1" height="0.1" depth="0.1" color="#FFA500" scale="0 1 1"></a-box>
+            <a-text value="Score" position="0 0.1 0" align="center" color="white"></a-text>
+        </a-entity>
+        <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
+        <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
+    </a-scene>
+    <script>
+        // ... [All the game logic from the previous script goes here] ...
+        // Editor functionality
+        let selectedObject = null;
+        let isGameMode = true;
+        function addPrimitive(type) {
+            const scene = document.querySelector('a-scene');
+            const newEntity = document.createElement('a-entity');
+            newEntity.setAttribute('geometry', `primitive: ${type}`);
+            newEntity.setAttribute('material', 'color: #4CC3D9');
+            newEntity.setAttribute('position', '0 1.5 -3');
+            newEntity.setAttribute('class', 'editable');
+            newEntity.addEventListener('click', function() { selectObject(this); });
+            scene.appendChild(newEntity);
+        }
+        function selectObject(obj) {
+            if (selectedObject) {
+                selectedObject.setAttribute('material', 'color', '#4CC3D9');
+            }
+            selectedObject = obj;
+            selectedObject.setAttribute('material', 'color', '#FF0000');
+        }
+        function applyAnimation() {
+            if (!selectedObject) {
+                alert('Please select an object first');
+                return;
+            }
+            const vx = parseFloat(document.getElementById('vx').value) || 0;
+            const vy = parseFloat(document.getElementById('vy').value) || 0;
+            const vz = parseFloat(document.getElementById('vz').value) || 0;
+            const rx = parseFloat(document.getElementById('rx').value) || 0;
+            const ry = parseFloat(document.getElementById('ry').value) || 0;
+            const rz = parseFloat(document.getElementById('rz').value) || 0;
+            let currentPosition = selectedObject.getAttribute('position');
+            selectedObject.setAttribute('animation__position', {
+                property: 'position',
+                dur: 1000,
+                dir: 'alternate',
+                loop: true,
+                to: `${currentPosition.x + vx} ${currentPosition.y + vy} ${currentPosition.z + vz}`,
+                easing: 'linear'
+            });
+            selectedObject.setAttribute('animation__rotation', {
+                property: 'rotation',
+                dur: 1000,
+                dir: 'alternate',
+                loop: true,
+                to: `${rx} ${ry} ${rz}`,
+                easing: 'linear'
+            });
+        }
+        function toggleGameMode() {
+            isGameMode = !isGameMode;
+            const cursor = document.querySelector('#cursor');
+            if (isGameMode) {
+                cursor.setAttribute('raycaster', 'objects', '.enemy, .spawner');
+            } else {
+                cursor.setAttribute('raycaster', 'objects', '.editable');
+            }
+        }
+        // Modify the click event listener to work with both game and edit modes
+        scene.addEventListener('click', (event) => {
+            if (isGameMode) {
+                fireLaser(player, '#00FF00');
+            } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
+                selectObject(event.detail.intersectedEl);
+            }
+        });
+        // Initialize the game
+        updateHealthDisplay();
+        updateUnitCounters();
+        setInterval(() => {
+            updateGame();
+            score++;
+            updateScoreDisplay();
+        }, 1000);
+    </script>
+</body>
+</html>