JavaScript を使用して連聯館ゲームを実装する方法について話しましょう (コード例)

連聯館ゲームは非常に人気のあるパズルゲームで、思考力を養うだけでなく、集中力や反応力も高めることができます。この記事では、JavaScript 言語を使用して連聯館ゲームを実装する方法を読者に理解してもらいます。

まず第一に、このゲームを実装するには、2 つの同じパターンをクリックしてそれらを消去するという、その基本的な機能を明確にする必要があります。この機能は、次の手順に従って実行できます。

1. パターンを含む 2 次元配列を作成します。各パターンには一意の識別子があります。
2. 配列内のパターンをグリッドに表示すると、各パターンを座標によって配置できます。
3. ユーザーがパターンをクリックすると、パターンの座標を記録し、選択済みとしてマークします。
4. ユーザーが別の同じパターンを再度クリックすると、以前に選択したパターンと一致するかどうかを確認します。その場合は、グリッドからそれらを削除します。
5. 一致するパターンが見つからない場合は、マークをキャンセルし、ユーザーが再選択するまで待ちます。

以下はサンプル コードです。

// 创建图案数组
var images = ['image1.png', 'image2.png', 'image3.png', 'image4.png'];

// 创建二维数组
var board = [
  [1, 2, 3, 4],
  [2, 3, 4, 1],
  [3, 4, 1, 2],
  [4, 1, 2, 3]
];

// 创建二维数组网格
var grid = document.getElementById('grid');
for (var i = 0; i < board.length; i++) {
  var row = document.createElement('div');
  row.classList.add('row');
  for (var j = 0; j < board[i].length; j++) {
    var cell = document.createElement('div');
    cell.classList.add('cell');
    cell.dataset.row = i;
    cell.dataset.col = j;
    var image = document.createElement('img');
    image.src = images[board[i][j] - 1];
    image.addEventListener('click', handleClick);
    cell.appendChild(image);
    row.appendChild(cell);
  }
  grid.appendChild(row);
}

// 记录点击的图案
var selectedRow, selectedCol;

function handleClick(event) {
  var cell = event.currentTarget.parentElement;
  var row = parseInt(cell.dataset.row);
  var col = parseInt(cell.dataset.col);
  if (selectedRow === undefined) {
    selectedRow = row;
    selectedCol = col;
    cell.classList.add('selected');
  } else if (selectedRow === row && selectedCol === col) {
    selectedRow = undefined;
    selectedCol = undefined;
    cell.classList.remove('selected');
  } else {
    var previousCell = document.querySelector('.cell.selected');
    var previousImage = previousCell.children[0];
    var currentImage = cell.children[0];
    if (previousImage.src === currentImage.src) {
      board[row][col] = 0;
      board[selectedRow][selectedCol] = 0;
      previousCell.removeEventListener('click', handleClick);
      cell.removeEventListener('click', handleClick);
      previousCell.classList.remove('selected');
      previousImage.classList.add('removed');
      currentImage.classList.add('removed');
      setTimeout(function() {
        previousCell.remove();
        cell.remove();
      }, 500);
    } else {
      selectedRow = undefined;
      selectedCol = undefined;
      previousCell.classList.remove('selected');
    }
  }
}

このサンプル コードでは、まず 4 つの異なるパターンを含む配列を作成し、それを 2 次元配列に代入します。次に、HTML と CSS を使用してセルと画像のグリッドを作成しました。ユーザーが画像をクリックすると、対応する行番号と列番号が記録され、選択済みとしてマークされます。ユーザーが同じ画像をクリックすると、両方の画像がグリッドから削除されます。一致する画像が見つからない場合、選択は解除され、ユーザーが再選択するまで待機します。

上記の実装により、連聯館ゲームの基本機能を実装することができました。ただし、ゲームのプレイアビリティを向上させるために、タイマーや難易度などの追加機能を追加できます。要約すると、JavaScript 言語を使用して連連館ゲームを簡単に実装でき、上記のサンプル コードを参照してすぐにコーディングを開始し、独自の連連館ゲームを実現できます。

以上がJavaScript を使用して連聯館ゲームを実装する方法について話しましょう (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。