Click here for free DL of the app version that can save data.

No:35117

Choose Your Spirit. Goat, Kangaroo, Bear or Rabbit
Developer User16437｜Date and time 24/1/13 11:06:08
Build time 10.416 sec｜Game capacity 3.517KB｜

Script

Choose Your Spirit

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Choose Your Spirit</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        h1 {
            color: navy;
        }
        
        img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 20px;
            cursor: pointer;
        }
        
        .selected {
            border: 4px solid limegreen;
        }
        
        #message {
            color: red;
            margin-top: 10px;
        }
        
        #playButton {
            display: none;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: limegreen;
            border: none;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Choose Your Spirit</h1>
    <img id="goat" src="goat.png" alt="Goat">
    <img id="kangaroo" src="kangaroo.png" alt="Kangaroo">
    <img id="bear" src="bear.png" alt="Bear">
    <img id="rabbit" src="rabbit.png" alt="Rabbit">
    
    <div id="message"></div>
    
    <button id="playButton">Play</button>
    
    <script>
        // Store selected spirit
        let selectedSpirit = "";
        
        // Function to handle spirit selection
        function selectSpirit(spirit) {
            const selectedElement = document.getElementById(spirit);
            
            // Remove selected class from all images
            document.querySelectorAll('img').forEach(img => img.classList.remove('selected'));
            
            // Add selected class to the clicked image
            selectedElement.classList.add('selected');
            
            // Store selected spirit
            selectedSpirit = spirit;
            
            // Show play button
            document.getElementById('playButton').style.display = 'block';
            
            // Clear any previous messages
            document.getElementById('message').textContent = "";
        }
        
        // Function to start the game
        function startGame() {
            if (selectedSpirit) {
                // Hide spirit selection
                document.querySelectorAll('img').forEach(img => img.style.display = 'none');
                document.getElementById('playButton').style.display = 'none';
                
                // Show game message with selected spirit
                document.getElementById('message').textContent = "Congratulations! You are playing as a " + selectedSpirit + "!";
                
                // Implement game logic here...
            } else {
                // Show error message if no spirit is selected
                document.getElementById('message').textContent = "Please select a spirit first!";
            }
        }
        
        // Attach click event listeners for spirit selection
        document.getElementById('goat').addEventListener('click', () => selectSpirit('goat'));
        document.getElementById('kangaroo').addEventListener('click', () => selectSpirit('kangaroo'));
        document.getElementById('bear').addEventListener('click', () => selectSpirit('bear'));
        document.getElementById('rabbit').addEventListener('click', () => selectSpirit('rabbit'));
        
        // Attach click event listener for play button
        document.getElementById('playButton').addEventListener('click', startGame);
    </script>
</body>
</html>