CINC/scenes/storeScenes/Joystick.js

export default class Joystick {
    constructor(scene, x, y, radius, baseColor, thumbColor) {
        this.scene = scene
        this.x = x
        this.y = y
        this.radius = radius
        this.baseColor = baseColor
        this.thumbColor = thumbColor
    }
    /**
     * 创建摇杆，设置层级
     */
    createJoystick(layer = 100) {
        // 创建基座
        this.joystickBase = this.scene.add.circle(0, 0, this.radius, this.baseColor)
        this.joystickBase.setPosition(this.x, this.y)
        // 创建按钮
        this.joystickButton = this.scene.add.circle(0, 0, this.radius / 2, this.thumbColor)
        this.joystickButton.setPosition(this.x, this.y)
        // 设置层级
        this.joystickBase.setDepth(layer)
        this.joystickButton.setDepth(layer)
    }
    /**
     * 获取摇杆归一化方向与力度
     * @returns {Object} 归一化方向 {x, y} 与力度 magnitude
     */
    getJoystickDirection() {
        // 获取摇杆方向，归一化
        const direction = {
            x: this.joystickButton.x - this.joystickBase.x,
            y: this.joystickButton.y - this.joystickBase.y,
        }
        // 计算力度
        const magnitude = Math.sqrt(direction.x ** 2 + direction.y ** 2)
        // 归一化方向
        direction.x /= magnitude
        direction.y /= magnitude
        return {direction, magnitude}
    }
    /**
     * 重置摇杆位置
     */
    resetJoystick() {
        this.joystickButton.setPosition(this.x, this.y)
    }
    /**
     * 监听摇杆输入
     */
    listenJoystickInput() {
        // 监听按钮按下事件
        this.joystickButton.on('pointerdown', (pointer) => {
            this.joystickButton.setPosition(pointer.x, pointer.y)
        })
        // 监听按钮移动事件
        this.joystickButton.on('pointermove', (pointer) => {
            // 计算摇杆按钮到基座中心的距离
            const dx = pointer.x - this.x
            const dy = pointer.y - this.y
            const distance = Math.sqrt(dx * dx + dy * dy)
            
            if (distance > this.radius) {
                // 限制在基座范围内
                const angle = Math.atan2(dy, dx)
                this.joystickButton.setPosition(
                    this.x + this.radius * Math.cos(angle),
                    this.y + this.radius * Math.sin(angle)
                )
            } else {
                // 在基座范围内，跟随手指
                this.joystickButton.setPosition(pointer.x, pointer.y)
            }
        })
        // 监听按钮松开事件
        this.joystickButton.on('pointerup', () => {
            this.resetJoystick()
        })
    }
}