riddle adventure game by ChatGPT (Ada and Curio)

ToonTalk · Nov 22, 2023 · 52faaa0 · 52faaa0
1 parent 10608f5
commit 52faaa0
Show file tree

Hide file tree

Showing 5 changed files with 306 additions and 0 deletions.
diff --git a/apps/zelda/cute_monster.png b/apps/zelda/cute_monster.png
diff --git a/apps/zelda/fairy.png b/apps/zelda/fairy.png
diff --git a/apps/zelda/mygame - Copy.html b/apps/zelda/mygame - Copy.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+    <style>
+#gameArea {
+    width: 400px; /* Adjust to your game area's size */
+    height: 400px; /* Adjust to your game area's size */
+    position: relative;
+    margin: auto;
+    background-color: green; /* Solid green background */
+}
+
+    </style>
+</head>
+<body>
+    <div id="gameArea">
+<div id="player" style="background-image: url('fairy.png'); width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; position: absolute;"></div>
+
+<div id="monster" style="background-image: url('cute_monster.png'); width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; position: absolute; top: 100px; left: 100px;"></div>
+
+<div id="treasure" style="background-image: url('treasure_chest.png'); width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; position: absolute; top: 200px; left: 200px; display: none;"></div>
+
+</div>
+        <!-- Game content will go here -->
+    </div>
+    <script>
+document.addEventListener('keydown', function(event) {
+    const player = document.getElementById('player');
+    let top = player.offsetTop;
+    let left = player.offsetLeft;
+
+    const step = 10; // How many pixels the player moves
+    const gameArea = document.getElementById('gameArea');
+    const maxTop = gameArea.offsetHeight - player.offsetHeight;
+    const maxLeft = gameArea.offsetWidth - player.offsetWidth;
+
+    if (event.key === 'ArrowUp' && top > 0) {
+        top -= step;
+    } else if (event.key === 'ArrowDown' && top < maxTop) {
+        top += step;
+    } else if (event.key === 'ArrowLeft' && left > 0) {
+        left -= step;
+    } else if (event.key === 'ArrowRight' && left < maxLeft) {
+        left += step;
+    }
+
+    // Update player's position
+    player.style.top = top + 'px';
+    player.style.left = left + 'px';
+
+    checkInteractionWithMonster();
+});
+
+const riddles = [
+    { question: "I am tall when I am young and short when I am old. What am I?", answer: "candle" },
+    { question: "What has keys but can't open locks?", answer: "piano" },
+    { question: "What can travel around the world while staying in a corner?", answer: "stamp" }
+    // Add as many riddles as you like
+];
+
+function checkInteractionWithMonster() {
+    const player = document.getElementById('player');
+    const monster = document.getElementById('monster');
+    const distance = 30; // distance in pixels to trigger interaction
+
+    if (Math.abs(player.offsetTop - monster.offsetTop) <= distance && Math.abs(player.offsetLeft - monster.offsetLeft) <= distance) {
+        const randomRiddle = riddles[Math.floor(Math.random() * riddles.length)];
+        speak(randomRiddle.question); // Speak the riddle
+        let answer = prompt(randomRiddle.question + "\n(Type 'give up' to skip)").trim().toLowerCase();
+
+        if (answer === randomRiddle.answer) {
+            let correctResponse = "Correct! You found a treasure!";
+            speak(correctResponse); // Speak the response
+            addNewTreasure(); // Add a new treasure to the game area
+            moveElementToRandomPosition('monster', 400, 400, 80); // Move the monster
+        } else if (answer === "give up") {
+            let giveUpResponse = "Okay, no problem! The correct answer was: " + randomRiddle.answer + ".";
+            speak(giveUpResponse); // Speak the response
+            moveElementToRandomPosition('monster', 400, 400, 80); // Move the monster
+        } else {
+            let wrongResponse = "Sorry, that's not right. The correct answer was: " + randomRiddle.answer + ".";
+            speak(wrongResponse); // Speak the response
+        }
+    }
+}
+
+function moveElementToRandomPosition(elementId, gameAreaWidth, gameAreaHeight, elementSize) {
+    const element = document.getElementById(elementId);
+    const maxX = gameAreaWidth - elementSize;
+    const maxY = gameAreaHeight - elementSize;
+    const randomX = Math.floor(Math.random() * maxX);
+    const randomY = Math.floor(Math.random() * maxY);
+
+    element.style.left = randomX + 'px';
+    element.style.top = randomY + 'px';
+}
+
+function addNewTreasure() {
+    const gameArea = document.getElementById('gameArea');
+    const newTreasure = document.createElement('div');
+    newTreasure.style.width = '50px';
+    newTreasure.style.height = '50px';
+    newTreasure.style.backgroundImage = "url('treasure_chest.png')";
+    newTreasure.style.backgroundSize = 'contain';
+    newTreasure.style.backgroundRepeat = 'no-repeat';
+    newTreasure.style.position = 'absolute';
+
+    // Random position within the game area
+    const maxX = gameArea.offsetWidth - 50; // 50 is the width of the treasure
+    const maxY = gameArea.offsetHeight - 50; // 50 is the height of the treasure
+    const randomX = Math.floor(Math.random() * maxX);
+    const randomY = Math.floor(Math.random() * maxY);
+    newTreasure.style.left = randomX + 'px';
+    newTreasure.style.top = randomY + 'px';
+
+    gameArea.appendChild(newTreasure);
+}
+
+function speak(text) {
+    const speech = new SpeechSynthesisUtterance(text);
+    window.speechSynthesis.speak(speech);
+}
+
+    </script>
+</body>
+</html>
diff --git a/apps/zelda/mygame.html b/apps/zelda/mygame.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+    <style>
+        #gameArea {
+            width: 400px; /* Adjust to your game area's size */
+            height: 400px; /* Adjust to your game area's size */
+            position: relative;
+            margin: auto;
+            background-color: green; /* Solid green background */
+        }
+        /* Add any additional styles you need here */
+    </style>
+</head>
+<body>
+    <div id="gameArea">
+        <div id="player" style="background-image: url('fairy.png'); width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; position: absolute;"></div>
+        <div id="monster" style="background-image: url('cute_monster.png'); width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; position: absolute; top: 100px; left: 100px;"></div>
+        <!-- Treasures will be added dynamically -->
+        <div id="spokenResponse" style="color: white; position: absolute; bottom: 10px; left: 10px;"></div>
+    </div>
+    <script>
+        // Player Movement Logic
+        document.addEventListener('keydown', function(event) {
+            const player = document.getElementById('player');
+            let top = player.offsetTop;
+            let left = player.offsetLeft;
+
+            const step = 10; // How many pixels the player moves
+            const gameArea = document.getElementById('gameArea');
+            const maxTop = gameArea.offsetHeight - player.offsetHeight;
+            const maxLeft = gameArea.offsetWidth - player.offsetWidth;
+
+            if (event.key === 'ArrowUp' && top > 0) {
+                top -= step;
+            } else if (event.key === 'ArrowDown' && top < maxTop) {
+                top += step;
+            } else if (event.key === 'ArrowLeft' && left > 0) {
+                left -= step;
+            } else if (event.key === 'ArrowRight' && left < maxLeft) {
+                left += step;
+            }
+
+            player.style.top = top + 'px';
+            player.style.left = left + 'px';
+            checkInteractionWithMonster();
+        });
+
+        const riddles = [
+            { question: "I am tall when I am young and short when I am old. What am I?", answer: "candle" },
+            { question: "What has keys but can't open locks?", answer: "piano" },
+            { question: "What can travel around the world while staying in a corner?", answer: "stamp" }
+            // Add as many riddles as you like
+        ];
+
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        let recognition = null;
+
+        if (SpeechRecognition) {
+            recognition = new SpeechRecognition();
+            recognition.lang = 'en-US';
+            recognition.continuous = false;
+        } else {
+            alert("Sorry, your browser does not support speech recognition.");
+        }
+
+        function speak(text) {
+            const speech = new SpeechSynthesisUtterance(text);
+            window.speechSynthesis.speak(speech);
+        }
+
+        function checkAnswer(spokenAnswer, correctAnswer) {
+            if (spokenAnswer === correctAnswer) {
+                speak("Correct! You found a treasure!");
+                addNewTreasure();
+                moveElementToRandomPosition('monster', 400, 400, 80);
+            } else {
+                speak("Sorry, that's not right.");
+            }
+        }
+
+        function checkInteractionWithMonster() {
+            const player = document.getElementById('player');
+            const monster = document.getElementById('monster');
+            const distance = 30;
+
+            if (Math.abs(player.offsetTop - monster.offsetTop) <= distance && Math.abs(player.offsetLeft - monster.offsetLeft) <= distance) {
+                const randomRiddle = riddles[Math.floor(Math.random() * riddles.length)];
+                speak(randomRiddle.question);
+
+                if (recognition) {
+                    recognition.onresult = function(event) {
+                        const spokenAnswer = event.results[0][0].transcript.trim().toLowerCase();
+                        document.getElementById('spokenResponse').innerText = "You said: " + spokenAnswer;
+
+                        recognition.stop(); // Stop listening after receiving an answer
+
+                        if (spokenAnswer === "give up") {
+                            let giveUpResponse = "Okay, no problem! The correct answer was: " + randomRiddle.answer + ".";
+                            speak(giveUpResponse);
+                            moveElementToRandomPosition('monster', 400, 400, 80); // Move the monster
+                        } else {
+                            checkAnswer(spokenAnswer, randomRiddle.answer);
+                        }
+                    };
+
+                    recognition.onerror = function(event) {
+                        // Handle recognition errors, such as not understanding the response
+                        speak("I didn't catch that. Please try again.");
+                    };
+
+                    recognition.start(); // Start listening
+                }
+            }
+        }
+
+        function moveElementToRandomPosition(elementId, gameAreaWidth, gameAreaHeight, elementSize) {
+            const element = document.getElementById(elementId);
+            const maxX = gameAreaWidth - elementSize;
+            const maxY = gameAreaHeight - elementSize;
+            const randomX = Math.floor(Math.random() * maxX);
+            const randomY = Math.floor(Math.random() * maxY);
+
+            element.style.left = randomX + 'px';
+            element.style.top = randomY + 'px';
+        }
+
+        function addNewTreasure() {
+            const gameArea = document.getElementById('gameArea');
+            const newTreasure = document.createElement('div');
+            newTreasure.style.width = '50px';
+            newTreasure.style.height = '50px';
+            newTreasure.style.backgroundImage = "url('treasure_chest.png')";
+            newTreasure.style.backgroundSize = 'contain';
+            newTreasure.style.backgroundRepeat = 'no-repeat';
+            newTreasure.style.position = 'absolute';
+
+            // Random position within the game area
+            const maxX = gameArea.offsetWidth - 50; // 50 is the width of the treasure
+            const maxY = gameArea.offsetHeight - 50; // 50 is the height of the treasure
+            const randomX = Math.floor(Math.random() * maxX);
+            const randomY = Math.floor(Math.random() * maxY);
+            newTreasure.style.left = randomX + 'px';
+            newTreasure.style.top = randomY + 'px';
+
+            gameArea.appendChild(newTreasure);
+        }
+
+        function askRiddle(riddle) {
+            speak(riddle.question);
+            if (recognition) {
+                recognition.onresult = function(event) {
+                    const spokenAnswer = event.results[0][0].transcript.trim().toLowerCase();
+                    document.getElementById('spokenResponse').innerText = "You said: " + spokenAnswer;
+
+                    recognition.stop(); // Stop listening after receiving an answer
+
+                    if (spokenAnswer === "give up") {
+                        let giveUpResponse = "Okay, no problem! The correct answer was: " + riddle.answer + ".";
+                        speak(giveUpResponse);
+                        moveElementToRandomPosition('monster', 400, 400, 80); // Move the monster
+                    } else {
+                        checkAnswer(spokenAnswer, riddle.answer);
+                    }
+                };
+
+                recognition.onerror = function(event) {
+                    // Handle recognition errors, such as not understanding the response
+                    speak("I didn't catch that. Please try again.");
+                };
+
+                recognition.start(); // Start listening
+            }
+        }
+
+    </script>
+</body>
+</html>
diff --git a/apps/zelda/treasure_chest.png b/apps/zelda/treasure_chest.png