0
我有這個記憶匹配的遊戲代碼,並試圖找出如何限制嘗試次數爲6次。你能幫我指點正確的方向嗎?限制嘗試與記憶匹配遊戲
(function() {
var Memory = {
init: function(cards) {
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray) {
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function() {
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function() {
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function() {
var _ = Memory;
var $card = $(this);
if (!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")) {
$card.find(".inside").addClass("picked");
if (!_.guess) {
_.guess = $(this).attr("data-id");
} else if (_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")) {
$(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function() {
$(".picked").removeClass("picked");
Memory.paused = false;
}, 600);
}
if ($(".matched").length == $(".card").length) {
_.win();
}
}
},
win: function() {
this.paused = true;
setTimeout(function() {
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function() {
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function() {
this.$overlay.hide();
this.$modal.hide();
},
reset: function() {
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Testing Algorithm -- Hopefully I got this right..
shuffle: function(array) {
var counter = array.length,
temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function() {
var frag = '';
this.$cards.each(function(k, v) {
frag += '<div class="card" data-id="' + v.id + '"><div class="inside">\
<div class="front"><img src="' + v.img + '"\
alt="' + v.name + '" /></div>\
<div class="back"><img src="http://media.chevrolet.com/content/Pages/promo_tiles/us/chevrolet/news/home/_jcr_content/image1.img.resize.maxw_340.maxh_180.jpg/1442886815536.jpg"\
alt="Chevy LOGO" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [{
name: "2017 Chevrolet Silverado 2500HD",
opacity: "0.5",
img: "https://cms.kelleybluebookimages.com/content/dam/kbb-editorial/make/chevrolet/silverado-hd/2017/01-2017-chevrolet-silverado-2500hd-duramax.jpg/jcr:content/renditions/cq5dam.web.1280.1280.jpeg",
id: 1,
}, {
name: "2017 Chevrolet Suburban",
img: "https://i.ytimg.com/vi/ZrYuZloKXYw/maxresdefault.jpg",
id: 2
}, {
name: "2017 Chevrolet Sonic",
img: "http://media.chevrolet.com/content/dam/Media/images/US/Vehicles/Chevrolet/Cars/Sonic/2017/Product/2017-Chevrolet-Sonic-005.jpg",
id: 3
}, {
name: "2017 Chevrolet Volt",
img: "http://images.techtimes.com/data/images/full/254611/2017-chevrolet-volt.jpg",
id: 4
}, {
name: "2017 Chevy ss",
img: "http://images.hgmsites.net/lrg/2016-chevrolet-ss_100527985_l.jpg",
id: 5
}, {
name: "2017 Chevy Tahoe",
img: "https://carsintrend.com/wp-content/uploads/2016/05/2017-Chevrolet-Tahoe-front.jpg",
id: 6
}, {
name: "2017 Chevrolet Trax",
img: "https://i.kinja-img.com/gawker-media/image/upload/s--tNBjBsw7--/c_scale,fl_progressive,q_80,w_800/kd4i058ck1jvs7vr9hfp.png",
id: 7
}, {
name: "2017 Chevrolet Spark",
img: "http://robbinschevy.com/blog/wp-content/uploads/2016/08/2017-chevy-spark-blog_o.jpg",
id: 8
}, {
name: "2017 Chevrolet Malibu",
img: "https://carsintrend.com/wp-content/uploads/2016/01/2017-chevrolet-malibu-pictures-1.jpg",
id: 9
}, {
name: "2017 Chevrolet Impala",
img: "https://carsintrend.com/wp-content/uploads/2016/01/2017-Chevrolet-Impala-release-2-1.jpg",
id: 10
}, {
name: "2017 Chevy Cruze",
img: "https://media.ed.edmunds-media.com/chevrolet/cruze/2017/oem/2017_chevrolet_cruze_4dr-hatchback_premier_fq_oem_1_400.jpg",
id: 11
}, {
name: "2017 Chevy Camaro",
img: "http://www.chevrolet.com/content/dam/Chevrolet/northamerica/usa/nscwebsite/en/Home/Vehicles/Performance/2017_Camaro/Model_Overview/01_images/2017-chevrolet-camaro-six-mo-masthead-1480x551-01.jpg",
id: 12
}, ];
Memory.init(cards);
})();