Created a page to display the evolution of the sci-fi pun app

ToonTalk · Jan 21, 2024 · 2034854 · 2034854
1 parent 528eca8
commit 2034854
Show file tree

Hide file tree

Showing 30 changed files with 2,210 additions and 0 deletions.
diff --git a/apps/Riddle game with Ada and Curio/constrained movable blue square.html b/apps/Riddle game with Ada and Curio/constrained movable blue square.html
@@ -0,0 +1,62 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+
+<style>
+/* CSS styles will go here */
+
+#gameArea {
+    width: 400px;
+    height: 400px;
+    background-color: green;
+    position: relative;
+    margin: auto;
+}
+
+#player {
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+</style></head>
+<body>
+    <div id="gameArea">
+
+    </div>
+
+<div id="player"></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';
+});
+
+// JavaScript code will go here
+</script></body>
+</html>
diff --git a/apps/Riddle game with Ada and Curio/css fairy v2.html b/apps/Riddle game with Ada and Curio/css fairy v2.html
@@ -0,0 +1,117 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+
+<style>
+/* CSS styles will go here */
+
+#gameArea {
+    width: 400px;
+    height: 400px;
+    background-color: green;
+    position: relative;
+    margin: auto;
+}
+
+#player {
+    width: 20px;
+    height: 20px;
+    background-color: lightpink; /* Fairy color */
+    border-radius: 50%; /* Circular shape */
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#player::before, #player::after {
+    content: '';
+    position: absolute;
+    width: 40px; /* Larger wings */
+    height: 20px;
+    background-color: lightyellow; /* Light wing color */
+    border-radius: 50%;
+}
+
+#player::before {
+    left: -30px; /* Adjusted wing position */
+    top: 0;
+}
+
+#player::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
+    background-color: white;
+    border-radius: 50%;
+    animation: magicTrail 1s infinite;
+}
+
+/* Magic Trail */
+@keyframes magicTrail {
+    0% { opacity: 1; }
+    100% { opacity: 0; transform: translateY(-20px); }
+}
+</style></head>
+<body>
+    <div id="gameArea">
+
+    </div>
+
+<div id="player"></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
+
+    if (event.key === 'ArrowUp') {
+        top -= step;
+    } else if (event.key === 'ArrowDown') {
+        top += step;
+    } else if (event.key === 'ArrowLeft') {
+        left -= step;
+    } else if (event.key === 'ArrowRight') {
+        left += step;
+    }
+
+    // Update player's position
+    player.style.top = top + 'px';
+    player.style.left = left + 'px';
+});
+
+
+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';
+});
+
+// JavaScript code will go here
+</script></body>
+</html>
diff --git a/apps/Riddle game with Ada and Curio/css fairy v3.html b/apps/Riddle game with Ada and Curio/css fairy v3.html
@@ -0,0 +1,72 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+
+<style>
+/* CSS styles will go here */
+
+#gameArea {
+    width: 400px;
+    height: 400px;
+    background-color: green;
+    position: relative;
+    margin: auto;
+}
+</style></head>
+<body>
+    <div id="gameArea">
+
+    <div id="player" style="background-image: url('your_fairy_image.png'); width: 100px; height: 100px; background-size: cover;"></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';
+});
+
+
+document.addEventListener('keydown', function(event) {
+    const player = document.getElementById('player');
+    let top = player.offsetTop;
+    let left = player.offsetLeft;
+
+    const step = 10; // Adjust if needed
+
+    if (event.key === 'ArrowUp') {
+        top -= step;
+    } else if (event.key === 'ArrowDown') {
+        top += step;
+    } else if (event.key === 'ArrowLeft') {
+        left -= step;
+    } else if (event.key === 'ArrowRight') {
+        left += step;
+    }
+
+    player.style.top = top + 'px';
+    player.style.left = left + 'px';
+});
+
+// JavaScript code will go here
+</script></body>
+</html>
diff --git a/apps/Riddle game with Ada and Curio/css fairy.html b/apps/Riddle game with Ada and Curio/css fairy.html
@@ -0,0 +1,103 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Adventure Game</title>
+
+<style>
+/* CSS styles will go here */
+
+#gameArea {
+    width: 400px;
+    height: 400px;
+    background-color: green;
+    position: relative;
+    margin: auto;
+}
+
+#player {
+    width: 20px;
+    height: 20px;
+    background-color: pink; /* New color */
+    border-radius: 50%; /* Make it circular */
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#player::before, #player::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 15px;
+    background-color: lightblue; /* Wing color */
+    border-radius: 50%;
+}
+
+#player::before {
+    left: -15px;
+    top: 2px;
+}
+
+#player::after {
+    right: -15px;
+    top: 2px;
+}
+</style></head>
+<body>
+    <div id="gameArea">
+
+    </div>
+
+<div id="player"></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
+
+    if (event.key === 'ArrowUp') {
+        top -= step;
+    } else if (event.key === 'ArrowDown') {
+        top += step;
+    } else if (event.key === 'ArrowLeft') {
+        left -= step;
+    } else if (event.key === 'ArrowRight') {
+        left += step;
+    }
+
+    // Update player's position
+    player.style.top = top + 'px';
+    player.style.left = left + 'px';
+});
+
+
+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';
+});
+
+// JavaScript code will go here
+</script></body>
+</html>