Publicado el Deja un comentario

07. Juego tres en raya, activar boton partida y terminacion

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.

Please follow and like us:
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:
Publicado el Deja un comentario

05. Juego tres en raya, imagen tiro jugador

Insertamos codigo para dibujar imagen dependiendo del jugador que actua.
Como se ve en el video hay que tener cuidado al poner la ruta a la carpeta donde estan las imagenes.

El archivo tablero.js queda de la siguiente forma:

function IniciarTablero(){
    for(i=0;i<2;i++){
        for(j=0;j<2;j++){
            tablero [i][j]=0;
        }
    }
}
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 archivo ejecutar.js queda asi:



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”,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”);
    } 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();

Espero sea util, gracias.

Please follow and like us:
Publicado el Deja un comentario

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.

Please follow and like us:
Publicado el 1 comentario

03. Juego tres en raya, preparar tablero

En este video se indica como preparar el tablero, seleccionar casilla tanto por el usuario como por el sistema al azar.
En el video hay un error que se arregla en el mismo video por lo que no he querido quitarlo para que se vea como buscarlo y solucionarlo, ya que muchos errores que podemos cometer seran por escribir mal alguna variable, tal y como pasa en el video.

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/cronometro.js”></script>
<script src=”js/ejecutar.js”></script>
</body>
</html>

El codigo de tablero.js es:

function IniciarTablero(){
    for(i=0;i<2;i++){
        for(j=0;j<2;j++){
            tablero [i][j]=0;
        }
    }
}
function PintarCelda(x,y,color){
    //selecciona celda
    celda=document.getElementById(“c”+x+y);
    //ponemos color
    celda.style.background=color;
}

//crear funcion pintaimagen

El codigo de ejecutar.js es:


var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
function SeleccionaCelda(x,y){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,”blue”);
}
function RevisarCelda(x,y){
    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();

Espero os sea util, gracias,

Please follow and like us:
Publicado el Deja un comentario

02. Juego tres en raya, cronometro

En este video se explica como poner en marcha el cronometro del juego.

El codigo del archivo cronometro.js es:


function LimpiaReloj(){
    //reset cronometro
    clearInterval(cronometro);
}
function IniciaReloj(){
    //iniciar reloj
    s=document.getElementById(“segundos”);
    m=document.getElementById(“minutos”);
    segundos=0;
    cronometro=setInterval(function(){
        segundos++;//incremento segundos
        segs=segundos;
        mins=0;
        while(segs>=60){
            mins++;
            segs-=60;
        }
        //imprimimos min y segs
        if(mins<10)m.innerHTML=”0″+mins;
        else m.innerHTML=mins;
        if(segs<10)s.innerHTML=”0″+segs;
        else s.innerHTML=segs;
        Total_segs=segs;
        Total_mins=mins;
    },1000);
    }

El codigo del archivo ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
function ejecutar(){
    LimpiaReloj();
    IniciaReloj();
}
ejecutar();

El codigo del archivo index.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/cronometro.js”></script>
<script src=”js/ejecutar.js”></script>
</body>
</html>

Espero os sea util, gracias.

Please follow and like us:
Publicado el Deja un comentario

01. Juego tres en raya, creacion HTML – CSS

En estos videos explico como realizar un juego sencillo mediante HTML, CSS y JAVASCRIPT.

El codigo del archivo index.html 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>
</body>
</html>

El codigo de la hoja CSS, estilos.css es el siguiente:

*{
    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;
}
.rojo {
    background-color:red;
}
.amarillo{
    background-color:yellow;
}

Espero os sea util, no olvideis practicar.
Hasta el proximo video, gracias.

Please follow and like us:
Publicado el Deja un comentario

Tres en raya

Publicado juego de tres en raya con nivel de dificultad bajo y opcion de uno o dos jugadores, ideal para que los pequeños se adentren en este tipo de juegos.
Podeis descargar el juego aqui.
Espero os guste. Gracias.

Please follow and like us: