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

No:20202

79

マージゲーム
Developer User8982｜Date and time 23/10/8 20:47:32
Build time 18.616 sec｜Game capacity 2.645KB｜

了解しました。以下に、指示通りの要件を満たすHTMLファイルの実装例を示します。

マージゲーム

🔵

🔵

🔵

🔵

上記のコードは、以下のようなマージゲームを実装しています。 - 4つのボックスが表示されます（絵文字の青い丸マーク）。 - ボックスをクリックすると、そのボックスと隣り合うボックスが結合され、内容が結合されたボックスになります。 - ボックスの結合は、クリックしたボックスの左隣か右隣のボックスとのみ行うことができます。 - 例えば、左から3番目のボックスをクリックすると、3番目のボックスと2番目のボックスが結合され、3番目のボックスには「🔵🔵」が表示され、2番目のボックスは削除されます。 - なお、この実装ではボックスの結合のみが行われます。新たなボックスが自動的に生成されるわけではありません。実際に上記のコードをHTMLファイルに保存し、ブラウザで開くとマージゲームが遊べるようになります。

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

了解しました。以下に、指示通りの要件を満たすHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>マージゲーム</title>
  <style>
    body {
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>マージゲーム</h1>
  <div id="container">
    <div class="box">🔵</div>
    <div class="box">🔵</div>
    <div class="box">🔵</div>
    <div class="box">🔵</div>
  </div>

<script>
    // クリックしたボックスを削除し、その隣り合うボックスの内容を結合する処理
    function mergeBoxes(index) {
      var container = document.getElementById("container");
      var boxes = container.getElementsByClassName("box");
      if (index > 0) {
        var mergedContent = boxes[index].innerHTML + boxes[index - 1].innerHTML;
        boxes[index].innerHTML = mergedContent;
        container.removeChild(boxes[index - 1]);
      } else if (index < boxes.length - 1) {
        var mergedContent = boxes[index].innerHTML + boxes[index + 1].innerHTML;
        boxes[index].innerHTML = mergedContent;
        container.removeChild(boxes[index + 1]);
      }
    }

// ボックス要素のクリックイベントを設定
    var container = document.getElementById("container");
    container.addEventListener("click", function(event) {
      var target = event.target;
      if (target.classList.contains("box")) {
        var index = Array.prototype.indexOf.call(target.parentNode.children, target);
        mergeBoxes(index);
      }
    });
  </script>
</body>
</html>
```

上記のコードは、以下のようなマージゲームを実装しています。

- 4つのボックスが表示されます（絵文字の青い丸マーク）。
- ボックスをクリックすると、そのボックスと隣り合うボックスが結合され、内容が結合されたボックスになります。
- ボックスの結合は、クリックしたボックスの左隣か右隣のボックスとのみ行うことができます。
- 例えば、左から3番目のボックスをクリックすると、3番目のボックスと2番目のボックスが結合され、3番目のボックスには「🔵🔵」が表示され、2番目のボックスは削除されます。
- なお、この実装ではボックスの結合のみが行われます。新たなボックスが自動的に生成されるわけではありません。

実際に上記のコードをHTMLファイルに保存し、ブラウザで開くとマージゲームが遊べるようになります。