我已经按照我想要的方式修改了这个记忆游戏。我的问题是我试图弄清楚如何在游戏开始时使图像从一开始就可见,即我根本不想隐藏图像。我想要所有其他功能,而不是缺乏可见性。
有任何提示我可以更改吗?
var BoxOpened = "";
var ImgOpened = "";
var ImgFound = 0;
var Source = "#boxcard";
var ImgSource = [
"http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",
"http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",
"http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",
];
function OpenCard() {
var id = $(this).attr("id");
if ($("#" + id + " img").is(":hidden")) {
$(Source + " div").unbind("click", OpenCard);
$("#" + id + " img").slideDown('fast');
if (ImgOpened == "") {
BoxOpened = id;
ImgOpened = $("#" + id + " img").attr("src");
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 300);
} else {
CurrentOpened = $("#" + id + " img").attr("src");
if (ImgOpened != CurrentOpened) {
setTimeout(function() {
$("#" + id + " img").slideUp('fast');
$("#" + BoxOpened + " img").slideUp('fast');
BoxOpened = "";
ImgOpened = "";
}, 400);
} else {
$("#" + id + " img").parent().css("visibility", "hidden");
$("#" + BoxOpened + " img").parent().css("visibility", "hidden");
ImgFound++;
BoxOpened = "";
ImgOpened = "";
}
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 100);
}
Counter++;
$("#counter").html("" + Counter);
if (ImgFound == ImgSource.length) {
$("#counter").prepend('<span id="success">You Found All Pictues With </span>');
}
}
}
$(function() {
for (var y = 1; y < 3 ; y++) {
$.each(ImgSource, function(i, val) {
$(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
});
}
$(Source + " div").click(OpenCard);
});
请参阅我的jsfiddle以获取完整代码http://jsfiddle.net/NvkQw/
答案 0 :(得分:0)
修改您的#boxcard div img
,如下所示:
#boxcard div img {
border-radius: 10px;
z-index: 3;
}