domingo, 11 de septiembre de 2016

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,


2 comentarios: