<![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>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('images/laboratorio.png'); /* Imagen de fondo de laboratorio */
background-size: cover;
margin: 0;
}
.container {
text-align: center;
background-color: rgba(139, 69, 19, 0.9); /* Fondo marrón oscuro semi-transparente */
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
#game {
color: #fff; /* Texto blanco */
}
#timer, #score {
margin: 10px 0;
}
.room {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #cd853f; /* Botón marrón claro */
color: white;
}
button:hover {
background-color: #a0522d; /* Botón marrón oscuro */
}
#answerInput {
padding: 10px;
margin-top: 10px;
width: calc(100% - 22px);
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff8dc; /* Fondo de input marrón muy claro */
}
#puzzleSection {
margin-top: 20px;
}
#victoryMessage {
display: none;
font-size: 2em;
color: #ffd700; /* Color dorado */
text-shadow: 2px 2px 4px #000; /* Sombra para destacar el texto */
animation: victoryAnimation 2s ease-in-out infinite alternate;
}
@keyframes victoryAnimation {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
</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
} else {
clearInterval(timerInterval);
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 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.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>
]]>