使用nipple.js创建前端虚拟摇杆

最新推荐文章于 2024-08-10 07:00:19 发布
最新推荐文章于 2024-08-10 07:00:19 发布
阅读量2.2k 收藏 6
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kala_panda/article/details/130581555
版权

使用nipple.js创建前端虚拟摇杆功能。这个是在开发项目中，遇到的一个技术点，因为想要像控制玩具汽车一样，所以参考了王者荣耀，无人机页面等，最终想要一个虚拟摇杆功能，然后我先搜索了下相关的组件，然后发现了nipple.js

nippleJs是一个虚拟摇杆的js库，专为可触摸的设备提供接口，常被用于游戏和可操作硬件设备的app或网页中

nipple.js  demo

nipple.js 官网

根据nipple.js，最后想要实现的概念图：

nipple 的安装就不多说了，下面主要讲讲遇到的问题

  1. react中通过document.getElementsByTagName(‘span’)[0]的方式来获取nipple的创建区域，总是获取不到，然后查了一下好像是因为还没有渲染完成所以无法获取到区域，然后放到了setTimeout里，延时时间设置为0，就可以了


最低0.47元/天 解锁文章
nipplejs.js摇杆操控盘
qq_33298964的博客
10-18 1817
nippleJs是一个虚拟摇杆的js库，专为可触摸的设备提供接口，常被用于游戏和可操作硬件设备的app或网页中。更改摇杆样式，只更改颜色可通过option的参数实现，先让圆盘变得好像自己设计的图，更改样式即可，主要要加!important来强制约束。
css摇杆,nippleJS: nippleJS 是一个 JavaScript 库，用来创建虚拟摇杆触摸功能的接口...
weixin_35886741的博客
08-03 1499
A vanilla virtual joystick for touch capable interfacesTable Of ContentsInstallnpm installnipplejs --saveDemoCheck out the demo here.UsageImport it the way you want into your project :// CommonJSvar m...
VUE3中实现游戏摇杆效果
easyboot的专栏
06-02 1398
下面是完整的VUE代码。1.安装nipple。
虚拟飞控双遥杆的APP界面编程实现
kaizq的专栏
08-24 833
1 缘起 四轴飞行器，添加WIFI模块，用移动手机模拟替代操控遥杆。 移动手机，虚拟飞控双遥杆，自然选用成熟的nipple.js库，应用APP界面主导的js库是jQuery及其相关UI如JQM，nipple嵌入其中应用。遥杆界面出现了，但操控不对应，尤其是上、左方向，几乎相反。 JS库冲突，顶层的JQM规定屏幕左上角为坐标原点，nipple只能被动继承。 采用常规冲突解决的最优嵌入JS库引用解决如下： jQuery(function($){ var npL = nippl.
Js 游戏虚拟摇杆 Demo
09-28
2个币意思一下。 Js 游戏虚拟摇杆 Demo 详细看这个文章 ： https://blog.csdn.net/u010067685/article/details/82883156
nipplejs：一个虚拟摇杆JavaScript库
最新发布
gitblog_00024的博客
08-10 847
nipplejs：一个虚拟摇杆JavaScript库 项目地址:https://gitcode.com/gh_mirrors/ni/nipplejs 1. 项目介绍 nipplejs 是由 Yoann Moinet 创建的一个轻量级JavaScript库，它提供了虚拟摇杆的实现，特别适用于触摸屏设备上的交互式应用，如游戏或硬件控制面板。通过这个库，开发者可以轻松地在Web页面上集成可操作的虚拟操纵...
《Joystick》(虚拟摇杆代码-Cocos2d-js)
09-02
2016年5月学习Cocos2d-js的时候写的代码，实现了虚拟摇杆技术。 小框根据摇杆运动。 如有侵权请及时联系。 Cocos2d-x-3.10 WebStorm2016.2
虚拟摇杆触摸功能库nippleJS.zip
07-19
nippleJS 是一个 JavaScript 库，用来创建虚拟摇杆触摸功能的接口。示例代码：{     position: { // absolute position of the center in pixels         x: 125,         y: 95     },     force: 0.2, // strength in %     distance: 25.4, // distance from center in pixels     angle: {         radian: 1.5707963268, // angle in radian         degree: 90     } } 标签：nippleJS
Js 游戏虚拟摇杆
还是叫我官人吧
09-28 8243
首先说明是从这个大神这里看到的https://blog.csdn.net/cdnight/article/details/50751832?locationNum=3&fps=1 一看之后下载资源需要30个币，而且下面的评论说资源不全，于是打消了下载csdn资源的念头了，其实自己也没币了， 这里鄙视一下csdn，我记得我之前有很多币的，前几天查了一下 都过期了？？？wtf?过期了，...
前端项目-nipplejs.zip
09-02
前端项目-nipplejs,A virtual joystick for touch capable interfaces
移动端h5页面虚拟摇杆
07-31
一个简单易懂的html5页面的虚拟摇杆功能，该demo使用了zepto.js的touch事件，请在PC浏览器的控制台中使用手机模拟器运行或在移动端设备上打开。横屏预览更佳。
强大的虚拟摇杆插件
11-06
这是一款非常牛逼的 虚拟摇杆插件 ，使用它能为你节约大量时间
虚拟摇杆类(SneakyInput)
11-27
SneakyInput,下载后，编译有错，因为它是老版本，需要修改。本人修改好了（使用版本为2.1.4）。
虚拟摇杆（EasyTouch）.rar
05-13
unity非常好用的虚拟摇杆插件，里面有做好的工程，可以直接使用，使用过程中有问题可以联系我，我会详细的为大家解答
UGUI虚拟摇杆实现
10-29
通过UGUI实现虚拟摇杆功能，https://blog.csdn.net/EIE08027/article/details/83500864
html5虚拟摇杆,关于前端:babylonjs-第三方-nipplejs虚拟摇杆
weixin_39841002的博客
06-24 1282
Game Start– (不忍直视的名字和logo_(:з」∠)_)应用创立 manager在引入js后，咱们依照官网的代码先创立manager实例。manager的dom元素就是所有nipple对象能生成的区域块。let joyCon = document.querySelector("#joy-con");// eslint-disable-next-line no-debuggerlet o...
【js】nipplejs摇杆库API总结
typeofGeek的博客
03-17 5496
nipplejs摇杆库API总结by RAY 2017.03.13 前端web client页面虚拟摇杆库API翻译、使用总结参考 官方http://yoannmoinet.github.io/nipplejs/更新【0】 概述(日期17.03)当前版本支持以下功能： 1.固定&非固定位置摇杆，摇杆大小颜色位置可调。 2.返回读数有：摇杆位置xy，角度，半径等。小圆超过可见大圆外时，也是操控
js 游戏摇杆 智能小车 方向盘
一缕白发的博客
01-04 1696
js 游戏摇杆 智能小车 方向盘 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js 游戏摇杆 智能小车方向盘</title> <meta name="viewport" content="width=device-width,init...
cocos creator-js-虚拟摇杆
qq_39766982的博客
06-18 537
cc.Class({ extends: cc.Component, properties: { bg: cc.Node,//--移动节点可移动范围 以及触摸范围 可进行分开 moveNode: cc.Node,//--待移动节点 handNode: cc.Node,//--摇杆节点 hand: cc.Node,//--摇杆上小圆圈 }, onLoad() { this.bg.on(cc.No..
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值