0
我試圖做一個記憶遊戲的模擬，但我不知道爲什麼應用程序不顯示卡的形式。如果你可以找到一對，它必須保持顯示在屏幕上。 這就是我所做的。 有沒有人有想法？jQuery的內存遊戲和HTML
<html>
<head>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
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);
// window.console && console.log('');
}
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);
});
</script>
<div id="picbox">
<div id="boxcard"></div>
</div>
<style>
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: 640px;
}
#boxcard {
z-index: 1;
margin: 10px 0 0;
}
#boxcard div{
float: left;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
#boxcard div img {
display: none;
border-radius: 10px;
z-index: 3;
}
</style>
</body>
</html>
閱讀[如何創建一個最小的，完整的和可覈查的示例]（http://stackoverflow.com/help/mcve）。 – MikeJRamsey56