Question

我想添加一个新功能，帮助我在点击投降按钮时显示div后面的所有字母，我很感激，如果有任何身体可以帮助我，非常感谢：）

Screenshot of the game

＆＃13;

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);
      }
    }
  }
}

＆＃13;

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;
}

＆＃13;

<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!!">

＆＃13;

Answer 1

您已经拥有flip2Back()功能，为什么不提供flip2Front()功能呢？

您可以在以下memoryFlipTile()功能中重复使用此功能。

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

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

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

这样，磁贴就知道自己的值，而不是尝试使用元素及其值来管理并行数组。

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!!">

Answer 2

function surrender() {  
    var memoryBoard = document.getElementById("memory_board");
    var tiles = memoryBoard.childNodes;
    for (var i=0; i<tiles.length; i++) {
       var tile = tiles[i];
       var val  =tile.dataset.letter;
       tile.style.background = '#FFF';
       tile.innerHTML = val;
    }
}

为此工作编辑yout tile输出到（我添加了一个属性，以便我可以轻松获取值）：

output += '<div id="tile_'+i+'"onclick="memoryFlipTile(this,\''+memory_array[i]+'\')" data-letter="'+memory_array[i]+'"></div>';

记忆游戏揭示了div

2 个答案:

工作演示