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

No:12903

117

←

Prev Next

→

Make a melon playground
Developer User5619｜Date and time 23/8/24 23:36:00
Build time 22.424 sec｜Game capacity 2.595KB｜

Script

Sure! Here's an example of a simple melon playground game implemented as a single HTML file, using JavaScript and pictograms. You can copy and paste the code into an HTML file and open it in a web browser to play the game.

Melon Playground

In this game, when the page loads, the `playGame` function is called, which generates five random melon pictograms and displays them on the screen. The player's goal is to click on the melon container, and if all the melons displayed inside it are the same, they receive a congratulations message. Otherwise, they receive a message to try again. Feel free to modify the code, styling, or expand the game logic to suit your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Melon Playground</title>
  <style>
    body {
      text-align: center;
      font-size: 2em;
    }
    .melon {
      font-size: 6em;
    }
  </style>
</head>
<body>
  <script>
    // Generate random melon pictograms
    function generateMelons() {
      const melonPictograms = ["🍉", "🍈", "🥝", "🍇", "🍌", "🍓", "🍏"];
      const melonContainer = document.getElementById("melon-container");

// Remove any existing melons
      melonContainer.innerHTML = "";

// Generate and append new melons
      for (let i = 0; i < 5; i++) {
        const randomIndex = Math.floor(Math.random() * melonPictograms.length);
        const melon = document.createElement("span");
        melon.className = "melon";
        melon.textContent = melonPictograms[randomIndex];
        melonContainer.appendChild(melon);
      }
    }

// Check if the melons match
    function checkMelons() {
      const melonContainer = document.getElementById("melon-container");
      const melons = melonContainer.getElementsByClassName("melon");

const firstMelon = melons[0].textContent;

// Check if all melons match the first one
      for (let i = 1; i < melons.length; i++) {
        if (melons[i].textContent !== firstMelon) {
          return false;
        }
      }

return true;
    }

// Play the game
    function playGame() {
      generateMelons();

// Add event listener to melon container
      const melonContainer = document.getElementById("melon-container");
      melonContainer.addEventListener("click", function() {
        if (checkMelons()) {
          alert("Congratulations! All melons match!");
        } else {
          alert("Not all melons match. Try again!");
        }
      });
    }

// Start the game
    playGame();
  </script>

<h1>Melon Playground</h1>
  <div id="melon-container"></div>
</body>
</html>
```

Feel free to modify the code, styling, or expand the game logic to suit your requirements.