Spaces:

awacke1
/

TestSimulation

Running

App Files Files Community

awacke1 commited on Jan 16

Commit

985632d

verified ·

1 Parent(s): 85be50c

Update index.html

Browse files

Files changed (1) hide show

index.html +70 -64

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Harmonies Game 3D</title>
     <style>
         body {
             margin: 0;
@@ -12,9 +12,23 @@
         canvas {
             display: block;
         }
     </style>
 </head>
 <body>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
     <script>
         // Initialize scene, camera, and renderer
@@ -24,8 +38,8 @@
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
-        // Create the game board (grid of tiles)
-        const boardSize = 6;
         const tileSize = 1;
         const tiles = [];
         const tileTypes = [
@@ -34,6 +48,11 @@
             { type: 'grass', color: 0x98fb98 }
         ];
         for (let x = 0; x < boardSize; x++) {
             for (let z = 0; z < boardSize; z++) {
                 const tileType = tileTypes[Math.floor(Math.random() * tileTypes.length)];
@@ -44,6 +63,18 @@
                 tile.userData = { type: tileType.type, occupied: false };
                 scene.add(tile);
                 tiles.push(tile);
             }
         }
@@ -51,84 +82,59 @@
         const light = new THREE.AmbientLight(0xffffff, 0.8);
         scene.add(light);
-        // Add animals
-        const animalModels = {
-            swan: { model: null, color: 0xffffff },
-            deer: { model: null, color: 0x8b4513 },
-            bear: { model: null, color: 0x000000 }
-        };
-        const animalCards = [
-            { name: 'Swan', habitat: 'water', color: 0xffffff },
-            { name: 'Deer', habitat: 'grass', color: 0x8b4513 },
-            { name: 'Bear', habitat: 'forest', color: 0x000000 }
-        ];
-        const animalGeometry = new THREE.SphereGeometry(0.2, 32, 32);
-        for (const animal in animalModels) {
-            animalModels[animal].model = new THREE.Mesh(
-                animalGeometry,
-                new THREE.MeshBasicMaterial({ color: animalModels[animal].color })
-            );
         }
-        // Game state
-        let currentPlayer = 1;
-        const scores = { 1: 0, 2: 0 };
-        // Handle mouse click events
-        const raycaster = new THREE.Raycaster();
-        const mouse = new THREE.Vector2();
-        function onMouseClick(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(tiles);
-            if (intersects.length > 0) {
-                const tile = intersects[0].object;
-                if (tile.userData.occupied) {
-                    alert('This tile is already occupied!');
-                    return;
                 }
-                const selectedAnimal = animalCards[Math.floor(Math.random() * animalCards.length)];
-                if (selectedAnimal.habitat !== tile.userData.type) {
-                    alert(`${selectedAnimal.name} cannot live on ${tile.userData.type} tile!`);
-                    return;
                 }
-                const animal = animalModels[selectedAnimal.name.toLowerCase()].model.clone();
-                animal.position.copy(tile.position);
-                animal.position.y += 0.2;
-                scene.add(animal);
-                tile.userData.occupied = true;
-                scores[currentPlayer] += 5;
-                switchPlayer();
-            }
-        }
-        function switchPlayer() {
-            currentPlayer = currentPlayer === 1 ? 2 : 1;
-            alert(`Player ${currentPlayer}'s turn!`);
         }
-        window.addEventListener('click', onMouseClick);
         // Set camera position
-        camera.position.set(0, 5, 5);
         camera.lookAt(0, 0, 0);
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harmonies Game 3D - Dynamic Simulation</title>
     <style>
         body {
             margin: 0;
         canvas {
             display: block;
         }
+        .hud {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0, 0, 0, 0.5);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-family: Arial, sans-serif;
+        }
     </style>
 </head>
 <body>
+    <div class="hud" id="hud">
+        <p>Current Type: <span id="currentType">Swan 🦢</span></p>
+    </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
     <script>
         // Initialize scene, camera, and renderer
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
+        // Game board parameters
+        const boardSize = 50; // Gigantic board
         const tileSize = 1;
         const tiles = [];
         const tileTypes = [
             { type: 'grass', color: 0x98fb98 }
         ];
+        // Particle system for motion simulation
+        const particleSystem = new THREE.Group();
+        scene.add(particleSystem);
+        // Create tiles and particles
         for (let x = 0; x < boardSize; x++) {
             for (let z = 0; z < boardSize; z++) {
                 const tileType = tileTypes[Math.floor(Math.random() * tileTypes.length)];
                 tile.userData = { type: tileType.type, occupied: false };
                 scene.add(tile);
                 tiles.push(tile);
+                // Add particles for motion simulation
+                const particleGeometry = new THREE.SphereGeometry(0.1, 16, 16);
+                const particleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+                const particle = new THREE.Mesh(particleGeometry, particleMaterial);
+                particle.position.set(
+                    x - boardSize / 2 + Math.random(),
+                    0.2,
+                    z - boardSize / 2 + Math.random()
+                );
+                particle.userData = { direction: new THREE.Vector3(Math.random(), 0, Math.random()).normalize() };
+                particleSystem.add(particle);
             }
         }
         const light = new THREE.AmbientLight(0xffffff, 0.8);
         scene.add(light);
+        // HUD for displaying the current type
+        const hud = document.getElementById('hud');
+        const currentTypeDisplay = document.getElementById('currentType');
+        // Current type with emoji
+        const animalTypes = [
+            { name: 'Swan', emoji: '🦢' },
+            { name: 'Deer', emoji: '🦌' },
+            { name: 'Bear', emoji: '🐻' }
+        ];
+        let currentTypeIndex = 0;
+        function updateCurrentType() {
+            currentTypeDisplay.textContent = `${animalTypes[currentTypeIndex].name} ${animalTypes[currentTypeIndex].emoji}`;
         }
+        updateCurrentType();
+        // Handle key presses to switch types
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowRight') {
+                currentTypeIndex = (currentTypeIndex + 1) % animalTypes.length;
+                updateCurrentType();
+            } else if (event.key === 'ArrowLeft') {
+                currentTypeIndex = (currentTypeIndex - 1 + animalTypes.length) % animalTypes.length;
+                updateCurrentType();
+            }
+        });
+        // Particle motion simulation
+        function updateParticles() {
+            particleSystem.children.forEach(particle => {
+                const direction = particle.userData.direction;
+                particle.position.add(direction.multiplyScalar(0.01));
+                // Bounce off edges of the board
+                if (particle.position.x < -boardSize / 2 || particle.position.x > boardSize / 2) {
+                    direction.x = -direction.x;
                 }
+                if (particle.position.z < -boardSize / 2 || particle.position.z > boardSize / 2) {
+                    direction.z = -direction.z;
                 }
+            });
         }
         // Set camera position
+        camera.position.set(0, 50, 50);
         camera.lookAt(0, 0, 0);
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
+            updateParticles();
             renderer.render(scene, camera);
         }