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-->
<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 CSS es:
*{
margin:0 auto;
width:960px;
}
p{
color:red;
}
body{
background-color:#FAF8EF;
color:#776E65;
font-size:16px;
}
#tiempo{
padding:5px;
margin:2px;
border-radius:2px;
border-style:solid;
height:40px;
width:80px;
display:block;
}
#minutos{
padding:5px;
}
#segundos{
padding:5px;
}
#tablero .row{
padding:0px;
width:100%;
}
#tablero .row .celda{
margin:1px;
padding:0px;
height:80px;
width:80px;
display:inline-block;
position:relative;
border-style:solid;
}
#tablero .row .celda:hover {
background-color:blue;
}
#tablero .row .celda img {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
#mensaje{
float:left;
border-radius:10px;
border-style:solid;
display:none;
width:200px;
height:60px;
color:yellow;
background-color:red;
font-size:24px;
text-align:center;
}
#boton{
clear:both;
float:left;
border-radius:10px;
border-style:solid;
display:none;
width:70px;
height:60px;
padding:2px;
color:yellow;
background-color:red;
font-size:24px;
text-align:center;
}
.rojo {
background-color:red;
}
.amarillo{
background-color:yellow;
}
El codigo del archivo ejecutar.js es:
var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
//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",jugador);
comprobar(x,y,jugador);
jugador=2;
} else {
tablero[x][y]=2; //podra ser 2 por otro jugador
//pintamos la celda
PintarCelda(x,y,"pink",jugador);
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");
mensajeCasilla();
} else if(fin){
//alert("Se acabo la partida");
mensajeFin();
} 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 del archivo 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");
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);
}
Espero os sea util, gracias.
