Escoge el Objeto Oculto

Descripción

Este proyecto es una versión web de un minijuego de seguimiento visual, desarrollada con HTML, CSS y JavaScript.

El objetivo del jugador es observar bajo qué vaso se encuentra un objeto oculto, seguir visualmente el movimiento de los vasos mientras se mezclan y, al final, elegir correctamente dónde quedó escondido.

En esta versión, el juego utiliza seis vasos distribuidos en dos filas de tres, lo que aumenta la complejidad visual y hace que el reto sea más interesante que una versión tradicional de tres vasos.

Objetivo del juego

El jugador debe identificar correctamente el vaso que contiene el objeto oculto después de una secuencia de movimientos.

Durante la partida:

• el objeto se muestra al inicio bajo uno de los vasos
• los vasos se levantan para revelar su posición inicial
• luego se mezclan mediante movimientos automáticos
• el jugador observa y sigue el recorrido
• al terminar la mezcla, debe elegir un vaso
• si acierta, gana la ronda
• si falla, pierde la ronda

El juego combina memoria visual, atención y reacción.

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 la escena, los vasos, el objeto oculto y la información de la partida.

Elementos principales del HTML

Encabezado del juego

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

Panel de estadísticas

• ronda actual
• cantidad de aciertos
• cantidad de fallos

Zona central de juego

• mensaje de estado
• área visual donde se ubican los vasos
• etiquetas de referencia para las posiciones

Vasos interactivos

• cada vaso está contenido dentro de un bloque individual
• cada uno incluye:
• el vaso visible
• el objeto oculto asociado
• un botón clicable para la elección del jugador

Panel de control

• botón para iniciar una nueva ronda

El HTML establece todos los elementos visuales del minijuego y deja la lógica y el movimiento en manos de JavaScript.

Explicación del archivo CSS

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

Qué controla el CSS

• fondo general y paneles del juego
• distribución de estadísticas
• área principal de juego
• apariencia de los vasos
• apariencia del objeto oculto
• elevación del vaso al mostrar el objeto
• posiciones visuales de los vasos en la cuadrícula
• animaciones de transición al mezclar
• estilos de mensajes y botones

Objetivo visual

Se buscó una interfaz clara y agradable, donde el jugador pudiera concentrarse en seguir el movimiento de los vasos.

La distribución en dos filas de tres vasos aumenta la complejidad y permite cruces:

• laterales
• verticales
• diagonales
• cruces largos

Esto hace que el juego tenga una lectura visual más rica que una versión básica.

Explicación del archivo JavaScript

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

Funciones más importantes del JavaScript

1. Definición de vasos y posiciones

El sistema trabaja con:

• una colección de vasos identificados individualmente
• un conjunto de posiciones visuales predefinidas
• una relación entre vaso real y posición visible

Esto permite separar el concepto de “vaso” del de “casilla visible”.

2. Selección del objeto oculto

En cada ronda:

• el objeto se asigna aleatoriamente a uno de los vasos
• el vaso correspondiente se levanta al inicio para mostrar dónde se encuentra

3. Vista previa inicial

Antes de comenzar la mezcla:

• el vaso correcto se levanta
• el objeto se muestra por un breve tiempo
• luego se oculta nuevamente

Esto da al jugador una oportunidad justa de memorizar la posición inicial.

4. Mezcla de vasos

El sistema ejecuta una secuencia de intercambios automáticos entre posiciones visuales.

Los movimientos pueden incluir:

• cambios laterales
• intercambios verticales
• cruces diagonales
• cruces largos entre esquinas o zonas opuestas

Esto permite un patrón de mezcla más complejo y entretenido.

5. Seguimiento del objeto

El objeto no queda asociado a una posición fija, sino al vaso real. Por eso, cuando los vasos se mueven:

• el objeto “viaja” con su vaso
• la lógica siempre mantiene coherencia entre posición visual y estado interno

6. Validación de elección

Cuando el jugador hace clic en un vaso:

• el sistema comprueba si eligió el vaso correcto
• si acertó, se suma una victoria
• si falló, se suma una derrota
• el vaso correcto se revela

7. Control de rondas

Cada vez que se pulsa el botón de nueva ronda:

• se restablecen las posiciones
• se elige un nuevo vaso con objeto oculto
• se ejecuta la secuencia de vista previa
• comienza una nueva mezcla

8. Actualización del marcador

El juego lleva registro de:

• ronda actual
• cantidad de aciertos
• cantidad de fallos

Esto permite que el jugador vea su rendimiento dentro de la sesión.

Flujo general del juego

1. Comienza una nueva ronda.
2. El sistema elige aleatoriamente un vaso con el objeto oculto.
3. El vaso correcto se levanta brevemente para mostrar el objeto.
4. Los vasos se mezclan automáticamente.
5. El jugador observa el recorrido.
6. Cuando la mezcla termina, el jugador elige un vaso.
7. El juego revela el resultado.
8. Se actualizan los marcadores y se puede iniciar otra ronda.

Estado actual del proyecto

Actualmente el juego incluye:

• seis vasos distribuidos en dos filas de tres
• objeto oculto asignado aleatoriamente
• vista previa inicial del objeto
• mezcla automática con diferentes tipos de cruces
• selección por clic del vaso final
• validación de acierto o fallo
• marcador de rondas, victorias y derrotas
• botón para iniciar una nueva ronda

Posibles mejoras futuras

Estas son algunas extensiones posibles del proyecto:

• aumentar la velocidad progresivamente
• añadir niveles de dificultad
• incluir distintos tipos de objetos ocultos
• agregar sonidos al mezclar o revelar
• incorporar animaciones curvas más elaboradas
• permitir límite de tiempo para elegir
• guardar estadísticas en localStorage
• incluir más vasos o configuraciones de tablero alternativas

Ejecución

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

No requiere instalación ni dependencias externas