Juego de Topos

Descripción

Este proyecto es una versión web del clásico minijuego de golpear topos, desarrollada con HTML, CSS y JavaScript.

El objetivo del jugador es hacer clic sobre los topos que aparecen en diferentes agujeros antes de que desaparezcan. Para darle mayor variedad y estrategia, el juego incluye tres tipos de topos:

• Topo normal: suma 1 punto
• Topo dorado: suma 3 puntos
• Topo trampa: resta 1 punto

Objetivo del juego

El jugador debe reaccionar rápidamente y golpear a los topos correctos para conseguir la mayor cantidad de puntos posible dentro del tiempo límite.

Durante la partida:

• aparecen topos en posiciones aleatorias
• cada topo tiene un valor distinto
• el jugador debe decidir rápidamente si conviene golpearlo o no
• al finalizar el tiempo, se muestra el puntaje final

Tecnologías utilizadas

• HTML5 
• CSS3 
• JavaScript 

Explicación del archivo HTML

El archivo index.html contiene la estructura principal del juego. Su función es organizar visualmente todos los elementos que el jugador necesita ver e interactuar durante la partida.

Elementos principales del HTML

Encabezado del juego

• título del proyecto
• subtítulo descriptivo
• panel de estadísticas

Panel de estadísticas

• puntaje actual
• tiempo restante
• mejor marca de la sesión

Leyenda de tipos de topo

• topo normal
• topo dorado
• topo trampa

Zona central del juego

• mensaje de estado
• botones de control
• tablero con agujeros interactivos

Tablero

• conjunto de agujeros donde aparecen los topos
• cada agujero funciona como un botón clicable

El HTML sirve como base para que JavaScript manipule dinámicamente la aparición y desaparición de los topos.

Explicación del archivo CSS

El archivo style.css define toda la apariencia visual del proyecto.

Qué controla el CSS

• fondo general del juego
• paneles de información
• tablero de agujeros
• apariencia de cada agujero
• diseño visual de los topos
• colores diferenciados según el tipo de topo
• animaciones simples de aparición y golpe

Objetivo visual

Se buscó una presentación clara, amigable y legible, con una estética caricaturesca que recuerda a los minijuegos clásicos de reacción.

Explicación del archivo JavaScript

El archivo script.js contiene toda la lógica principal del juego.

Funciones más importantes del JavaScript

1. Inicio de la partida

Cuando el jugador pulsa el botón de inicio:

• se reinicia el puntaje
• se reinicia el tiempo
• se activa el estado de juego
• comienza la aparición aleatoria de topos

2. Aparición aleatoria de topos

El juego elige de manera aleatoria:

• en qué agujero aparecerá un topo
• qué tipo de topo aparecerá

Esto permite que cada partida sea distinta.

3. Tipos de topo

Cada topo tiene un comportamiento de puntaje diferente:

• el topo normal suma 1 punto
• el topo dorado suma 3 puntos
• el topo trampa resta 1 punto

4. Detección del clic

Cuando el jugador hace clic sobre un agujero:

• el sistema comprueba si hay un topo activo
• valida si ese topo ya fue golpeado
• aplica el puntaje correspondiente
• actualiza el mensaje en pantalla

5. Temporizador

El juego mantiene una cuenta regresiva que define la duración total de la partida. Cuando el tiempo llega a cero:

• termina la partida
• se detiene la aparición de topos
• se calcula el resultado final

6. Mejor marca

Durante la sesión, el juego registra el mejor puntaje conseguido para que el jugador tenga una referencia de su progreso.

7. Reinicio

El sistema permite reiniciar la partida para comenzar desde cero sin necesidad de recargar la página.

Flujo general del juego

1. El jugador pulsa el botón para iniciar.
2. Comienza el temporizador.
3. Los topos aparecen en posiciones aleatorias.
4. El jugador hace clic sobre ellos para sumar o perder puntos.
5. El tiempo continúa bajando hasta llegar a cero.
6. El juego termina y muestra el puntaje final.
7. El jugador puede reiniciar la partida.

Estado actual del proyecto

Actualmente el juego incluye:

• tablero funcional de agujeros
• aparición aleatoria de topos
• tres tipos de topo con distintos puntajes
• contador de tiempo
• puntaje actual
• mejor marca de la sesión
• reinicio de partida

Posibles mejoras futuras

Estas son algunas extensiones posibles del proyecto:

• agregar sonidos al aparecer y golpear topos
• incluir varios topos simultáneos
• aumentar la velocidad progresivamente
• agregar combos por racha de aciertos
• guardar la mejor marca en localStorage
• agregar efectos visuales al finalizar la partida
• incluir niveles o modos de dificultad

Ejecución

Para jugarlo, basta con abrir el archivo index.html en un navegador compatible.

No requiere instalación ni dependencias externas.