Make your human End you power's game

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

No:41659

←

Prev Next

→

Make your human End you power
Developer User18655｜Date and time 24/2/8 22:50:11
Build time 17.172 sec｜Game capacity 3.441KB｜

Script

Aplikasi Permainan Pictogram

←

Prev　Next

→ 　

Back　

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

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

Aplikasi Permainan Pictogram

<!DOCTYPE html>
<html>
<head>
  <title>Aplikasi Permainan Pictogram</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

#game-board {
      display: flex;
      flex-wrap: wrap;
      max-width: 400px;
      margin: 0 auto;
      border: 2px solid black;
      padding: 10px;
    }

.cell {
      flex: 0 0 33.33%;
      padding: 10px;
      box-sizing: border-box;
    }

img {
      max-width: 100%;
    }

#result {
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Aplikasi Permainan Pictogram</h1>
  <div id="game-board">
    <div class="cell">
      <img class="pictogram" src="pictogram1.png" alt="Pictogram 1">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram2.png" alt="Pictogram 2">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram3.png" alt="Pictogram 3">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram4.png" alt="Pictogram 4">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram5.png" alt="Pictogram 5">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram6.png" alt="Pictogram 6">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram7.png" alt="Pictogram 7">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram8.png" alt="Pictogram 8">
    </div>
    <div class="cell">
      <img class="pictogram" src="pictogram9.png" alt="Pictogram 9">
    </div>
  </div>
  <div id="result"></div>

function selectPictogram(event) {
      var currentPictogram = event.target;
      currentPictogram.classList.add("selected");

if (selectedPictogram !== null) {
        if (selectedPictogram === currentPictogram) {
          selectedPictogram.classList.remove("selected");
          selectedPictogram = null;
        } else {
          // Compare the selected pictograms
          if (selectedPictogram.alt === currentPictogram.alt) {
            selectedPictogram.classList.add("matched");
            currentPictogram.classList.add("matched");
            selectedPictogram.removeEventListener("click", selectPictogram);
            currentPictogram.removeEventListener("click", selectPictogram);
            selectedPictogram = null;

var allMatched = true;
            var pictograms = document.getElementsByClassName("pictogram");

for (var i = 0; i < pictograms.length; i++) {
              if (!pictograms[i].classList.contains("matched")) {
                allMatched = false;
                break;
              }
            }

if (allMatched) {
              document.getElementById("result").textContent = "Selamat! Anda menyelesaikan permainan.";
            }
          } else {
            setTimeout(function() {
              selectedPictogram.classList.remove("selected");
              currentPictogram.classList.remove("selected");
              selectedPictogram = null;
            }, 1000);
          }
        }
      } else {
        selectedPictogram = currentPictogram;
      }
    }

var pictograms = document.getElementsByClassName("pictogram");
    for (var i = 0; i < pictograms.length; i++) {
      pictograms[i].addEventListener("click", selectPictogram);
    }
  </script>
</body>
</html>