El codigo HTML queda asi:
<!doctype html>El codigo de ejecutar.js queda asi:
<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>
var Total_segs;El codigo de tablero.js queda asi:
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();
function IniciarTablero(color){El codigo de juego.js queda asi:
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>";
}
}
function comprobar(x,y,jugador){El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
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);
}
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.
No hay comentarios:
Publicar un comentario