En este tutorial vamos a hacer un juego de tablero donde necesitaremos saber poner en practica lo que sabemos de HTML, CSS y Javascript.

El juego es sencillo. Simplemente tienes que conseguir que todos los números de cada casilla marquen 0.

Comenzaremos creando el esqueleto básico de HTML. Para ello asumiremos que vamos a hacer un tablero de 3 filas y 3 columnas. Cada celda deberá ser un botón:

Código
Previsualización
<html>
  <head>
    <title>Mi primer Juego</title>
  </head>

  <body>
    <div>
      <button>3</button>
      <button>3</button>
      <button>3</button>

      <button>3</button>
      <button>3</button>
      <button>3</button>

      <button>3</button>
      <button>3</button>
      <button>3</button>
    </div>
  </body>
</html>

Los botones por defecto se comportan en linea cuando se posicionan. Añadiremos ahora un fichero de CSS para unos estilos básicos:

HTML
CSS
Previsualización
<html>
  <head>
    <title>Mi primer Juego</title>
    <link href="./styles.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="game">
      <button class="cell">3</button>
      <button class="cell">3</button>
      <button class="cell">3</button>

      <button class="cell">3</button>
      <button class="cell">3</button>
      <button class="cell">3</button>

      <button class="cell">3</button>
      <button class="cell">3</button>
      <button class="cell">3</button>
    </div>
  </body>
</html>

Hemos introducidos dos conceptos nuevos y que son muy útiles en CSS:

Variables de CSS

Las variables de CSS son relativamente nuevas, aunque su adopción ya es total tanto por los navegadores como por la comunidad. Todas las variables de CSS tienen que empezar igual: con --. Las variables de CSS tienen un scope muy definido. Al definir una variable sobre una clase, esta afectará al elemento de HTML que use esa variable y todos sus hijos.

Las variables definidas sobre :root se aplican al elemento raíz del fichero, es decir al HTML. Por tal razón son globales.

CSS grid

A parte de en línea y en bloque, CSS nos permite cambiar las propiedades de como se comporta la caja de un elemento con el resto y con lo que continue. Los sistemas mas utilizados por su potencia al final son flex y grid.

.game {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-auto-rows: 100px;
}

Cambiamos el tipo de caja utilizando la propiedad display. Definimos cuantas y de que tamaño queremos las columnas con grid-template-columns: 100px 100px 100px;. En este caso 3 columnas de 100px cada una. En vez de hacer lo mismo para las filas se puede indicar que para las filas de manera automática las cree de un tamaño de 100px con la propiedad grid-auto-rows: 100px;.

info

El sistema de grid es muy completo y complejo. Esto no es más que una introducción básica a como funciona. En vez grid-template-columns: 100px 100px 100px; podríamos usar la siguiente abreviación: grid-template-columns: repeat(3, 100px);.

Volviendo al juego. La solución aplicada ahora mismo tiene una limitación. La primera es que está limitada a un tablero de 3x3. La segunda es que cada celda tiene un tamaño definido de 100px - 100px y según el tamaño del juego puede no encajar bien en pantallas pequeñas.

Para solucionar esto, necesitamos Javascript:

HTML
JS
CSS
Previsualización
<html>
<head>
  <meta charset="utf-8">
  <link href="./styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="game" id="game"></div> 
  <script src="./script.js"></script>
</body>
</html>

Hemos eliminado los botones del HTML. Obteniendo el div que los continue con Javascript podemos crear tantos botones como queramos utilizando un bucle for.

El cambio más importante, es que tenemos que comunicar a CSS cuantas columnas tenemos para crear el grid. Desde Javascript podemos crear propiedades facilmente:

game.style.setProperty('--dynamic-columns', columns)

En CSS tendremos la variable y podremos usarla como queramos:

.game {
  display: grid;
  grid-template-columns: repeat(var(--dynamic-columns), calc(75vh / var(--dynamic-columns)));
  grid-auto-rows: calc(75vh / var(--dynamic-columns));
}
info

calc nos permite hacer cálculos matemáticos con CSS. En este caso estamos dividiendo el 75% de la altura del viewport entre el número de columnas definidas en JS. De esta forma conseguimos que el tablero siempre mida lo mismo independientemente del número de celdas.

Te invito a que juegues con el CSS y el sistema de columnas y rows para aprender e interiorizar su funcionamiento. En el próximo tutorial continuaremos dando forma al código javascript para terminar el juego.