🐟「Sakana!」石蒜模拟器

地址 https://lab.magiconch.com/sakana/

さかなー－－－！！

支持引入多个模拟器了！ 约会版

插画来源

大伏アオ @blue00f4 Pixiv

已从老师推特取得在网页中使用两张插画 ( その1、その2 ) 的非商用授权 ヾ(^▽^ヾ)

功能

• 按住立牌拖拽、松手后立牌会向反方向弹跳
• 点击底座切换角色
• 手机开启陀螺仪权限、摇一摇可甩动立牌 #12 待解决
• 自走模式，以随机间隔、施加一个大小随机的力 #7 @milkybird98
• 音效，在适当区间松手时的语音效果 #9 @zthxxx
• 多语言支持 #26 @dsrkafuu

请求参数

• 添加 ?v=chisato 请求参数，可获得 锦木千束 专属链接
• 添加 ?v=takina 请求参数，可获得 井上泷奈 专属链接
• 添加 ?alpha=true 请求参数，可获得透明背景 例
• 添加 ?background=red 请求参数，可自定义背景 #FF00FF '#d77 url(chisato.png)' 均可 例
• 添加 ?decay=0.99 请求参数，自定义衰减 无阻尼例 #11
• 添加 ?inertia=0.1 请求参数，自定义惯性 超慢速例
• 添加 ?lang=en-US 请求参数，自定义语言 英文 日语
• 添加 ?scale=auto 请求参数，在小尺寸时适应高度调整缩放
• 添加 ?scale=0.5 请求参数，自定义元素缩放比例
• 添加 ?translateY=200px 请求参数，自定义元素垂直位移
• 添加 ?r=60 请求参数，初始角色右倾 60 度
• 添加 ?y=100 请求参数，初始角色下沉 100 单位

组合参数例

• 超高速微阻尼千束英文例
• 超慢速无阻尼泷奈日文例
• 两倍慢速无阻尼千束例
• 超小没劲强阻尼泷奈例
• 默认六十度一百高泷奈例

引入到个人网站

示例 源码

<div class="sakana-box"></div>

<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.init({
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  scale:      .5,                // 缩放倍数
  canSwitchCharacter: true,      // 允许换角色
});
</script>

选项与方法

// 设定静音
Sakana.setMute(true);

// 获取静音状态
const { isMute } = Sakana.Voices;

// 启动
const sakana = Sakana.init({
  // 选项: 默认值
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  character:  'takina',          // 启动角色 'chisato','takina' 
  inertia:    0.01,              // 惯性
  decay:      0.99,              // 衰减
  r:          60,                // 启动角度
  y:          10,                // 启动高度
  scale:      1,                 // 缩放倍数
  translateY: 0,                 // 位移高度
  canSwitchCharacter: false,     // 允许换角色
  onSwitchCharacter(character){  // 切换角色回调
    console.log(`${character} dayo~`);
  },
});

// 设定归零角度
sakana.setOriginRotate(10);

// 获取角色运行状态
const v = sakana.getValue();

// 确保运行
sakana.confirmRunning();

// 切换角色
sakana.switchCharacter();

// 暂停动作
sakana.pause();

// 恢复动作
sakana.play();

// 切换特定角色
sakana.setCharacter('chisato');

放在窗口右下

html .sakana-box{
  position: fixed;
  right: 0;
  bottom: 0;
  transform-origin: 100% 100%; /* 从右下开始变换 */
}

本地调试

document.less 需要编译成 .css 样式文件 #6

编译

• npm i
• npm run build

GitHub

https://github.com/itorr/sakana/

衍生

• 网页小组件版本 Demo @dsrkafuu/sakana-widget
• 壁纸引擎 @而我撑伞 BV1vN4y1F7ML 创意工坊
• 壁纸引擎 @麻匪 BV1jG4y1k7oA 创意工坊

微博

https://weibo.com/1197780522/M2xbREtGI

License

MIT

Copyright (c) 2022, itorr