Cookie Clicker con HTML+CSS+Javascript (parte 5): Añadiendo icono y estilos

En esta parte vamos a añadir un icono al juego y aplicaremos los primeros estilos CSS. Esto nos permitirá personalizar el juego, haciéndolo visualmente más atractivo e interactivo, lo que ofrece una mejor experiencia para el jugador.

Icono de la aplicación

Puedes elegir cualquier imagen para el icono de tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificar el archivo «index.html»

Realizaremos las siguientes modificaciones sobre el fichero «index.html»:

  • Añadir un icono: El icono aparecerá en la pestaña del navegador, y posteriormente también lo utilizaremos como icono de aplicación cuando instalemos el fichero «apk» en nuestros dispositivos móviles. Utilizaremos la etiqueta <link> para enlazar el archivo de imagen.
  • Fichero con estilos CSS: Usamos un archivo externo con código CSS («style.css») para aplicar estilos a la página.
  • Clases CSS: Añadiremos las correspondientes clases para aplicar estilos específicos a cada caja. Utilizaremos el atributo class sobre cada bloque div:
    • caja-galleta: Caja que contiene la galleta sobre la que hacemos click para incrementar el contador.
    • caja-mejora: Cajas que activan cada una de las mejoras del juego.
    • caja-opciones: Caja que contendrá opciones como reiniciar el juego, o más adelante, exportar e importar el progreso.
<!DOCTYPE html>
<html lang="es">
<head>
    ...
    <link rel="icon" type="image/png" href="img/icono.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Cookie Clicker</h1>

    <div class="caja-galleta" onclick="incrementarContador()">
        ...
    </div>

    <div class="caja-mejora" onclick="comprarMejora('galletasExtra')">
        ...
    </div>
 
    <div class="caja-opciones">
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>
 
    ...
</body>

Archivo «style.css»

Crearemos el fichero «style.css» que contendrá todos los estilos que utilizaremos para personalizar nuestro juego:

  • Estilos básicos: Centramos el contenido, aplicamos una fuente legible y hacemos que el contador de galletas destaque.
  • Estilos avanzados: Añadiremos bordes, sombras, y efectos de clic para que las cajas sean más interactivas y agradables visualmente.
body {
  text-align: center; /* Centra el contenido horizontalmente */
  font-family: Arial, sans-serif; /* Fuente básica para mantener legibilidad */
}

#contador {
  color: #991919; /* Rojo oscuro para destacar el contador, simboliza "galletas acumuladas" */
  font-weight: bold; /* El texto en negrita ayuda a que sea más legible y destaque */
  font-size: 250%; /* Tamaño grande para captar la atención del usuario */
}

/* Agrupación de estilos compartidos para cajas de galleta, mejora y opciones */
.caja-galleta, .caja-mejora, .caja-opciones {
  border-radius: 10px; /* Consistencia visual en los bordes redondeados */
  box-shadow: 2px 2px 10px; /* Sombra para simular profundidad */
  padding: 10px; /* Espacio interno suficiente para evitar que el contenido quede pegado al borde */
  margin: 20px 10px; /* Espaciado que separa visualmente las cajas, sin sobrecargar el espacio */
}

.caja-galleta {
  border: 2px solid #7837d4; /* Borde morado, un color alegre que representa el clic principal del juego */
  cursor: pointer; /* Indica que es interactivo */
}

.caja-galleta:active {
  transform: scale(0.98); /* Efecto visual de que la caja está siendo presionada */
  box-shadow: 2px 2px 5px; /* Sombra más pequeña para dar sensación de "presión" */
}

.caja-mejora {
  border: 2px solid #d4af37; /* Borde dorado para simbolizar un "logro" o mejora premium */
  cursor: pointer; /* Interactivo */
}

.caja-mejora:active {
  transform: scale(0.98); /* Efecto de clic */
  box-shadow: 2px 2px 5px; /* Sombra reducida al hacer clic */
}

.caja-opciones {
  border: 2px solid #d45e37; /* Borde naranja, un color cálido para representar acciones de configuración */
  padding: 20px; /* Mayor espacio interno para acomodar los botones y opciones de manera cómoda */
}