How can I match images of differing file sources after being randomly shuffled?
This question uses jquery.
In the card game below, one image will be used to make 2 matching cards. Cards are matched based on having the same file source.(ie if 2 cards have the same file source then they are a match).
What I'd like to do is match the cards based on different criteria. This is because I'd like to use 2 different images as the matching pair.
At first I thought that I could just specify values for the matching images, but when the cards are shuffled at the start/reset of each game, the values don't move with the image.
To sum up, I'd like to find a way to match 2 cards(images) that have differing file sources after they have been randomly shuffled.
Any help would be much appreciated. Thanks.
<script type="text/javascript">
var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function shuffle() {
var children = $("#boxcard").children();
var child = $("#boxcard div:first-child");
var array_img = new Array();
for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}
var child = $("#boxcard div:first-child");
for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);
// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);
child = child.next();
}
}
function resetGame() {
shuffle();
$(".tile").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}
$(document).ready(function() {
$(".tile").hide();
$("#boxcard div").click(openCard);
shuffle();
function openCard() {
id = $(this).attr("id");
if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);
$("#"+id+" img").slideDown('fast');
if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
//print imgopened
$('#reading1').html('<h1> imgopened is '+imgopened+'</h1>');
setTimeout(fu开发者_开发知识库nction() {
$("#boxcard div").bind("click", openCard)
}, 300);
} else {
currentopened = $("#"+id+" img").attr("src");
//print currentopened
$('#reading2').html('<h1> currentopened is '+currentopened+'</h1>');
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideUp('fast');
$("#"+boxopened+" img").slideUp('fast');
boxopened = "";
imgopened = "";
}, 400);
} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 400);
}
count++;
$("#count").html("" + count);
if (found == 10) {
msg = '<span id="msg">Congrats ! You Found All The Cards With </span>';
$("span.link").prepend(msg);
}
}
}
});
</script>
Here is the html
<div id="reading1" style="display:block; width:700px; height:50px;"></div>
<br/>
<div id="reading2" style="color:#cc0000; display:block; width:700px; height:50px;"></div>
<div id="boxbutton">
<span class="link">
<span id="count">0</span>
Click
</span>
<a href="javascript:" class="link" onclick="resetGame();">Restart</a>
</div>
<div id="boxcard">
<div id="card1"><img class="tile" src="img/01.jpg" /></div>
<div id="card10"><img class="tile" src="img/01.jpg" /></div>
</div>
I would use the .data()
method of jQuery to "attach" a specific piece of data that matches the "criteria" you need for the matched images. Then as you "turn over" a "card" you can extract the specific piece of data and compare it to another card that is turned over to see if they match. Because the data is a property of the image, it will "move" with the image when it is shuffled.
精彩评论