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:

Deja un comentario