Slime that combines and gets bigger and bigger's game

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

No:2900

1448

←

Prev Next

→

Slime that combines and gets bigger and bigger
Developer User3641｜Date and time 23/6/23 1:58:19
Build time 41.221 sec｜Game capacity 4.319KB｜

Script

🔴

🟢

🔵

🟣

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合体スライムゲーム</title>
    <style>
      /* スタイリング */
      body {
        margin: 0;
        padding: 0;
        background-color: #2ecc71;
      }
      #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .slime {
        display: inline-block;
        font-size: 10rem;
        animation-duration: 1s;
        animation-name: bounce;
        animation-iteration-count: infinite;
      }
      .red {
        color: #e74c3c;
      }
      .green {
        color: #2ecc71;
      }
      .blue {
        color: #3498db;
      }
      .purple {
        color: #9b59b6;
      }
      /* アニメーション */
      @keyframes bounce {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.2);
          opacity: 0.5;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div class="slime red" id="slime1">🔴</div>
      <div class="slime green" id="slime2">🟢</div>
      <div class="slime blue" id="slime3">🔵</div>
      <div class="slime purple" id="slime4">🟣</div>
    </div>
    <script>
      // スライムのサイズと位置をランダムに決定
      function randomizeSlime(slime) {
        slime.style.fontSize = (Math.floor(Math.random() * 5) + 8) + "rem";
        slime.style.top = Math.floor(Math.random() * 70) + "%";
        slime.style.left = Math.floor(Math.random() * 70) + "%";
      }
      // スライムを合体させる
      function mergeSlimes() {
        const slime1 = document.getElementById("slime1");
        const slime2 = document.getElementById("slime2");
        const slime3 = document.getElementById("slime3");
        const slime4 = document.getElementById("slime4");
        const mergedSlime = document.createElement("div");
        mergedSlime.classList.add("slime");
        // 合体前のスライムの文字列を連結
        mergedSlime.innerHTML = slime1.innerHTML + slime2.innerHTML + slime3.innerHTML + slime4.innerHTML;
        // スライムの色は合体したスライムの色にする
        let color;
        if (slime1.classList.contains("red") || slime2.classList.contains("red") || slime3.classList.contains("red") || slime4.classList.contains("red")) {
          color = "red";
        } else if (slime1.classList.contains("green") || slime2.classList.contains("green") || slime3.classList.contains("green") || slime4.classList.contains("green")) {
          color = "green";
        } else if (slime1.classList.contains("blue") || slime2.classList.contains("blue") || slime3.classList.contains("blue") || slime4.classList.contains("blue")) {
          color = "blue";
        } else if (slime1.classList.contains("purple") || slime2.classList.contains("purple") || slime3.classList.contains("purple") || slime4.classList.contains("purple")) {
          color = "purple";
        }
        mergedSlime.classList.add(color);
        // ランダムに決定されたスライムのサイズと位置を引き継ぐ
        randomizeSlime(mergedSlime);
        // 現在のスライムを削除し、合体したスライムを画面に表示する
        slime1.remove();
        slime2.remove();
        slime3.remove();
        slime4.remove();
        const gameContainer = document.getElementById("game-container");
        gameContainer.appendChild(mergedSlime);
      }
      // スライムをクリックしたら合体
      const slimes = document.getElementsByClassName("slime");
      for (let i = 0; i < slimes.length; i++) {
        slimes[i].addEventListener("click", mergeSlimes);
      }
      // 一定時間が経過するごとにスライムをランダムに動かす
      setInterval(() => {
        randomizeSlime(document.getElementById("slime1"));
        randomizeSlime(document.getElementById("slime2"));
        randomizeSlime(document.getElementById("slime3"));
        randomizeSlime(document.getElementById("slime4"));
      }, 1000);
    </script>
  </body>
</html>