共计 1484 个字符,预计需要花费 4 分钟才能阅读完成。
Game Start
- –
<center> (不忍直视的名字和 logo_(:з」∠)_)</center>
应用
创立 manager
在引入 js 后,咱们依照官网的代码先创立 manager 实例。manager 的 dom 元素就是所有 nipple 对象能生成的区域块。
let joyCon = document.querySelector("#joy-con");
// eslint-disable-next-line no-debugger
let options = {
mode: "static",// 'dynamic', 'static' or 'semi'
size: 150,
position: {
left: "50%",
top: "50%"
},// 在容器内垂直居中显示
zone: joyCon // 如果不提提供 zone 容器元素,那么默认动静生成的元素是注入在 body 中的。};
let manager = nipplejs.create(options);
因为摇杆对象(nipple)默认是红色的所以须要给背景填充色彩,成果如图。
好大一个 …
???? 有三种模式:
1.dynamic(来到屏幕后就隐没)
2.semi(来到屏幕后还保留在原处,挪动到别处时切换以后的摇杆的地位)
3.static 固定不动
自定义款式
image
通过审查元素可发现动静生成的 nipple 元素中有两个 div,front 是两头的圆点,back 是圆点的容器。
.front {
background-color: #fff;
user-select: none;// 加这个属性是因为元素总是会被选中,会比拟影响应用体验
}
.back {background-image: url("../assets/j.png");
background-size: cover;
user-select: none;
}
如下图所示
image
在文档中介绍了两个实例对象,manager 写得很分明,然而 nipple 这个实例是真的找了半天都没有找到是怎么生成的 …
而后翻到 Events 这边发现原来这个对象是通过参数传过来的 -。-,查看了一下源码,在生成 manager 对象后会创立 collect 对象,collect 在被创立时会依据以后 mode 解决不同的状况,当 mode 为 static 时须要默认生一个 nipple 对象。
image
监听事件
// 滑动摇杆的事件
manager.on("move", function (evt, data) {if (data.direction) {......});
// 进行滑动摇杆的事件
manager.on("end", function (evt, data) {......});
我这里只须要两个事件就 OK
兼容性
目前 nipplejs: 0.8.3 版本在 ios13 上有 bug 导致其无奈滑动 …
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
起因是新公布的 safari 13 减少了新的 API
image
可对源码进行批改,找到依赖下的 utils.js
export const isPressed = (evt) => {if (evt.type === 'pointerdown' || evt.type === 'pointermove') {return true;} // 补充该代码
if (isNaN(evt.buttons)) {return evt.pressure !== 0;}
return evt.buttons !== 0;
};
或者回退到 0.8.1 版本也能够解决问题 …
参考资料
(˘▽˘) っ链接
js 参数解释