javascript - 内存游戏揭示 div 后面的瓷砖

Question

我想添加一个新功能，它可以帮助我在单击投降按钮时显示 div 后面的所有字母表，如果有人可以帮助我，我将不胜感激，非常感谢:)

var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;

Array.prototype.memory_tile_shuffle = function() {
  var i = this.length,
    j, temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
  }
}

newBoard();

function newBoard() {
  tiles_flipped = 0;
  var output = '';
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>';
  }
  document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile, val) {
  if (tile.innerHTML == "" && memory_values.length < 2) {
    tile.style.background = '#FFF';
    tile.innerHTML = val;
    if (memory_values.length == 0) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
    } else if (memory_values.length == 1) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      if (memory_values[0] == memory_values[1]) {
        tiles_flipped += 2;
        // Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
        // Check to see if the whole board is cleared
        if (tiles_flipped == memory_array.length) {
          alert("Board cleared... generating new board");
          document.getElementById('memory_board').innerHTML = "";
          newBoard();
        }
      } else {
        function flip2Back() {
          // Flip the 2 tiles back over
          var tile_1 = document.getElementById(memory_tile_ids[0]);
          var tile_2 = document.getElementById(memory_tile_ids[1]);
          tile_1.style.background = 'url(/game/images/catA.png) no-repeat';
          tile_1.innerHTML = "";
          tile_2.style.background = 'url(/game/images/cat.png) no-repeat';
          tile_2.innerHTML = "";
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2Back, 700);
      }
    }
  }
}

div#memory_board {
  background: #CCC;
  border: #999 1px solid;
  width: 800px;
  height: 540px;
  padding: 24px;
  margin: 0px auto;
}

div#memory_board>div {
  background: url(/game/images/cat.png) no-repeat;
  border: #000 1px solid;
  width: 71px;
  height: 71px;
  float: left;
  margin: 10px;
  padding: 20px;
  font-size: 64px;
  cursor: pointer;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="memory_board"></div>
<input type="button" name="surrender" onclick="surrender();" value="Surrender!!">
<input type="button" name="restart" onclick="newBoard();" value="Restart!!">

Answer 1

您已经有了一个flip2Back() 函数，为什么不也创建一个flip2Front() 函数呢？

您可以在下面的 memoryFlipTile() 函数中重复使用它。

基本上，您只需通过查询 DOM 获取图 block ，然后迭代遍历图 block 元素并显示它们。

此外，您也可以将图 block 的值设置为数据属性。

<div class="tile_1" data-value="A"></div>

这样，tile 知道它自己的值，而不是试图管理具有元素及其值的并行数组。

function flip2Front(tile, val) {
  tile.style.background = '#FFF';
  tile.innerHTML = val;
}

function surrender() {
  var tiles = document.querySelectorAll('div[id^="tile_"]');

  tiles.forEach(function(tile, i) {
    flip2Front(tile, memory_array[i]);
  });
}

工作演示

var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;

Array.prototype.memory_tile_shuffle = function() {
  var i = this.length,
    j, temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
  }
}

newBoard();

function newBoard() {
  tiles_flipped = 0;
  var output = '';
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>';
  }
  document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile, val) {
  if (tile.innerHTML == "" && memory_values.length < 2) {
    flip2Front(tile, val); // Reuse the function here.
    if (memory_values.length == 0) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
    } else if (memory_values.length == 1) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      if (memory_values[0] == memory_values[1]) {
        tiles_flipped += 2;
        // Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
        // Check to see if the whole board is cleared
        if (tiles_flipped == memory_array.length) {
          alert("Board cleared... generating new board");
          document.getElementById('memory_board').innerHTML = "";
          newBoard();
        }
      } else {
        setTimeout(flip2Back, 700);
      }
    }
  }
}

function flip2Front(tile, val) {
  tile.style.background = '#FFF';
  tile.innerHTML = val;
}

function flip2Back() {
  // Flip the 2 tiles back over
  var tile_1 = document.getElementById(memory_tile_ids[0]);
  var tile_2 = document.getElementById(memory_tile_ids[1]);
  tile_1.style.background = 'url(/game/images/catA.png) no-repeat';
  tile_1.innerHTML = "";
  tile_2.style.background = 'url(/game/images/cat.png) no-repeat';
  tile_2.innerHTML = "";
  // Clear both arrays
  memory_values = [];
  memory_tile_ids = [];
}

function surrender() {
  var tiles = document.querySelectorAll('div[id^="tile_"]');

  tiles.forEach(function(tile, i) {
    flip2Front(tile, memory_array[i]); // Reuse the function here.
  });
}

.as-console-wrapper {
  display: none !important;
}

div#memory_board {
  background: #CCC;
  border: #999 1px solid;
  width: 800px;
  height: 540px;
  padding: 24px;
  margin: 0px auto;
}

div#memory_board>div {
  background: url(/game/images/cat.png) no-repeat;
  border: #000 1px solid;
  width: 71px;
  height: 71px;
  float: left;
  margin: 10px;
  padding: 20px;
  font-size: 64px;
  cursor: pointer;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="memory_board"></div>
<input type="button" name="surrender" onclick="surrender();" value="Surrender!!">
<input type="button" name="restart" onclick="newBoard();" value="Restart!!">