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

No:14655

←

Prev Next

→

Merge Game
Developer User6339｜Date and time 23/9/4 0:46:06
Build time 49.689 sec｜Game capacity 4.605KB｜

Script

Merge Game

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #game-container {
        padding: 20px;
      }
      .pictogram {
        width: 100px;
        height: 100px;
        background-size: cover;
        display: inline-block;
        margin: 10px;
        cursor: pointer;
      }
      .selected {
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <h1>Merge Game</h1>
    <div id="game-container">
      <div class="pictogram" id="picto1"></div>
      <div class="pictogram" id="picto2"></div>
      <div class="pictogram" id="picto3"></div>
      <div class="pictogram" id="picto4"></div>
      <div class="pictogram" id="picto5"></div>
    </div>

// Track selected pictograms
      const selectedPictograms = [];

// Add click event listeners to all pictograms
      const pictograms = document.querySelectorAll(".pictogram");
      pictograms.forEach(pictogram => {
        pictogram.addEventListener("click", () => {
          const pictogramId = pictogram.getAttribute("id");
          
          // Check if it's already selected, if so deselect
          if (selectedPictograms.includes(pictogramId)) {
            pictogram.classList.remove("selected");
            const index = selectedPictograms.indexOf(pictogramId);
            selectedPictograms.splice(index, 1);
          } else {
            pictogram.classList.add("selected");
            selectedPictograms.push(pictogramId);
          }
          
          // Check if two pictograms are selected
          if (selectedPictograms.length === 2) {
            mergePictograms(selectedPictograms);
          }
        });
      });

// Merge two selected pictograms
      function mergePictograms(selectedPictograms) {
        // Check if the selected pictograms are adjacent
        if (areAdjacent(selectedPictograms)) {
          // Merge logic goes here
          const picto1Url = pictogramUrls[selectedPictograms[0]];
          const picto2Url = pictogramUrls[selectedPictograms[1]];
          const mergedImageUrl = mergeImages(picto1Url, picto2Url);
          
          // Create a new pictogram element and replace the first selected with it
          const newPictogram = document.createElement("div");
          newPictogram.className = "pictogram";
          newPictogram.style.backgroundImage = `url(${mergedImageUrl})`;
          
          const container = document.getElementById("game-container");
          container.replaceChild(newPictogram, document.getElementById(selectedPictograms[0]));
          
          // Deselect the pictograms
          pictograms.forEach(pictogram => pictogram.classList.remove("selected"));
          selectedPictograms.length = 0;
        } else {
          alert("Selected pictograms are not adjacent!");
        }
      }

// Check if the selected pictograms are adjacent
      function areAdjacent(selectedPictograms) {
        const picto1 = selectedPictograms[0];
        const picto2 = selectedPictograms[1];

if (picto1 === "picto1" && picto2 === "picto2") return true;
        if (picto1 === "picto1" && picto2 === "picto3") return true;
        if (picto1 === "picto2" && picto2 === "picto1") return true;
        if (picto1 === "picto2" && picto2 === "picto3") return true;
        if (picto1 === "picto2" && picto2 === "picto4") return true;
        if (picto1 === "picto3" && picto2 === "picto1") return true;
        if (picto1 === "picto3" && picto2 === "picto2") return true;
        if (picto1 === "picto3" && picto2 === "picto4") return true;
        if (picto1 === "picto3" && picto2 === "picto5") return true;
        if (picto1 === "picto4" && picto2 === "picto2") return true;
        if (picto1 === "picto4" && picto2 === "picto3") return true;
        if (picto1 === "picto4" && picto2 === "picto5") return true;
        if (picto1 === "picto5" && picto2 === "picto3") return true;
        if (picto1 === "picto5" && picto2 === "picto4") return true;

return false;
      }

// Merge two image URLs (Replace with your image merging logic)
      function mergeImages(imageUrl1, imageUrl2) {
        return "https://example.com/merged.png";
      }
    </script>
  </body>
</html>