手柄控制显示

// Gamepad.js
// 参考GPT给出的代码
class Gamepad {
    constructor() {
        this.$gamepad = $("#gamepad");//id = gamepad

        this.gamepadIndex = null;//选择的gamepad，待扩展
        this.gamepads = {};//gamepad api存放
        this.triggersMeter = false;//扳机样式控制
        this.mapping = {//按键，轴绑定
            buttons: [],
            axes: [],
        };
        
        this.scanDelay = 50;//刷新间隔

        this.$gamepadInfo = $('#gamepad-info');//id = gamepad-info
        this.$buttonsContainer = $('#buttons');//id = buttons
        this.$axesContainer = $('#axes');//id = axes

        this.init();//初始化
    }

    init() {//初始化函数
        window.addEventListener('gamepadconnected', (e) => this.onGamepadConnect(e));//连接事件
        window.addEventListener('gamepaddisconnected', (e) => this.onGamepadDisconnect(e));//断开事件
        window.setInterval(this.updateGamepadStatus.bind(this), this.scanDelay);//刷新
    }

    onGamepadConnect(event) {//连接事件
        this.gamepadIndex = event.gamepad.index;
        this.gamepads[event.gamepad.index] = event.gamepad;//获取gamepad api
        this.$gamepad.hide();
        this.loadGamepadMap(this.gamepads[this.gamepadIndex]);//加载按键映射
        this.updateGamepadInfo();//更新测试信息
        this.$gamepad.fadeIn();
    }
    //以下省略内容
    loadGamepadMap(gamepad);
    onGamepadDisconnect();
    updateGamepadStatus();
    updateGamepadInfo();
    updateButtons(gamepad);
    updateButton(button, index);
    updateAxes(gamepad);
    updateAxis(axis, index);
}

// 直接实例化类
window.gamepad = new Gamepad();

// Gamepad.js

class Gamepad {
    constructor() {
        this
        this.$gamepad = $("#gamepad");//id = gamepad
        this.testmode = false;
        this.gamepadIndex = null;//选择的gamepad，待扩展
        this.gamepads = {};//gamepad api存放
        this.triggersMeter = 1;//扳机样式控制
        this.mapping = {//按键，轴绑定
            buttons: [],
            axes: [],
        };
        
        this.scanDelay = 1000/15;//刷新间隔

        this.setIntervalid = null;
        this.$gamepadInfo = $('#gamepad-info');//id = gamepad-info
        this.$buttonsContainer = $('#buttons');//id = buttons
        this.$axesContainer = $('#axes');//id = axes

        this.init();//初始化
    }

    init() {//初始化函数
        this.$gamepad.hide();
        window.addEventListener('gamepadconnected', (e) => this.onGamepadConnect(e));//连接事件
        window.addEventListener('gamepaddisconnected', (e) => this.onGamepadDisconnect(e));//断开事件
    }

    onGamepadConnect(event) {//连接事件
        this.gamepadIndex = event.gamepad.index;
        this.gamepads[event.gamepad.index] = event.gamepad;//获取gamepad api

        this.$gamepad.show();
        this.loadGamepadMap(this.gamepads[this.gamepadIndex]);//加载按键映射
        // this.updateGamepadInfo();//更新测试信息

        // this.setIntervalid = window.setInterval(this.updateGamepadStatus.bind(this), this.scanDelay);//刷新
        
        this.updateGamepadStatus();
    }

    loadGamepadMap(gamepad){
        this.mapping.buttons = [];
        for (let index = 0; index < gamepad.buttons.length; index++) {
            this.mapping.buttons[index] = $(`[data-button="${index}"]`);
        }
        this.mapping.axes = [];
        for (let index = 0; index < gamepad.axes.length; index++) {
            this.mapping.axes[index] = $(
                `[data-axis="${index}"], [data-axis-x="${index}"], [data-axis-y="${index}"], [data-axis-z="${index}"]`
            );
        }
    }

    onGamepadDisconnect(event) {
        if(this.setIntervalid !== null){
            window.clearInterval(this.setIntervalid);
        }
        this.$gamepad.hide();
        delete this.gamepads[event.gamepad.index];
        this.gamepadIndex = null;
        this.updateGamepadInfo();

        this.setIntervalid = null;
    }
    
    updateGamepadStatus() {
        if (this.gamepadIndex !== null) {
            const gamepad = navigator.getGamepads()[this.gamepadIndex];
            if (gamepad) {
                this.updateButtons(gamepad);
                this.updateAxes(gamepad);
            }
        }
        window.requestAnimationFrame(this.updateGamepadStatus.bind(this));
    }

    updateGamepadInfo() {
        if(this.testmode){
            // if (this.gamepadIndex === null) {
            //     this.$gamepadInfo.text('No gamepad connected');
            //     this.$buttonsContainer.html('');
            //     this.$axesContainer.html('');
            // } else {
            //     const gamepad = this.gamepads[this.gamepadIndex];
            //     this.$gamepadInfo.text(`Connected: ${gamepad.id}`);
            //     this.updateButtons(gamepad);
            //     this.updateAxes(gamepad);
            // }
        }
        else{
            if (this.gamepadIndex !== null) {
                const gamepad = this.gamepads[this.gamepadIndex];
                // this.$gamepadInfo.text(`Connected: ${gamepad.id}`);
                this.updateButtons(gamepad);
                this.updateAxes(gamepad);
            }
        }
    }

    updateButtons(gamepad) {
        // this.$buttonsContainer.html('');
        for (let index = 0; index < gamepad.buttons.length; index++) {
            const $button = this.mapping.buttons[index];
            if (!$button) {
                break;
            }
            const button = gamepad.buttons[index];
            
            this.updateButton($button, button);
        }
    }

    updateButton($button, button) {//to be edit
        $button.attr("data-pressed", button.pressed);
        $button.attr("data-value", button.value);
        if($button.is(".trigger")){
            $button.css(
                gamepad.triggersMeter
                    ? {
                          opacity: 1,
                          "clip-path": `inset(${(1 - button.value) * 100}% 0px 0px 0pc)`,
                      }
                    : {
                          opacity: `${button.value * 100}%`,
                          "clip-path": "none",
                      }
            );
        }
    }

    updateAxes(gamepad) {
        // this.$axesContainer.html('');
        for (let index = 0; index < gamepad.axes.length; index++) {
            const $axis = this.mapping.axes[index];
            if (!$axis) {
                break;
            }
            const axis = gamepad.axes[index];
            if ($axis.is("[data-axis=" + index + "]")) {
                $axis.attr("data-value", axis);
            }
            if ($axis.is("[data-axis-x=" + index + "]")) {
                $axis.attr("data-value-x", axis);
            }
            if ($axis.is("[data-axis-y=" + index + "]")) {
                $axis.attr("data-value-y", axis);
            }
            if ($axis.is("[data-axis-z=" + index + "]")) {
                $axis.attr("data-value-z", axis);
            }
            if ("function" === typeof this.updateAxis) {
                this.updateAxis($axis);
            }
        }
    }

    updateAxis($axis) {//to be edit
        const axisX = $axis.attr("data-value-x");
        const axisY = $axis.attr("data-value-y");

        if ($axis.is(".stick")) {
            $axis.css({
                "margin-top": axisY * 25,
                "margin-left": axisX * 25,
                transform: `rotateX(${-parseFloat(
                    axisY * 30,
                    8
                )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`,
            });
        }
    }
}

window.gamepad = new Gamepad();

    updateButtons(gamepad);
    updateButton($button, button) {//to be edit
        const previousValue = parseFloat($button.attr("data-value")) || 0;//改变前的变量
        if ($button.attr("data-pressed") !== button.pressed || $button.attr("data-value") !== button.value) {//判断变量是否不同
            if($button.is(".trigger")){//如果是R2、L2，检测是否需要重新渲染
                if(Math.abs(previousValue - button.value) > this.detectSensitivity  //比较是否超出阈值
                 || ($button.attr("data-pressed") === "true") !== button.pressed){  //是否按下
                    ...
                }
            }
            else{//普通按钮直接更新
                ...
            }
        }
    }

    updateAxes(gamepad) {
        // this.$axesContainer.html('');
        for (let index = 0; index < gamepad.axes.length; index++) {
            const $axis = this.mapping.axes[index];
            if (!$axis) {
                break;
            }
            const axis = gamepad.axes[index];
            const previousValue = parseFloat($axis.attr("data-value")) || 0;
            if (Math.abs(previousValue - axis) > this.detectSensitivity){//轴是否需要更新，to be edit
                ...
            }
        }
    }
    updateAxis($axis);