• Stars
    star
    1,981
  • Rank 23,297 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 2 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐟「Sakana!」石蒜模拟器

🐟「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

More Repositories

1

nbnhhsh

😩「能不能好好说话?」 拼音首字母缩写翻译工具
JavaScript
5,742
star
2

china-ex

🇨🇳「中国制霸生成器」中国三十四省份制霸标记工具
JavaScript
1,538
star
3

homo

💩「恶臭数字论证器」数字恶臭化工具
JavaScript
1,000
star
4

eva-title

🐧「福音战士标题生成器」 Evangelion Title Card Generator
JavaScript
876
star
5

patina

🤢「电子包浆」 图片做旧工具,赛博包浆虚拟器
JavaScript
742
star
6

one-last-image

🧸「One Last Image」卢浮宫生成器 One Last Kiss 封面风格生成
JavaScript
708
star
7

vaporwave

📹「 蒸 気 機 」虚拟信号蒸汽波风格化影像后期工具
JavaScript
656
star
8

q.js

炒鸡轻量的前端单页路由框架
JavaScript
446
star
9

imouto

快速、明确、极简
JavaScript
342
star
10

bionic-reading.user.js

网页英文前部加粗 用户脚本
JavaScript
283
star
11

anime-grid

🤖「动画生涯个人喜好表生成器」
JavaScript
229
star
12

e

易网页 - 中文的超文本标记语言
HTML
199
star
13

sojo

💊「逼死前端狗」听说你是前端工程师?
HTML
166
star
14

world-ex

🌏「全球制霸生成器」全球部分国家地区制霸标记生成工具
JavaScript
157
star
15

itorr.fm

偷揉电台项目
JavaScript
131
star
16

smartisanBlog

🔨博客,基于锤子便签的博客程序。
JavaScript
124
star
17

itorr.github.io

妹 Blog - GitHub Pages 特别版
JavaScript
118
star
18

magi

👩🏼 「MAGI System」一键决议系统
HTML
104
star
19

UP

偷揉图床 JavaScript API - 免费可外链的图片上传服务
JavaScript
67
star
20

gunjo

🎨「群青生成器」群青封面风格生成
JavaScript
65
star
21

magiconch.com

神器海螺 - 网址快速直达
HTML
47
star
22

enazo.cn-document

「绘谜」enazo 你画我猜 文档
35
star
23

buhuibaidu.me

🔍「不会百度么?」可以发给某个朋友的简明易懂搜索教程
HTML
33
star
24

templet

简单的 JavaScript 前端模板引擎
JavaScript
30
star
25

iTorr.Menu.js

iTorr 右键菜单类
HTML
29
star
26

anitabi.cn-document

动画巡礼文档
28
star
27

fontfont

🤖「字符字生成器」字符生成字符字工具
CSS
27
star
28

xzk

👀「斜着看生成器」充电口斜着看文字图片生成工具
JavaScript
24
star
29

itorr

卜卜口
Vue
23
star
30

fm

📻「我的收藏电台」写了个播放界面
JavaScript
20
star
31

baidu-images

百度图片搜索极简版
JavaScript
18
star
32

get-colors

又又又又又一个获取图片颜色的轮子
JavaScript
18
star
33

blank-font

😶「防回退空白字体」a prevent fallback blank font
CSS
18
star
34

only.kyoani.cn

京阿尼Only
CSS
17
star
35

pixel-kumiko

🐙「久美子大冒险」2D像素小游戏
JavaScript
17
star
36

CSGO-Status-Search

CSGO 对局信息速览工具
JavaScript
16
star
37

iTorr.js

基础类框架
JavaScript
14
star
38

image-split-join

图像切割粘贴器
JavaScript
13
star
39

image-merge

巡礼对比图生成器
JavaScript
12
star
40

autoindex.html

nginx autoindex.html 好看一点的目录浏览界面
HTML
11
star
41

itorr.css

Itorr Style
11
star
42

gif2frame

「动图拆帧」把 GIF 动图拆解成静帧的在线工具
11
star
43

fix-sinaimg.user.js

修复微博图片跨域展示用户脚本
JavaScript
10
star
44

weibo-face

🧣「解析微博表情」微博表情解析替换
JavaScript
10
star
45

itorr.file

itorr.file
JavaScript
9
star
46

dots

「漫画网点生成器」
8
star
47

magiconch-user-tools

「神奇海螺油猴网页工具集」依托用户脚本支持的网页小工具集
JavaScript
6
star
48

ani-trace

「截图猜动画」在线小游戏
JavaScript
5
star
49

repeat-text

重复文字生成器
HTML
5
star
50

title

「标题生成器」视频效果字标题生成工具
HTML
5
star
51

LightBox

JavaScript 光箱
JavaScript
4
star
52

reza-vite-svelte

✨ Reza! 简易碟片播放器
JavaScript
4
star
53

ISO3166-1_icons

ISO 3166-1 国家图标
HTML
3
star
54

csgo-commands-search

CSGO 控制台指令速查
JavaScript
3
star
55

bingo

「宾果游戏生成器」在线的宾果方格游戏在线生成工具
JavaScript
3
star
56

SSS

Shadowsocks 后台界面
JavaScript
2
star
57

rust-cpal-test

Rust
1
star
58

mouto.org-archive

二零一七年旧博客备份
HTML
1
star