1

jQuery でカード メモリ ゲームを作成しようとしていますが、小さな問題があります。カードをクリックすると、プログラムを起動するたびに画像がランダムになるようにします。また、あるカードの画像が別のランダムなカードと共有されるようにしようとしています。今はカードを持っていますが、画像がランダムに選択されると、すべてのカードに適用されます。これまでの私のJavaScriptは次のとおりです。誰かがここで私を助けることができれば、それは素晴らしいことです.

var score = 0;
var images = ["images are here"];
Image = images[Math.floor(Math.random() * images.length)];
$("#score").text("Number of turns: " + score);

$(".cards").mouseenter(function () {
    $(this).animate({
       height: "+=10px",
        width: "+=10px"
    });
});
$(".cards").mouseleave(function () {
    $(this).animate({
        height: "-=10px",
        width: "-=10px"
    });
});

$(".cards").click(function () {
    score++;
    $("#score").text("Number of turns: " + score);

    $(this).css({
        "background-image": 'url(' + Image + ')'
    });
});

編集：htmlは次のとおりです。

<body>
     <h5>card game</h5>

    <div id="card1" class="cards"></div>
    <div id="card2" class="cards"></div>
    <div id="card3" class="cards"></div>
    <div id="card4" class="cards"></div>
    <div id="card5" class="cards"></div>
    <div id="card6" class="cards"></div>
    <div id="score"></div>
</body>
4

2 に答える 2

0

私があなたの目標を正しく理解していれば、カードをクリックしたときにカードをランダムに選択したくないでしょう。そうしないと、各カードが 2 回しか表示されず、ゲームのプレイ中に変更されることを保証できません。代わりに、デッキを最初に 1 回シャッフルします。シャッフルをコーディングする 1 つの方法を次に示します。

var N = 10; // number of images
var indices = new Array(2*N);
for( var i=0 ; i<2*N ; ++i ) indices[i] = i>>1; // 0,0,1,1,2,2,...
// Do a Fisher-Yates shuffle
for( var i=2*N-1 ; 1<=i ; --i )
{
  var j = Math.floor( Math.random() * (i+1) ); // random 0 <= j <= i
  if( i == j ) continue;
  // Swap i and j
  indices[i] ^= indices[j];
  indices[j] ^= indices[i];
  indices[i] ^= indices[j];
}

N を個別のイメージの数に変更します。その場合、あなたのデッキのカードの枚数は 2*N です。

上記のコードを実行した後、シャッフルされたデッキに images[indices[0]]、images[indices[1]]、images[indices[2]]、...、images[indices[2*N-1]] としてアクセスします。 . 各画像は、このシーケンスでランダムな順序で正確に 2 回表示されます。

それが役立つことを願っています。

于 2013-08-22T18:59:59.057 に答える
0

それを理解する前に、私はこれをかなり長い間見つめていました。問題は次のとおりです。画像は一度だけ設定されます。Imageユーザーがクリックするたびに再割り当てする必要があります。コードは次のようになります。

var score = 0;
var images = ["images are here"];
$("#score").text("Number of turns: " + score);

$(".cards").mouseenter(function () {
    $(this).animate({
       height: "+=10px",
        width: "+=10px"
    });
});
$(".cards").mouseleave(function () {
    $(this).animate({
        height: "-=10px",
        width: "-=10px"
    });
});

$(".cards").click(function () {
    score++;
    $("#score").text("Number of turns: " + score);

    Image = images[Math.floor(Math.random() * images.length)];
    $(this).css({
        "background-image": 'url(' + Image + ')'
    });
});

注: ランダム化に使用している方法は、同じカードが 2 回表示されないことを保証するものではありません。

于 2013-08-22T18:37:08.910 に答える