Buenas dias, solicito de su ayuda para poder hacer que este juego solo tenga la posibilidad de jugarse 3 veces.
no logro hacerlo, el juego funciona correctamente, solo me hace falta eso.
<html>
<div class="wrap">
<div class="score">
<h4><span class="label label-warning">Tu mejor tiempo: <strong id="high_score">00:00:00</strong></span></h4>
<h1><time id="tiempo"> 00:00:00 </time></h1>
<h4 id="inst">Voltea una carta para comenzar.</h4>
</div>
<div class="game" id="start"></div>
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">!Buen trabajo!</h2>
<button class="restart">Juega otra vez</button>
</div>
</div>
</div>
</hmtl>
<java>
var Memory = {
init: function(cards) {
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
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);
},
// 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;
clearTimeout(t);
$.ajax({
method: 'POST',
url: win_url,
data: {
'time' : (hours ? (hours > 9 ? hours : "0" + hours + ":") : " ") + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + ":" + (mili > 9 ? mili : "0" + mili),
'user' : user_id,
'game' : game_id
}, // a JSON object to send back
success: function(response){ // What to do if we succeed
Memory.showModal();
//Memory.$game.fadeOut();
setTimeout(function() {
location.reload();
}, 5000);
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
console.log(JSON.stringify(jqXHR));
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
},
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");
},
// Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
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="https://lh3.googleusercontent.com/wPfLmWBJwsPdBhsFXc8X4QZOOvePWjoOBLFXXCwyegjRwYOuabmG5cynthlW0HDgy9s=w300"\
alt="pokemon" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [{
name: "squirtle",
img: "https://3.bp.blogspot.com/-C1IuvWA98sQ/VuYhj5BPSII/AAAAAAAAAEY/nqCLKBQ7a9U78ivENGkENNwEapmfhIxTA/s1600/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png",
id: 1,
}, {
name: "char",
img: "http://i1.mirror.co.uk/incoming/article7731571.ece/ALTERNATES/s298/Pokemon-charmander.png",
id: 2
}, {
name: "piplu",
img: "https://vignette3.wikia.nocookie.net/pokemon/images/b/b4/393Piplup_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150109224144",
id: 3
}, {
name: "cosa",
img: "https://cdn.playbuzz.com/cdn/73a6e036-df63-4292-ba2b-f62692edb273/de5f3ac6-db9e-4781-8697-1d9103d81e98.jpg",
id: 4
}, {
name: "dragonite",
img: "http://vignette1.wikia.nocookie.net/pokemontowerdefense/images/8/8b/149Dragonite.png/revision/latest?cb=20130105095616",
id: 5
}, {
name: "azul",
img: "https://i.kinja-img.com/gawker-media/image/upload/s--KZqj3PSQ--/c_fill,fl_progressive,g_center,h_900,q_80,w_1600/apwf4v7gve6dcna04bqd.png",
id: 6
}, {
name: "togepi",
img: "http://up.gc-img.net/post_img_web/2015/10/30106a2a5b6a0f0441adfb83507f94b8_25103.png",
id: 7
}, {
name: "volba",
img: "http://vignette4.wikia.nocookie.net/pokemon/images/8/81/001Bulbasaur_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105223818",
id: 8
}, ];
Memory.init(cards);
var h1 = document.getElementById('tiempo'),
inst = document.getElementById('inst'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
mili = 0, seconds = 0, minutes = 0, hours = 0,
t, wt;
function add() {
mili++;
if(mili >= 100) {
mili = 0;
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours + ":") : " ") + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + ":" + (mili > 9 ? mili : "0" + mili);
timer();
}
function timer() {
t = setTimeout(add, 10);
}
/* Start button */
start.onclick = function() {
inst.innerHTML = '¡Corre el tiempo!';
timer();
this.onclick = null;
}
/* Stop button */
stop = function() {
clearTimeout(t);
start = document.getElementById('start');
}
/* Clear button
clear.onclick = function() {
h1.textContent = "00:00:00";
mili = 0; seconds = 0; minutes = 0; hours = 0;
}
*/
</java>
<css>
.wrap {
position: relative;
height: 100%;
min-height: 430px;
padding-bottom: 20px;
}
.score {
width:100%;
padding: 1em;
text-align:center;
}
.game {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500px;
perspective: 500px;
height: 281px;
}
@media screen and (min-width:360px){
.game {
height: 321px;
}
}
@media screen and (min-width:375px){
.game {
height: 336px;
}
}
@media screen and (min-width:414px){
.game {
height: 375px;
}
}
@media screen and (min-width:768px){
.game {
height: 350px;
}
}
@media screen and (min-width:1280px){
.game {
height: 430px;
}
}
@-webkit-keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
@keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 25%;
height: 25%;
padding: 0;
text-align: center;
display: block;
-webkit-perspective: 500px;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: transparent;
}
.card .inside {
width: 100%;
height: 100%;
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
background: white;
}
.card .inside.picked, .card .inside.matched {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .inside.matched {
-webkit-animation: 1s matchAnim ease-in-out;
animation: 1s matchAnim ease-in-out;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.card .front, .card .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1px;
transform: rotateX(0deg)
}
.card .front img, .card .back img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
.card .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.label {
color:#fff;
text-align:center;
}
#tiempo {
font-family:monospace,sans-serif;
border: 1px solid #ccc;
border-radius: 5px;
}
.modal-overlay {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 30px 10px;
}
.modal .winner {
font-size: 80px;
text-align: center;
font-family: "Raleway", Helvetica, sans-serif;
color: #2EACCF;
text-shadow: 0px 3px 0 rgba(0,0,0,.5);
}
@media (max-width: 480px) {
.modal .winner {
font-size: 60px;
}
}
.modal .restart {
font-family: "Raleway", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #f0ad4e;
background: -webkit-linear-gradient(#f0ad4e, #e7701d);
background: linear-gradient(#f0ad4e, #e7701d);
border: 1px solid #e7701d;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
}
.modal .restart:hover {
background: -webkit-linear-gradient(#e7701d, #f0ad4e);
background: linear-gradient(#e7701d, #f0ad4e);
}
</css>
gracias
(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)