摇杆控制方向原理_用Vue实现一个街机游戏摇杆

前言

最早实现这个效果，是2011年用Objective-C在iOS里实现的。原仓库地址：https://code.google.com/archive/p/ccjoystick/downloads

在Vue里实现这个东西没啥用处，毕竟Vue也不是一个游戏框架，但是谁叫Vue这个话题的热度最高呢?，写文章还是希望被更多人看到嘛...

印象里我在不同时期曾经用三种语言分别实现过这个案例。所以无论用什么框架、语言，只要你了解背后的原理，都很容易实现。

三层UI

全部UI分为三层

• 第一层是杆头，尺寸不会变化，拖拽的视觉效果区。
• 第二层是杆体，高度可拉伸，用于拟物流模仿真实感。
• 第三层是底，只是放在画面中，为了让视觉感受更完整。

当然没有第二层和第三层是不影响摇杆功能的，但谁叫我是一个拟物流的前端偏执狂呢?

把这三个层通过绝对定位+z-index叠起来，通过设置touch事件让杆头可以拖动。为了让大家看得清楚层级，我们先把杆头变透明。

圆形的拖拽区

摇杆嘛&#