1

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 FOTO DE LA VENTANA MODAL

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>

1 respuesta 1

1

¡Hola! Tu código tiene 2 problemas:

$(".clock_game").text(time_visible);

}, 750);

Antes de esa parte hay un 1, que genera un error.

text: 'With ' + num_mov + ' Moves and ' + message + "<br>"+ "Time: ",

Esta parte cambiala por:

text: 'With ' + num_mov + ' Moves and ' + message + "<br>"+ "Time: " +$(".clock_game").text(),

Espero te sirva mi respuesta, ¡Saludos y éxito con tu juego!

1
  • ohh sebastian muchisimas gracias , llevaba mucho tiempo en este error y no podia , si me funciono amigo gracias enserio Commented el 6 ene. 2018 a las 0:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.