Let’s talk about how to use javascript to implement the Lianliankan game (code example)

Lianliankan game is a very popular puzzle game. It can not only cultivate people's thinking ability, but also enhance concentration and reaction ability. In this article, we will lead readers to understand how to use JavaScript language to implement the Lianliankan game.

First of all, to implement this game, we need to clarify its basic function, which is to click on two identical patterns to eliminate them. We can accomplish this function by following the following steps:

1. Create a two-dimensional array containing patterns, each pattern has a unique identifier.
2. Present the patterns in the array in a grid, and each pattern can be positioned by coordinates.
3. When the user clicks on a pattern, record the coordinates of the pattern and mark it as selected.
4. When the user clicks on another same pattern again, check whether it matches the previously selected pattern. If so, remove them from the grid.
5. If no matching pattern is found, cancel the mark and wait for the user to reselect.

The following is the sample code:

// 创建图案数组
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');
    }
  }
}

In this sample code, we first create an array containing four different patterns and assign it to a two-dimensional array. Next, we created a grid of cells and images using HTML and CSS. When a user clicks on an image, we record the corresponding row and column number and mark it as selected. If the user clicks on the same image, remove both images from the grid. If no matching image is found, the selection is deselected and waits for the user to reselect.

Through the above implementation, we have successfully implemented the basic functions of the Lianliankan game. However, to improve the playability of the game, we can add some additional features such as timers, difficulty levels, and more. To sum up, you can easily implement the Lianliankan game using JavaScript language, and the above sample code can be used as a reference to help you quickly get started with coding, so as to realize your own Lianliankan game.

The above is the detailed content of Let’s talk about how to use javascript to implement the Lianliankan game (code example). For more information, please follow other related articles on the PHP Chinese website!