buenas tardes estoy haciendo un juego pero estoy teniendo un problema, al finalizar el juego se me abre una ventana modal hecha en bootbox.js , el cual me muestra el numero de estrellas, movimientos y el tiempo , pero respecto al tiempo no se como colocar para que salga igual al tiempo que el usuario se demoro en realizar el juego , "arriba del tablero aparece el tiempo que va transcurriendo , yo quiero que cuando el juego termine me muestre ese tiempo en el que se detuvo el reloj
como ven el tiempo aparece indefinido
ESTE ES EL CODIGO // lo que necesito es que al finalizar el juego me aparezca en la ventana modal el mismo tiempo del reloj que arriba del tablero que me lo muestre en el swal de la funcion finish please
//*-------------------------*
//| MEMORY |
//| |
//| GAME |
//| |
//| 2018 |
//| |
//| COLOMBIA |
//| |
//*-------------------------*
// * Variables*
// Cards of the game
let cards_icons =["bicycle","bicycle","leaf","leaf","cube","cube",
"anchor","anchor","paper-plane-o","paper-plane-o",
"bolt","bolt","bomb","bomb","diamond","diamond"],
deck= $(".deck"),
time,
restart=$(".restart"),
stars= $("i"),
moves_player= $(".moves_player"),
num_mov = 0,
panel_points= $(".score-panel"),
match =0,
open = [],
click_player=0;
// Is an algorithm to place the cards of the game randomly, like random style
//
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Start of the game
let start = ()=> {
let cards_game = shuffle(cards_icons);
deck.empty();
num_mov=0;
match=0;
moves_player.text("0");
// replace the stars on the screen
stars.removeClass("fa-star-o").addClass("fa-star");
for(let i = 0; i< cards_game.length; i++){
// add the cards
deck.append($('<li class="card"><i class ="fa fa-'+ cards_game[i]+'"></i></li>'))
}
events();
$(".clock_game").text("0:00");
};
// indicates the time as the game goes by
let time_play=()=>{
let time_new= new Date().getTime();
// indicates the time elapsed at each moment
time =setInterval(() =>{
let time_actual = new Date().getTime();
// time between the moment in this moment and start
let total_time = time_actual - time_new;
// minutes and seconds
let minutes = Math.floor((total_time %(1000*60*60))/(1000*60));
let second = Math.floor((total_time % (1000*60))/1000);
if(second < 10){
second = "0" + second;
}
let time_visible = minutes + ":" + second;
l
// show the time on the screen
$(".clock_game").text(time_visible);
}, 750);
};
// change the stars Points
let pointsStars = (num_mov)=>{
// depends of the number of movements of the player , the stars change
let points = 3;
if(num_mov<= 10){
stars.eq(3).removeClass("fa-star").addClass("fa-star-o")
points=3;
}
else if(num_mov > 10 && num_mov <=20){
stars.eq(2).removeClass("fa-star").addClass("fa-star-o")
points=2;
}
else if(num_mov > 20){
stars.eq(1).removeClass("fa-star").addClass("fa-star-o")
points=1;
}
return { points };
}
// end of the game
let finish=(num_mov, points, )=>{
let message= points == 1 ? points + " Star" :points + " Stars";
// || boostrap modal window ||
swal({
allowEscapeKey: false,
allowOutsideClick: false,
title: 'Congratulations! You Won!',
text: 'With ' + num_mov + ' Moves and ' + message + "<br>"+ "Time: " ,
//, eso que esta ahi es una prueba mia ,
type: 'success',
confirmButtonColor: '#02ccba',
confirmButtonText: 'Play again!'
}).then((isConfirm)=> {
if(isConfirm){
click_player=0;
clearInterval(time);
start();
}
})
}
// listeners of click user and other events
let events =()=>{
deck.find(".card:not('.match, .open')").bind("click", function(){
click_player++;
click_player == 1? time_play() : '';
if($(".show").length > 1){ return true;};
// Check for call to be heppend before all dom update
let this_element = $(this), cards_game = this_element.context.innerHTML;
// check if the player open the same card
if(this_element.hasClass("open")){ return true;};
this_element.addClass("open show");
open.push(cards_game);
// Check with opened card
// Add view changes in cards
// Remove css animation classes
if(open.length > 1){
if(cards_game === open[0]){
deck.find(".open").addClass("match animated infinite rubberBand");
setTimeout(()=>{
deck.find('.match').removeClass('open show animated infinite rubberBand');
}, 800);
match++;
} else {
deck.find('.open').addClass('notmatch animated infinite wobble');
setTimeout(()=> {
deck.find('.open').removeClass('animated infinite wobble');
}, 800 / 1.5);
setTimeout(()=> {
deck.find('.open').removeClass('open show notmatch animated infinite wobble');
}, 800);
}
open =[];
num_mov++
pointsStars(num_mov);
moves_player.html(num_mov);
}
// if all cards are matched the game end
if (match === 8) {
pointsStars(num_mov);
let points = pointsStars(num_mov).points;
clearInterval(time);
setTimeout(()=> {
finish(num_mov, points);
}, 500);
}
});
};
// Restart the game
// screen modal for choose options
restart.bind("click" ,()=>{
swal({
allowEscapeKey: false,
title: 'Are you sure?',
text: "Your progress will be Lost!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#02ccba',
cancelButtonColor: '#f95c3c',
confirmButtonText: 'Yes, Restart Game!'
}).then((isConfirm)=> {
if (isConfirm) {
click_player = 0;
clearInterval(time);
start();
}
})
});
// call for start the game
start()
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/fondo.jpg'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: "Times New Roman" , sans-serif;
font-weight: 400;
font-size: 3em;
}
h1:hover{
color:#1240C3;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #55C3 0%, #813F 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 50px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card:nth-child(4n) {
margin: 0 0 15px 0;
}
.deck .card:nth-child(n+13) {
margin: 0 30px 0 0;
}
.deck .card:nth-child(n+13):nth-child(4n) {
margin: 0;
}
.deck .card:hover{
background-color: #736868;
border: 1px solid white;
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
-webkit-transform: rotateY(0);
transform: rotateY(0);
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
-webkit-transform: rotateY(0);
transform: rotateY(0);
font-size: 33px;
}
.deck .card.notmatch {
background: #f95c3c;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 650px;
margin-bottom: 10px;
}
.score-panel .stars_game {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 4px 0;
}
.score-panel .stars_game ul{
margin-left: 0px;
}
.score-panel .stars_game li {
list-style: none;
display: inline-block;
color:#4B9EEB;
font-size: 20px;
}
.score-panel .time-play{
display: inline-block;
margin-left:110px;
font-size: 20px;
}
.score-panel .time-pass{
display: inline-block;
}
.score-panel .restart {
display: inline-block;
margin-left: 160px;
cursor: pointer;
font-size: 20px;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Coda'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/sweetalert2/3.0.3/sweetalert2.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1><span><img src="img/brain.png" alt="brain" width="60px"></span>MEMORY GAME</h1>
</header>
<div class="score-panel">
<ul class="stars_game" title="Stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves_player">0</span> Moves
<div class="time-play" title="Time">
<div class="time-pass">
<i class="fa fa-clock-o"></i>
<h4 class="time-pass">Time: <span class="clock_game" title="">0:00</span></h4>
</div>
</div>
<div class="restart" title="Restart">
<i class="fa fa-repeat"></i>
</div>
</div>
<div>
<ul class="deck"></ul>
</div>
</div>
<script src="js/app.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/sweetalert2/3.0.3/sweetalert2.min.js'></script>
</body>
</html>