Javascript 文字冒险带打字效果

Question

因此，我正在尝试进行文本冒险并使用 此 Github 页面作为源代码。 我想添加一个打字效果，所以我还使用了 W3Schools 的这个页面来制作打字效果。 From the code I used on GitHub, I only modified game.js to incorporate the typing effect, but after doing so I noticed the player can select options before it finishes typing, so I moved the class that shows the buttons to a separate function. 现在，我想做的是隐藏按钮，直到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 function 中添加一条 else 语句来调用 ShowButtons function，但它对我不起作用。 出于某种原因，我似乎无法让按钮在输入完成时显示，只有在它开始输入时才会显示。

Answer 1

您可以在typeWriter() function 中使用 promise 并返回 promise 本身。

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() function promise 将在typingl == baseText.length时解析为true 。 您可以像这样在showTextNode() function 上使用它。

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的一个小例子。 请检查可用的文档以获取更多信息。 也看看这个答案。

也许还需要在调用showTextNode()时检查state或textNode以检查使用了哪个textNode ，因为typeWriter()现在是异步 function。

编辑

在游戏开始时隐藏options-buttons 。

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

Answer 2

根据彼得的回答，这对我有用：

将打字机 function 更改为：

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 = 'grid';
        resolve(true);
      }
  });
}

将 ShowTextNode 更改为：

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

StartGame function 无需修改。