0

我正在做一个记忆配对游戏。目前，游戏运行良好。然而，我现在需要处理游戏中你实际上必须翻转卡片的部分。我首先要有两组图像：“卡片背面”和“卡片正面”。卡片的背面都将是相同的，然后当您单击其中一张时，卡片的正面就会显露出来。正面都是独特的一对图片。但是，我的代码是这样的，即单击的具有相同来源的图片将被删除。因此，一旦您单击图片的任意两个“背面”，它们将始终被删除，无论它们的“正面”是什么。

我只想使用一组图片，并在单击它们时以不同方式显示它们。抱歉，如果这听起来有点令人困惑，那是我能解释的最好方法。

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

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

4

1 回答 1

0

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

在我看来，您可以用 HTML 标记表示该结构，如下所示：

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

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

但是，在 Javascript 方面，您的想法是，我认为您正在分配click处理程序front <img/>。我建议你把它移到div.card。这样您就不必担心卡片的哪一侧会获得点击。

从 中div.card，您可以通过以下方式轻松获取前端的来源<img/>：

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

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

于 2012-06-27T19:21:47.493 回答