javascript 创建基于文本的游戏的更好方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22063080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Better way to create text based game
提问by Ruddy
Right, i was uncertain if I should post this as it is a little vaguebut 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.
要使用 Javascript/jQuery 创建基于文本的游戏，游戏将是一个讲述故事的游戏，您可以选择选项。
My idea was to use a textareato allow input from the user (select a option) and output text (from the story).
我的想法是使用 atextarea来允许来自用户的输入（选择一个选项）和输出文本（来自故事）。
How far have I got?
我走了多远？
Well this is what I have created so far.
嗯，这就是我迄今为止所创建的。
JavaScript/jQuery:
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:
演示演练：
- In the
textareaclick 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
- 在
textarea点击回车开始 - 键入其中一个选项以推进游戏（选项：检查手臂或环顾四周）
- 键入其中一个选项以推进游戏（选项：步行到附近的房子或乘坐火箭）
- 演示结束
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)
注意：键入选项后，单击 Enter 继续。目前所有选项必须完全按照所见输入（如果选项有括号，则改为输入）
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 isa suitable method to code this game?
我的问题是：什么是适合的编写这个游戏的方法？
Suitable: Easy to maintain/read + add new story "parts" etc.
适用：易于维护/阅读+添加新故事“部分”等。
回答by Dieterg
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 sceneswhere you would place your logic
然后您可以创建scenes放置逻辑的位置
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();
}
回答by Liath
The biggest issue I see here is that your code is going to grow and grow as your game/story expands. You're actually writing the logic of your game in the code itself.
我在这里看到的最大问题是你的代码会随着你的游戏/故事的扩展而增长和增长。您实际上是在代码本身中编写游戏逻辑。
As an alternative I would suggest splitting out your logic into steps and logic. For example:
作为替代方案，我建议将您的逻辑拆分为步骤和逻辑。例如：
var allTiles =
[
{location: 'Forest', description: 'Deep, dark and scary'},
{location: 'Castle', description: 'High, made from stone and very dramatic'},
];
var currentState =
{
equipment: ['Sword', 'Bow', '3 gold coins'];
currentLocationIndex: 0
};
These may of course be in different files so you can add locations to your world.
这些当然可能位于不同的文件中，因此您可以向您的世界添加位置。
Next you need your core logic class, this will look a lot like the one you've already got:
接下来你需要你的核心逻辑类，它看起来很像你已经拥有的类：
jQuery("textarea").keypress(function (e) {
var currentLocation = allTiles[currentState.currentLocationIndex];
printDescription(currentLocation.Description);
// process commands... into pseudo code territory
if(userDoesAction1){
currentLocation.doAction1();
}
}
I've not gone into massive detail here - it will depend very much on the structure of your game. Personally I like the idea of creating an array functions in your location which are things you can do at your location... actually, JS is a very nice language to do this sort of game!
我没有在这里详细介绍 - 这在很大程度上取决于您的游戏结构。我个人喜欢在你的位置创建一个数组函数的想法，这是你可以在你的位置做的事情……实际上，JS 是一种非常好的语言来做这种游戏！
回答by jcubic
You can use my jQuery terminal. Then you can write core of the game that act on data in JSON object. If you write something like this you will be able to change the data (update or replace) without need to change the code, it's called data driven programming (Eric Raymond write nice chapter in his book about it)
您可以使用我的jQuery 终端。然后，您可以编写对 JSON 对象中的数据进行操作的游戏核心。如果你写这样的东西，你将能够在不需要更改代码的情况下更改数据（更新或替换），这称为数据驱动编程（Eric Raymond在他的书中写了关于它的好章节）
回答by nowhere
When making games i think that an Object Oriented approach is the best to keep things separated and easy to code and find:
在制作游戏时，我认为面向对象的方法是将事物分开并易于编码和查找的最佳方法：
For example you could separate the different rooms in your game in different function structures.
例如，您可以将游戏中的不同房间分隔成不同的功能结构。
var parentFunction = function(){
var protectedValue = ‘variable';
var childFunction = function(){
alert(protectedValue);
}
childFunction();
}
var object = new parentFunction();
You initialize the function every time you move to the related ambient, and put the possible actions that the player can take in child-functions. But i guess the answer would be too big here: you should spend some time before starting to make a scheme of the logic that your game will follow and how you want to separate things (and how they relate to each other).
每次移动到相关环境时都会初始化该函数，并将玩家可以采取的可能操作放入子函数中。但我想这里的答案太大了：在开始制定游戏将遵循的逻辑以及您希望如何分离事物（以及它们如何相互关联）之前，您应该花一些时间。
