Tampermonkey脚本中模拟键盘事件：解决Unity游戏玩家移动问题-js教程-PHP中文网

tampermonkey脚本中模拟键盘事件：解决unity游戏玩家移动问题

本教程详细探讨了在Tampermonkey脚本中模拟键盘事件以控制Unity游戏玩家移动的挑战与解决方案。文章首先介绍了如何创建自定义UI元素，随后深入分析了键盘事件模拟中常见的陷阱，特别是 keyCode 的弃用、事件目标的选择以及事件属性的重要性。核心内容是构建一个可靠的 simulateKeyPress 函数，它能正确地触发 keydown 和 keyup 事件，并将其与自定义复选框的 change 事件结合，最终实现玩家的精确控制。

1. Tampermonkey脚本与自定义UI元素

Tampermonkey作为一款强大的浏览器扩展，允许用户通过JavaScript脚本修改网页功能。在许多场景下，我们需要为脚本添加自定义的用户界面（UI）元素，例如复选框，以便用户能够轻松地控制脚本的行为。

以下代码片段展示了如何在网页的右下角创建一个浮动面板，并在其中添加一个名为“Pumping Energy”的复选框。这个复选框将作为我们控制游戏玩家移动的开关。

// ==UserScript==
// @name         Erz Online Energy Pump
// @namespace    https://app.erz.online/
// @version      1
// @description  Adds a panel to the lower right corner of the screen on https://app.erz.online/ with a checkbox labeled 'pumping energy' that activates pressing the 'A' and 'D' keys to move in the game.
// @match        https://app.erz.online/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建浮动面板
    const panel = document.createElement('div');
    panel.style.position = 'fixed';
    panel.style.bottom = '100px';
    panel.style.right = '0';
    panel.style.width = '200px';
    panel.style.height = '100px';
    panel.style.backgroundColor = '#262626';
    panel.style.borderRadius = '5px';
    panel.style.padding = '10px';
    panel.style.boxShadow = '2px 2px 5px rgba(0, 0, 0, 0.3)';
    panel.style.zIndex = '1000'; // 确保面板在最上层

    // 创建复选框
    const checkbox1 = document.createElement('input');
    checkbox1.type = 'checkbox';
    checkbox1.id = 'pumping-energy';
    checkbox1.style.marginRight = '10px';

    // 创建标签
    const label1 = document.createElement('label');
    label1.htmlFor = 'pumping-energy';
    label1.style.color = "#ffffff";
    label1.innerText = 'Pumping Energy';

    // 将复选框和标签添加到面板
    panel.appendChild(checkbox1);
    panel.appendChild(label1);

    // 将面板添加到页面body
    document.body.appendChild(panel);

    // 后续我们将在这里添加复选框的事件监听器和键盘模拟逻辑
    // ...
})();

登录后复制

2. 核心挑战：模拟键盘事件

在网页环境中模拟键盘事件，尤其是为了与游戏或复杂应用交互时，常常会遇到一些挑战。直接使用 new KeyboardEvent() 和 dispatchEvent() 方法可能无法达到预期效果，原因有以下几点：

keyCode 的弃用: 原始的 KeyboardEvent 构造函数中使用 keyCode 属性来指定按键，但这个属性已经被弃用。现代浏览器推荐使用 key 和 code 属性来更准确地描述按键。key 表示按键的字符值（如 'a', 'Enter'），而 code 表示按键的物理位置（如 'KeyA', 'NumpadEnter'）。
事件目标的选择: 将键盘事件分派到哪个DOM元素至关重要。虽然游戏可能在 canvas 元素上渲染，但它通常通过监听 document 或 window 对象来捕获全局键盘输入。将事件分派到错误的元素可能导致游戏无法识别。
事件属性的完整性: KeyboardEvent 构造函数需要传入一个选项对象，其中包含 bubbles（事件是否冒泡）和 cancelable（事件是否可取消）等属性。将它们设置为 true 可以确保事件的行为更接近真实的用户输入。
keydown 和 keyup 的配对: 真实的按键操作包括按下 (keydown) 和释放 (keyup) 两个过程。许多游戏引擎会根据这两个事件来判断按键状态和执行相应动作。仅仅分派 keydown 事件可能不足以触发持续的动作或正确的状态转换。

3. 构建可靠的键盘事件模拟函数

为了解决上述挑战，我们需要一个更健壮的 simulateKeyPress 函数。这个函数应该能够：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

使用 key 和 code 属性。
确保事件可冒泡和可取消。
同时分派 keydown 和 keyup 事件，模拟完整的按键过程。
允许指定事件分派的目标元素。

// 优化后的键盘事件模拟函数
function simulateKeyPress(targetElement, keyName, codeName) {
    // 构造keydown事件
    const downEvent = new KeyboardEvent('keydown', {
        key: keyName,
        code: codeName,
        bubbles: true,      // 允许事件冒泡
        cancelable: true,   // 允许事件可取消
        // 其他可选属性，如 metaKey, ctrlKey, altKey, shiftKey 等
    });

    // 构造keyup事件
    const upEvent = new KeyboardEvent('keyup', {
        key: keyName,
        code: codeName,
        bubbles: true,
        cancelable: true,
    });

    console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keydown 事件: ${keyName}`);
    targetElement.dispatchEvent(downEvent);

    // 模拟按键持续时间，然后分派keyup事件
    // 对于某些游戏，可能需要更长的延迟或持续的 keydown 循环
    setTimeout(() => {
        console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keyup 事件: ${keyName}`);
        targetElement.dispatchEvent(upEvent);
    }, 50); // 短暂延迟50毫秒，模拟按键持续时间
}

登录后复制

在上述函数中，我们选择了 document 作为 targetElement 的默认推荐值，因为它通常是捕获全局键盘事件最可靠的目标。对于字母 'A'，其 key 为 'a'，code 为 'KeyA'。

4. 集成到复选框事件监听器

现在，我们将这个可靠的键盘事件模拟函数集成到复选框的 change 事件监听器中。当复选框被选中时，我们将调用 simulateKeyPress 来模拟 'A' 键的按下。

    // ... (接上一节的UI创建代码)

    // 为复选框添加事件监听器
    checkbox1.addEventListener('change', function() {
        if (this.checked) {
            console.log("Pumping Energy: ON");
            // 当复选框被选中时，模拟 'A' 键的按下
            // 将事件分派到 document 对象，通常比 canvas 更可靠
            simulateKeyPress(document, 'a', 'KeyA');
        } else {
            console.log("Pumping Energy: OFF");
            // 如果需要停止持续移动，这里可能需要清除定时器或其他逻辑
        }
    });

    // ... (simulateKeyPress 函数)

登录后复制

关于事件监听器的选择： 原始代码使用 checkbox1.addEventListener('change', ...)，这是一种直接且有效的方式，因为 checkbox1 是一个已知且可直接引用的DOM元素。虽然也可以使用事件委托（例如 document.addEventListener('change', function(event) { if (event.target.id === 'pumping-energy') { ... } })），但在这种特定场景下，直接监听元素本身通常更简洁和高效。

5. 完整Tampermonkey脚本示例

将所有部分整合起来，形成一个完整的Tampermonkey脚本，用于在 erz.online 网站上添加一个控制玩家移动的复选框：

// ==UserScript==
// @name         Erz Online Energy Pump
// @namespace    https://app.erz.online/
// @version      1
// @description  Adds a panel to the lower right corner of the screen on https://app.erz.online/ with a checkbox labeled 'pumping energy' that activates pressing the 'A' and 'D' keys to move in the game.
// @match        https://app.erz.online/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 1. 创建并添加自定义UI面板和复选框
    const panel = document.createElement('div');
    panel.style.position = 'fixed';
    panel.style.bottom = '100px';
    panel.style.right = '0';
    panel.style.width = '200px';
    panel.style.height = '100px';
    panel.style.backgroundColor = '#262626';
    panel.style.borderRadius = '5px';
    panel.style.padding = '10px';
    panel.style.boxShadow = '2px 2px 5px rgba(0, 0, 0, 0.3)';
    panel.style.zIndex = '1000';

    const checkbox1 = document.createElement('input');
    checkbox1.type = 'checkbox';
    checkbox1.id = 'pumping-energy';
    checkbox1.style.marginRight = '10px';

    const label1 = document.createElement('label');
    label1.htmlFor = 'pumping-energy';
    label1.style.color = "#ffffff";
    label1.innerText = 'Pumping Energy';

    panel.appendChild(checkbox1);
    panel.appendChild(label1);
    document.body.appendChild(panel);

    // 2. 定义可靠的键盘事件模拟函数
    function simulateKeyPress(targetElement, keyName, codeName) {
        const downEvent = new KeyboardEvent('keydown', {
            key: keyName,
            code: codeName,
            bubbles: true,
            cancelable: true,
        });

        const upEvent = new KeyboardEvent('keyup', {
            key: keyName,
            code: codeName,
            bubbles: true,
            cancelable: true,
        });

        console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keydown 事件: ${keyName}`);
        targetElement.dispatchEvent(downEvent);

        setTimeout(() => {
            console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keyup 事件: ${keyName}`);
            targetElement.dispatchEvent(upEvent);
        }, 50);
    }

    // 3. 为复选框添加事件监听器，触发键盘模拟
    checkbox1.addEventListener('change', function() {
        if (this.checked) {
            console.log("Pumping Energy: ON");
            // 假设 'A' 键用于向左移动
            simulateKeyPress(document, 'a', 'KeyA');
            // 如果需要模拟 'D' 键，可以再调用一次
            // simulateKeyPress(document, 'd', 'KeyD');
        } else {
            console.log("Pumping Energy: OFF");
            // 如果有持续按键逻辑，这里需要停止
        }
    });

})();

登录后复制

6. 注意事项与最佳实践

事件目标优先级: 优先尝试将键盘事件分派到 document 或 window 对象。如果这不起作用，再尝试游戏渲染的 canvas 元素，但这通常不太可靠。
持续按键模拟: 如果游戏需要按住某个键才能持续移动，仅仅触发一次 keydown 和 keyup 可能不够。在这种情况下，你需要使用 setInterval 在复选框选中时重复触发 keydown 事件，并在复选框取消选中时清除 setInterval 并触发 keyup。
游戏引擎兼容性: 不同的游戏引擎（如Unity、Phaser、Babylon.js等）可能有自己独特的输入处理机制。有些引擎可能不会监听标准的DOM键盘事件，而是使用自定义的事件或直接从浏览器API读取按

以上就是Tampermonkey脚本中模拟键盘事件：解决Unity游戏玩家移动问题的详细内容，更多请关注php中文网其它相关文章！