Better way to create text based game
javascript, jquery
Solution
I would go with some kind of strategy pattern. Create i.e. a Game constructor
var Game = new function(strategy) {
this.strategy = strategy;
}
Game.prototyp.playScene = function() {
return this.strategy();
}
Then you can create `scenes` where you would place your logic
var sceneOne = function() {
console.log('First scene logic here');
}
var sceneTwo = function() {
console.log('Second scene logic here');
}
and finally you can call these logics as follows:
var game;
if(e.which == 13) {
if(condition1) {
game = new Game(sceneOne);
} else {
game = new Game(sceneTwo);
}
game.playScene();
}
fiddle
Problem
Right, i was uncertain if I should post this as it is a little vague but I really would like some help with this so I will try explain as best as possible. The Idea: To create a text based game using Javascript/jQuery, the game will be that of one where a story is being told and you get to pick the options. My idea was to use a `textarea` to allow input from the user (select a option) and output text (from the story). How far have I got? Well this is what I have created so far. JavaScript/jQuery: ``` var current, text, location, option1, option2; location = ''; // house, car, moon current = 0; gameOver = false; pick = false; jQuery("textarea").keypress(function (e) { if (e.which == 13) { var content = this.value; var lastLine = content.substr(content.lastIndexOf("\n") + 1); // Story if (current == 0 && pick == false) { option1 = 'Look around'; option2 = 'Check you have arms (Check arms)'; text = 'You open your eyes \n\nOptions: \n' + option1 + '\n' + option2; pick = true; } else if (current == 0 && lastLine == 'Check arms' && pick == true) { text = 'You check your arms, they seem fine'; pick = false; } else if (current == 0 && lastLine == 'Look around' && pick == true || current == 2 && lastLine == 'Get Out') { option1 = 'Walk to a nearby house'; option2 = 'Get in a rocket that is next to you (Get in rocket)'; text = 'You do a 360 spin, you see you have limited options \n\nOptions: \n' + option1 + '\n' + option2; pick = false; if (current == 2 && lastLine == 'Get Out') { current = 1; } else { current++; } } //House Story else if (current == 1 && lastLine == 'Walk to house' && pick == false) { option1 = 'Knock on the front door'; option2 = 'Jump through the front window'; text = 'You walk to the house and see there are no lights on, the building is old and appears to be burnt out\n\nOptions: \n ' + option1 + '\n ' + option2; pick = false; current++; } // Rocket story else if (current == 1 && lastLine == 'Get in rocket' && pick == false) { option1 = 'Get out of the rocket(Get out)'; option2 = 'Hit the biggest button you can find(Hit Button)'; text = 'You hop into the rocket, there are a lot of buttons infront of you\n\nOptions: \n ' + option1 + '\n ' + option2; pick = false; current++; } $('textarea ').val($('textarea ').val() + '\n\n ' + text + '\n '); } }); ``` It works (kinda) but it is getting complicated to code like this. To me its very messy and I have tried to re-write it but I cannot find a way to make this neat/ easier to code. Have a look at the demo: Please do take a look at the demo if you wish to try and help me as you will get a good idea what I am trying to achieve. Demo walk-through: DEMO HERE - In the `textarea` click enter to start - Type one of the options to progress in the game (Options: Check arms or Look around) - Type one of the options to progress in the game (Options: Walk to a nearby house or Get in rocket) - End of demo Note: After typing a option click enter to continue. At the moment all options must be typed exactly as seen (If option has brackets you type that instead) This is a short demo but you should get the point. I have searched around and cant find/think of a suitable method to code this game. Get to the point, what's the question? My questions is: What is a suitable method to code this game? Suitable: Easy to maintain/read + add new story "parts" etc.