Interactive Storytelling App JavaScript, HTML, CSS

👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Interactive Story</title>
<style>
body {
  font-family: sans-serif;
  margin: 20px;
}

#story-container {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 15px;
}

#text-area {
  margin-bottom: 10px;
}

button {
  padding: 8px 12px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Interactive Story</h1>

<div id="story-container">
  <div id="text-area"></div>
  <div id="choices-area"></div>
</div>

<script>
const storyData = {
  start: {
    text: "You wake up in a mysterious forest.  Sunlight filters through the trees. What do you do?",
    choices: [
      { text: "Explore deeper into the forest", nextScene: "forest" },
      { text: "Follow a faint path to the north", nextScene: "path" }
    ]
  },
  forest: {
    text: "You venture deeper into the forest. You hear rustling in the bushes. Do you investigate?",
    choices: [
      { text: "Investigate the rustling", nextScene: "monster" },
      { text: "Ignore it and continue forward", nextScene: "deeper_forest" }
    ]
  },
  path: {
    text: "You follow the faint path north. It leads you to a small, abandoned cottage. Do you enter?",
    choices: [
      { text: "Enter the cottage", nextScene: "cottage" },
      { text: "Continue past the cottage", nextScene: "bridge" }
    ]
  },
  monster: {
    text: "A small, furry monster jumps out! It looks harmless, but scared. It offers you a shiny pebble. Do you take it?",
    choices: [
      { text: "Take the pebble", nextScene: "pebble" },
      { text: "Decline the pebble", nextScene: "deeper_forest" }
    ]
  },
  deeper_forest: {
    text: "You continue through the forest. You reach a wide, fast-flowing river.  There's no obvious way across. Do you look for a shallower spot or try to build a raft?",
    choices: [
      { text: "Look for a shallower spot", nextScene: "shallow_river" },
      { text: "Try to build a raft", nextScene: "raft" }
    ]
  },
  cottage: {
    text: "The cottage is dusty and deserted.  You find a rusty key hidden under a loose floorboard. Do you take it?",
    choices: [
      { text: "Take the key", nextScene: "key" },
      { text: "Leave the key", nextScene: "bridge" }
    ]
  },
  bridge: {
    text: "You reach a rickety old bridge.  It looks like it might collapse at any moment.  Do you cross?",
    choices: [
      { text: "Cross the bridge carefully", nextScene: "end" },
      { text: "Turn back and explore the forest more", nextScene: "forest" }
    ]
  },
  pebble: {
    text: "You take the pebble. The monster seems pleased and scampers away. You continue through the forest.",
    choices: [
      { text: "Continue forward", nextScene: "deeper_forest" } // Modified to continue the game
    ]
  },
  key: {
    text: "You take the rusty key. You continue on your journey.",
    choices: [
      { text: "Continue on your journey", nextScene: "bridge" } //Modified to continue the game
    ]
  },
  shallow_river: {
    text: "You search for a shallower spot and find a place where you can carefully wade across the river.",
    choices: [
      { text: "Continue your adventure", nextScene: "end" }
    ]
  },
  raft: {
    text: "You try to build a raft, but the materials are difficult to work with and your raft is too flimsy. It breaks apart in the river and you have to swim to safety.",
    choices: [
      { text: "Continue your adventure (wetter than before!)", nextScene: "end"}
    ]
  },
  end: {
    text: "You reach the edge of the forest and see a road leading to a distant town.  You have successfully navigated the wilderness! Congratulations!",
    choices: [] // No more choices, the story ends
  }
};

const textArea = document.getElementById("text-area");
const choicesArea = document.getElementById("choices-area");

let currentScene = "start";

function renderScene() {
  const scene = storyData[currentScene];
  textArea.textContent = scene.text;

  // Clear previous choices
  choicesArea.innerHTML = "";

  // Render new choices
  scene.choices.forEach(choice => {
    const button = document.createElement("button");
    button.textContent = choice.text;
    button.addEventListener("click", () => {
      currentScene = choice.nextScene;
      renderScene();
    });
    choicesArea.appendChild(button);
  });
}

// Initial render
renderScene();
</script>

</body>
</html>
```
👁️ Viewed: 11
Interactive Storytelling App JavaScript, HTML, CSS

Comments

Site Statistics
