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参数解释