miércoles, 7 de septiembre de 2016

02. Juego tres en raya, cronometro

En este video se explica como poner en marcha el cronometro del juego.



El codigo del archivo cronometro.js es:

function LimpiaReloj(){
    //reset cronometro
    clearInterval(cronometro);
}
function IniciaReloj(){
    //iniciar reloj
    s=document.getElementById("segundos");
    m=document.getElementById("minutos");
    segundos=0;
    cronometro=setInterval(function(){
        segundos++;//incremento segundos
        segs=segundos;
        mins=0;
        while(segs>=60){
            mins++;
            segs-=60;
        }
        //imprimimos min y segs
        if(mins<10)m.innerHTML="0"+mins;
        else m.innerHTML=mins;
        if(segs<10)s.innerHTML="0"+segs;
        else s.innerHTML=segs;
        Total_segs=segs;
        Total_mins=mins;
    },1000);
    }

El codigo del archivo ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
function ejecutar(){
    LimpiaReloj();
    IniciaReloj();
}
ejecutar();

El codigo del archivo index.html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>

Espero os sea util, gracias.

No hay comentarios:

Publicar un comentario