记忆游戏卡旋转不正确

Posted 2023-02-22

【中文标题】记忆游戏卡旋转不正确

【英文标题】：Memory Game Cards Not Rotating Properly

【发布时间】：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 链接的问题，但问题中仍然需要一些代码。

【参考方案1】：

动画或 gif 将有助于实现您想要实现的目标，从您在代码中的注释我可以看到您正在尝试复制这一点，但是您构建代码的方式似乎并不像这个

https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。