Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adventure Quest</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #f0f8ff;
            font-family: 'Arial', sans-serif;
            color: #333;
            padding: 20px;
            text-align: center;
        }
        #game {
            max-width: 600px;
            margin: 0 auto;
        }
        .option-button {
            background-color: #008cba;
            border: none;
            color: white;
            padding: 15px 30px;
            margin: 10px;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
        }
        .option-button:hover {
            background-color: #005f5f;
        }
        #scene-text {
            font-size: 24px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="scene-text"></div>
        <div id="options"></div>
    </div>

    <script>
        // Define the scenes of the adventure
        const scenes = {
            start: {
                text: "You are in a sunny meadow filled with colorful flowers.",
                options: [
                    { text: "Follow the butterfly", nextScene: "butterfly" },
                    { text: "Climb the big oak tree", nextScene: "oakTree" },
                    { text: "Explore the hidden path", nextScene: "hiddenPath" }
                ]
            },
            butterfly: {
                text: "The butterfly leads you to a sparkling stream.",
                options: [
                    { text: "Catch a fish", nextScene: "catchFish" },
                    { text: "Skip stones", nextScene: "skipStones" },
                    { text: "Build a boat", nextScene: "buildBoat" }
                ]
            },
            oakTree: {
                text: "At the top of the tree, you find a friendly owl.",
                options: [
                    { text: "Talk to the owl", nextScene: "talkOwl" },
                    { text: "Fly with the owl", nextScene: "flyOwl" },
                    { text: "Take a nap", nextScene: "napTree" }
                ]
            },
            hiddenPath: {
                text: "The path leads to a candy castle.",
                options: [
                    { text: "Eat some candy", nextScene: "eatCandy" },
                    { text: "Meet the candy king", nextScene: "candyKing" },
                    { text: "Play in the candy garden", nextScene: "candyGarden" }
                ]
            },
            // Butterfly branch endings
            catchFish: {
                text: "You catch a magical talking fish who grants you a wish!",
                options: []
            },
            skipStones: {
                text: "Each stone you skip turns into a hopping frog that sings.",
                options: []
            },
            buildBoat: {
                text: "You sail down the stream and discover a secret island.",
                options: []
            },
            // Oak tree branch endings
            talkOwl: {
                text: "The owl shares wisdom and tells you stories of the stars.",
                options: []
            },
            flyOwl: {
                text: "You soar above the clouds and see the world below.",
                options: []
            },
            napTree: {
                text: "You have a delightful dream about flying pies and dancing trees.",
                options: []
            },
            // Hidden path branch endings
            eatCandy: {
                text: "The candies give you superpowers to run super fast!",
                options: []
            },
            candyKing: {
                text: "The candy king crowns you as the prince/princess of sweets.",
                options: []
            },
            candyGarden: {
                text: "The flowers sing and dance when you play among them.",
                options: []
            }
        };

        // Initialize the game
        let currentScene = 'start';

        // Function to display the current scene
        function displayScene(sceneKey) {
            const scene = scenes[sceneKey];
            const sceneTextDiv = document.getElementById('scene-text');
            const optionsDiv = document.getElementById('options');

            // Display the scene's text
            sceneTextDiv.textContent = scene.text;

            // Clear previous options
            optionsDiv.innerHTML = '';

            // Check if there are options to display
            if (scene.options.length > 0) {
                // Display the options
                scene.options.forEach(option => {
                    const button = document.createElement('button');
                    button.textContent = option.text;
                    button.classList.add('option-button');
                    button.onclick = () => displayScene(option.nextScene);
                    optionsDiv.appendChild(button);
                });
            } else {
                // Ending scene - offer to restart
                const restartButton = document.createElement('button');
                restartButton.textContent = "Play Again";
                restartButton.classList.add('option-button');
                restartButton.onclick = () => displayScene('start');
                optionsDiv.appendChild(restartButton);
            }
        }

        // Start the game
        displayScene(currentScene);

    </script>
</body>
</html>
Editor is loading...