给你的网页右下角添加个可拖拽弹跳的石蒜模拟器

大家好

不小心在别人博客那看到了个Sakana! Widget，就是在你的网页右下角添加个可拉着玩的小组件

自己试了下，用起来不错

就分享一下怎么弄的吧

先看这里-> Github Here,如果你只想弄上面预设的这两个小人的话，引用一下上面网站里现成代码即可，以下为做一个自己的方法

---

看看我的组件效果

第一步

(先说明一下，本人使用的方法可能和Github上写的有点不一样，毕竟它上面的看不太懂…)

先创建一个js文件在你的public/js文件夹里，我这里取名为sakana-init.js

输入以下代码

function initSakanaWidget() {
  const xxx = SakanaWidget.getCharacter("chisato");
  xxx.image = "url";
  SakanaWidget.registerCharacter("xxx", xxx);
  
  new SakanaWidget({
    character: "xxx",
    controls: true,
    initialState: { i: 1, r: 10 }
  }).mount("#sakana-widget");
}

里面的xxx即为你想给你的组件小人取的名，没多大用，

xxx.image里输入你的图片链接即可（要透明且大小为宽高比例1：1的图片）

character和control,initialState等下面会说明其用处

当然在后面得加上一个网页加载时自动执行initSakanaWidget()的代码以及引入所需要的js，在这引入比在head标签前要好一点
我这找ChatGPT生成了一个，自己能用

document.addEventListener("DOMContentLoaded", () => {
  const script = document.createElement("script");
  script.src = "https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js";
  script.onload = () => {
    initSakanaWidget();
  };
  document.body.appendChild(script);
});

第二步

在你的css文件里引入以下css:

#sakana-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

位置可以随便弄，你甚至也可以加上”z-index: -1;”让它成为背景

第三步

inject你的js和css以及这个组件原本所需要的css等，js最好放在body前，css可以放在head前

# 组件需要的css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.css">
# 你的js和css
<script src="xxx/sakana-init.js"></script>
<link rel="stylesheet" href="xxx/mycss.css">

再在body里把你的组件容器放上去即可

<div id="sakana-widget"></div>

这样一个简单的石蒜模拟器网页小组件就完成了

其它配置

这个组件有很多的可配置的地方，详细的可以看Github

这里复制一下它的类型定义和构造函数选项

# 类型定义
export interface SakanaWidgetState {
  /**
   * 惯性
   */
  i: number;
  /**
   * 粘性
   */
  s: number;
  /**
   * 衰减
   */
  d: number;
  /**
   * 角度
   */
  r: number;
  /**
   * 高度
   */
  y: number;
  /**
   * 垂直速度
   */
  t: number;
  /**
   * 水平速度
   */
  w: number;
}

export interface SakanaWidgetCharacter {
  image: string;
  initialState: SakanaWidgetState;
}

# 构造函数选项
export interface SakanaWidgetOptions {
  /**
   * 组件大小，默认 `200`
   */
  size?: number;
  /**
   * 自动适应容器大小 (最小 120px)，默认 `false`
   */
  autoFit?: boolean;
  /**
   * 角色，默认 `chisato`
   */
  character?: 'chisato' | 'takina';
  /**
   * 控制栏，默认 `true`
   */
  controls?: boolean;
  /**
   * 展示支撑杆，默认 `true`
   */
  rod?: boolean;
  /**
   * 可拖动，默认 `true`
   */
  draggable?: boolean;
  /**
   * canvas 线条设置，默认 `#b4b4b4` & `10`
   */
  stroke?: {
    color?: string;
    width?: number;
  };
  /**
   * 停止动画的阈值，默认 `0.1`
   */
  threshold?: number;
  /**
   * 旋转角度，默认 `0`
   */
  rotate?: number;
}

具体怎么用呢

看看第一步的这个代码

  new SakanaWidget({
    character: "xxx",
    controls: true,
    initialState: { i: 1, r: 10 }
  }).mount("#sakana-widget");
}

把你想添加的依次加上就行了

这样你的网页应该就会有个可拖拽弹跳的石蒜模拟器了！