javascript - 带有打字效果的Javascript文本冒险

Question

因此，我正在尝试进行文本冒险，并使用此 Github 页面获取源代码。我想添加一个打字效果，所以我还使用了 W3Schools的这个页面来制作打字效果。从我在 GitHub 上使用的代码中，我只修改game.js了输入效果，但在这样做之后我注意到玩家可以在完成输入之前选择选项，所以我将显示按钮的类移到了一个单独的函数中。现在，我想要做的是隐藏按钮，直到typeWriter功能完成输入。

这是修改后的 game.js 代码：

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
var typingl = 0;
var speed = 50;

function typeWriter() {
  if (typingl < baseText.length) {
    textElement.innerHTML += baseText.charAt(typingl);
    typingl++;
    setTimeout(typeWriter, speed);
  }
}

let state = {}

function startGame() {
  state = {}
  showTextNode(1)
}

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = ''
  baseText = textNode.text
  typingl=0;typeWriter();
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }
  showButtons(textNode);
}


function showButtons(btnx) {
  btnx.options.forEach(option => {
    if (showOption(option)) {
      const button = document.createElement('button')
      button.innerText = option.text
      button.classList.add('btn')
      button.addEventListener('click', () => selectOption(option))
      optionButtonsElement.appendChild(button)
    }
  })
}

function showOption(option) {
  return option.requiredState == null || option.requiredState(state)
}

function selectOption(option) {
  const nextTextNodeId = option.nextText
  if (nextTextNodeId <= 0) {
    return startGame()
  }
  state = Object.assign(state, option.setState)
  showTextNode(nextTextNodeId)
}

const textNodes = [
  {
    id: 1,
    text: 'You wake up in a strange place and you see a jar of blue goo near you.',
    options: [
      {
        text: 'Take the goo',
        setState: { blueGoo: true },
        nextText: 2
      },
      {
        text: 'Leave the goo',
        nextText: 2
      }
    ]
  },
  {
    id: 2,
    text: 'You venture forth in search of answers to where you are when you come across a merchant.',
    options: [
      {
        text: 'Trade the goo for a sword',
        requiredState: (currentState) => currentState.blueGoo,
        setState: { blueGoo: false, sword: true },
        nextText: 3
      },
      {
        text: 'Trade the goo for a shield',
        requiredState: (currentState) => currentState.blueGoo,
        setState: { blueGoo: false, shield: true },
        nextText: 3
      },
      {
        text: 'Ignore the merchant',
        nextText: 3
      }
    ]
  },
  {
    id: 3,
    text: 'After leaving the merchant you start to feel tired and stumble upon a small town next to a dangerous looking castle.',
    options: [
      {
        text: 'Explore the castle',
        nextText: 4
      },
      {
        text: 'Find a room to sleep at in the town',
        nextText: 5
      },
      {
        text: 'Find some hay in a stable to sleep in',
        nextText: 6
      }
    ]
  },
  {
    id: 4,
    text: 'You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 5,
    text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 6,
    text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
    options: [
      {
        text: 'Explore the castle',
        nextText: 7
      }
    ]
  },
  {
    id: 7,
    text: 'While exploring the castle you come across a horrible monster in your path.',
    options: [
      {
        text: 'Try to run',
        nextText: 8
      },
      {
        text: 'Attack it with your sword',
        requiredState: (currentState) => currentState.sword,
        nextText: 9
      },
      {
        text: 'Hide behind your shield',
        requiredState: (currentState) => currentState.shield,
        nextText: 10
      },
      {
        text: 'Throw the blue goo at it',
        requiredState: (currentState) => currentState.blueGoo,
        nextText: 11
      }
    ]
  },
  {
    id: 8,
    text: 'Your attempts to run are in vain and the monster easily catches.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 9,
    text: 'You foolishly thought this monster could be slain with a single sword.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 10,
    text: 'The monster laughed as you hid behind your shield and ate you.',
    options: [
      {
        text: 'Restart',
        nextText: -1
      }
    ]
  },
  {
    id: 11,
    text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
    options: [
      {
        text: 'Congratulations. Play Again.',
        nextText: -1
      }
    ]
  }
]

startGame()

我试图让效果起作用的是在typeWriter函数中添加一个 else 语句来调用 ShowButtons 函数，但它对我不起作用。出于某种原因，我似乎无法让按钮在输入完成时显示，只有在它开始输入时才会显示。

标签： javascript

Answer 1

您可以在typeWriter()函数中使用承诺并返回承诺本身。

async function typeWriter() {
  return await new Promise((resolve) => {
      if (typingl < baseText.length) {
        textElement.innerHTML += baseText.charAt(typingl);
        typingl++;
        setTimeout(typeWriter, speed);
      } else {
        optionButtonsElement.style.display = 'block';
        resolve(true);
      }
  });
}

这样，typeWriter()函数 promise将在typingl == baseText.length. 你可以在这样的showTextNode()功能上使用它。

function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = ''
  baseText = textNode.text
  typingl=0;
  typeWriter().then((res) => {
   if(res) { // res == true
      while (optionButtonsElement.firstChild) {
          optionButtonsElement.removeChild(optionButtonsElement.firstChild)
      }
      showButtons(textNode);
   }
  });    
}

请考虑以上只是使用Promise. 请检查可用的文档以获取更多信息。也看看这个答案。

也许还需要检查调用的state或textNode任何时候来检查使用的是什么，因为现在是一个异步函数。showTextNode()textNodetypeWriter()

编辑

游戏开始时隐藏options-buttons。

function startGame() {
  optionButtonsElement.style.display = 'none';
  state = {}
  showTextNode(1)
}