Mes: octubre 2024

Instant buttons con HTML+CSS+Javascript

En esta unidad crearemos una aplicación con una galería interactiva de botones de audio, diseñada para reproducir sonidos de Halloween y Navidad. La interfaz está organizada en dos tablas temáticas: una para Halloween y otra para Navidad, cada una con imágenes representativas que, al hacer clic, activan la reproducción de un sonido específico.

Imágenes y sonidos

A continuación se muestran posibles imágenes y audios que puedes usar. Además, puedes hacer clic en estos enlaces para descargarte un zip con todas las imágenes y todos los sonidos.

Halloween

Navidad

Fichero «index.html»

El archivo index.html define la estructura básica de la aplicación, que es una galería de botones de audio con imágenes interactivas. A continuación explicamos cada parte del archivo.

Cabecera (<head>)

El código que se encuentra en esta primera sección del archivo se encarga de lo siguiente:

  • Define el título de la página («Instant buttons»).
  • Incluye enlaces a fuentes personalizadas de Google Fonts:
    • Creepster: utilizada para el tema de Halloween.
    • Mountains of Christmas: utilizada para el tema de Navidad.
  • Vincula la hoja de estilos style.css, donde están los estilos para el fondo, las fuentes, y los efectos visuales de las imágenes.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instant buttons</title>

    <!-- Fuentes personalizadas desde Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Mountains+of+Christmas:wght@400;700&display=swap" rel="stylesheet">

    <!-- Archivo de estilos CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    ...
</body>
</html>

Cuerpo de la página (<body>)

Dentro del cuerpo, se encuentran dos tablas temáticas: una de Halloween y otra de Navidad.

Tabla de Halloween

  • Utiliza la clase halloween para aplicar estilos específicos desde style.css, como el color rojo y la fuente Creepster.
  • Cada celda (<td>) contiene una imagen y tiene un evento onclick que ejecuta la función play con dos parámetros: el nombre del archivo de sonido y el volumen de reproducción.
  • Los archivos de imagen se encuentran en una carpeta llamada img y están nombrados de forma consecutiva para cada botón (por ejemplo, halloween1.webp, halloween2.webp, etc.).
<table class="halloween">
    <caption>Halloween</caption>
    <!-- Fila 1 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween1', 0.5)"><img src="img/halloween1.webp"></td>
        <td onclick="play('halloween2', 0.7)"><img src="img/halloween2.webp"></td>
        <td onclick="play('halloween3', 0.7)"><img src="img/halloween3.webp"></td>
    </tr>
    <!-- Fila 2 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween4', 0.7)"><img src="img/halloween4.webp"></td>
        <td onclick="play('halloween5', 0.7)"><img src="img/halloween5.webp"></td>
        <td onclick="play('halloween6', 0.7)"><img src="img/halloween6.webp"></td>
    </tr>
    <!-- Fila 3 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween7', 0.7)"><img src="img/halloween7.webp"></td>
        <td onclick="play('halloween8', 1.0)"><img src="img/halloween8.webp"></td>
        <td onclick="play('halloween9', 1.0)"><img src="img/halloween9.webp"></td>
    </tr>
</table>

Tabla de Navidad

  • Sigue la misma estructura que la tabla de Halloween, pero está estilizada con la clase christmas, que aplica un color azul y la fuente Mountains of Christmas.
  • Las imágenes de Navidad también están organizadas en una cuadrícula de tres filas y tres columnas, cada una con un archivo de audio distinto.
<table class="christmas">
    <caption>Christmas</caption>
    <tr>
        <td onclick="play('christmas1', 0.7)"><img src="img/christmas1.webp"></td>
        <td onclick="play('christmas2', 1.0)"><img src="img/christmas2.webp"></td>
        <td onclick="play('christmas3', 0.7)"><img src="img/christmas3.webp"></td>
    </tr>
    <tr>
        <td onclick="play('christmas4', 0.7)"><img src="img/christmas4.webp"></td>
        <td onclick="play('christmas5', 0.7)"><img src="img/christmas5.webp"></td>
        <td onclick="play('christmas6', 1.0)"><img src="img/christmas6.webp"></td>
    </tr>
    <tr>
        <td onclick="play('christmas7', 0.7)"><img src="img/christmas7.webp"></td>
        <td onclick="play('christmas8', 1.0)"><img src="img/christmas8.webp"></td>
        <td onclick="play('christmas9', 1.0)"><img src="img/christmas9.webp"></td>
    </tr>
</table>

Elemento de audio y JavaScript

Antes de cerrar el elemento <body> de nuestra página web, deberemos incluir un elemento <audio> que utilizaremos para reproducir los sonidos, y también deberemos enlazar el fichero con el código JavaScript: 

...
<body>
    ...
    <audio id="player"></audio>
    <script src="script.js"></script>
</body>
</html>
  • Elemento <audio>: Este elemento, con el id="player", se usa para reproducir los archivos de sonido. Al hacer clic en cada imagen, la función JavaScript play modifica su fuente (src) y volumen, y luego reproduce el audio seleccionado.
  • JavaScript: Al final del archivo se carga el script script.js, que contiene la función play para controlar la reproducción de audio cuando se hace clic en una imagen.

En resumen…

El archivo index.html estructura la página, definiendo tablas temáticas interactivas para reproducir sonidos festivos de Halloween y Navidad mediante el uso de JavaScript y estilos en CSS para mejorar la experiencia visual y sonora.

El archivo script.js es un código JavaScript sencillo que controla la reproducción de sonidos al hacer clic en las imágenes de la galería. A continuación, explicamos la función principal de este archivo.

Fichero «script.js»

Nuestra aplicación de instant buttons utiliza sólo una sencilla función javascript para reproducir los audios con ajuste de volumen incluido. A continuación se muestra todo el código necesario agrupado en la función play:

function play(soundName, soundVolume) {
    // Obtener el elemento de audio
    const player = document.getElementById("player");

    // Cambiar el archivo de audio a reproducir
    player.src = `audio/${soundName}.mp3`;

    // Cambiar el volumen del audio
    player.volume = soundVolume;

    // Reproducir el audio
    player.play();
}

Explicación detallada de la función play

Esta función play recibe dos parámetros, soundName y soundVolume, y se ejecuta cada vez que se hace clic en una de las imágenes en el archivo index.html. La función realiza los siguientes pasos:

  1. Obtener el elemento de audio:
   const player = document.getElementById("player");

Utiliza document.getElementById("player") para obtener el elemento de audio <audio id="player"> en el archivo HTML. Este elemento de audio es el que realmente reproduce los sonidos.

  1. Cambiar el archivo de audio:
   player.src = `audio/${soundName}.mp3`;

Modifica la propiedad src del elemento player para cambiar el archivo de audio que se va a reproducir. La función construye la ruta del archivo de audio usando el nombre del archivo pasado como parámetro soundName (por ejemplo, halloween1, christmas2, etc.). Así, si soundName es halloween1, la función buscará y cargará el archivo audio/halloween1.mp3.

  1. Ajustar el volumen:
   player.volume = soundVolume;

Cambia el volumen de reproducción del audio estableciendo la propiedad volume del elemento player. Este valor se toma del parámetro soundVolume, que es un número entre 0 (silencio) y 1 (volumen máximo). Por ejemplo, algunos sonidos tienen un volumen de 0.7 y otros de 1.0 en función de la experiencia que se quiera dar al usuario.

  1. Reproducir el sonido:
   player.play();

Finalmente, llama al método play() del elemento player para iniciar la reproducción del archivo de audio con el archivo y volumen especificados.

En resumen…

La función play es un controlador de reproducción de sonido que:

  • Cambia el archivo de audio a reproducir.
  • Ajusta el volumen de la reproducción.
  • Inicia la reproducción del archivo de audio.

Esta función permite que, al hacer clic en las imágenes de la galería, cada imagen reproduzca un sonido específico asociado a la festividad (Halloween o Navidad) con el volumen predefinido en la función onclick del HTML.

Fichero «style.css»

El archivo style.css contiene los estilos visuales de la aplicación, desde el fondo animado hasta los efectos visuales para cada imagen y tabla temática. A continuación, explicamos cada sección del código CSS.

Fondo animado con gradiente

body {
    background: linear-gradient(90deg, #1a1a1a, #003c5a, #0086c9, #9001d7);
    background-size: 200% 100%;
    animation: aurora 2.5s infinite alternate;
}
  • Gradiente de colores: El fondo de la página es un gradiente lineal que pasa por varios tonos oscuros y fríos (negro, azul oscuro, azul brillante y morado). Esto crea un ambiente visual similar a una aurora boreal.
  • Tamaño del fondo: background-size: 200% 100%; hace que el gradiente se duplique en ancho, lo que permite que el fondo se mueva de lado a lado.
  • Animación: animation: aurora 2.5s infinite alternate; activa una animación de ida y vuelta cada 2.5 segundos, creando el efecto de movimiento en el fondo.
@keyframes aurora {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
  • Animación aurora: Define una transición que mueve el gradiente de izquierda a derecha en el 100% del ancho, y luego vuelve al inicio, lo que da el efecto de aurora en movimiento.

Estilos para las imágenes de los botones

img {
    width: 100%;
    max-width: 250px;
    transition: 0.5s ease;
}

img:active {
    transform: scale(1.5);
    filter: brightness(0.75) contrast(1.25);
    box-shadow: 0 0 20px black;
}
  • Ancho de las imágenes: width: 100% asegura que las imágenes ocupen todo el ancho de la celda. max-width: 250px limita el tamaño máximo de las imágenes en pantallas grandes.
  • Transición suave: transition: 0.5s ease aplica una transición suave al hacer clic en las imágenes.
  • Efecto al hacer clic (:active): Cuando una imagen es presionada, se agranda un 50% (transform: scale(1.5)), se oscurece ligeramente (brightness(0.75)) y aumenta el contraste (contrast(1.25)), además de aplicar una sombra negra para resaltar el efecto de interacción.

Estilos para las tablas de Halloween y Navidad

Cada tabla tiene estilos específicos que incluyen una fuente, color y sombra para dar un ambiente acorde a la festividad.

Tabla de Halloween

.halloween {
    font-size: 250%;
    color: red;
    font-family: 'Creepster', cursive;
    text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;
}
  • Fuente: La tabla de Halloween usa la fuente Creepster, que tiene un estilo tenebroso.
  • Color: El color del texto es rojo (color: red;).
  • Sombra de texto: Aplica una sombra oscura y difusa (text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;), dando un efecto de terror al texto.

Tabla de Navidad

.christmas {
    font-size: 250%;
    font-weight: bold;
    color: blue;
    font-family: 'Mountains of Christmas', cursive;
    text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;
}
  • Fuente: Utiliza Mountains of Christmas, que tiene un estilo festivo.
  • Color: El color del texto es azul (color: blue;).
  • Sombra de texto: Usa sombras suaves en azul claro y blanco (text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;) para dar un efecto festivo de brillo.

Estilos generales para las tablas

table {
    margin: auto;
}
  • Centrado de las tablas: La propiedad margin: auto; centra las tablas horizontalmente en la página.

En resumen…

Este archivo CSS define la estética de la aplicación:

  • Un fondo animado tipo aurora boreal.
  • Efectos interactivos para las imágenes de los botones.
  • Estilos específicos para cada tabla (Halloween y Navidad) con colores y fuentes temáticas.

Estos estilos ayudan a crear una experiencia visual inmersiva y coherente con cada festividad.

Ejercicios propuestos

Cambiar la orientación de la animación de fondo

Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal se produzca con un movimiento de arriba hacia abajo y viceversa. Para ello basta con que modifiques el ángulo del gradiente a 180 grados, el tamaño del fondo al doble de alto, y el porcentaje de la animación en el eje Y de 0% a 100%:

/* Fondo con gradiente animado vertical tipo aurora */
body {
    /* Cambiamos el ángulo del gradiente a 180 grados para que vaya de arriba hacia abajo */
    background: linear-gradient(180deg, #1a1a1a, #003c5a, #0086c9, #9001d7);
    /* Ajustamos el tamaño del fondo para que solo se duplique en altura */
    background-size: 100% 200%;
    /* Mantiene la misma animación */
    animation: aurora 2.5s infinite alternate;
}

/* Animación de gradiente tipo aurora en vertical */
@keyframes aurora {
    /* Fijamos la posición horizontal en 50% y animamos solo la posición vertical */
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

Animación de fondo radial

Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal sea de tipo radial con movimiento diagonal. Para ello basta con que definas el gradiente con radial-gradient(circle, ...), y luego dupliques el tamaño del fondo al doble de ancho y de alto, y en último lugar cambies los porcentajes de la animación en ambos ejes de 0% a 100%:

/* Fondo con gradiente animado tipo aurora */
body {
    /* Cambiamos a un gradiente radial para un efecto más llamativo */
    background: radial-gradient(circle, #1a1a1a, #003c5a, #0086c9, #9001d7);
    /* Ajustamos el tamaño del gradiente para que cubra más área */
    background-size: 200% 200%;
    /* Mantiene la misma animación */
    animation: aurora 2.5s infinite alternate;
}

/* Animación de gradiente tipo aurora */
@keyframes aurora {
    /* Modificamos la posición inicial y final para adaptarla al gradiente radial */
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

Diferentes colores de fondo

Prueba a cambiar los colores de la animación de fondo. Para ello solo debes cambiar los colores de la propiedad background dentro del selector body. Por ejemplo:

/* Fondo con gradiente animado tipo aurora de Halloween */
body {
    /* Usamos colores típicos de Halloween en el gradiente radial */
    background: radial-gradient(circle, black, purple, orange, darkred);
    ...
}
...

Utiliza tus propias imágenes y graba tus propios audios

Prueba a usar otras imágenes y otros audios. Puedes encontrar imágenes y audios gratuitos en los siguientes enlaces:

También puedes grabar tus audios e incluirlos directamente en la aplicación. Puedes utilizar tu propio móvil o alguna página web online similar a la siguiente:

Compilar la aplicación para móvil

Prueba a compilar la aplicación para móvil, y así podrás pulsar sobre las imágenes como si fueran botones. Puedes seguir las instrucciones detalladas aquí.

Ten en cuenta que el tamaño máximo para la aplicación en formato móvil es de 10MB, por lo que no podrás utilizar imágenes y audios demasiado grandes. Recomendamos el formato webp para imágenes y mp3 para audio. Puedes cambiar el formato o bajar la calidad de los ficheros con alguna herramienta online. Por ejemplo:

Imágenes:

Audios:

Añadir efecto de vibración al pulsar sobre cada imagen

Puedes añadir efecto de vibración muy fácilmente añadiendo la siguiente línea dentro de la función play del fichero script.js:

function play(soundName, soundVolume) {
    ...
    // Si la vibración está disponible (en el móvil por ejemplo), vibrar durante 100 ms
    if (navigator.vibrate) navigator.vibrate(100);
}

El resultado

En este enlace puedes probar esta versión de la aplicación instant buttons.

Cookie Clicker con HTML+CSS+Javascript (parte 10): Comprando fábricas

En esta parte del proyecto, vamos a añadir al juego la posibilidad de comprar Fábricas que produzcan más galletas para nosotros cada segundo sin tener que hacer clic.

Imagen para activar la mejora

Al pulsar sobre esta imagen activarás la mejora de las fábricas. Puedes elegir cualquier imagen para tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificaciones del fichero «index.html»

Vamos a añadir un div adicional a nuestro código html para poder activar la mejora. De esta forma, el jugador podrá comprar fábricas pulsando sobre la imagen. Por cada fábrica que adquiera el jugador, se generarán más galletas automáticamente cada segundo:

...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('fabricas')">
        <img src="img/fabrica.png" width="125">
        <div id="textoFabricas"></div>
    </div>
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de fabricas al objeto juego, con un precio inicial de 500 galletas. Cada fábrica comprada generará 20 galletas por segundo:

// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
    mejoras: {
        ...
        fabricas: { cantidad: 0, precio: 500, descripcion: "Fábricas que producen 20 galletas por segundo" } // Mejora de Fábricas
    }
}

Modificaciones del fichero «script.js»

Para conseguir que las fábricas produzcan galletas sin que tengamos que hacer clic, deberemos incrementar la cantidad de galletas de forma automática cada segundo. Para ello ya disponemos de la función «producirAutomaticamente()», que creamos en una unidad anterior, dentro del fichero «script.js». Añadiendo una sola línea a esta función podremos conseguir que por cada fábrica que hayamos comprado, consigamos 20 galletas más de forma automática cada segundo:

...

// Función para producir galletas automáticamente
// Se ejecuta cada segundo y suma galletas según las mejoras compradas
function producirAutomaticamente() {
    ...
    juego.galletas += juego.mejoras.fabricas.cantidad * 20;  // Suma las galletas por Fábricas
    guardarProgreso();  // Guarda el progreso automáticamente
}

Cookie Clicker con HTML+CSS+Javascript (parte 9): Comprando granjas

En esta parte del proyecto vamos a añadir al juego la posibilidad de comprar Granjas. De esta forma podremos conseguir más galletas cada segundo sin tener que hacer clic.

Imagen para activar la mejora

Al pulsar sobre esta imagen activarás la mejora de las granjas. Puedes elegir cualquier imagen para tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificaciones del fichero «index.html»

Vamos a añadir un div adicional a nuestro código html para poder activar la mejora. De esta forma, el jugador podrá comprar granjas pulsando sobre la imagen. Por cada granja que adquiera el jugador, se generarán más galletas automáticamente:

...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('granjas')">
        <img src="img/granja.png" width="125">
        <div id="textoGranjas"></div>
    </div>
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de granjas al objeto juego, con un precio inicial de 400 galletas por cada granja que compremos. Cada una de ellas generará 10 galletas por segundo:

// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
    mejoras: {
        ...
        granjas: { cantidad: 0, precio: 400, descripcion: "Granjas que producen 10 galletas por segundo" }, // Mejora de Granjas
    }
}

Modificaciones del fichero «script.js»

Para conseguir que las granjas produzcan galletas sin que tengamos que hacer clic, deberemos incrementar la cantidad de galletas de forma automática cada segundo. Para ello ya disponemos de la función «producirAutomaticamente()», que creamos en una unidad anterior, dentro del fichero «script.js». Añadiendo una sola línea a esta función podremos conseguir que por cada granja que hayamos comprado, consigamos 10 galletas más de forma automática cada segundo:

...

// Función para producir galletas automáticamente
// Se ejecuta cada segundo y suma galletas según las mejoras compradas
function producirAutomaticamente() {
    ...
    juego.galletas += juego.mejoras.granjas.cantidad * 10;  // Suma las galletas por Granjas
    guardarProgreso();  // Guarda el progreso automáticamente
}

Cookie Clicker con HTML+CSS+Javascript (parte 8): Comprando abuelas

En esta parte del proyecto, vamos a añadir al juego la posibilidad de comprar Abuelas que cocinen varias galletas para nosotros cada segundo. De esta forma podremos conseguir incrementar nuestra cantidad de galletas sin tener que hacer clic.

Imagen para activar la mejora

Al pulsar sobre esta imagen activarás la mejora de las abuelas. Puedes elegir cualquier imagen para tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificaciones del fichero «index.html»

Vamos a añadir un div adicional a nuestro código html para poder activar la mejora. De esta forma, el jugador podrá comprar abuelas pulsando sobre la imagen. Por cada abuela que adquiera el jugador, se generarán más galletas automáticamente por segundo:

...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('abuelas')">
        <img src="img/abuela.png" width="150">
        <div id="textoAbuelas"></div>
    </div>
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de abuelas al objeto juego, con un precio inicial de 300 galletas. Cada abuela comprada generará 5 galletas por segundo:

// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
    mejoras: {
        ...
        abuelas: { cantidad: 0, precio: 300, descripcion: "Abuelas que cocinan 5 galletas por segundo" }, // Mejora de Abuelas
    }
}

Modificaciones del fichero «script.js»

Para conseguir que las abuelas cocinen y produzcan galletas sin que tengamos que hacer clic, deberemos incrementar la cantidad de galletas de forma automática cada segundo. Para ello ya disponemos de la función «producirAutomaticamente()», que creamos en la unidad anterior, dentro del fichero «script.js». Añadiendo una sola línea a esta función podremos conseguir que por cada abuela que hayamos comprado, consigamos 5 galletas más de forma automática cada segundo:

...

// Función para producir galletas automáticamente
// Se ejecuta cada segundo y suma galletas según las mejoras compradas
function producirAutomaticamente() {
    ...
    juego.galletas += juego.mejoras.abuelas.cantidad * 5;  // Suma las galletas por Abuelas
    guardarProgreso();  // Guarda el progreso automáticamente
}