我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

各位佬爷好，不知道诸位看没看最近出的《中国奇谭》，第一集的小猪妖就让我感触很深，也许就像很多解说当中，我可能在小猪妖的身上看到了打工人的自己，看到了有时灵机一动的自己，也看到了曾想离开浪浪山的自己。

那么于是！我假以小兔子的角色创建了今天这份代码——气泡式互动对话小说《兔兔说》，每个人都能续写自己的故事，走出自己的浪浪山。

设计与开发

除了互动式的对话界面，我准备在正式开始之前保留一个开始的准备界面。当然按钮的点击使界面切换的效果使用 display 属性来实现。

开始(准备)界面>>

对话界面>>

<!-- 开始界面 -->
<div class="ready-screen mask" style="display: block;">
  <div class="title">
    兔兔说
  </div>
  <div class="start" onclick="startGame()">
    进入情景
  </div>
</div>
<!-- 对话页面 -->
<div class="game-page" style="display: none;">
  <div class="header">
    兔兔说
  </div>
  <div class="saying"></div>
  <ul class="selector"></ul>
</div>

所以，当点击按钮时，startGame()函数就会执行，同时修改准备界面的display属性值为none，隐藏界面。同时，显示对话界面的display。

function startGame() {
  // 隐藏准备页
  document.getElementsByClassName('ready-screen')[0].style.display = 'none';
  // 打开对话页
  document.getElementsByClassName('game-page')[0].style.display = 'flex';
  // 开始对话
  gogogo();
}

上面代码中，gogogo()函数具有启动定时器开始对话的功能。

当使用者选择某一对话项时，调用reply()函数，将内容显示到界面上。

回复显示>>

function reply(msg) {
  let obj = document.getElementsByClassName('saying')[0];
  let rabbit = document.createElement('div');
  rabbit.className = 'owner';
  rabbit.innerHTML = `
        <div class="msg">
          ${msg}
        </div>
        <div class="head">
          <img src="./img/hzyr.jpg" />
        </div>
  `;
  obj.appendChild(rabbit);
  obj.scrollTop = obj.scrollHeight;

  addChoice([]);
}

一些细节不再赘述，为了让对话更有真实感，添加键入动画，使气泡的出现更加友好。

@keyframes fadeIn {
  from {
    transform: translateY(-10%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

数据

let conversation = [
  "你知道唐僧吗？",
  "那个西天取经的唐僧",
  [
    ["我当然知道啦", "哦",
      "那好吧，你知道我就不说了",
      "拜拜"
    ],
    ["你给我说说", "好的",
      "其实吧，我啥也不知道",
      [
        ["你有病吧！", "嗯呢",
          "那我去治病了，再见"
        ]
      ]
    ]
  ]
]

如上所示，数据为数组嵌套结构，从索引为0的位置依次弹出，直到遇见数组，由用户选择进入路径，再重复执行上述过程。

源码与体验

注：纯纯小白文，望各位海涵。

困住我们的不是浪浪山，也不是僵化思维的熊教头，而是随着时间逐渐随波逐流的自己。最后，祝大家新年快乐，兔年兔然暴富，坐享其成！