El proyecto de realizar un juego de vestir un personaje, viene inspirado de la mano de la relación y juicios estéticos y de género que establecían deconocidos entorno a como percibían a la artista basándose en ideas preconcebidas de lo que convierte a una mujer en una mujer y a un hombre en un hombre.
Con referencias de los juegos online de vestir muñecas que llevan la idea de feminidad al máximo en su sentido estético, así como inspirado en las revistas analógicas de vestir muñecas que consistía en recortar prendas y colocarlas pegándolas en el modelo.
Usando también esas líneas de recorte con un doble sentido entorno al recorte de las prendas y a lo transformador de las prendas y del género desde un sentido volátil, performable e intercambiable y como se configura esto con la censura que se crea sobre determinadas prendas en relación a la expresión de género. Esto, unido a la idea de performance que trabajaba el artista y el carácter performático que tiene el género he querido representar esa conversación imaginaria que he realizado con ayuda de la IA que se establece entre la ropa que en este caso sería la parte visual y el juicio de género que se establece en torno a la identidad y expresión de género de una persona.
Muchos de los mensajes están sintetizados con un sentido mas reduccionista de lo que se daría en esas situaciones para no recaer en unos mensajes complejos o más academicazados y darle un sentido mas coloquial a la conversación y monótona que te haga de cierta forma acabar cansado del "feedback" que te da la máquina y acabar interiorizando el poco sentido de los mensajes.
También propuse a la IA que me dijese frases que podría haber pronunciado Claud Cahun o un militar nazi cuando se encontrara a Claud Cahun vestida de a.nciana, poniendo en contexto a la IA de la situación.
TIME LAPSE VIDEO
Video de como creo el personaje y las prendas inspirandome en imágenes del personaje como muñeco de lo que sería Claud Cahun interpretado por la IA
Así como me ayudó a crear el código , mientras que llo supervisaba y lo aplicaba contextualizandole del juego, el sentido del juego y remplazando y cambiando código en un proceso tedioso.
Realizado el código con HTML, CSS y JavaScript.
Dejo el códio entero del juego comentado en algunas partes, y enseñar como se construye:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Vestir</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<!-- Menú de inicio -->
<div id="menu-inicio">
<div id="info">
<div id="cerrar"><img id="cerrarAyuda" src="img/cerrar.png"></div>
<div id="cerrartexto">Claude Cahun y Marcel Moore fueron dos artistas queer de principios del siglo XX,
enlazadas con el surrealismo. Pasaron gran parte de sus vidas hablando sobre su identidad sexual y de
género, así como cuestionando el binarismo de género a través de la fotografía y la performance.
Todos performamos continuamente el género, con hábitos tan básicos como dejarnos barba si somos hombres,
como forma de reafirmar nuestro género y esa identidad social que buscamos reflejar en los ojos del
otro. Así, Claude Cahun buscó expresar el poco sentido que tenía esa asociación cultural del género,
explorando con el arte y la estética y creando confusión en la sociedad de su tiempo. Cuando
identificaban a Claude Cahun como mujer, la consideraban muy masculina, y cuando la identificaban como
hombre, la consideraban demasiado femenina.
Las dos artistas, que se conocieron en la infancia y acabaron siendo pareja, vivieron en una pequeña
isla de Francia, Jersey, que los nazis ocuparían en 1940.
Claude Cahun y Marcel Moore decidieron quedarse en la isla para el resto de sus vidas y, a través de la
performance y el arte que les había acompañado toda su vida, hicieron política y propaganda antinazi.
Llevando la idea de la estética como performance a su máximo punto, se disfrazaban y actuaban como
ancianas hermanas que vivían juntas. Mediante esta falsa identidad y la firma de "soldado anónimo",
repartieron panfletos en los coches, paredes y dejandole propaganda y mensajes antinazis en los paquetes de tabaco a los soldados más indecisos con la política nazi,
distribuyendo un total de cerca de 15,000 panfletos. Por ello, llevaban siempre a mano un bote de
barbitúricos para suicidarse en caso de ser capturadas.
</div>
</div>
<div id="btn-play-container" class="boton-imagen-container">
<img id="btn-play" class="boton-imagen" src="img/play_button.png" alt="Play Button">
</div>
<!-- Imagen 2 como botón -->
<div id="btn-play-container" class="boton-ayuda-imagen-container">
<img id="ayuda" src="img/pregunta2.png" alt="Botón 2" class="boton-imagen">
</div>
<audio id="miaudio">
<source src="audio/munecadepapel.mp3" type="audio/mpeg">
<source src="audio/munecadepapel.ogv" type="audio/ogg">
Tu navegador no es compatible con el audio HTML5.
</audio>
</div>
<!-- Pantalla del juego -->
<div id="pantalla-juego" class="oculto">
<!-- Columna Izquierda -->
<img src="img/armarioizquierdo.png" alt="Armario Izquierda" class="armario armarioizquierda">
</div>
<!-- Columna Derecha -->
<div class="columna derecha">
<img src="img/armarioderecho.png" alt="Armario Derecha" class="armario armarioderecha">
</div>
<div class="columna izquierda">
<!-- Cada prenda tiene un atributo alt único que representa su categoría -->
<img src="img/camisa_mujer.png" alt="camisa_mujer" class="ropa">
<img src="img/zapatos_mujer.png" alt="zapatos_mujer" class="ropa">
<img src="img/ropaseñora.png" alt="ropaseñora" class="ropa">
</div>
<div class="centro">
<!-- Área para la figura y las prendas seleccionadas -->
<div id="area-vestir">
<img src="img/figura.png" alt="Figura humana" id="figura">´
<img src="img/marco.png" alt="Marco" id="marco">
<div id="mensajeMArco">
<p id="textonombre">Nazi</p>
</div>
<img src="img/volver.png" alt="Volver" id="volver" role="button" style="cursor: pointer;">
<img src="img/borrar.png" alt="Borrar" id="borrar" role="button" style="cursor: pointer;">
<div id="mensaje" style="display: none;"></div> <!-- Mensaje oculto al principio -->
</div>
</div>
<div class="columna derecha">
<img src="img/camisa_hombre.png" alt="camisa_hombre" class="ropa camisa_hombre">
<img src="img/peluca.png" alt="peluca" class="ropa">
<img src="img/mascara.png" alt="mascara" class="ropa">
<img src="img/gorrita.png" alt="gorrita" class="ropa">
<img src="img/zapatos_hombre.png" alt="zapatos_hombre" class="ropa">
</div>
</div>
<!-- Agrega el enlace al script aquí -->
<script src="script.js"></script>
JavaScript:INTERACTIVIDAD
document.addEventListener('DOMContentLoaded', () => {
const btnPlay = document.getElementById('btn-play'); // Botón Play
const menuInicio = document.getElementById('menu-inicio'); // Menú de inicio
const pantallaJuego = document.getElementById('pantalla-juego'); // Pantalla del juego
const areaVestir = document.getElementById('area-vestir'); // Contenedor de figura y prendas
const mensaje = document.getElementById('mensaje'); // Contenedor del mensaje dinámico
const audio = document.getElementById('miaudio');
let mensajeInterval = null; // Variable para almacenar el intervalo del mensaje
btnPlay.addEventListener('click', () => {
menuInicio.style.display = 'none'; // Oculta el menú inicial
pantallaJuego.style.display = 'flex'; // Muestra la pantalla del juego
audio.currentTime = 132; // Inicia la música en el segundo 132
audio.muted = false; // Reproduce la música al hacer clic
audio.play();
});
// Detectar cuando la música llega al segundo 175 y reiniciarla al segundo 132
audio.addEventListener('timeupdate', () => {
if (audio.currentTime >= 175) {
audio.currentTime = 132; // Reinicia la música al segundo 132
}
});
// Variables para almacenar las prendas seleccionadas por categoría
let prendaCamisa = null;
let prendaZapatos = null;
let prendaGorra = null;
let prendaMascara = null;
let prendaRopaSeñora = null;
let prendaPeluca = null;
// Seleccionar todas las prendas de ropa
const prendas = document.querySelectorAll('.ropa');
const textonombre = document.querySelector('#textonombre');
prendas.forEach(prenda => {
prenda.addEventListener('click', () => {
const categoria = prenda.getAttribute('alt'); // Usamos el atributo alt para determinar la categoría de la prenda
// Limpiar el mensaje anterior si existe
if (mensajeInterval) {
clearInterval(mensajeInterval); // Detener el intervalo del mensaje anterior
mensaje.textContent = ''; // Limpiar el mensaje
}
// Si ya hay ropa de señora puesta y se hace clic en otra prenda que no es de señora
if (prendaRopaSeñora && !categoria.includes('ropaseñora')) {
prendaRopaSeñora.remove(); // Eliminar ropa de señora
prendaRopaSeñora = null; // Reiniciar la variable
}
// Control de la máscara: Si ya está puesta, no se puede poner gorra ni peluca
if (prendaMascara && (categoria.includes('gorrita') || categoria.includes('peluca'))) {
// Eliminar la máscara si se hace clic en la peluca o gorra
prendaMascara.remove();
prendaMascara = null; // Reiniciar la variable
}
// Control de la gorra o peluca: Si ya hay una, no se puede poner la máscara
if ((prendaGorra || prendaPeluca) && categoria.includes('mascara')) {
// Eliminar la gorra y/o la peluca antes de poner la máscara
if (prendaGorra) prendaGorra.remove();
if (prendaPeluca) prendaPeluca.remove();
prendaGorra = null; // Reiniciar la variable
prendaPeluca = null; // Reiniciar la variable
}
// Si la prenda seleccionada es una camisa
if (categoria.includes('camisa')) {
// Si ya existe una camisa colocada, eliminarla antes de añadir una nueva
if (prendaCamisa) prendaCamisa.remove();
// Crear una nueva imagen de camisa
const nuevaCamisa = document.createElement('img');
nuevaCamisa.src = prenda.src;
nuevaCamisa.classList.add('prenda-colocada', 'camisa-colocada'); // Añadir ambas clases
nuevaCamisa.setAttribute('data-categoria', categoria);
// Agregar la camisa al principio del contenedor
areaVestir.prepend(nuevaCamisa);
// Asignar la referencia a prendaCamisa para futuras referencias
prendaCamisa = nuevaCamisa;
// Mostrar mensaje cuando se seleccione la camisa de hombre
if (categoria.includes('camisa_hombre')) {
mostrarMensaje("¿Ese traje se ve demasiado masculino en ti, por qué no pruebas un vestido?¡Pareces un hombre!");
}
// Cambiar el mensaje para la camisa de mujer
if (categoria.includes('camisa_mujer')) {
mostrarMensaje("Ese vestido es muy elegante, pero no pareces lo suficientemente femenina para llevarlo.");
}
// Establecer el nombre de la figura como 'Desconocido'
textonombre.textContent = 'Desconocido';
}
// Si la prenda seleccionada son zapatos
if (categoria.includes('zapatos')) {
if (prendaZapatos) prendaZapatos.remove();
const nuevosZapatos = document.createElement('img');
nuevosZapatos.src = prenda.src;
nuevosZapatos.classList.add('prenda-colocada');
nuevosZapatos.setAttribute('data-categoria', categoria);
areaVestir.appendChild(nuevosZapatos);
prendaZapatos = nuevosZapatos;
// Mensaje dependiendo del tipo de zapatos
if (categoria.includes('zapatos_hombre')) {
// Verificar si la camisa de mujer está puesta
if (prendaCamisa && prendaCamisa.src.includes('camisa_mujer')) {
mostrarMensaje('Cámbiate esos zapatos y ponte unos femeninos');
} else if (prendaCamisa && prendaCamisa.src.includes('camisa_hombre')) {
mostrarMensaje('Me gustan esos zapatos y como te quedan con el traje, pareces todo un hombre,¿Eres un hombre,no??');
} else {
mostrarMensaje('Me gustan esos zapatos, combínalos con un traje');
}
} else if (categoria.includes('zapatos_mujer')) {
// Verificar si la camisa de hombre está puesta
if (prendaCamisa && prendaCamisa.src.includes('camisa_hombre')) {
mostrarMensaje('Cámbiate esos zapatos y ponte unos mas masculinos');
} else if (prendaCamisa && prendaCamisa.src.includes('camisa_mujer')) {
mostrarMensaje('Me gusta como quedan con el vestido te hacen ver mas femenina.');
}
else {
mostrarMensaje('Me gustan esos zapatos, combínalos con un vestido');
}
}
textonombre.textContent = 'Desconocido';
}
// Si la prenda seleccionada es una gorra
if (categoria.includes('gorrita')) {
if (prendaGorra) prendaGorra.remove();
const nuevaGorra = document.createElement('img');
nuevaGorra.src = prenda.src;
nuevaGorra.classList.add('prenda-colocada');
nuevaGorra.setAttribute('data-categoria', categoria);
nuevaGorra.style.zIndex = '2'; // Gorra encima de la peluca
areaVestir.appendChild(nuevaGorra);
prendaGorra = nuevaGorra;
// Si ya hay peluca, aseguramos que la peluca esté por debajo
if (prendaPeluca) {
prendaPeluca.style.zIndex = '1'; // Peluca siempre por debajo de la gorra
}
// Mensaje dependiendo de las prendas ya puestas
if (prendaPeluca) {
mostrarMensaje('Me gusta el sombrero, pero el peinado sigue sin convencerme.');
} else if (prendaRopaSeñora) {
mostrarMensaje('¡Qué femenino te queda ese sombrero!');
} else if (prendaCamisa && prendaCamisa.src.includes('camisa_hombre')) {
mostrarMensaje('Ese lazo en el sombrero te hace el rostro demasiado femenino.'); // Este es el mensaje que aparecerá siempre que se ponga la gorra con la camisa de hombre
} else {
mostrarMensaje('¡Que bonito sombrero!');
}
textonombre.textContent = 'Desconocido';
}
// Si la prenda seleccionada es una máscara
// Si la prenda seleccionada es una máscara
if (categoria.includes('mascara')) {
if (prendaMascara) prendaMascara.remove();
const nuevaMascara = document.createElement('img');
nuevaMascara.src = prenda.src;
nuevaMascara.classList.add('prenda-colocada');
nuevaMascara.setAttribute('data-categoria', categoria);
areaVestir.appendChild(nuevaMascara);
nuevaMascara.style.zIndex = '3'; // Máscara encima de la peluca y la gorra
prendaMascara = nuevaMascara;
// Mostrar el mensaje dinámico para la máscara
const mensajesMascara = [
'"Masculino, femenino: depende del caso. Neutral es el único género que siempre me conviene."',
'"La performance no es un disfraz, es una revelación."'
];
const mensajeAleatorio = mensajesMascara[Math.floor(Math.random() * mensajesMascara.length)];
mostrarMensaje(mensajeAleatorio);
// Cambiar el nombre a 'Claud Cahun' solo cuando se seleccione la máscara
textonombre.textContent = 'Claud Cahun';
}
// Resto del código para otras prendas
if (categoria.includes('camisa') || categoria.includes('zapatos') || categoria.includes('gorrita') || categoria.includes('peluca')) {
// Aquí no se cambia el nombre si ya es "Claud Cahun"
if (textonombre.textContent !== 'Claud Cahun') {
textonombre.textContent = 'Desconocido';
}
}
// Si la prenda seleccionada es una peluca
if (categoria.includes('peluca')) {
if (prendaPeluca) prendaPeluca.remove();
const nuevaPeluca = document.createElement('img');
nuevaPeluca.src = prenda.src;
nuevaPeluca.classList.add('prenda-colocada');
nuevaPeluca.setAttribute('data-categoria', categoria);
nuevaPeluca.style.zIndex = '1'; // Peluca siempre por debajo de la gorra
areaVestir.appendChild(nuevaPeluca);
prendaPeluca = nuevaPeluca;
if (prendaGorra) {
mostrarMensaje("Me gusta el sombrero, pero el peinado sigue sin convencerme.");
} else if (!prendaCamisa && !prendaZapatos && !prendaMascara && !prendaRopaSeñora) {
// Si no hay otras prendas, mostrar mensaje
mostrarMensaje("¡Que peinado más extraño, ¿no?");
} else {
// Si hay otras prendas, mostrar mensajes según las prendas que estén puestas
if (prendaCamisa && prendaCamisa.src.includes('camisa_hombre')) {
mostrarMensaje('¡Qué peinado más femenino para un hombre!');
}
// Mostrar mensaje si la camisa de mujer está puesta
if (prendaCamisa && prendaCamisa.src.includes('camisa_mujer')) {
mostrarMensaje('Con ese estilo, realmente no pareces una mujer. ¿Por qué no pruebas un peinado con más volumen y elegancia?');
}
}
textonombre.textContent = 'Desconocido';
}
// Agregar la lógica para la ropa señora
// Al seleccionar ropa de señora
// Mostrar el nombre cuando se seleccione ropa de señora
if (categoria.includes('ropaseñora')) {
// Si la ropa de señora ya está puesta, no se evita el clic, se cambia el mensaje
if (prendaRopaSeñora) {
const mensajesRopaSenora = [
'¡Buenos días, señora!¿Tiene el paquete de tabaco de hoy?',
'¿Que tal está su hermana?',
];
const mensajeAleatorio = mensajesRopaSenora[Math.floor(Math.random() * mensajesRopaSenora.length)];
// Mostrar el mensaje aleatorio
mostrarMensaje(mensajeAleatorio);
} else {
// Si no está puesta, agregar la ropa de señora y el mensaje inicial
// Eliminar otras prendas antes de poner ropa de señora
if (prendaCamisa) prendaCamisa.remove();
if (prendaZapatos) prendaZapatos.remove();
if (prendaGorra) prendaGorra.remove();
if (prendaMascara) prendaMascara.remove();
if (prendaPeluca) prendaPeluca.remove();
const nuevaRopaSeñora = document.createElement('img');
nuevaRopaSeñora.src = prenda.src;
nuevaRopaSeñora.classList.add('prenda-colocada');
nuevaRopaSeñora.setAttribute('data-categoria', categoria);
areaVestir.appendChild(nuevaRopaSeñora);
prendaRopaSeñora = nuevaRopaSeñora;
// Mostrar el mensaje inicial para ropa de señora
mostrarMensaje("Buenos días señora, tiene el paquete de tabaco de hoy?");
}
// Mostrar el nombre cuando se seleccione ropa de señora
textonombre.style.display = 'block'; // Hacer visible el nombre
textonombre.textContent = 'Militar nazi';
}
// Mostrar el nombre cuando se seleccione cualquier otra prenda
// Mostrar el nombre cuando se seleccione cualquier otra prenda, excepto la máscara
if (categoria.includes('camisa') || categoria.includes('zapatos') || categoria.includes('gorrita') || categoria.includes('peluca')) {
// Solo cambia a 'Desconocido' si no está ya como 'Claude Cahun'
if (textonombre.textContent !== 'Claude Cahun') {
textonombre.style.display = 'block'; // Aseguramos que el nombre se muestre
textonombre.textContent = 'Desconocido';
}
}
});
});
// Función para reiniciar las prendas y limpiar el área de vestir
function borrarRopa() {
// Verifica y elimina la prenda de camisa si está seleccionada
if (prendaCamisa) prendaCamisa.remove();
// Verifica y elimina la prenda de zapatos si está seleccionada
if (prendaZapatos) prendaZapatos.remove();
// Verifica y elimina la prenda de gorra si está seleccionada
if (prendaGorra) prendaGorra.remove();
// Verifica y elimina la prenda de máscara si está seleccionada
if (prendaMascara) prendaMascara.remove();
// Verifica y elimina la prenda de ropa completa para señora si está seleccionada
if (prendaRopaSeñora) prendaRopaSeñora.remove();
// Verifica y elimina la peluca si está seleccionada
if (prendaPeluca) prendaPeluca.remove();
// Reinicia las variables de todas las prendas a null
prendaCamisa = null;
prendaZapatos = null;
prendaGorra = null;
prendaMascara = null;
prendaRopaSeñora = null;
prendaPeluca = null;
textonombre.textContent = '';
if (mensajeInterval) {
clearInterval(mensajeInterval); // Detener el intervalo del mensaje
mensaje.textContent = ''; // Limpiar el mensaje
}
// Muestra un mensaje indicando que se ha reiniciado el juego
}
// Obtiene el botón con el ID 'borrar' y le asigna un evento de clic
const btnBorrar = document.getElementById('borrar');
btnBorrar.addEventListener('click', borrarRopa); // Al hacer clic, ejecuta la función borrarRopa
// Función para regresar al menú inicial y limpiar las prendas
function volverAtras() {
// Muestra el menú inicial
menuInicio.style.display = 'flex';
audio.pause(); // Detiene la reproducción
audio.currentTime = 0; // Reinicia el audio al inicio
// Oculta la pantalla del juego
pantallaJuego.style.display = 'none';
// Verifica y elimina la prenda de camisa si está seleccionada
if (prendaCamisa) prendaCamisa.remove();
// Verifica y elimina la prenda de zapatos si está seleccionada
if (prendaZapatos) prendaZapatos.remove();
// Verifica y elimina la prenda de gorra si está seleccionada
if (prendaGorra) prendaGorra.remove();
// Verifica y elimina la prenda de máscara si está seleccionada
if (prendaMascara) prendaMascara.remove();
// Verifica y elimina la prenda de ropa completa para señora si está seleccionada
if (prendaRopaSeñora) prendaRopaSeñora.remove();
// Verifica y elimina la peluca si está seleccionada
if (prendaPeluca) prendaPeluca.remove();
// Reinicia las variables de todas las prendas a null
prendaCamisa = null;
prendaZapatos = null;
prendaGorra = null;
prendaMascara = null;
prendaRopaSeñora = null;
prendaPeluca = null;
// Limpia cualquier mensaje mostrado previamente
mostrarMensaje("");
}
// Obtiene el botón con el ID 'borrar' y le asigna un evento de clic
const btnVolver = document.getElementById('volver');
btnVolver.addEventListener('click', volverAtras); // Al hacer clic, ejecuta la función borrarRopa
// Función para mostrar el mensaje dinámico
function mostrarMensaje(texto) {
if (mensajeInterval) clearInterval(mensajeInterval)
mensaje.style.display = 'block';
mensaje.textContent = ''; // Limpiar el mensaje anterior
let i = 0;
mensajeInterval = setInterval(() => {
if (i < texto.length) {
mensaje.textContent += texto[i];
i++;
} else {
clearInterval(mensajeInterval); // Detener el intervalo cuando termine
}
}, 50); // Velocidad del mensaje
}
// Obtener el elemento del contenedor de ayuda
let divAyuda = document.getElementById('info');
// Función para mostrar la ayuda
function mostrarAyuda() {
divAyuda.style.display = 'block'; // Cambiar el estilo para que sea visible
}
// Obtener el botón de mostrar ayuda y asignar el evento click
const mostrarAyudaBtn = document.getElementById('ayuda');
mostrarAyudaBtn.addEventListener('click', mostrarAyuda); // Vincular la función mostrarAyuda al botón
// Función para cerrar la ayuda
function cerrarAyuda() {
divAyuda.style.display = 'none'; // Cambiar el estilo para ocultarlo
}
// Obtener el botón de cerrar ayuda y asignar el evento click
const cerrarAyudaBtn = document.getElementById('cerrarAyuda');
cerrarAyudaBtn.addEventListener('click', cerrarAyuda); // Vincular la función cerrarAyuda al botón
});
CSS: DISEÑO, COLOR Y ESTRUCTURACIÓN DE LOS ELEMENTOS
body {
overflow: hidden;
margin: 0;
font-family: Arial, sans-serif;
display: flex;
/* Usamos Flexbox para alinear los elementos en el centro de la pantalla */
justify-content: center;
/* Centra el contenido horizontalmente */
align-items: center;
/* Centra el contenido verticalmente */
height: 100vh;
/* Hace que el cuerpo ocupe toda la altura de la ventana */
background-color: #f0f0f0;
/* Fondo gris claro */
}
#cerrartexto {
padding: 20px;
line-height: 1.5;
font-family: 'Press Start 2P', cursive;
/* Aplica la misma fuente */
font-size: 10px;
}
#textonombre {
font-size: 9px; /* Cambia el tamaño a lo que necesites */
margin-top: 12px;
margin-left: 13px;
}
#cerrar {
line-height: 1.3;
display: flex;
justify-content: end;
margin-right: 5%;
margin-top: 20px;
}
#cerrar img {
width: 5%;
}
#cerrar img:hover {
transform: scale(1.2);
}
#info {
display: none;
background-color: gray;
border-radius: 10px;
color: white;
width: 80%;
height: 70vh;
z-index: 3;
}
#menu-inicio {
background-repeat: no-repeat;
display: flex;
flex-direction: column;
/* Organiza los elementos del menú en una columna */
justify-content: center;
/* Centra los elementos dentro del contenedor */
align-items: center;
/* Ocupa toda la altura disponible */
background-color: #fff;
/* Fondo blanco */
background-image: url('img/fondo.jpg');
/* Imagen de fondo */
background-size: cover;
/* Ajusta la imagen para que encaje sin distorsionarse */
background-position: center;
/* Centra la imagen de fondo */
text-align: center;
/* Centra el texto dentro del contenedor */
border: 2px solid #ccc;
/* Borde sutil alrededor del contenedor */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
/* Sombra sutil para dar profundidad */
/* Alinea los elementos en el centro */
max-width: 892px;
min-width: 892px;
max-height: 947px;
min-height: 947px;
}
.armario {
width: 1500%;
/* Cambia al 100% del ancho de la columna */
height: auto;
/* Mantén la proporción de la imagen */
margin: 0 auto;
/* Centra la imagen horizontalmente */
display: block;
}
.armarioizquierda {
position: relative;
margin-left: -120%;
margin-top: -80%;
/* Si necesitas espacio extra debajo del armario izquierdo */
}
.armarioderecha {
position: relative;
margin-top: -80%;
/* Si necesitas espacio extra encima del armario derecho */
margin-left: 300%
}
.containerr {
position: absolute;
/* Cambia de relative a absolute si quieres moverlo respecto al viewport o al padre más cercano con position */
top: 2%;
/* Ajusta el valor según lo que necesites */
left: 43%;
/* Ajusta el valor según lo que necesites */
}
.boton-ayuda-imagen-container {
position: relative;
display: inline-block;
/* Hace que el contenedor sea un bloque en línea */
cursor: pointer;
/* Cambia el cursor a mano para indicar que se puede hacer clic */
width: 1000px;
/* Ancho fijo para la imagen */
height: auto;
/* Mantiene la proporción de la imagen */
top: -400px;
/* Desplaza la imagen hacia arriba */
left: 50px;
/* Desplaza la imagen hacia la izquierda */
margin-top: -60px;
/* Ajusta el margen superior para posicionar mejor la imagen */
}
.boton-imagen-container {
position: relative;
display: inline-block;
/* Hace que el contenedor sea un bloque en línea */
cursor: pointer;
/* Cambia el cursor a mano para indicar que se puede hacer clic */
width: 1000px;
/* Ancho fijo para la imagen */
height: auto;
/* Mantiene la proporción de la imagen */
top: -400px;
/* Desplaza la imagen hacia arriba */
left: 50px;
/* Desplaza la imagen hacia la izquierda */
margin-top: -60px;
/* Ajusta el margen superior para posicionar mejor la imagen */
}
/* Este contenedor es el área del botón de "Play" (inicio del juego). */
.boton-imagen {
position: absolute;
width: 260px;
/* Tamaño inicial de la imagen del botón */
height: auto;
/* Mantiene la proporción de la imagen */
cursor: pointer;
/* Cambia el cursor al pasar el ratón */
transition: transform 0.3s ease;
/* Suaviza la transición al mover la imagen */
}
/* Este bloque es para la imagen del botón "Play" con el efecto de hover (al pasar el ratón). */
.boton-imagen:nth-of-type(1) {
top: 0%;
/* Coloca la primera imagen del botón en la parte superior */
left: 25%;
/* Coloca la primera imagen en el 25% de la izquierda */
}
#ayuda {
width: 210px;
position: absolute;
top: 78px;
left: 367px;
}
.boton-imagen:nth-of-type(2) {
top: 50%;
/* Coloca la segunda imagen en la mitad de la pantalla */
left: 60%;
/* Coloca la segunda imagen en el 60% desde la izquierda */
}
#btn-play {
cursor: pointer;
border: none;
transition: background-color 0.3s;
/* margin-top: 10%; */
margin-left: -15%;
width: 70%;
height: auto;
position: absolute;
top: 723px
}
#btn-play:hover {
animation: parpadeo 0.2s infinite;
/* Aplica la animación "parpadeo" al pasar el ratón */
}
#ayuda:hover {
transform: translateX(10px);
animation: parpadeo 0.2s infinite;
/* Aplica la animación "parpadeo" al pasar el ratón */
}
@keyframes parpadeo {
0%,
50% {
opacity: 1;
/* Totalmente visible */
}
50% {
opacity: 0;
/* Totalmente invisible */
}
}
#pantalla-juego {
display: none;
/* Oculta la pantalla del juego al inicio */
max-width: 892px;
min-width: 892px;
max-height: 947px;
min-height: 947px;
/* El área del juego ocupa el 60% de la pantalla */
background-color: #D3D3D3;
/* Fondo gris claro */
height: 110%;
/* El área del juego ocupa el 110% de la altura de la pantalla */
justify-content: space-between;
/* Acomoda los elementos con espacio entre ellos */
align-items: center;
/* Centra los elementos verticalmente */
}
#area-vestir {
position: relative;
/* Posiciona las prendas de manera absoluta dentro de este contenedor */
width: 300px;
/* Establece el tamaño del área de vestir */
height: 300px;
margin: auto;
/* Centra el área de vestir */
}
#figura {
position: absolute;
/* Posiciona la figura de manera absoluta dentro del área de vestir */
top: 40%;
/* Coloca la figura al 40% desde la parte superior */
left: 50%;
/* Coloca la figura al 50% desde la izquierda */
transform: translate(-50%, -50%);
/* Centra la figura sobre el área */
width: 150%;
/* Aumenta el tamaño de la figura */
height: auto;
margin-left: -45%;
}
/* Este bloque es para posicionar la figura humana dentro del área de vestir. */
#marco {
position: absolute;
top: 392px;
/* Coloca el marco en la parte inferior de la figura */
left: 8%;
transform: translateX(-50%);
/* Centra el marco horizontalmente */
width: 140%;
/* Ajusta el tamaño del marco según sea necesario */
height: auto;
z-index: 1;
/* Coloca el marco debajo de la figura */
}
#mensajeMArco {
position: absolute;
top: 407px;
left: -164px;
z-index: 1;
font-size: 9pt;
font-family: 'Press Start 2P', cursive;
}
#volver {
position: absolute;
top: -45%;
/* Coloca el marco en la parte inferior de la figura */
left: -40%;
transform: translateX(-50%);
/* Centra el marco horizontalmente */
width: 40%;
/* Ajusta el tamaño del marco según sea necesario */
height: auto;
z-index: 6;
/* Coloca el marco debajo de la figura */
}
#volver:hover {
transform: translateX(-50%) scale(1.2); /* Escalar el tamaño al 120% */
filter: brightness(1.2); /* Aumentar el brillo */
cursor: pointer; /* Cambiar el cursor para indicar que es clickeable */
}
#borrar {
position: absolute;
top: -45%;
/* Coloca el marco en la parte inferior de la figura */
left: 55%;
transform: translateX(-50%);
/* Centra el marco horizontalmente */
width: 40%;
/* Ajusta el tamaño del marco según sea necesario */
height: auto;
z-index: 6;
/* Coloca el marco debajo de la figura */
}
/* Efecto al pasar el ratón sobre el botón */
#borrar:hover {
transform: translateX(-50%) scale(1.2); /* Escalar el tamaño al 120% */
filter: brightness(1.2); /* Aumentar el brillo */
cursor: pointer; /* Cambiar el cursor para indicar que es clickeable */
}
.ropa {
width: 600%;
/* Tamaño de las prendas es 3 veces el tamaño del área */
height: auto;
/* Mantiene la proporción de las imágenes de las prendas */
margin: 0px;
/* Elimina el margen de las prendas */
cursor: pointer;
/* Cambia el cursor al pasar el ratón */
transition: transform 0.3s ease;
/* Transición suave al mover la prenda */
margin-top: -80%;
/* Ajusta la posición vertical de las prendas */
}
.ropa[src*="mascara.png"] {
position: relative;
/* Usamos absolute para posicionarla respecto a su contenedor */
top: -85px;
/* Mueve la imagen hacia arriba */
width: 150%;
/* Centra la imagen horizontalmente */
/* Asegura que se mantenga centrada */
}
.ropa[src*="gorrita.png"] {
position: relative;
/* Usamos absolute para posicionarla respecto a su contenedor */
top: -85px;
/* Mueve la imagen hacia arriba */
/* Centra la imagen horizontalmente */
/* Asegura que se mantenga centrada */
}
.ropa[src*="ropaseñora.png"] {
position: relative;
/* Usamos absolute para posicionarla respecto a su contenedor */
top: -159px;
/* Mueve la imagen hacia arriba */
/* Centra la imagen horizontalmente */
/* Asegura que se mantenga centrada */
}
.ropa[src*="peluca.png"] {
width: 200%;
position: relative;
/* Usamos absolute para posicionarla respecto a su contenedor */
top: -75px;
/* Mueve la imagen hacia arriba */
/* Centra la imagen horizontalmente */
/* Asegura que se mantenga centrada */
}
.ropa[src*="camisa_hombre.png"] {
/* Usamos absolute para posicionarla respecto a su contenedor */
top: -15px;
/* Mueve la imagen hacia arriba */
/* Centra la imagen horizontalmente */
/* Asegura que se mantenga centrada */
}
.ropa:hover {
transform: scale(1.5);
/* Cambié de scale(2) a scale(1.5) para hacerlo más manejable */
}
.ropa[src*="zapatos_mujer.png"] {
position: relative;
width: 250%;
top: 238px;
/* Ajusta la posición vertical de los zapatos de mujer */
}
.ropa[src*="zapatos_hombre.png"] {
position: relative;
width: 250%;
top: -385px;
/* Ajusta la posición vertical de los zapatos de hombre */
}
#textonombre {
display: none;
}
/* Agrupar las imágenes dentro de un contenedor común */
.prenda-colocada {
position: absolute;
/* Posiciona la prenda de manera absoluta sobre la figura */
top: 40%;
/* Coloca la prenda al 40% desde la parte superior */
left: 5%;
/* Coloca la prenda al 50% desde la izquierda */
transform: translate(-50%, -50%);
/* Centra la prenda sobre la figura */
width: 150%;
height: auto;
z_index:5;
pointer-events: none;
/* Desactiva los eventos de puntero (como hover) sobre las prendas colocadas */
}
/* Estilo para las prendas que ya han sido colocadas sobre la figura. */
.prenda-colocada[src*="camisa_hombre.png"] {
z_index:5;
}
.prenda-colocada {
position: absolute; /* Establecer posición absoluta */
z-index: 10; /* Valor por defecto, para otras prendas */
}
.camisa-colocada {
z-index: 20; /* Camisa siempre por encima de otras prendas */
}
.prenda-colocada[src*="zapatos_hombre.png"] {
position: absolute;
top: 93%;
/* Ajusta la posición de los zapatos de hombre */
left: 5%;
transform: translateX(-50%);
width: 80%;
height: auto;
z_index:1;
}
.prenda-colocada[src*="mascara.png"] {
position: absolute;
top: -61%;
/* Ajusta la posición de los zapatos de mujer */
left: 6%;
transform: translateX(-50%);
width: 42%;
height: auto;
}
.prenda-colocada[src*="zapatos_mujer.png"] {
position: absolute;
top: 94%;
/* Ajusta la posición de los zapatos de mujer */
left: 6%;
transform: translateX(-50%);
width: 70%;
z_index:1;
height: auto;
}
.prenda-colocada[src*="peluca.png"] {
position: absolute;
top: -65%;
/* Ajusta la posición de los zapatos de mujer */
left: 7%;
transform: translateX(-50%);
width: 32%;
height: auto;
}
.columna.izquierda {
width: 20%;
/* Establece el 20% del ancho para la columna izquierda */
display: flex;
/* Usa Flexbox para organizar las prendas en la columna */
flex-direction: column;
/* Organiza las prendas en una columna */
align-items: center;
/* Centra los elementos horizontalmente */
/* Espacio entre las prendas */
padding: 10px;
/* Añade relleno alrededor */
max-height: 90vh;
/* Establece una altura máxima para la columna */
margin-left: 10%;
/* Desplaza la columna hacia la derecha */
}
.columna.izquierda .ropa {
position: relative;
margin-left: -1400%;
/* Ajusta este valor para mover la imagen más a la izquierda */
margin-top: 26%;
}
.camisa_hombre {
margin-top: 50px;
}
.columna.derecha {
width: 20%;
/* Establece el 20% del ancho para la columna izquierda */
display: flex;
gap: 4em;
/* Usa Flexbox para organizar las prendas en la columna */
flex-direction: column;
/* Organiza las prendas en una columna */
align-items: center;
/* Centra los elementos horizontalmente */
/* Espacio entre las prendas */
padding: 10px;
/* Añade relleno alrededor */
max-height: 90vh;
/* Establece una altura máxima para la columna */
margin-right: 10%;
/* Desplaza la columna hacia la derecha */
}
/* Las columnas de la izquierda y derecha contienen las prendas que pueden ser seleccionadas. */
.columna.derecha .ropa {
position: relative;
/* Permite mover el elemento desde su posición original */
margin-left: -150%;
/* Mueve las imágenes hacia la izquierda */
}
.centro {
width: 60%;
/* Establece el 60% del ancho para el área central */
display: flex;
/* Usa Flexbox para organizar los elementos dentro */
justify-content: center;
/* Centra los elementos horizontalmente */
align-items: center;
/* Centra los elementos verticalmente */
}
#area-vestir {
position: relative;
}
#mensaje {
line-height: 1.3;
margin-top: 417px;
margin-left:6px;
/* Mantén la posición fija */
min-height: 3.125em;
/* Altura mínima */
max-height: 12.5em;
/* Altura máxima */
position: fixed;
/* Fijar posición para evitar desplazamiento */
left: 50%;
/* Centrar horizontalmente */
transform: translateX(-50%);
/* Ajustar centrado */
color: black;
padding: 1.25em;
font-family: 'Press Start 2P', cursive;
font-size: 0.5em;
/* Tamaño de fuente */
text-align: left;
width: 60%;
/* Ancho fijo */
max-width: 38em;
z-index: 3;
/* Asegurar que esté por encima de otros elementos */
word-wrap: break-word;
overflow-y: auto;
/* Permite desplazamiento interno del texto */
}
#mensaje p {
margin: 0;
padding: 8px 0;
line-height: -1.9em;
/* Espaciado entre líneas */
margin-bottom: 1.9em;
/* Espaciado entre párrafos */
}
#textonombre {
display: none;
}
.oculto {
display: none;
/* Oculta el elemento con esta clase */
}
