good afternoon I'm doing a game but I'm having a problem, at the end of the game I open a modal window made in bootbox.js, which shows me the number of stars, movements and time, but with respect to time I know how to place it so that it is equal to the time the user took to make the game, "the time that is taking place appears above the board, I want the time when the game ends to show me the time when the clock stopped
as you see the time appears undefined
THIS IS THE CODE // what I need is that at the end of the game it appears in the modal window the same clock time as above the board that shows it to me in the swal of the function 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>