Publicado el Deja un comentario

07. Juego tres en raya, activar boton partida y terminacion

En este video activo el boton de volver a jugar y preparamos el codigo para que el juego este completamente operativo.

El codigo HTML queda asi:

<!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–>
<p id=”mensaje”></p>
<p id=”boton” onClick=”jugarOtraVez()”></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src=”js/tablero.js”></script>
<script src=”js/juego.js”></script>
<script src=”js/cronometro.js”></script>
<script src=”js/ejecutar.js”></script>
</body>
</html>

El codigo de ejecutar.js queda asi:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
var color;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function jugarOtraVez(){
    jugador=1;
    gana=0;
    fin=null;
    casillapte=9;
    Mensaje.style.display=”none”;
    textoBoton.style.display=”none”;

    ejecutar();
}
function SeleccionaCelda(x,y,jugador){
   
    tablero[x][y]=jugador; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,”blue”,jugador);   
    casillapte–;
    comprobar(x,y,jugador);
}
function tiraJugador2(){
    jugador=2;
    x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    while((tablero[x2][y2]==1) ||( tablero[x2][y2]==2)){
        x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    }
    if(fin){
        mensajeFin();
    }else{
        SeleccionaCelda(x2,y2,jugador);
    }
    jugador=1;
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        //alert(“Casilla ocupada”);
        mensajeCasilla();
    } else if(fin){
        //alert(“Se acabo la partida”);
        mensajeFin();
    } else {
        jugador=1;
    SeleccionaCelda(x,y,jugador);
    if(casillapte>0){
        jugador=2;
        tiraJugador2();
    }
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
color=”red”;   
    IniciarTablero(color);
 
}
ejecutar();

El codigo de tablero.js queda asi:

function IniciarTablero(color){
    for(i=0;i<3;i++){
        for(j=0;j<3;j++){
            tablero [i][j]=0;
            celda=document.getElementById(“c”+i+j);
            celda.style.background=color;
            celda.innerHTML=””;
        }
    }
}
function PintarCelda(x,y,color,jugador){
    //selecciona celda
    celda=document.getElementById(“c”+x+y);
    //ponemos color
    celda.style.background=color;
    if(jugador==1){
        celda.innerHTML=”<img src=’img/cruz.png’></img>”;
    }else {
        celda.innerHTML=”<img src=’img/circulo.png’></img>”;
    }
}

El codigo de juego.js queda asi:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        //alert(“Gana el jugador 1”);
        mensaje(gana);
        fin=true;
    }else if(gana==2){
        //alert(“Gana el jugador 2”);
        mensaje(gana);
        fin=true;
    }else if(casillapte==0){
        fin=true;
        gana=0;
        mensaje(gana);
    }
}
function mensaje(gana){
    if(gana!=0){
        textoMensaje=”Gana el jugador “+gana;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        texto=”Jugar Otra Vez”;
        textoBoton=document.getElementById(“boton”);
        textoBoton.style.display=”block”;
        textoBoton.innerHTML=texto;
       
    }else{
                textoMensaje=”Empate”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        texto=”Jugar Otra Vez”;
        textoBoton=document.getElementById(“boton”);
        textoBoton.style.display=”block”;
        textoBoton.innerHTML=texto;
    }
}
function mensajeFin(){
            textoMensaje=”Se acabo la partida”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function mensajeCasilla(){
            textoMensaje=”Casilla ocupada”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function Pausa(){
    segundos=0;
    tiempo=setInterval(function(){
        while(segundos<2){
            segundos++;
        }
        if(segundos==2){
            Mensaje.style.display=”none”;
        }
    },2000);
}

El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.

Please follow and like us:

Deja un comentario