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

No:39930

←

Prev Next

→

Merge Game
Developer User17889｜Date and time 24/1/31 4:02:02
Build time 10.702 sec｜Game capacity 2.432KB｜

Script

Merge Game

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      margin-top: 0;
    }
    
    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: blue;
      color: white;
      border-radius: 5px;
      text-decoration: none;
      cursor: pointer;
    }
    
    .btn:hover {
      background-color: darkblue;
    }
    
    #merge-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      height: 200px;
      background-color: #f7f7f7;
      border: 1px solid lightgray;
      border-radius: 5px;
      margin-top: 20px;
    }
    
    #merge-container img {
      width: 60px;
      margin: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <button class="btn" onclick="startGame()">Play</button>
  <div id="merge-container"></div>
  
  <script>
    let mergeContainer = document.getElementById('merge-container');
    let mergeItems = [];
    
    function startGame() {
      mergeContainer.innerHTML = '';
      mergeItems = [];
      createMergeItem();
      createMergeItem();
    }
    
    function createMergeItem() {
      let mergeItem = document.createElement('img');
      mergeItem.src = getRandomPictogram();
      mergeItem.onclick = () => merge(mergeItem);
      mergeContainer.appendChild(mergeItem);
      mergeItems.push(mergeItem);
    }
    
    function getRandomPictogram() {
      let pictograms = ['pictogram1.png', 'pictogram2.png', 'pictogram3.png', 'pictogram4.png'];
      return pictograms[Math.floor(Math.random() * pictograms.length)];
    }
    
    function merge(mergeItem) {
      let currentIndex = mergeItems.indexOf(mergeItem);
      let nextIndex = currentIndex + 1;
      
      if (nextIndex < mergeItems.length) {
        let mergedSrc = mergeItems[currentIndex].src.replace('.png', '_merged.png');
        mergeItems[currentIndex].src = mergedSrc;
        mergeContainer.removeChild(mergeItems[nextIndex]);
        mergeItems.splice(nextIndex, 1);
      }
      
      if (mergeItems.length === 1) {
        setTimeout(() => {
          alert('Congratulations! You merged all the pictograms!');
          startGame();
        }, 500);
      }
    }
  </script>
</body>
</html>