live2d-widget 看板娘（改）

最新推荐文章于 2024-03-26 09:35:21 发布

VIP文章清静清源

最新推荐文章于 2024-03-26 09:35:21 发布

阅读量1.5k

点赞数

分类专栏： javascript Web 前端基础文章标签：看板娘

本文链接：https://blog.csdn.net/qq_35068659/article/details/116898677

版权

代码修改于 https://www.fghrsh.net/post/123.html
核心依赖 live2d.min.js 可以从 https://github.com/stevenjoezhang/live2d-widget下载，嫌速度慢的话，gitee上也有。

$l i v e 2 d . t i p s . j s$ （对话框逻辑）

/** live2d 加载类 */
class Live2d_tips {
   
  constructor(config) {
   
    let {
    modelSrc, modelId, modelSite, actionTime, actionText, musicListId } =
      config;

    this.modelSrc = modelSrc;
    this.width = modelSite.width;
    this.height = modelSite.height;
    this.hOffset = modelSite.hOffset;
    this.vOffset = modelSite.vOffset;
    this.actionTime = actionTime;
    this.actionText = actionText;
    this.modelId = modelId;
    this.musicListId = musicListId;
    this.modelList = null;

    if (modelSrc === null && modelId === undefined) {
   
      throw new Error("ModelID and ModelSrc 为空, 必须填写其一.");
    }
    switch (modelId) {
   
      case 0:
      case 1:
      case 2:
      case 3:
        this.executor();
        break;
      default:
        throw new Error("ModelId 不符合规则 (id: 0 ~ 3)");
    }
  }
  executor() {
   
    this.loadWidget();
  }
  loadWidget() {
   
    if (this.modelSrc) {
   
      console.log(`location found ${
     this.modelSrc}`);
    } else {
   
      console.log("network to loading");
    }

    document.body.insertAdjacentHTML(
      "beforebegin",
      `
      <div id="live2d-widget">
        <div class="live2d-tips"></div>
        <canvas id="live2d" width="830" height="900"></canvas>
        <div class="live2d-tools">
          <span class="fa fa-lg fa-camera-retro"></span>
          <span class="fa fa-lg fa-music"></span>
          <span class="fa fa-lg fa-info-circle"></span>
          <span class="fa fa-lg fa-times"></span>
        </div>
      </div>
      <div class="live2d-toggle">看板娘</div>
    `
    );

    this.setSite();

    let userAction = false,
      textTimer,
      actionTimer;

    (function welcomeWidget() {
   
      const now = new Date().getHours();
      let text;

      if (location.pathname !== "/") {
   
        if (now >= 5 && now < 7) {
   
          text = `早上好，我的主人`;
        } else if (now >= 7 && now < 11) {
   
          text = `上午过的舒服吗？<span>不要太劳累哦。</span>`;
        } else if (now >= 11 && now < 13) {
   
          text = `该吃午饭了，休息休息吧~`;
        } else if (now >= 13 && now < 15) {
   
          text = `工作时间，喝杯茶<span>「提提神」</span>`;
        } else if (now >= 15 && now < 17) {
   
          text = `完成的差不多了，赶紧收工吧!`;
        } else if (now >= 17 && now < 19) {
   
          text = `吃晚饭咯，一天过得真快呀。`;
        } else if (now >= 19 && now < 21) {
   
          text = `晚上好，今天过得这么样？`;
        } else if (now >= 21 && now < 23) {
   
          text = `早点睡吧，对身体好，明天又是<span>「元气满满」</span>的一天`;
        } else {
   
          text = `快点睡觉！再不睡觉，我生气了哦。`;
        }
      }
      showMessage(text, 7000, 8);
    })();

    window.addEventListener("mousemove", () => (userAction = true));
    window.addEventListener("keydown", () => (userAction = true));

    setInterval(() => {
   
      if (userAction) {
   
        userAction = false;
        clearInterval(actionTimer);
        actionTimer = null;
      } else if (!actionTimer) {
   
        actionTimer = setInterval(() => {
   
          showMessage(this.actionText, 4000, 9);
        }, this.actionTime);
      }
    }, 2000);

    let musicArr = [],
      audio = null;

    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("click", () => {
   
        hitokoto("动画");
      });
    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("mouseover", () => {
   
        let tools = document.querySelector("#live2d-widget .live2d-tools");

        tools.classList.add("active");
      });
    document
      .querySelector("#live2d-widget .live2d-tools")
      .addEventListener("mouseover", function () {
   
        this.classList.add("active");
      });
    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("mouseout", () => {
   
        let tools = document.querySelector("#live2d-widget .live2d-tools");

        tools.classList.remove("active");
      });
    document
      .querySelector(".live2d-tools .fa-camera-retro")
      .addEventListener("click", () => {
   
        showMessage(`卡哇伊，合影留念吧~`, 6000, 9);
        Live2D.captureName = "photo.png";
        Live2D.captureFrame = true;
      });
    document
      .querySelector(".live2d-tools .fa-music")
      .addEventListener("click", () => {
   
        // 调用hitokoto提供的api
        fetch163Playlist(this.musicListId