A spinning earth that can show you facts about each country in the worlds's game

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

No:26103

134

←

Prev Next

→

A spinning earth that can show you facts about eac..ALL
Developer User12854｜Date and time 23/11/26 23:44:32
Build time 47.34 sec｜Game capacity 3.226KB｜

Script

Sure! Here's an example of a single HTML file that contains JavaScript code to create a game with a spinning earth and display facts about each country:

To implement this, you will need to replace the `emozi_bear.png` image with an actual image of the Earth and add flag images for each country in the `countryFacts` object. Additionally, make sure to include those flag images as `emozi_chicken.png` in the same directory as the HTML file. When the page is loaded, it starts the game. Clicking on the spinning Earth triggers the display of a random fact about a country (picked from predefined facts), along with the country's flag image. Note that this is just a basic example, and you can enhance it further by adding more features, styling, and interactive elements as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's an example of a single HTML file that contains JavaScript code to create a game with a spinning earth and display facts about each country:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spinning Earth Game</title>
  <style>
    #earth {
      width: 300px;
      height: 300px;
      background-image: url('earth.png'); /* Replace 'earth.png' with an actual image of Earth */
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 50%;
      animation: rotate 10s linear infinite;
    }

@keyframes rotate {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }

#fact {
      text-align: center;
      font-family: Arial, sans-serif;
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="earth"></div>
  <div id="fact"></div>

// Function to generate a random country
    function getRandomCountry() {
      const countries = Object.keys(countryFacts);
      const randomIndex = Math.floor(Math.random() * countries.length);
      return countries[randomIndex];
    }

// Updating the fact display
    function updateFact(country) {
      const factElement = document.getElementById('fact');
      factElement.textContent = countryFacts[country] || "No fact available for this country.";

// You can use emojis or pictograms for additional visuals
      factElement.innerHTML += `<br><img src="flag_${country.toLowerCase()}.png" alt="${country} Flag" />`; // Replace with actual flag images
    }

// Starting the game
    function startGame() {
      const earthElement = document.getElementById('earth');
      earthElement.addEventListener('click', function() {
        const randomCountry = getRandomCountry();
        updateFact(randomCountry);
      });
    }

// Starting the processing
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>
```

To implement this, you will need to replace the `earth.png` image with an actual image of the Earth and add flag images for each country in the `countryFacts` object. Additionally, make sure to include those flag images as `flag_countryname.png` in the same directory as the HTML file.

When the page is loaded, it starts the game. Clicking on the spinning Earth triggers the display of a random fact about a country (picked from predefined facts), along with the country's flag image.

Note that this is just a basic example, and you can enhance it further by adding more features, styling, and interactive elements as per your requirements.