Question

Example of multiple choices in a text-based game

大家好，

我想知道如何在JavaScript中制作基于文本的视频游戏，我可以选择多个选项。 IE，如何让光标或手指在选项列表中上下移动。

> Option 1
  Option 2

如果我按下向下箭头键，它看起来像：

  Option 1
> Option 2

如果我再次按下向下箭头键：

> Option 1
  Option 2

我知道我首先需要一个包含多个选择值的对象的数组。

示例：的 var storyScenarios = [ { scene: "Bubba and I ran across the busy intersection and jumped into a blueberry bush"; option1: "Check for ticks"; option2: "Start picking berries"; option3: "Ask Bubba how he's doing" option4: "Look around"}];

我需要确保这些option值会在控制台或inner.html展示位置的屏幕上显示，就像上面会读出scene值一样他们。

我知道我需要一种方法来绑定上下键，以便在可能的选择上有一个选择光标，并制作一些代表手指或指针的图形。

为了让游戏更具动态性，我需要在某个地方使用if语句来获取这些用户选择的选项并增加后果。

示例：的

if(userChoice == storyScenarios[0].option3) {console.log('Bubba was hit by a semi')};

我知道使用鼠标点击会更容易，但我更喜欢这样做，也可以选择使用向上和向下箭头键根据选项进行选择。

"Bubba and I ran across the busy intersection and jumped into a blueberry bush"
> Check for ticks
  Start picking berries
  Ask Bubba how he's doing
  Look around

Answer 1

这将有助于您开始使用，我在向下和向上向li添加课程

var storyScenarios = [{
  scene: "Bubba and I ran across the busy intersection and jumped into a blueberry bush",
  option1: "Check for ticks",
  option2: "Start picking berries",
  option3: "Ask Bubba how he's doing",
  option4: "Look around"
}];

$(document).ready(function() {
  var scene = "<h1>" + storyScenarios[0]['scene'] + "<h1>";
  var options = '<ul><li>' + storyScenarios[0]['option1'] + '</li><li>' + storyScenarios[0]['option2'] + '</li><li>' + storyScenarios[0]['option3'] + '</li><li>' + storyScenarios[0]['option4'] + '</li></ul>';
  $('.display').append(scene).append(options);
  var numOfEle = $('.display li').size();
  $(document).on('keydown', function(e) {

    switch (e.which) {
      case 38: // up
        traverseList('up');
        break;
      case 40: // down
        traverseList('down');
        break;
      default:
        return;
    }
    e.preventDefault();
  });

  function traverseList(direction) {
    var positionModifier;
    var numberOfElements = $('.display li').size();
    var lastElementIndex = numberOfElements - 1;
    var activeElement = $('.display').find('li.active').index();
    if (direction === 'down') {
      if (activeElement >= 0 && activeElement <= lastElementIndex) {
        var positionModifierDown = 1;
        var newActiveIndex = activeElement + positionModifierDown;
        $('.display li').removeClass('active');
        $('.display li:eq(' + newActiveIndex + ')').addClass('active');
      } else {
        $('.display li:eq(0)').addClass('active');
      }
    } else {
      if (activeElement >= 0) {
        var positionModifierUp = -1;
        var newActiveIndex = activeElement + positionModifierUp;
        $('.display li').removeClass('active');
        $('.display li:eq(' + newActiveIndex + ')').addClass('active');
      } else {
        $('.display li:eq(' + lastElementIndex + ')').addClass('active');
      }
    }

  }
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display">

</div>

基于文本的游戏，使用keyevent进行多项选择选择

1 个答案: