Publicado el Deja un comentario

06. Juego tres en raya, mensajes

En este video se preparan los mensajes que utilizaremos en 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–>
<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.

Please follow and like us:

Deja una respuesta