0

私はメモリマッチングゲームに取り組んでいます。現在、ゲームは正常に動作しています。ただし、実際にカードを裏返す必要があるゲームの部分で作業する必要があります。私は最初に「カードの裏側」と「カードの表側」の2セットの画像を用意する予定でした。カードの裏側はすべて同じになり、1枚をクリックするとカードの表側が表示されます。正面はすべてユニークな写真のペアになります。ただし、私のコードでは、同じソースを持つクリックされた画像が削除されるようになっています。したがって、写真の「背面」のいずれか2つをクリックすると、「前面」が何であるかに関係なく、常に削除されます。

1セットの画像のみを使用し、クリックしたときの表示を変えたいだけです。少し紛らわしいと思われる場合は申し訳ありませんが、それが私が説明できる最善の方法です。

これが私がこれまでに持っているもののデモです：http：//jsfiddle.net/GquLr/

つまり、基本的には、2枚のカードを裏返す必要がある機能を組み込む方法が必要です。カードが一致する場合は削除され、一致しない場合は裏返しになります。

4

1 に答える 1

0

カードの表と裏の両方を表示することで、すべてのカードは基本的に2つの画像を重ね合わせたものになります。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');
});

...そしてそれを使ってディスプレイの他のカードと比較します。

于 2012-06-27T19:21:47.493 に答える