Javascript 创建基于文本的游戏的更好方法

是的，我不确定我是否应该发布这篇文章，因为它有点模糊，但我真的希望得到一些帮助，所以我会尽可能地解释

这个想法： 要使用Javascript/jQuery创建一个基于文本的游戏，游戏将是一个故事讲述的游戏，您可以选择选项

我的想法是使用textarea允许用户输入选择选项并输出故事文本

我还有多远？ 这就是我到目前为止所创造的

JavaScript/jQuery：

它工作起来有点像，但是像这样编写代码变得越来越复杂。对我来说，它非常混乱，我试图重新编写它，但我找不到一种方法使它整洁/更易于编码

请看演示： 如果您希望尝试帮助我，请务必查看演示，因为您将了解我正在尝试实现的目标

演示演练：

在文本区域中，单击enter开始 在游戏选项中键入一个要进行的选项：检查手臂或环顾四周 在游戏选项中键入一个选项以继续：步行到附近的房子或进入火箭 演示结束 注意：键入选项后，单击enter继续。目前，所有选项的键入方式必须与您键入的选项括号完全相同

这是一个简短的演示，但你应该明白重点。我四处搜索，找不到/想不出合适的方法来编写这个游戏

开门见山，问题是什么？ 我的问题是：什么是编写这个游戏的合适方法

---

适合：易于维护/阅读+添加新的故事部分等。

我在这里看到的最大问题是，随着游戏/故事的扩展，代码将不断增长。实际上，您正在代码本身中编写游戏逻辑

作为替代方案，我建议将您的逻辑划分为步骤和逻辑。例如：

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
};

当然，这些文件可能位于不同的文件中，因此您可以将位置添加到您的世界中

接下来，您需要您的核心逻辑类，它将与您已经拥有的类非常相似：

jQuery("textarea").keypress(function (e) {
    var currentLocation = allTiles[currentState.currentLocationIndex];
    printDescription(currentLocation.Description);


   // process commands... into pseudo code territory
   if(userDoesAction1){
     currentLocation.doAction1();
   }
}

---

我在这里没有详细介绍，这将在很大程度上取决于你的游戏结构。就我个人而言，我喜欢在你的位置创建一个数组函数的想法，这是你可以在你的位置做的事情。。。事实上，JS是一种非常好的语言来做这种游戏

你可以用我的。然后，您可以编写游戏的核心，对JSON对象中的数据进行操作。如果你写了这样的东西，你将能够在不需要更改代码的情况下更改数据更新或替换，这被称为数据驱动编程Eric Raymond write nice

在制作游戏时，我认为面向对象的方法是最好的，可以将事情分开，并且易于编码和查找：

例如，您可以在不同的功能结构中分隔游戏中的不同房间

var parentFunction = function(){

  var protectedValue = ‘variable’;

  var childFunction = function(){

    alert(protectedValue);

  }

  childFunction();

}
var object = new parentFunction();

每次移动到相关环境时，您都会初始化该函数，并将播放器可以执行的可能操作放入子函数中。

---

但我想答案在这里太大了：你应该在开始制定游戏将遵循的逻辑方案之前花一些时间，以及你想如何区分事物以及它们之间的关系。

我会选择某种策略模式。创建一个游戏构造器

var Game = new function(strategy) {
    this.strategy = strategy;
}

Game.prototyp.playScene = function() {
    return this.strategy();
}

然后，您可以创建场景，在其中放置逻辑

var sceneOne = function() {
    console.log('First scene logic here');
}

var sceneTwo = function() {
    console.log('Second scene logic here');
}

最后，您可以如下调用这些逻辑：

var game;
if(e.which == 13) {
    if(condition1) {
        game = new Game(sceneOne);
    } else {
        game = new Game(sceneTwo);
    } 

    game.playScene();
}

---

有趣的使用数组看起来非常整洁，我想我会在有机会的时候使用这个方法。我知道这要求很多，但如果你有机会，你能创建一个快速演示吗？很高兴看到它工作，这样我就可以感受到使用这种方法是多么容易。谢谢你给我的回答+1！我可能很难在不久的将来添加更多内容-迪特尔·戈特伦的回答很好地抓住了我在位置中添加动作的想法。嗯，我必须仔细阅读。如果有机会的话，我将不得不对jQuery终端进行更多的研究。谢谢你的回答+1，因为这可能非常有用。非常好！我将尝试这种方法，但我还没有完全理解它。如果有任何机会，你可以创建一个演示，这将是伟大的，非常有帮助的，我倾向于更好地理解事情看到他们的工作。如果现在不担心的话，我相信我可以通过胡闹来掌握窍门+我喜欢，谢谢！我提供了一个简单的例子fiddle@Ruddy可惜问题已经解决了。这是我的心事。通过在暗室中查看源代码，您可能会学到很多东西。这是一个非常漂亮的Javascript文本游戏。

var game;
if(e.which == 13) {
    if(condition1) {
        game = new Game(sceneOne);
    } else {
        game = new Game(sceneTwo);
    } 

    game.playScene();
}