Javascript 在div后面展示瓷砖的记忆游戏

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

var memory_数组=['A'，A'，B'，B'，C'，D'，D'，E'，E'，F'，F'，G'，G'，H'，H'，I'，I'，J'，J'，K'，K'，L'，]；
变量内存_值=[]；
变量内存_tile_id=[]；
var tiles_fliped=0；
Array.prototype.memory\u tile\u shuffle=函数（）{
var i=此长度，
j、 温度；
而（--i>0）{
j=数学地板（数学随机（）*（i+1））；
温度=此[j]；
这个[j]=这个[i]；
此[i]=温度；
}
}
新板（）；
函数newBoard（）{
瓷砖翻转=0；
var输出=“”；
memory_array.memory_tile_shuffle（）；
对于（变量i=0；i

div#内存板{
背景：#CCC；
边框：#999 1px实心；
宽度：800px；
高度：540px；
填充：24px；
保证金：0px自动；
}
div#内存板>div{
背景：url（/game/images/cat.png）不重复；
边框：#000 1px实心；
宽度：71px；
高度：71px；
浮动：左；
利润率：10px；
填充：20px；
字体大小：64px；
光标：指针；
文本对齐：居中；
}

函数放弃（）{
var memoryBoard=document.getElementById（“内存板”）；
var tiles=memoryBoard.childNodes；
对于（var i=0；i您已经有了
flip2Back（）
函数，为什么不也做一个
flip2Front（）
函数呢

您可以在下面的
memoryFlipTile（）
函数中重复使用它

基本上，您只需通过查询DOM来获取平铺，然后迭代地循环平铺元素并显示它们

此外，也可以将磁贴的值设置为数据属性

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

工作演示

var memory_数组=['A'，A'，B'，B'，C'，D'，D'，E'，E'，F'，F'，G'，G'，H'，H'，I'，I'，J'，J'，K'，K'，L'，]；
变量内存_值=[]；
变量内存_tile_id=[]；
var tiles_fliped=0；
Array.prototype.memory\u tile\u shuffle=函数（）{
var i=此长度，
j、 温度；
而（--i>0）{
j=数学地板（数学随机（）*（i+1））；
温度=此[j]；
这个[j]=这个[i]；
此[i]=温度；
}
}
新板（）；
函数newBoard（）{
瓷砖翻转=0；
var输出=“”；
memory_array.memory_tile_shuffle（）；
对于（变量i=0；i

。作为控制台包装器{
显示：无！重要；
}
分区存储板{
背景：#CCC；
边框：#999 1px实心；
宽度：800px；
高度：540px；
填充：24px；
保证金：0px自动；
}
div#内存板>div{
背景：url（/game/images/cat.png）不重复；
边框：#000 1px实心；
宽度：71px；
高度：71px；
浮动：左；
利润率：10px；
填充：20px；
字体大小：64px；
光标
<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]);
  });
}