Vemos en este video como posicionar distintos parrafos de nuestra web, metiendolos en "cajas", como se visualiza el parrafo si la caja donde esta contenido es de menor dimension al contenido en si, tambien vemos como sobreponemos unos encima de otros y los desplazamos a la posicion que deseamos.
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>"; } }
}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.
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();
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();
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();
En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
Espero os sea util, gracias.
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.
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();
