lunes, 12 de septiembre de 2016

04. Juego tres en raya, reglas del juego

En el video se muestra como crear las reglas basicas para el juego.



El codigo 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/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 es:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
//jugador
var jugador=1;
var gana=0;
var fin=false;
function SeleccionaCelda(x,y){
    if(jugador==1){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue");   
    comprobar(x,y,jugador);
    jugador=2;
    } else {
    tablero[x][y]=2; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"pink");
    comprobar(x,y,jugador);
    jugador=1;   
    }
    if(!fin){
        alert("Turno del jugador "+jugador);
    }
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        alert("Casilla ocupada");
    } else if(fin){
        alert("Se acabo la partida");
    } else {
    SeleccionaCelda(x,y);
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
    //pulsar casilla al azar
    x=Math.round(Math.random()*2);
    y=Math.round(Math.random()*2);
    SeleccionaCelda(x,y);  
}
ejecutar();

El codigo de juego.js es:

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");
        fin=true;
    }else if(gana==2){
        alert("Gana el jugador 2");
        fin=true;
    }
}
En este ultimo codigo es donde se comprueba si se ha logrado el tres en raya.
Espero os sea util, gracias.

No hay comentarios:

Publicar un comentario