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.
