🐟 「Sakana!」石蒜模拟器
地址 https://lab.magiconch.com/sakana/
さかなー---!!
日本語リードミー docs/ja/README.md #53 @OHMORIYUSUKE
支持引入多个模拟器了! 约会版
插画来源
已从老师推特取得在网页中使用两张插画 (
その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>
NPM 安装与引入
npm i sakana -d
import Sakana from 'sakana';
Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
});
选项与方法
// 设定静音
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%; /* 从右下开始变换 */
}
本地调试
.less
需要编译成 .css
样式文件 #6
编译
npm i
npm run build
GitHub
https://github.com/itorr/sakana/
衍生
- 网页小组件版本 Demo @dsrkafuu/sakana-widget
- 壁纸引擎 @而我撑伞 BV1vN4y1F7ML 创意工坊
- 壁纸引擎 @麻匪 BV1jG4y1k7oA 创意工坊
- VSCode 插件 @UFOAlastor/sakana-hop
- Unity 版本 @zxsean/sakana_Unity
- 只因你太美版本 @SyMind/ji
微博
https://weibo.com/1197780522/M2xbREtGI
License
Copyright (c) 2022, itorr