0

だから私は記憶ゲームを作ろうとしています、そしてプロジェクトはゆっくりですが着実に進んでいます。

クラス「カード」とペア固有の色のdivの4x4レイアウトがあります。私はこれらの線に沿って何かを作ろうとしています：

1つのdivをクリックし、色を取得して、pick1に保存します。別のdivをクリックし、色を取得して、pick2に保存します。2つを比較します。

今のところ、比較すらしていませんが、変数pick1と2に警告して、クリックして何が得られるかを確認します。

私はdivから背景色を取得するいくつかの異なる方法を試しましたが、今のところ私は以下を使用しています：

$('.card').click(function(){
    pick1 = $(this).css('background-color');    
});

$('.card').click(function(){
    pick2 = $(this).css('background-color');
});


alert(pick1 + " and " + pick2);

しかし、それはすぐに警告し、後でdivを表示します。この部分を2回実行すると、代わりに2回アラートが表示され、divが表示されます。

アラートを出す前にクリックさせるにはどうすればよいですか？私は昨日からjQueryを初めて使用し、2年間javascriptをまったく使用していません：p

ここに例があります：http：//jsfiddle.net/94jerdaw/WJQkA/

また、background-colorの代わりにdivを比較するより良い方法はありますか？それがそのまま比較することさえ可能であるならば、それはrgbフォーマットにありますか？

4

3 に答える 3

0

ワンクリックイベントでそれを行います。2 つの RGB 文字列を比較するだけで十分です。

var pick1 = false;
var pick2 = false;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).css('background-color');
        if(pick1 == pick2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');   
    }
});
于 2013-03-23T18:14:22.043 に答える
0

初めに

アラートの前にクリックできるようにするにはどうすればよいですか?

これが機能するには、クリックイベント内でアラートを呼び出す必要があります.... document.ready でアラートを呼び出しているため..アラートが最初に呼び出されます（ドキュメントの準備が整うとすぐに）..

第二に、同じセレクターに対してクリック機能を2回呼び出していますが、.cardこれはまったく良くありません....

必要なものを取得する方法は..配列を作成し、クリックして背景色またはそれぞれのdivをその配列にプッシュし、その配列の値を比較することです..

var tempArray=[]; //create an array
$('.card').click(function(){
    alert($(this).css('background-color')) //this will give you alert after click with the bgcolor
    tempArray.push($(this).css('background-color'));
    console.log(tempArray) //check you developers tool > console to check the array.
});

これで、クリックしたすべての bgcolor が tempArray 内にあるので、比較を行うことができます。何をしようとしているのか (比較) わからないので、これで始められると思います。

更新しました

上記と似ていますが、比較ロジックを使用しています...inArrayとclickedCountを使用しています...チェックしてください

 var tempArray=[]; //create an array
 var clickedCount= 1;
$('.card').click(function(){
  var bgColor=$(this).css('background-color') ;

  if(tempArray.length > 0){
     if(($.inArray(bgColor, tempArray)) != -1){
       alert("correct");
     }else{
       alert("incorrect");
     }
  }
    if(clickedCount % 2 != 0){  
       tempArray.push($(this).css('background-color'));
    }else{
       tempArray=[];
    }
     clickedCount++;
});

ここでフィドル

更新された作業フィドル

于 2013-03-23T18:15:20.417 に答える
0

2 回目のピックの後、両方の値がリセットされると想定しています。だからこれは私がすることです：

var pick1 = null;
var pick2 = null;

$('.card').click(function() {

    // set first card
    if (pick1 === null) {

        pick1 = $(this).css('background-color');

    }
    // set second card
    else if (pick2 === null) {

        pick2 = $(this).css('background-color');

        // compare colors
        if (pick1 === pick2) {
            alert('MATCH!');
        }
        else alert('NO MATCH!');

        // reset pick variables
        pick1 = null;
        pick2 = null;
    }

});

これは短くなる可能性がありますが、何が起こっているのかをより明確にするために詳しく説明しました.

于 2013-03-23T18:34:01.187 に答える