VUE3中实现游戏摇杆效果

原创已于 2023-06-02 11:19:35 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#游戏

于 2023-06-02 11:09:06 首次发布

VUE3 专栏收录该内容

54 篇文章

订阅专栏

文章介绍了如何在Vue项目中集成nipplejs库来创建一个虚拟摇杆，用于触摸设备的交互。通过npm安装nipplejs后，在Vue组件中设置和监听摇杆事件，展示了具体的HTML结构和TS代码示例。

github地址

GitHub - yoannmoinet/nipplejs: A virtual joystick for touch capable interfaces.

演示地址

Nipplejs by yoannmoinet

1.安装nipple

npm install nipplejs --save

下面是完整的VUE代码

			<el-row> <el-col :span="5">
					<div id="joystick_zone"></div>
				</el-col>

			</el-row>


<script setup lang="ts" name="Camera3DScan">
import { ref, reactive, onMounted, watch } from 'vue'
import axios from 'axios'
 
import * as echarts from 'echarts';
import "echarts-gl"; //3D地图插件
import nipplejs from 'nipplejs'; 

onMounted(() => {

	setTimeout(function () {

		var options = {
			zone: document.getElementById('joystick_zone') as HTMLElement,
			mode: 'static',
			position: {left: '50%', top: '50%'},
			color: 'gray',
		} as const

		var manager = nipplejs.create(options);

		manager.on('dir', function (evt, data) {
			console.log(data)
			// Do something.
		});
	}, 1000) 
})
</script>

页面效果