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

No:30337

←

Prev Next

→

Zodiac Sign Game
Developer User10753｜Date and time 23/12/21 7:37:33
Build time 24.88 sec｜Game capacity 4.533KB｜

Script

Sure! Here's a simple Zodiac Sign game implemented in a single HTML file using JavaScript and pictograms. Simply copy the code below and save it as an HTML file to play the game.

Zodiac Sign Game

Choose the pictogram that represents your zodiac sign:

When you open the HTML file in a web browser, you will see the game interface with pictograms representing the zodiac signs. Click on the pictogram that you think represents your zodiac sign, and the game will show you if you chose the correct one or not. Note that this is a simple game and the selection of pictograms and zodiac signs is based on personal interpretation.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple Zodiac Sign game implemented in a single HTML file using JavaScript and pictograms. Simply copy the code below and save it as an HTML file to play the game.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zodiac Sign Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #question {
            font-size: 24px;
            margin-top: 100px;
        }
        #choices {
            margin-top: 50px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .choice {
            width: 100px;
            height: 100px;
            background-size: cover;
            margin: 10px;
            cursor: pointer;
        }
        #result {
            font-size: 24px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Zodiac Sign Game</h1>
    <div id="question">Choose the pictogram that represents your zodiac sign:</div>
    <div id="choices">
        <div class="choice" id="aries"></div>
        <div class="choice" id="taurus"></div>
        <div class="choice" id="gemini"></div>
        <div class="choice" id="cancer"></div>
        <div class="choice" id="leo"></div>
        <div class="choice" id="virgo"></div>
        <div class="choice" id="libra"></div>
        <div class="choice" id="scorpio"></div>
        <div class="choice" id="sagittarius"></div>
        <div class="choice" id="capricorn"></div>
        <div class="choice" id="aquarius"></div>
        <div class="choice" id="pisces"></div>
    </div>
    <div id="result"></div>

// Randomly select a zodiac sign
        const randomSign = zodiacSigns[Math.floor(Math.random() * zodiacSigns.length)];

// Display the question and choices
        document.getElementById("question").textContent = `Choose the pictogram that represents your zodiac sign:`;
        document.getElementById("aries").textContent = "🐏";
        document.getElementById("taurus").textContent = "🐂";
        document.getElementById("gemini").textContent = "♊";
        document.getElementById("cancer").textContent = "♋";
        document.getElementById("leo").textContent = "♌";
        document.getElementById("virgo").textContent = "♍";
        document.getElementById("libra").textContent = "♎";
        document.getElementById("scorpio").textContent = "♏";
        document.getElementById("sagittarius").textContent = "♐";
        document.getElementById("capricorn").textContent = "♑";
        document.getElementById("aquarius").textContent = "♒";
        document.getElementById("pisces").textContent = "♓";

// Check the user's selected choice
        document.querySelectorAll(".choice").forEach(choice => {
            choice.addEventListener("click", function() {
                const selectedChoice = this.textContent;
                if (selectedChoice === randomSign.pictogram) {
                    document.getElementById("result").textContent = `Congratulations! You chose the right pictogram for ${randomSign.name}! 🎉`;
                } else {
                    document.getElementById("result").textContent = `Oops! You selected the wrong pictogram. The correct one for ${randomSign.name} is "${randomSign.pictogram}". Try again!`;
                }
            });
        });
    </script>
</body>
</html>
```

Note that this is a simple game and the selection of pictograms and zodiac signs is based on personal interpretation.