Game Start
<center> (不忍直視的名字和logo_(:з」∠)_)</center>
使用
創(chuàng)建 manager
在引入js后超燃，我們按照官網(wǎng)的代碼先創(chuàng)建manager實(shí)例左权。manager的dom元素就是所有nipple對(duì)象能生成的區(qū)域塊。
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%"
},//在容器內(nèi)垂直居中顯示
zone: joyCon //如果不提提供zone容器元素褐墅，那么默認(rèn)動(dòng)態(tài)生成的元素是注入在body中的拆檬。
};
let manager = nipplejs.create(options);
由于搖桿對(duì)象（nipple）默認(rèn)是白色的所以需要給背景填充顏色洪己，效果如圖。
??有三種模式：
1.dynamic(離開(kāi)屏幕后就消失)
2.semi(離開(kāi)屏幕后還保留在原處竟贯，移動(dòng)到別處時(shí)切換當(dāng)前的搖桿的位置)
3.static 固定不動(dòng)
自定義樣式
通過(guò)審查元素可發(fā)現(xiàn)動(dòng)態(tài)生成的nipple元素中有兩個(gè)div答捕，front是中間的圓點(diǎn)，back是圓點(diǎn)的容器屑那。
.front {
background-color: #fff;
user-select: none;//加這個(gè)屬性是因?yàn)樵乜偸菚?huì)被選中拱镐，會(huì)比較影響使用體驗(yàn)
}
.back {
background-image: url("../assets/j.png");
background-size: cover;
user-select: none;
}
如下圖所示
在文檔中介紹了兩個(gè)實(shí)例對(duì)象，manager寫得很清楚齐莲，但是nipple這個(gè)實(shí)例是真的找了半天都沒(méi)有找到是怎么生成的...
然后翻到Events這邊發(fā)現(xiàn)原來(lái)這個(gè)對(duì)象是通過(guò)參數(shù)傳過(guò)來(lái)的 -痢站。- ，查看了一下源碼选酗，在生成manager對(duì)象后會(huì)創(chuàng)建collect對(duì)象阵难，collect在被創(chuàng)建時(shí)會(huì)根據(jù)當(dāng)前mode處理不同的情況，當(dāng)mode為static時(shí)需要默認(rèn)生一個(gè)nipple對(duì)象芒填。
監(jiān)聽(tīng)事件
//滑動(dòng)搖桿的事件
manager.on("move", function (evt, data) {
if (data.direction) {
......
});
//停止滑動(dòng)搖桿的事件
manager.on("end", function (evt, data) {
......
});
我這里只需要兩個(gè)事件就OK
兼容性
目前 nipplejs: 0.8.3版本在ios13上有bug導(dǎo)致其無(wú)法滑動(dòng)...
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
原因是新發(fā)布的safari 13增加了新的API
可對(duì)源碼進(jìn)行修改呜叫，找到依賴下的utils.js
export const isPressed = (evt) => {
if (evt.type === 'pointerdown' || evt.type === 'pointermove') {
return true;
} //補(bǔ)充該代碼
if (isNaN(evt.buttons)) {
return evt.pressure !== 0;
}
return evt.buttons !== 0;
};
或者回退到0.8.1版本也可以解決問(wèn)題...
參考資料
( ?▽?)っ鏈接
