Play-icon.png

恭喜Deemo II主线剧情全部完结!恭喜Deemo II刚拿到国服版号!

Acknowledgment创建歌曲创建收藏物品创建限时活动

如果右下角对话没加载出来请刷新页面 • 看板娘说明书

全站通知:

模板:看板娘/文档

来自Deemo IIWIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
 简易可互动看板娘。简易是因为
  1. 实现方法很笨。
  2. 有几个bug因为我太菜了不想修复:(1)双击/拖拽动作的监听器和单击的监听器黏在一起。(2)手机上看看板娘会迷之自己不停刷新。
  3. 真的很闲的话可以做眼球追踪。

相关代码

  1. 模板:看板娘
  2. MediaWiki:Kanban.js
  3. MediaWiki:Common.js中看板娘相关样式代码

功能介绍

  • 无互动时
    • 站立
    • 双手张开
    • 眨眼睛
  • 互动
    • 单击:从语句库里随机选择一句话显示在对话框里,脸变成微笑脸
    • 双击:脸变成震惊脸
    • 拖拽:脸变成抱头脸
  • 隐藏
    • 点击左侧的“隐藏”会变成小图标,点击小图标会变回大看板

使用方法

{{看板娘}}

Ani-close.png
隐藏
Kanban-icon.png

效果见页面左下角。可以把看板娘放在模板:面包屑里,有面包屑的地方就有看板娘。

简单代码说明

准备看板娘不同状态的图片资源,把图片的地址复制到js里imgs对应的地方:

无互动-站立 Ani-close.png base
无互动-张手 Ani-open.png open
无互动-眨眼 Ani-blink.png blink
互动-单击-微笑 Ani-smile.png smile
互动-双击-震惊 Ani-surprise.png surprise
互动-拖拽-抱头 Ani-ouch.png ouch
const imgs = {
	"base": "https://patchwiki.biligame.com/images/deemo2/f/f3/tea4o2o07iyzvu9nitmd49b0u6p18bx.png", 
	"open": "https://patchwiki.biligame.com/images/deemo2/0/03/qbga9unahv0u4dpcui0hur9ocfisq3g.png",
	"smile": "https://patchwiki.biligame.com/images/deemo2/2/2f/sb4i1me6iys0gwq00tgutlxj3c9xfmh.png",
	"surprise": "https://patchwiki.biligame.com/images/deemo2/b/b3/o1rooul32lo0wed5w902fj1wu9x95rt.png",
	"ouch": "https://patchwiki.biligame.com/images/deemo2/d/dc/tqk9mst35kys74sibt8o8o6m1636iyq.png",
	"blink": "https://patchwiki.biligame.com/images/deemo2/2/2e/7o6u1yyw2d4zur371ykz1oqi6aotxom.png",
}

CSS相关代码

kanban-icon是隐藏后显示的那个图标,kanban-container是包裹所有组件的大容器,kanban-dialogue是对话框。

/* Kanban */
.kanban-icon {
    display: none;
    width: 30%;
    min-width: 50px;
}

.kanban-container {
	position: fixed; 
	bottom: -20px; 
	left: 3%; 
	width: 30%; 
	max-width: 200px;
	z-index: 3000;
}

.kanban-dialogue {
	background-color: white; 
	color: #333; 
	padding: 10px;
}