<![CDATA[
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Escape Room</title>
<style>
/* Estilo común para todas las habitaciones */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Fondos específicos para cada habitación */
.body-room-1 {
background: url('fondo1.jpg') no-repeat center center fixed;
background-size: cover;
}
.body-room-2 {
background: url('fondo2.png') no-repeat center center fixed;
background-size: cover;
}
.body-room-3 {
background: url('fondo3.jpg') no-repeat center center fixed;
background-size: cover;
}
.body-room-4 {
background: url('fondo4.jpg') no-repeat center center fixed;
background-size: cover;
}
.body-room-5 {
background: url('fondo5.jpg') no-repeat center center fixed;
background-size: cover;
}
/* Estilo del contenedor general */
.container {
max-width: 800px;
margin: 0 auto;
background-color: rgba(245, 245, 220, 0.8); /* Fondo marrón claro con transparencia */
padding: 20px;
border-radius: 10px;
}
.room {
padding: 20px;
border: 2px solid #000;
border-radius: 10px;
text-align: center;
min-height: 300px; /* Ajusta según sea necesario */
}
</style>
</head>
<body>
<div class="container">
<div id="game">
<h1>Juego de Escape Room</h1>
<div id="timer">Tiempo Restante: <span id="time">05:00</span> minutos</div>
<div id="score">Puntuación: <span id="scoreValue">0</span></div>
<div id="room" class="room">
<p id="roomText">¡Bienvenido al Escape Room! Haz clic en "Comenzar Juego" para empezar.</p>
<button id="startBtn" onclick="startGame()">Comenzar Juego</button>
<button id="stopMusicBtn" onclick="toggleMusic()">Detener Música</button>
<div id="puzzleSection" style="display: none;">
<input type="text" id="answerInput" placeholder="Escribe tu respuesta aquí">
<button id="submitAnswerBtn" onclick="submitAnswer()">Enviar Respuesta</button>
</div>
<div id="victoryMessage">¡Felicidades! ¡Has escapado con éxito!</div>
</div>
</div>
</div>
<audio id="backgroundMusic" src="background.mp3" loop></audio>
<script>
let currentRoom = 0;
let timeLeft = 300; // 5 minutos en segundos
let score = 0;
let timerInterval;
const rooms = [
"Habitación 1: ¿Dónde nació Miguel de Cervantes?",
"Habitación 2: Encuentra la llave escondida para desbloquear la siguiente puerta. Pista: La llave está debajo del objeto más pequeño.",
"Habitación 3: Completa el acertijo: Tengo ciudades, pero no casas. Tengo montañas, pero no árboles. Tengo agua, pero no peces. ¿Qué soy?",
"Habitación 4: Descifra el código: 3-1-4-1-5-9-2-6-5. Pista: Es el comienzo de una famosa constante matemática.",
"Habitación 5: Un hombre miraba un retrato. Alguien le preguntó, '¿De quién es ese retrato que estás mirando?' Él respondió, 'No tengo hermanos ni hermanas, pero el padre de ese hombre es el hijo de mi padre.' ¿De quién es el retrato?"
];
const solutions = [
"Alcalá de Henares", // Respuesta correcta para la primera habitación
"debajo del objeto más pequeño", // Respuesta de la habitación 2
"un mapa", // Respuesta del acertijo de la habitación 3
"pi", // Respuesta del código (constante matemática π)
"su hijo" // Respuesta del desafío final
];
const points = [10, 20, 30, 40, 50];
let isMusicPlaying = true; // Estado inicial de la música
function startGame() {
currentRoom = 0;
timeLeft = 300;
score = 0;
document.getElementById("time").textContent = formatTime(timeLeft);
document.getElementById("scoreValue").textContent = score;
document.getElementById("startBtn").style.display = 'none'; // Ocultar botón al iniciar el juego
document.getElementById("victoryMessage").style.display = 'none'; // Ocultar mensaje de victoria al iniciar
document.getElementById("backgroundMusic").play(); // Reproducir música al iniciar el juego
updateRoom();
timerInterval = setInterval(updateTimer, 1000);
}
function updateRoom() {
if (currentRoom < rooms.length) {
document.getElementById("roomText").textContent = rooms[currentRoom];
document.getElementById("puzzleSection").style.display = "block";
document.getElementById("answerInput").value = ''; // Limpiar el campo de respuesta
updateRoomBackground(); // Actualizar el fondo de la habitación
} else {
clearInterval(timerInterval);
document.body.className = ""; // Restablecer el fondo del cuerpo
document.getElementById("roomText").textContent = "";
document.getElementById("victoryMessage").textContent = "¡Felicidades! ¡Has escapado!";
document.getElementById("victoryMessage").style.display = 'block'; // Mostrar mensaje de victoria
document.getElementById("puzzleSection").style.display = "none";
document.getElementById("startBtn").style.display = 'block'; // Mostrar botón de inicio nuevamente
document.getElementById("startBtn").disabled = false;
document.getElementById("backgroundMusic").pause(); // Pausar la música al finalizar el juego
document.getElementById("backgroundMusic").currentTime = 0; // Reiniciar la música al final
document.getElementById("stopMusicBtn").style.display = 'none'; // Ocultar botón de detener música al finalizar el juego
}
}
function updateRoomBackground() {
const bodyElement = document.body;
bodyElement.className = ""; // Resetear las clases del body
bodyElement.classList.add(`body-room-${currentRoom + 1}`); // Añadir la clase del fondo de la habitación actual
}
function submitAnswer() {
let userAnswer = document.getElementById("answerInput").value.trim().toLowerCase();
if (userAnswer === solutions[currentRoom].toLowerCase()) {
score += points[currentRoom];
currentRoom++;
updateRoom();
} else {
alert("Respuesta incorrecta. Inténtalo de nuevo.");
}
document.getElementById("scoreValue").textContent = score;
}
function updateTimer() {
timeLeft--;
document.getElementById("time").textContent = formatTime(timeLeft);
if (timeLeft <= 0) {
clearInterval(timerInterval);
document.body.className = ""; // Restablecer el fondo del cuerpo
document.getElementById("roomText").textContent = "¡Se acabó el tiempo! Juego terminado.";
document.getElementById("puzzleSection").style.display = "none";
document.getElementById("startBtn").style.display = 'block'; // Mostrar botón de inicio nuevamente
document.getElementById("startBtn").disabled = false;
document.getElementById("backgroundMusic").pause(); // Pausar la música al finalizar el tiempo
document.getElementById("backgroundMusic").currentTime = 0; // Reiniciar la música al final
document.getElementById("stopMusicBtn").style.display = 'none'; // Ocultar botón de detener música al finalizar el juego
}
}
function toggleMusic() {
const music = document.getElementById("backgroundMusic");
const button = document.getElementById("stopMusicBtn");
if (isMusicPlaying) {
music.pause();
button.textContent = "Reanudar Música";
} else {
music.play();
button.textContent = "Detener Música";
}
isMusicPlaying = !isMusicPlaying;
}
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}
</script>
</body>
</html>
]]>