0

私はこの質問をしましたが、長くなり、十分に具体的ではなかったので、ここにもう一度。

私は、オンラインで行う方法の指示を見つけた楽しみのためにゲームを作成しています。画像が裏向きの 12 枚のカードがある場合、2 枚のカードをクリックし、画像が一致する場合は表向きのままで、すべての一致が見つかるまで 2 ポイントを獲得します。

私がする必要があるのは、各画像をランダムな場所に2回追加することです! 各画像のランダムな場所を生成し、ページ内のその場所に対応する正しい場所に画像を追加する必要があります。ゲーム ボードは 4 x 3 のグリッドと考えることができます。「行」の各空は1つの画像を取得します.私が抱えている問題は、1つの画像のみがランダムに選択され、6つすべてがランダムに2回選択されるわけではないことです.

ここにjsfiddleがあります：http://jsfiddle.net/26Pda/1/

ここに画像があります：

http://efreeman.userworld.com/jQuery/images/cheese.gif
http://efreeman.userworld.com/jQuery/images/eggs.gif
http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif
http://efreeman.userworld.com/jQuery/images/tea.gif
http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif
http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif

ここにhtmlがあります：

<!doctype html>
<html>
<head>
<title>jQuery: Manipulating and Traversing Elements Project</title>
<meta charset="utf-8">
<style>
div.container, div.row, form {
clear: both;
}
div.row > div {
position: relative;
float: left;
width: 100px;
height: 170px;
padding: 30px;
margin: 10px;
border: 1px solid black;
box-shadow: 3px 3px 5px grey;
vertical-align: bottom;
}
div.row > div > img {
display: inline-block;
position: absolute;
width: 100px;
bottom: 30px;
}
.visible {
 visibility: visible;
 }
 .hidden {
 visibility: hidden;
 }
.done {
visibility: visible;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="game.js"> </script>
</head>
<body>
<div class="container">
<div class="row">
<div></div>
<div></div>
<div></div>
 <div></div>
 </div>
 <div class="row">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div class="row">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 </div>
 <form>
 <input type="button" value="Play again">
 </form>
 </body>
 </html>
4

1 に答える 1

0

これは私が使用するコードです：

http://jsfiddle.net/26Pda/6/

var images = ['...']; //your images above
var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.Floor(Math.Random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.search(images[rand]) != -1) images.splice(rand, 1);
    else (imagesused.push(images[rand]);
});

ここでやっていることは単純です。使用した画像を格納する配列を作成します。次に<div>、画像が必要なそれぞれを反復処理します。

次に、ランダムな画像を選択します。imagesこれは、配列のランダムなインデックスを選択することによって行われます。その後、新しい<img>要素を作成し、そのソースをランダムに選択された画像に設定します。

imagesused次に、使用した画像が配列内にあるかどうかを確認します。既に存在する場合は、引き続き使用できる画像の配列からその画像を削除します。そうでない場合は、その配列に画像を追加します。

2 つの画像 (1 つまたは 3+ ではなく) を取得する理由は、imagesused配列にプッシュされる前に 1 回使用し、2 回目に使用するときに配列から削除するため、images使用できなくなるためです。使用する。反復ごとに画像配列から無条件に削除すると、一度しか使用できなくなります。

于 2013-08-07T21:03:07.483 に答える