JavaScript打字机效果：实现文本打字完成后的顺序交互

/**
 * 实现打字机效果。
 * @param {string} text 要显示的完整文本。
 * @param {HTMLElement} elem 文本将显示到的DOM元素。
 * @param {number} delay 每个字符显示之间的延迟（毫秒）。
 * @param {function} nextStep 打字完成后执行的回调函数。
 */
function typeIt(text, elem, delay, nextStep) {
  let index = 0; // 当前显示的字符索引

  const type = () => {
    index++; // 移动到下一个字符

    // 如果所有字符都已显示
    if (index > text.length) {
      nextStep(); // 执行完成回调
      return; // 结束递归
    }

    // 更新DOM元素内容，显示当前索引前的所有字符
    elem.innerHTML = text.slice(0, index);
    // 设置下一个字符的显示延迟
    window.setTimeout(type, delay);
  };

  // 立即启动打字效果
  type();
}

const gameAdventureElem = document.querySelector("#game-adventure");

// 示例：打字完成后在控制台打印消息
typeIt('Hello world!', gameAdventureElem, 100, () => {
  console.log('第一段文本打字完成！');
  // 在这里可以添加逻辑，例如显示“下一段”按钮
});

/**
 * 实现打字机效果（使用 setInterval）。
 * @param {string} text 要显示的完整文本。
 * @param {HTMLElement} elem 文本将显示到的DOM元素。
 * @param {number} delay 每个字符显示之间的延迟（毫秒）。
 * @param {function} nextStep 打字完成后执行的回调函数。
 */
function typeItWithInterval(text, elem, delay, nextStep) {
  let index = 0;
  let timer; // 用于存储 setInterval 的ID

  const type = () => {
    index++;

    if (index > text.length) {
      window.clearInterval(timer); // 关键：清除定时器
      nextStep(); // 执行完成回调
      return;
    }

    elem.innerHTML = text.slice(0, index);
  };

  // 启动定时器
  timer = window.setInterval(type, delay);
  // 立即执行一次，显示第一个字符
  type();
}

const gameAdventureElem2 = document.querySelector("#game-adventure-2"); // 假设有另一个元素

typeItWithInterval('这是使用 setInterval 实现的文本。', gameAdventureElem2, 80, () => {
  console.log('setInterval 方式的文本打字完成，定时器已清除！');
});

<div id="game-container">
  <!-- 初始隐藏的元素，如开始按钮和标题 -->
  <button id="start-btn">开始冒险</button>
  <h1 id="headline-text">欢迎来到冒险世界</h1>

  <!-- 打字机文本显示区域 -->
  <div id="game-adventure"></div>

  <!-- “下一段”按钮，初始隐藏 -->
  <button id="next-paragraph-btn" style="display: none;">下一段</button>
</div>

const startBtn = document.getElementById("start-btn");
const headlineText = document.getElementById("headline-text");
const gameAdventureElem = document.getElementById("game-adventure");
const nextParagraphBtn = document.getElementById("next-paragraph-btn");

// 待显示的文本段落数组
const paragraphs = [
  '这是故事的第一段。它将逐字显示，直到完成。',
  '当第一段完成后，你会看到一个“下一段”按钮。点击它来继续。',
  '这是故事的第三段。希望你喜欢这个打字机效果和交互体验！',
  '所有段落都已显示完毕。'
];

let currentParagraphIndex = 0; // 当前正在显示的段落索引

// 初始化打字机函数（选择 setTimeout 版本）
// 实际应用中可以根据需要选择 typeIt 或 typeItWithInterval
const typewriterFunction = typeIt;

/**
 * 启动当前段落的打字效果。
 * 当打字完成后，根据是否有更多段落来显示或隐藏“下一段”按钮。
 */
function startTypingCurrentParagraph() {
  if (currentParagraphIndex < paragraphs.length) {
    // 清空上一个段落的内容
    gameAdventureElem.innerHTML = '';
    // 隐藏“下一段”按钮，直到当前段落打字完成
    nextParagraphBtn.style.display = 'none';

    // 调用打字机函数显示当前段落
    typewriterFunction(paragraphs[currentParagraphIndex], gameAdventureElem, 50, () => {
      // 打字完成后执行的回调
      currentParagraphIndex++; // 准备下一个段落的索引
      if (currentParagraphIndex < paragraphs.length) {
        // 如果还有更多段落，显示“下一段”按钮
        nextParagraphBtn.style.display = 'block';
      } else {
        // 所有段落都已显示完毕
        console.log('所有段落已完成！');
        nextParagraphBtn.style.display = 'none'; // 隐藏按钮
        // 可以在这里添加“故事结束”或“返回主菜单”等最终逻辑
      }
    });
  }
}

// 初始启动按钮的事件监听器
startBtn.addEventListener("click", function() {
  // 隐藏初始元素
  startBtn.style.display = "none";
  headlineText.style.display = "none";

  // 开始显示第一个段落
  startTypingCurrentParagraph();
});

// “下一段”按钮的事件监听器
nextParagraphBtn.addEventListener('click', startTypingCurrentParagraph);

// 初始页面加载时，确保“下一段”按钮是隐藏的
nextParagraphBtn.style.display = 'none';