Mystery Puzzle Game in JavaScript using Riddle API

Last Updated : 06 Aug, 2024

Creating engaging and interactive games can be an exciting way to show your JavaScript skills. In this article, we will walk through the creation of a Mystery Puzzle Game using HTML, CSS, and JavaScript. The game presents a riddle to the user and checks if the user's input matches the correct answer.

Prerequisites

Approach

Create elements for riddle display, answer input, check button, next button, and message displays.
Style the game elements using CSS to enhance the visual appeal.
Using JavaScript fetch riddles from an external API.
Implement event listeners for buttons to trigger actions like checking answers, displaying correct answers, and loading new riddles.
Store the correct answer in a variable for comparison with user input and provide feedback to players based on their answers, offering encouragement and guidance.

Example: Implementing Riddle API to Create Mystery Puzzle Game.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Mystery Puzzle Game</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Mystery Puzzle Game</h1>
        <div class="riddle">
            <p>Can you solve this riddle?</p>
            <span class="question"></span>
            <input type="text" id="answer" 
            placeholder="Your answer">
            <button id="check">Check Answer</button>
        </div>
        <div class="message hidden"></div>
        <div class="revealed-message hidden"></div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

/* style.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 20px;
}

h1 {
    color: #4CAF50;
}

.riddle p,
.riddle span {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

#answer {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
}

button:hover {
    background-color: #45a049;
}

.message {
    margin-top: 20px;
    font-size: 16px;
}

.revealed-message {
    margin-top: 10px;
    font-size: 16px;
    color: #e74c3c;
}

.hidden {
    display: none;
}

@media (max-width: 600px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 24px;
    }

    .riddle p,
    .riddle span {
        font-size: 16px;
    }

    #answer,
    button {
        font-size: 14px;
    }

    .message,
    .revealed-message {
        font-size: 14px;
    }
}

Javascript

// script.js

const riddle = document.querySelector(".question");
const answerInput = document.getElementById("answer");
const checkButton = document.getElementById("check");
const messageDiv = document.querySelector(".message");
const revealedMessage = document.querySelector(".revealed-message");

let answer = "";
let attempts = 0;
const maxAttempts = 2;

// Fetch a riddle when the window loads
window.addEventListener("load", () => {
    fetchRiddle();
});

// Function to fetch a riddle from the API
function fetchRiddle() {
    fetch("https://riddles-api.vercel.app/random")
        .then((response) => response.json())
        .then((data) => {
            riddle.innerHTML = data.riddle;
            answer = data.answer.toLowerCase();
            attempts = 0;
            messageDiv.classList.add("hidden");
            revealedMessage.classList.add("hidden");
            answerInput.value = "";
        });
}

checkButton.addEventListener("click", () => {
    const userAnswer = answerInput.value.trim().toLowerCase();
    attempts++;

    if (userAnswer === answer) {
        messageDiv.classList.remove("hidden");
        messageDiv.textContent = "Congratulations! You've solved the riddle.";
        revealedMessage.classList.add("hidden");
    } else {
        if (attempts < maxAttempts) {
            messageDiv.classList.add("hidden");
            revealedMessage.classList.remove("hidden");
            revealedMessage.textContent = `Sorry, that is incorrect.
             Try again. (${attempts}/${maxAttempts})`;
        } else {
            messageDiv.classList.add("hidden");
            revealedMessage.classList.remove("hidden");
            revealedMessage.textContent = `You've used all attempts.
             The correct answer was: ${answer}.`;
        }
    }
});

Output GIF:

Number Guessing Game using JavaScript

rn540

Improve

Article Tags :

Mystery Puzzle Game in JavaScript using Riddle API

Prerequisites

Approach

Output GIF:

Similar Reads

Thank You!

What kind of Experience do you want to share?