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

No:4984

←

Prev Next

→

Pictogram Pazudora
Developer User3694｜Date and time 23/6/29 5:31:40
Build time 36.753 sec｜Game capacity 3.685KB｜

Script

了解です！絵文字パズドラというゲームを作ります。以下に実装例を示します。

絵文字パズドラ

この実装では、4x4のボード上にランダムな絵文字が表示されます。絵文字をクリックすると、隣り合った絵文字と入れ替わります。ボード上にマッチがあるかどうかを確認する"マッチ確認"ボタンもあります。以上が絵文字パズドラのゲーム実装例です。このコードをHTMLファイルに保存し、ブラウザで開くことでプレイできるようになります。

←

Prev　Next

→ 　

Back　

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

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

了解です！絵文字パズドラというゲームを作ります。以下に実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字パズドラ</title>
  <style>
    body {
      text-align: center;
      font-size: 3em;
    }
  </style>
</head>
<body>
  <h1>絵文字パズドラ</h1>
  <div id="board"></div>
  <br>
  <button onclick="shuffle()">シャッフル</button>
  <br>
  <button onclick="checkMatch()">マッチ確認</button>

// 初期化
    let board = [];
    let selected = null;

function renderBoard() {
      const boardDiv = document.getElementById("board");
      boardDiv.innerHTML = "";

for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const emoji = board[i][j];
          const emojiDiv = document.createElement("div");
          emojiDiv.textContent = emoji;
          emojiDiv.dataset.row = i;
          emojiDiv.dataset.col = j;
          emojiDiv.addEventListener("click", handleClick);
          boardDiv.appendChild(emojiDiv);
        }
        boardDiv.appendChild(document.createElement("br"));
      }
    }

function handleClick(event) {
      const row = parseInt(event.target.dataset.row);
      const col = parseInt(event.target.dataset.col);

if (selected) {
        const selectedRow = selected[0];
        const selectedCol = selected[1];

if ((row === selectedRow && Math.abs(col - selectedCol) === 1) ||
            (col === selectedCol && Math.abs(row - selectedRow) === 1)) {
          swapEmojis(row, col, selectedRow, selectedCol);
          renderBoard();
          selected = null;
        } else {
          selected = [row, col];
        }
      } else {
        selected = [row, col];
      }
    }

function swapEmojis(row1, col1, row2, col2) {
      const temp = board[row1][col1];
      board[row1][col1] = board[row2][col2];
      board[row2][col2] = temp;
    }

function shuffle() {
      initializeBoard();
      renderBoard();
    }

function checkMatch() {
      let matchCount = 0;

for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const emoji = board[i][j];

if (((i > 0 && emoji === board[i-1][j]) ||
               (i < rows-1 && emoji === board[i+1][j]) ||
               (j > 0 && emoji === board[i][j-1]) ||
               (j < cols-1 && emoji === board[i][j+1]))) {
            matchCount++;
          }
        }
      }

if (matchCount > 0) {
        alert(`マッチが${matchCount}つ見つかりました！`);
      } else {
        alert("マッチはありません");
      }
    }

// ゲームの初期化と描画
    initializeBoard();
    renderBoard();
  </script>
</body>
</html>
```

この実装では、4x4のボード上にランダムな絵文字が表示されます。絵文字をクリックすると、隣り合った絵文字と入れ替わります。ボード上にマッチがあるかどうかを確認する"マッチ確認"ボタンもあります。

以上が絵文字パズドラのゲーム実装例です。このコードをHTMLファイルに保存し、ブラウザで開くことでプレイできるようになります。