diff --git a/projects/Crowd Source Escape Room/index.html b/projects/Crowd Source Escape Room/index.html new file mode 100644 index 00000000..e305b537 --- /dev/null +++ b/projects/Crowd Source Escape Room/index.html @@ -0,0 +1,21 @@ + + + + + + + Escape Room + + +
+

Escape Room Challenge

+
+

Solve the puzzle to escape!

+ + +

+
+
+ + + diff --git a/projects/Crowd Source Escape Room/script.js b/projects/Crowd Source Escape Room/script.js new file mode 100644 index 00000000..5b172031 --- /dev/null +++ b/projects/Crowd Source Escape Room/script.js @@ -0,0 +1,61 @@ +const puzzles = [ + { question: "What has keys but can't open locks?", answer: "piano" }, + { question: "I speak without a mouth and hear without ears. What am I?", answer: "echo" }, + { question: "I’m tall when I’m young, and I’m short when I’m old. What am I?", answer: "candle" } +]; + +let currentPuzzleIndex = 0; +let score = 0; +let timer; +const timeLimit = 30; // seconds + +const puzzleText = document.getElementById('puzzle-text'); +const userInput = document.getElementById('user-input'); +const submitButton = document.getElementById('submit-button'); +const feedback = document.getElementById('feedback'); + +function displayPuzzle() { + if (currentPuzzleIndex < puzzles.length) { + puzzleText.textContent = puzzles[currentPuzzleIndex].question; + feedback.textContent = ''; + userInput.value = ''; + startTimer(); + } else { + puzzleText.textContent = "You've escaped the room! Your score: " + score; + userInput.style.display = 'none'; + submitButton.style.display = 'none'; + } +} + +function startTimer() { + clearInterval(timer); + let timeLeft = timeLimit; + feedback.textContent = `Time left: ${timeLeft}s`; + + timer = setInterval(() => { + timeLeft--; + feedback.textContent = `Time left: ${timeLeft}s`; + if (timeLeft <= 0) { + clearInterval(timer); + feedback.textContent = "Time's up! Game over."; + userInput.style.display = 'none'; + submitButton.style.display = 'none'; + } + }, 1000); +} + +submitButton.addEventListener('click', () => { + const userAnswer = userInput.value.toLowerCase(); + if (userAnswer === puzzles[currentPuzzleIndex].answer) { + feedback.textContent = "Correct! Score: " + (++score); + currentPuzzleIndex++; + displayPuzzle(); + } else { + feedback.textContent = "Try again!"; + userInput.classList.add('incorrect'); + setTimeout(() => userInput.classList.remove('incorrect'), 500); + } +}); + +// Initialize the first puzzle +displayPuzzle(); diff --git a/projects/Crowd Source Escape Room/styles.css b/projects/Crowd Source Escape Room/styles.css new file mode 100644 index 00000000..ecb3b9f6 --- /dev/null +++ b/projects/Crowd Source Escape Room/styles.css @@ -0,0 +1,54 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: black; + color: white; + font-family: Arial, sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + text-align: center; +} + +#puzzle-container { + background-color: rgba(255, 255, 255, 0.1); + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); +} + +input { + padding: 10px; + margin: 10px 0; + border-radius: 5px; + border: none; +} + +button { + padding: 10px 15px; + border: none; + border-radius: 5px; + background-color: #007BFF; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#feedback { + margin-top: 10px; +} + +.incorrect { + border: 2px solid red; +}