ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript を使用して連聯館ゲームを実装する方法について話しましょう (コード例)
連聯館ゲームは非常に人気のあるパズルゲームで、思考力を養うだけでなく、集中力や反応力も高めることができます。この記事では、JavaScript 言語を使用して連聯館ゲームを実装する方法を読者に理解してもらいます。
まず第一に、このゲームを実装するには、2 つの同じパターンをクリックしてそれらを消去するという、その基本的な機能を明確にする必要があります。この機能は、次の手順に従って実行できます。
以下はサンプル コードです。
// 创建图案数组 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 サイトの他の関連記事を参照してください。