Game Start

–

(不忍直视的名字和logo_(:з」∠)_)

应用

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