【发布时间】：2022-01-24 03:59:46
【问题描述】：
我一直在学习如何创建一个记忆游戏，并认为我在仔细按照说明进行操作，但我遇到了障碍。在我的 html 中，我有一个用于卡片的 div 和两个用于设置卡片正面和背面样式的子 div。
<div class="container">
<div id="memory_board">
<div class="card">
<div id="back0" class="cardFace cardFaceBack"></div>
<div id="front0" class="cardFace cardFaceFront" class="card"></div>
</div>
</div>
</div>
记忆游戏的卡片数量会有所不同。
当我运行代码时，它们堆叠在一起，这意味着当您单击一张卡片时，背面会按预期翻转，但正面会在其原始位置下方翻转。这是我的codepen。如何调整我的代码，使卡片看起来像正确翻转？
===============编辑===================
快速提问，当我包含指向 codepen 的链接时，我是否仍然包含所有代码？
这个游戏的css是：
* {
margin:0;
padding:0;
box-sizing:border-box;
}
div.container {
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
div#memory_board{
background:#CCC;
border:#999 1px solid;
display: inline-block;
padding: 10px;
perspective: 1000px;
}
.card {
width:100px;
height:133px;
display: inline-block;
margin:0px;
padding:10px;
transition: transform 1s;
transform-style: preserve-3d;
transform-origin: center right;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.cardFace {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cardFaceFront {
position: inherit;
background: whitesmoke;
color: black;
font-weight: bold;
font-size: 40px;
border:#000 1px solid;
text-align:center;
vertical-align: middle;
transform: rotateY(180deg);
}
.cardFaceBack {
background: url("https://images.cdn2.stockunlimited.net/preview1300/playing-cards-
background_1608080.jpg"); no-repeat;
background-size: cover;
position: relative;
border:#000 1px solid;
}
另外，这个程序的javascript是：
var memory_array = ['A','A','B','B'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
const memory_board = document.getElementById('memory_board');
let getRndInteger = (min, max) => Math.floor(Math.random() * (max - min) ) + min
// the following function randomly shuffles elements in an array using the Fisher-Yates (aka Knuth) shuffle
let shuffle = array => {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
function initiateCard () {
let card = document.querySelectorAll('.card');
card.forEach( card => card.addEventListener ( 'click', () => {
card.classList.toggle('is-flipped');
}));
}
function newBoard() {
let memoryArray = shuffle (memory_array);
for (let i = 0; i <= memoryArray.length - 1; i++) {
document.getElementById("front" + i).innerText = memory_array[i];
}
}
$( document ).ready(function() {
newBoard ();
initiateCard ();
});
当游戏开始时，memory_array 会重新洗牌，并将每个元素分配给卡片。不过翻牌的时候
我以为我已按照说明进行操作，但我不明白为什么在转身时，正面低于背面。我需要做哪些调整，在翻转卡片后，卡片的正面与卡片的背面在同一位置，而不是在它下面。
【问题讨论】：
-
您可以添加其余代码吗？
-
感谢您的回复，我已经编辑了问题。我最初确实包含了其余的代码，因为我在程序中包含了指向 codepen 的链接。当时，SO 不允许我提交它检测到 codepen 链接的问题，但问题中仍然需要一些代码。