Spaces:

awacke1
/

TestSimulation

Running

App Files Files Community

awacke1 commited on Jan 16

Commit

85be50c

verified ·

1 Parent(s): 8035141

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -105

index.html CHANGED Viewed

@@ -3,140 +3,136 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Harmonies Game</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f0f8ff;
             margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
         }
-        h1 {
-            margin-top: 20px;
-        }
-        .game-board {
-            display: grid;
-            grid-template-columns: repeat(6, 60px);
-            gap: 5px;
-            margin-top: 20px;
-        }
-        .tile {
-            width: 60px;
-            height: 60px;
-            background-color: #ccc;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .water {
-            background-color: #87ceeb;
-        }
-        .forest {
-            background-color: #228b22;
-        }
-        .grass {
-            background-color: #98fb98;
-        }
-        .score-board {
-            margin-top: 20px;
-            padding: 10px;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-        }
-        .animal-card {
-            margin: 10px;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            background-color: #fff;
-            cursor: pointer;
         }
     </style>
 </head>
 <body>
-    <h1>Harmonies Game</h1>
-    <div class="game-board" id="gameBoard">
-        <!-- Tiles will be dynamically inserted here -->
-    </div>
-    <div class="score-board" id="scoreBoard">
-        <p>Player 1 Score: <span id="player1Score">0</span></p>
-        <p>Player 2 Score: <span id="player2Score">0</span></p>
-    </div>
-    <script>
-        // Game data
-        const tileTypes = ['water', 'forest', 'grass'];
         const animalCards = [
-            { name: 'Swan', habitat: 'water', points: 5 },
-            { name: 'Deer', habitat: 'grass', points: 4 },
-            { name: 'Bear', habitat: 'forest', points: 6 },
         ];
-        const board = [];
-        const boardSize = 6;
         // Game state
         let currentPlayer = 1;
         const scores = { 1: 0, 2: 0 };
-        // Initialize the game board
-        function initBoard() {
-            const gameBoard = document.getElementById('gameBoard');
-            for (let i = 0; i < boardSize * boardSize; i++) {
-                const tile = document.createElement('div');
-                const tileType = tileTypes[Math.floor(Math.random() * tileTypes.length)];
-                tile.classList.add('tile', tileType);
-                tile.dataset.index = i;
-                tile.dataset.type = tileType;
-                tile.addEventListener('click', () => placeAnimal(i));
-                board.push({ type: tileType, animal: null });
-                gameBoard.appendChild(tile);
-            }
-        }
-        // Handle animal placement
-        function placeAnimal(index) {
-            const tile = board[index];
-            if (tile.animal) {
-                alert('This tile already has an animal!');
-                return;
-            }
-            const selectedAnimal = animalCards[Math.floor(Math.random() * animalCards.length)];
-            if (selectedAnimal.habitat !== tile.type) {
-                alert(`${selectedAnimal.name} cannot live on ${tile.type} tile!`);
-                return;
-            }
-            tile.animal = selectedAnimal;
-            scores[currentPlayer] += selectedAnimal.points;
-            updateScores();
-            switchPlayer();
-        }
-        // Update scores
-        function updateScores() {
-            document.getElementById('player1Score').textContent = scores[1];
-            document.getElementById('player2Score').textContent = scores[2];
         }
-        // Switch players
         function switchPlayer() {
             currentPlayer = currentPlayer === 1 ? 2 : 1;
             alert(`Player ${currentPlayer}'s turn!`);
         }
-        // Initialize the game
-        initBoard();
     </script>
 </body>
-</html>

 <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;
+            overflow: hidden;
         }
+        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
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        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 = [
+            { type: 'water', color: 0x87ceeb },
+            { type: 'forest', color: 0x228b22 },
+            { 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)];
+                const geometry = new THREE.BoxGeometry(tileSize, 0.1, tileSize);
+                const material = new THREE.MeshBasicMaterial({ color: tileType.color });
+                const tile = new THREE.Mesh(geometry, material);
+                tile.position.set(x - boardSize / 2, 0, z - boardSize / 2);
+                tile.userData = { type: tileType.type, occupied: false };
+                scene.add(tile);
+                tiles.push(tile);
+            }
+        }
+        // Add light
+        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);
+        }
+        animate();
     </script>
 </body>
+</html>