Spaces:
Running
Running
| <html lang="en"> | |
| <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> |