I would like to create a "choose your own adventure" type game in Javascript. I would like the interface to be text based, with the layout looking like this:
+--------------------------------------------------------------------------------------------------+
| |
| Current "story" text |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+--------------------------------------------------------------------------------------------------+
+--------------------------------------------------------------------------------------------------+
| |
| Choice 1 |
| |
| Choice 2 |
| |
| Choice 3 |
| |
| |
| |
| |
+--------------------------------------------------------------------------------------------------+
The background of the interface should be black and the text should be white. I would like you to develop the code as well as the story.
Please provide the code to do this
To create a simple "choose your own adventure" game using JavaScript, HTML, and CSS, you can follow this implementation. Note that for brevity, I have provided a short example story. You can expand the story as you wish.
- Create the HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choose Your Own Adventure</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="story-text"></div>
<div id="choices-container">
<button class="choice-btn" id="choice1" onclick="selectChoice(1)"></button>
<button class="choice-btn" id="choice2" onclick="selectChoice(2)"></button>
<button class="choice-btn" id="choice3" onclick="selectChoice(3)"></button>
</div>
</div>
<script src="game.js"></script>
</body>
</html>- Create the CSS file (styles.css):
body {
background-color: black;
font-family: 'Courier New', Courier, monospace;
color: white;
margin: 0;
padding: 0;
}
#game-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#story-text {
border: 2px solid white;
width: 95%;
max-width: 800px;
padding: 1rem;
height: 60%;
overflow-y: auto;
}
#choices-container {
border: 2px solid white;
width: 95%;
max-width: 800px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.choice-btn {
width: 100%;
padding: 1rem;
background-color: black;
color: white;
border: 1px solid white;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
outline: none;
}
.choice-btn:hover {
background-color: white;
color: black;
}- Create the JavaScript file (game.js):
const storyText = document.getElementById("story-text");
const choiceButtons = document.getElementsByClassName("choice-btn");
const story = [
{
id: 1,
text: "You find yourself in a dark room. There are 3 doors in front of you.",
choices: [
{ text: "Enter the red door", nextId: 2 },
{ text: "Enter the blue door", nextId: 3 },
{ text: "Enter the green door", nextId: 4 },
],
},
{
id: 2,
text: "You find a treasure chest! Congratulations!",
choices: [{ text: "Restart", nextId: 1 }],
},
{
id: 3,
text: "You enter a room full of mirrors.",
choices: [
{ text: "Go back", nextId: 1 },
{ text: "Explore the room", nextId: 5 },
],
},
// ...continue with your story
];
let currentStory;
function startGame() {
currentStory = story[0];
showStory();
}
functionPlease continue
Sure, I'll continue with the JavaScript code (game.js):
// ...continue with your story
{
id: 4,
text: "You enter a room with a mysterious glowing orb.",
choices: [
{ text: "Go back", nextId: 1 },
{ text: "Touch the orb", nextId: 6 },
],
},
{
id: 5,
text: "You explore the room and find a hidden passage.",
choices: [
{ text: "Go back", nextId: 3 },
{ text: "Enter the passage", nextId: 7 },
],
},
{
id: 6,
text: "You gain magical powers from the orb! Congratulations!",
choices: [{ text: "Restart", nextId: 1 }],
},
{
id: 7,
text: "The passage leads to another treasure chest! Congratulations!",
choices: [{ text: "Restart", nextId: 1 }],
},
];
function showStory() {
storyText.innerText = currentStory.text;
for (let i = 0; i < choiceButtons.length; i++) {
if (currentStory.choices[i]) {
choiceButtons[i].innerText = currentStory.choices[i].text;
choiceButtons[i].style.display = "block";
} else {
choiceButtons[i].style.display = "none";
}
}
}
function selectChoice(choiceIndex) {
const nextId = currentStory.choices[choiceIndex - 1].nextId;
currentStory = story.find((storyPart) => storyPart.id === nextId);
showStory();
}
startGame();The provided code should give you a basic "choose your own adventure" game. You can expand the story by adding more story parts to the story array in the game.js file. Make sure you also update the choices array for each story part to properly link to the new story parts.
To test the game, open the index.html file in a web browser.
Would it be possible to adjust the playfield so its responsive?
Certainly! To make the playfield responsive, you can modify the CSS to use relative units and flexbox. Here's an updated version of the styles.css file:
body {
background-color: black;
font-family: 'Courier New', Courier, monospace;
color: white;
margin: 0;
padding: 0;
}
#game-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
box-sizing: border-box;
padding: 2rem;
}
#story-text {
border: 2px solid white;
width: 100%;
padding: 1rem;
height: 50%;
overflow-y: auto;
box-sizing: border-box;
margin-bottom: 1rem;
}
#choices-container {
border: 2px solid white;
width: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 30%;
box-sizing: border-box;
}
.choice-btn {
flex: 1;
padding: 0.5rem;
background-color: black;
color: white;
border: 1px solid white;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.choice-btn:hover {
background-color: white;
color: black;
}This version of the styles.css file uses the vh (viewport height) and vw (viewport width) units to size the game container, and it uses percentage-based widths for the #story-text and #choices-container elements. It also utilizes flexbox to distribute the available space for the choice buttons.
These changes should make the playfield responsive to different screen sizes. To test the responsiveness, open the index.html file in a web browser and resize the window.
Oops! The third option falls outside the surrounding box. Can you fix that?
Apologies for the oversight. To fix this issue, let's adjust the #choices-container height and modify the choice-btn flex property. Here's the updated styles.css file:
body {
background-color: black;
font-family: 'Courier New', Courier, monospace;
color: white;
margin: 0;
padding: 0;
}
#game-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
box-sizing: border-box;
padding: 2rem;
}
#story-text {
border: 2px solid white;
width: 100%;
padding: 1rem;
height: 60%;
overflow-y: auto;
box-sizing: border-box;
margin-bottom: 1rem;
}
#choices-container {
border: 2px solid white;
width: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 35%;
box-sizing: border-box;
}
.choice-btn {
flex: 1;
min-height: 0; /* Add this line to prevent overflow */
padding: 0.5rem;
background-color: black;
color: white;
border: 1px solid white;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.choice-btn:hover {
background-color: white;
color: black;
}This change increases the #choices-container height to 35% and adds a min-height: 0 rule to the .choice-btn class to prevent overflow.
Now, the choice buttons should stay within the surrounding box. To test the updated layout, open the index.html file in a web browser and resize the window.
Thank you very much!
Now, i would like to actually work on the story. You've done a great job with the boilerplate story, but we can get something really awesome.
Will you please replace the story constant with a new story? Please feel free to be as loquacious as possible and make the story compelling.
I'm glad you found the boilerplate story helpful! I'd be happy to provide you with a more detailed and compelling story. Here's an updated story array for your game.js file:
const story = [
{
id: 1,
text: "You find yourself in a quaint, peaceful village surrounded by dense woods. The villagers have been living in fear of a fearsome dragon that has settled nearby. You decide to confront the beast and put an end to the villagers' suffering.",
choices: [
{ text: "Ask the villagers for more information", nextId: 2 },
{ text: "Gather supplies for the journey", nextId: 3 },
{ text: "Venture into the woods", nextId: 4 },
],
},
{
id: 2,
text: "You speak with the village elder, who shares stories of the dragon's wrath. You learn that the dragon resides in a cave atop the treacherous Stony Mountain. They suggest gathering supplies before you leave.",
choices: [
{ text: "Gather supplies for the journey", nextId: 3 },
{ text: "Venture into the woods", nextId: 4 },
],
},
{
id: 3,
text: "You acquire a sturdy sword, a shield, a map, and some food for the journey. With your supplies in hand, you're ready to embark on your adventure.",
choices: [
{ text: "Venture into the woods", nextId: 4 },
],
},
{
id: 4,
text: "You make your way through the woods, following the map to the base of Stony Mountain. As you ascend, you find two possible paths.",
choices: [
{ text: "Take the steep, rocky path", nextId: 5 },
{ text: "Take the winding, forested path", nextId: 6 },
],
},
{
id: 5,
text: "The steep, rocky path is treacherous, and you barely avoid a landslide. You spot a cave entrance nearby.",
choices: [
{ text: "Enter the cave", nextId: 7 },
{ text: "Go back and take the forested path", nextId: 6 },
],
},
{
id: 6,
text: "The winding, forested path is less treacherous, but filled with thorny vines and roots. You come across a chasm with a rickety bridge.",
choices: [
{ text: "Cross the bridge", nextId: 8 },
{ text: "Go back and take the rocky path", nextId: 5 },
],
},
{
id: 7,
text: "You enter the cave, and the darkness surrounds you. The echoing growls of the dragon resonate through the cavern. You prepare for the confrontation.",
choices: [
{ text: "Attempt to negotiate with the dragon", nextId: 9 },
{ text: "Engage the dragon in battle", nextId: 10 },
],
},
{
id: 8,
text: "You cautiously cross the rickety bridge, which creaks under your weight. Once across, you find the entrance to the dragon's lair.",
choices: [
{ text: "Attempt to negotiate with the dragon", nextId: 9 },
{ text: "Engage the dragon in battle", nextId: 10 },
],
},
{
id:Please Continue
Certainly! Here's the continuation of the story array for your game.js file:
{
id: 9,
text: "You attempt to reason with the dragon, offering it food and treasure in exchange for leaving the village in peace. The dragon, intrigued by your offer, considers your proposal.",
choices: [
{ text: "Offer more treasure", nextId: 11 },
{ text: "Offer to find it a new lair", nextId: 12 },
],
},
{
id: 10,
text: "You engage the dragon in battle, wielding your sword and shield with courage. The fight is fierce, and both you and the dragon suffer injuries.",
choices: [
{ text: "Continue fighting", nextId: 13 },
{ text: "Attempt to flee", nextId: 14 },
],
},
{
id: 11,
text: "The dragon, enticed by the promise of even more treasure, agrees to your terms and leaves the village in peace. The villagers rejoice and celebrate your success.",
choices: [
{ text: "Restart", nextId: 1 },
],
},
{
id: 12,
text: "You promise to find the dragon a new, safer lair far from the village. The dragon agrees, and together you set off to find a suitable location. Upon finding a new lair, the dragon thanks you and leaves the village in peace.",
choices: [
{ text: "Restart", nextId: 1 },
],
},
{
id: 13,
text: "You continue fighting the dragon, pushing yourself to your limits. Finally, with a mighty blow, you strike down the beast. The villagers, now free from the dragon's terror, will forever remember you as their hero.",
choices: [
{ text: "Restart", nextId: 1 },
],
},
{
id: 14,
text: "You attempt to flee, but the dragon is too swift. It catches you and ends your journey.",
choices: [
{ text: "Restart", nextId: 1 },
],
},
];
// Rest of the JavaScript code remains the sameThis updated story array should provide a more detailed and engaging adventure. To test the new story, open the index.html file in a web browser and play through the different paths.
This is awesome, thank you. Can you give the game a name, please>?
I'm glad you like it! You can give the game a name by adding a title in the index.html file. Here's an updated version of the index.html file with the game name "Dragon's Dilemma":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Dragon's Dilemma</title>
</head>
<body>
<div id="game-container">
<h1>Dragon's Dilemma</h1>
<div id="story-text"></div>
<div id="choices-container">
<button class="choice-btn" onclick="selectChoice(1)">Choice 1</button>
<button class="choice-btn" onclick="selectChoice(2)">Choice 2</button>
<button class="choice-btn" onclick="selectChoice(3)">Choice 3</button>
</div>
</div>
<script src="game.js"></script>
</body>
</html>This version adds an <h1> element with the game name "Dragon's Dilemma" right above the story text. Feel free to change the name or its styling as you see fit.
To see the updated game with the new name, open the index.html file in a web browser.
Great! Can you please describe what the box art would look like if this was a floppy disk game from the 80's?
Certainly! If "Dragon's Dilemma" were an '80s floppy disk game, the box art would be a vivid, hand-drawn illustration with a slightly exaggerated and adventurous aesthetic, reminiscent of the fantasy art of that era.
In the foreground, our brave hero stands clad in armor, wielding a shining sword and a shield emblazoned with a crest. The hero's expression is determined, and their eyes are locked on the challenge ahead.
The middle ground would showcase the quaint village, with its thatched-roof cottages and bustling villagers. The villagers are looking towards the hero with expressions of hope and admiration. A mix of lush greenery and dense woods surrounds the village, creating an idyllic atmosphere.
In the background, the imposing Stony Mountain looms over the scene, with its rocky and forested paths leading up to the dragon's lair. The lair, a dark and foreboding cave entrance, is shrouded in shadow.
The fearsome dragon, the central figure of the box art, is illustrated with vibrant colors and intricate detailing. It has large, outstretched wings, sharp claws, and piercing eyes. A plume of smoke and flame billows from its mouth, emphasizing its immense power and the danger it presents.
At the top of the box art, the game's title, "Dragon's Dilemma," is written in an ornate, fantasy-style font with metallic textures and a subtle drop shadow. The overall color palette is rich and high-contrast, with deep shadows and bright highlights, adding to the sense of drama and adventure.
This box art would evoke a sense of wonder, danger, and excitement, inviting players to immerse themselves in the world of "Dragon's Dilemma" and embark on a thrilling adventure to confront the fearsome dragon.
Please select one "scene" from your game and describe it visually, but succinctly, as if for an image-generation AI.
A heroic adventurer stands at the base of a winding, forested path on Stony Mountain, gripping a shining sword and a shield, gazing upwards at the dark cave entrance shrouded in mist, where the fearsome dragon resides.