Skip to content

itorr/sakana

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🐟「Sakana!」石蒜模拟器

NPM License: MIT

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

さかなー---!!

日本語リードミー docs/ja/README.md #53 @OHMORIYUSUKE

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

插画来源

大伏アオ @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>

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/

衍生

微博

https://weibo.com/1197780522/M2xbREtGI

License

MIT

Copyright (c) 2022, itorr

About

🐟「Sakana!」石蒜模拟器

Topics

Resources

License

Stars

Watchers

Forks

Contributors 11