Question

我正在开发一款记忆匹配游戏。现在，游戏运行良好。但是，我现在需要处理游戏中你实际需要翻转卡片的部分。我首先要有两组图像：“卡片背面”和“卡片正面”。卡片的背面都是相同的，然后当你点击一张卡片时，卡片的正面会显露出来。前线都是独特的图片对。但是，我的代码是这样的，点击具有相同来源的图片将被删除。因此，一旦你点击图片的任何两个“背面”，它们将永远被删除，无论它们的“前面”是什么。

我想只使用一组图片，只需点击它们就可以显示不同的图片。对不起，如果这听起来有点令人困惑，这是我解释它的最佳方式。

以下是我到目前为止的演示：http://jsfiddle.net/GquLr/

所以基本上，我需要一种方法来合并一个功能，你必须翻转两张卡片，如果它们匹配，它们将被移除，如果它们不匹配，它们会翻转回来。

Answer 1

通过显示卡片的正面和背面，每张卡片基本上是两个叠加在一起的图像。您也可以使用CSS 3翻转背面。

我看到它的方式，您可以使用以下内容在HTML标记中表示该结构：

<div class="card">
    <img class="front" />
    <img class="back" />
</div>

使用它，您可以轻松地将元素定位在需要翻转的元素上，等等。

然而，在Javascript方面，您的思考方式是，您在前面 click上分配<img/>处理程序。我建议您将其移至div.card。这样你就不必担心卡片的哪一侧会受到咔嗒声。

通过div.card，您可以轻松获得前端<img/>的来源，例如：

$('div.card').on('click', function () {
    var _src = $(this).find('.front').attr('src');
});

...并用它来与显示屏中的其他卡进行比较。

处理记忆匹配游戏 - 你能以不同的方式显示一个图像吗？

1 个答案: