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

大家好

不小心在别人博客那看到了个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/sakana-widget@2.5.0/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/sakana-widget@2.5.0/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");  
}  

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

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