<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puccini Escape Room</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
background-color: #0d1117;
color: #e5e7eb;
font-family: 'Merriweather', serif;
transition: background-color 0.5s ease-in-out;
}
.container {
max-width: 768px;
}
.puzzle-card {
background-color: #161b22;
border: 1px solid #30363d;
}
.btn {
background-color: #238636;
color: white;
transition: background-color 0.3s ease-in-out, transform 0.1s ease-in-out;
}
.btn:hover {
background-color: #2ea043;
transform: translateY(-2px);
}
.message-box {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
input[type="text"] {
background-color: #0d1117;
border: 1px solid #30363d;
color: #c9d1d9;
}
#final-message img {
max-width: 150px;
height: auto;
border-radius: 8px;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<main class="container mx-auto p-6 flex flex-col items-center gap-6">
<!-- Schermata iniziale -->
<div id="start-screen" class="text-center">
<h1 class="text-4xl font-bold mb-4">L'Enigma di Puccini</h1>
<p class="text-lg mb-6">Sei rinchiuso in una stanza, e l'unica via di fuga è risolvere una serie di enigmi basati sulle opere del grande compositore Giacomo Puccini. Ogni enigma risolto ti darà una cifra per il codice finale. Sei pronto a sfidare la musica?</p>
<button id="start-btn" class="btn px-6 py-3 rounded-lg font-bold text-lg">Inizia</button>
</div>
<!-- Schermata del gioco -->
<div id="game-screen" class="hidden w-full">
<div id="puzzle-container" class="puzzle-card w-full p-6 rounded-lg shadow-xl text-center">
<h2 id="puzzle-title" class="text-2xl font-bold mb-4"></h2>
<p id="puzzle-description" class="text-md mb-6"></p>
<div class="space-y-4">
<input type="text" id="answer-input" class="w-full p-3 rounded-lg text-center" placeholder="Inserisci la tua risposta">
<button id="submit-btn" class="btn w-full px-6 py-3 rounded-lg font-bold">Invia</button>
</div>
<div id="message-box" class="message-box mt-6 p-4 rounded-lg hidden"></div>
</div>
<div class="mt-4 text-center">
<p id="progress-text" class="text-sm font-semibold"></p>
</div>
</div>
<!-- Schermata finale -->
<div id="final-screen" class="hidden w-full text-center">
<div id="final-message" class="puzzle-card p-8 rounded-lg shadow-xl">
<h2 class="text-3xl font-bold mb-4">Complimenti! Sei fuggito!</h2>
<p class="text-lg">Hai sbloccato l'enigma di Puccini e hai trovato la via d'uscita.</p>
<div class="mt-6">
<img src="https://placehold.co/150x150/161b22/30363d?text=FINALE" alt="Successo" class="mx-auto">
</div>
</div>
</div>
</main>
<script>
// Array degli enigmi, con domande e risposte relative a opere di Puccini
const puzzles = [
{
title: "Enigma 1: La Bohème",
description: "Un gruppo di giovani artisti vive in povertà in una città famosa per la sua arte e il suo amore. Quale città fa da sfondo a questa storia?",
answer: "Parigi",
codeClue: 4
},
{
title: "Enigma 2: Madama Butterfly",
description: "Una geisha attende il ritorno del suo amato ufficiale. L'oggetto che usa per compiere il suo tragico gesto finale è un'arma tradizionale. Di cosa si tratta?",
answer: "Spada",
codeClue: 5
},
{
title: "Enigma 3: Tosca",
description: "Nel secondo atto, il barone Scarpia interroga il pittore Mario Cavaradossi nel Palazzo Farnese. Qual è la professione del protagonista maschile?",
answer: "Pittore",
codeClue: 3
},
{
title: "Enigma 4: Turandot",
description: "Nella celebre aria 'Nessun dorma', il principe Calaf deve risolvere tre enigmi. Per vincere, deve indovinare i nomi degli oggetti che Turandot gli sottopone. A chi è dedicata quest'aria?",
answer: "Calaf",
codeClue: 3
},
{
title: "Enigma 5: La Rondine",
description: "Una donna si finge una ragazza semplice per incontrare un uomo. La storia d'amore, però, non ha un lieto fine. La protagonista, Magda, è ispirata a un famoso personaggio dell'opera 'La traviata' di Giuseppe Verdi. Qual è il suo nome?",
answer: "Violetta",
codeClue: 9
}
];
let currentPuzzleIndex = 0;
let progress = 0;
// Elementi DOM
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const finalScreen = document.getElementById('final-screen');
const startButton = document.getElementById('start-btn');
const submitButton = document.getElementById('submit-btn');
const puzzleTitle = document.getElementById('puzzle-title');
const puzzleDescription = document.getElementById('puzzle-description');
const answerInput = document.getElementById('answer-input');
const messageBox = document.getElementById('message-box');
const progressText = document.getElementById('progress-text');
// Funzione per mostrare un messaggio di feedback
function showMessage(message, isCorrect) {
messageBox.textContent = message;
messageBox.classList.remove('hidden');
if (isCorrect) {
messageBox.classList.add('bg-green-700', 'text-white');
messageBox.classList.remove('bg-red-700', 'text-white');
} else {
messageBox.classList.add('bg-red-700', 'text-white');
messageBox.classList.remove('bg-green-700', 'text-white');
}
setTimeout(() => {
messageBox.classList.add('hidden');
}, 2000);
}
// Funzione per renderizzare l'enigma corrente
function renderPuzzle() {
if (currentPuzzleIndex < puzzles.length) {
const puzzle = puzzles[currentPuzzleIndex];
puzzleTitle.textContent = puzzle.title;
puzzleDescription.textContent = puzzle.description;
answerInput.value = '';
progressText.textContent = `Enigma ${currentPuzzleIndex + 1} di ${puzzles.length}`;
} else {
endGame();
}
}
// Funzione per controllare la risposta
function checkAnswer() {
const userAnswer = answerInput.value.trim().toLowerCase();
const correctAnswer = puzzles[currentPuzzleIndex].answer.toLowerCase();
if (userAnswer === correctAnswer) {
showMessage("Risposta corretta!", true);
progress++;
currentPuzzleIndex++;
setTimeout(renderPuzzle, 2000);
} else {
showMessage("Risposta errata. Riprova.", false);
}
}
// Funzione per avviare il gioco
function startGame() {
startScreen.classList.add('hidden');
gameScreen.classList.remove('hidden');
renderPuzzle();
}
// Funzione per terminare il gioco
function endGame() {
gameScreen.classList.add('hidden');
finalScreen.classList.remove('hidden');
let finalCode = '';
puzzles.forEach(p => {
finalCode += p.codeClue;
});
const message = document.getElementById('final-message');
const codeParagraph = document.createElement('p');
codeParagraph.classList.add('text-2xl', 'font-bold', 'mt-4');
codeParagraph.textContent = `Il codice segreto per fuggire è: ${finalCode}`;
message.appendChild(codeParagraph);
}
// Aggiungi event listener
startButton.addEventListener('click', startGame);
submitButton.addEventListener('click', checkAnswer);
answerInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
checkAnswer();
}
});
// Inizializza il gioco sulla schermata iniziale
window.onload = () => {
// Non facciamo nulla all'inizio, aspettiamo che l'utente clicchi su "Inizia"
};
</script>
</body>
</html>