Web Text Game
In a previous project, you created a game with a textual user interface.
In this project, you will make a version of that program that runs inside a web page... but it still has a text UI.
Wireframes
Zorkington
__________________________________________________________
/ 182 Main St. \
| You are standing on Main Street between Church and South |
| Winooski. |
| There is a door here. A keypad sits on the handle. |
| On the door is a handwritten sign. |
| |
| |
\__________________________________________________________/
What would you like to do?
________________________________________________ _______
| open door | / Do it \
\________________________________________________/ \_______/
Hints
- Make a git branch for your new program (
git checkout -b web-ui) - Make lots of commits on this branch! Any time your program is stable, and especially once you add a feature, run
git add . ; git commit -m "text displays in text box"or whatever - Feel free to "revert" (
git checkout .) if you get lost or introduce a bug halfway through a feature; starting over from the last checkin is often easier than fixing the bug - You will want to refactor your program to separate the input and output from the validation and logic, then replace the I/O with web-UI-aware code. See below for example.
Refactoring I/O Example
For example, if your code looks like this:
process.stdin.on('data', (chunk) => {
let input = chunk.toString();
if (input === 'open door') {
console.log('The door is locked.');
}
});
Then first change it to this:
listenForCommand();
function listenForCommand() {
process.stdin.on('data', (chunk) => {
let input = chunk.toString();
processCommand(input);
});
}
function processCommand(input) {
input = input.trim();
if (input === 'open door') {
outputMessage('The door is locked.');
}
}
function outputMessage(message) {
console.log(message);
}
Then run it from the command line to make sure you didn't break anything during this step. Do a git commit after this, as a checkpoint.
Then, one at a time, rewrite outputMessage and listenForCommand so they work with your Web UI instead of the NodeJS stdin/stdout/console streams.
Tip: in the above example, you could call the function
processCommand(input)directly from your text entry button click event handler, passing in the value of the text field asinput.