Feed the Ducks
Previous:
Feed the Ducks
Feeding the Ducks
You are inside your house. You see some duck food on a shelf. You can
pick up duck food or go outside.
This code creates an interactive story where the user can enter commands to navigate the world.
<!DOCTYPE html>
<html>
<head>
<title>Feeding the Ducks</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Feeding the Ducks</h1>
<div id="state">
You are inside your house. You see some duck food on a shelf. You can
<strong>pick up duck food</strong> or <strong>go outside</strong>.
</div>
<div id="input">
<input id="action-input" />
<button onclick="submitAction();">Done</button>
</div>
</body>
</html>
// The user's location, either 'inside' or 'outside'
let userLocation = 'inside';
// Whether the user has the duck food, either true or false
let hasDuckFood = false;
// When this function is called, it takes the value from the action input and
// uses if statements to tell the story.
function submitAction() {
// Get the action input element
const actionInput = document.getElementById('action-input');
// Get the text from the action input element
const action = actionInput.value;
// Get the state element
const stateElement = document.getElementById('state');
if(userLocation == 'inside') {
if(action == 'go outside') {
userLocation = 'outside';
stateElement.innerHTML =
'You went outside! You can <strong>go inside</strong> or ' +
'<strong>feed the ducks</strong>.';
} else if(action == 'pick up duck food') {
hasDuckFood = true;
stateElement.innerHTML =
'You picked up the duck food! You can <strong>go outside</strong>.';
} else {
stateElement.innerHTML =
'You are inside. You can <strong>pick up duck food</strong> or ' +
'<strong>go outside</strong>.';
}
} else if (userLocation == 'outside') {
if(action == 'feed the ducks') {
if(hasDuckFood) {
userLocation = 'done';
stateElement.innerHTML = 'You fed the ducks! The end.';
} else {
stateElement.innerHTML = 'Your forgot to pick up the duck food! You ' +
'can <strong>go inside</strong>.';
}
} else if(action == 'go inside') {
userLocation = 'inside';
if(hasDuckFood) {
stateElement.innerHTML =
'You go inside. You can <strong>go outside</strong>.';
} else {
stateElement.innerHTML =
'You go inside. You can <strong>pick up duck food</strong> or ' +
'<strong>go outside</strong>.';
}
} else {
stateElement.innerHTML =
'You are outside. You can <strong>go inside</strong> or ' +
'<strong>feed the ducks</strong>.';
}
}
// Clear the action input
actionInput.value = '';
}
#state {
margin-top: 50px;
margin-bottom: 50px;
}
See Also
Remix Ideas
- Add more steps to this story. What if the ducks get angry if you don’t have food?
- Expand support for other inputs. What if the user types “get duck food” instead of “pick up duck food”?
- Write your own interactive story! Try recreating a scene from your favorite movie, book, or TV show.
Previous:
If Statements Examples
Comments
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!
Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!