1

私はトランプのゲームをシミュレートします - あなたはそれを見ることができますここ. あなたがそれらのうちの2つを回した後に見るように、それらは元に戻ります. しかし、同じイメージを持っている場合は、回転させておきたいと思います。そして、どのような方法でも、次のような組み合わせの長さを使用する方法がわかりません

if($('.back.#i1').length==2) {do smth}

クリック可能にするクラス「顔」を削除します。

4

2 に答える 2

0

私はあなたのコードを見て、ここに作業バージョンを投稿しまし た 前の投稿で指摘したように、要素に一意の ID があることを確認したい場合、またはそれらを見つけようとするときに問題に直面する場合があります。このようなもの：

<div id="content">
  <div id="i1" class="card face" cardFace="image1"></div>
  <div id="i2" class="card face" cardFace="image2"></div>
  <div id="i3" class="card face" cardFace="image1"></div>
  <div id="i4" class="card face" cardFace="image2"></div>
</div>

これらの div で動作するように、コード内の CSS とロジックを更新しました。コードが現在行っていることは、最初の要素のクリックで、それが持っているカードフェイスを変数に保存し、最初のアニメーションが完了すると、バック クラスと画像を表すクラスを持つように div を設定することです。

var myCardface = $(this).attr("cardFace");
...
//Toggle card back status
$(this).toggleClass('back');
// Set the image to be shown
$(this).toggleClass('back_'+myCardface);

2 番目のアニメーションの最後に、コードは裏を表示しているすべてのカード (現在のカードを除く) を探し、それらが同じ「cardFace」値を持っているかどうかを確認します。 .

//Check for other open cards having the same cardFace value
$("#content").find(".back").not("#"+$(this).attr("id")).each(function(index){
if(myCardface == $(this).attr("cardFace")){
  matchFound = true;
  $(this).toggleClass('done');
}

if(matchFound == true){
  $(this).toggleClass('done');
}

2 枚のカードが裏向きになっている場合、コードはそれらを裏返して開いたままにしないようにします。

var unmatchedCards = $('.back:not(.done)').length
//Reset the cards
if(unmatchedCards == 2){
  $('.back:not(.done)').each(function(){
    $(this).animate({
      rotateY: "+=" + (Math.PI) / 2
    }, 500, function() {
      //Toggle card back status
      $(this).toggleClass('back');
      // Set the image to be shown
      $(this).toggleClass('back_'+$(this).attr("cardFace"));
    }).animate({
      rotateY: "+=" + (Math.PI) / 2
    }, 500);
  });
}

これが役立つかどうか教えてください。

于 2013-01-15T16:31:23.170 に答える
0

それがすべての問題を解決するかどうかはわかりませんが、ID の使用は最善ではありません。

<div id="content">
    <div id="i1" class="card face"></div>
    <div id="i2" class="card face"></div>
    <div id="i1" class="card face"></div>
    <div id="i2" class="card face"></div>
</div>

クラスを使用する必要があります：

<div id="content">
    <div class="i1 card face"></div>
    <div class="i2 card face"></div>
    <div class="i1 card face"></div>
    <div class="i2 card face"></div>
</div>
于 2013-01-15T13:54:33.123 に答える