引言：Tampermonkey与Web游戏交互
tampermonkey作为一款强大的浏览器扩展，允许用户通过编写javascript脚本来修改网页行为、增强功能或自动化任务。在web游戏领域，它常被用于创建自定义ui、自动化操作或改善游戏体验。其中，模拟键盘按键是实现自动化操作的关键一环，例如在unity webgl构建的游戏中，通过脚本控制角色移动或执行特定动作。然而，模拟按键并非简单地派发一个事件即可，尤其是在复杂的web应用（如unity canvas）中，需要考虑诸多细节。
问题剖析：复选框无法驱动按键模拟
用户遇到的问题是，在Tampermonkey脚本中创建了一个自定义的UI面板，包含一个“Pumping Energy”复选框。其预期是当复选框被选中时，脚本能模拟按下“A”键（keyCode 65），从而在unity-canvas元素上控制游戏角色移动。然而，尽管控制台输出了“on”信息，角色却没有实际移动。
原始脚本的关键部分如下：
// ... (panel and checkbox creation) ...
checkbox1.addEventListener('change', function() {
if (this.checked) {
console.log("on");
var canvas = document.getElementById('unity-canvas');
simulateKeyPress(canvas, 65); // Attempt to simulate 'A' key
} else {
console.log("off");
}
});
function simulateKeyPress(canvas, keyCode) {
var keyboardEvent = new KeyboardEvent('keydown', { keyCode: keyCode }); // Deprecated keyCode
console.log(keyboardEvent)
canvas.dispatchEvent(keyboardEvent); // Dispatch to canvas
}从代码来看，checkbox1.addEventListener的语法是正确的，它能监听复选框的状态变化。问题更可能出在simulateKeyPress函数的实现上，或者事件派发的目标与方式上，导致Unity游戏未能正确接收和处理模拟的按键事件。
深入理解KeyboardEvent与按键模拟
要成功模拟键盘事件，我们需要全面理解KeyboardEvent的构造及其派发机制。
KeyboardEvent的完整构建
KeyboardEvent构造函数在现代浏览器中提供了丰富的选项，而不仅仅是keyCode。keyCode已被弃用，推荐使用key和code属性。游戏引擎（包括Unity）可能会依赖这些更现代的属性来识别按键。
以下是一个更健壮的KeyboardEvent构造示例，包含了常用且重要的属性：
function createKeyboardEvent(type, key, code, keyCode, options = {}) {
const defaultOptions = {
key: key,
code: code,
keyCode: keyCode, // 兼容旧系统，但已废弃
which: keyCode, // 兼容旧系统，但已废弃
bubbles: true, // 事件是否会冒泡
cancelable: true, // 事件是否可取消
composed: true, // 针对Shadow DOM
shiftKey: false,
altKey: false,
ctrlKey: false,
metaKey: false,
// 其他可选属性，如location, repeat等
};
const eventOptions = { ...defaultOptions, ...options };
return new KeyboardEvent(type, eventOptions);
}对于“A”键，其key通常是'a'或'A'，code是'KeyA'，keyCode是65。在模拟时，建议同时设置这些属性以确保最大兼容性。
事件派发目标的选择
原始脚本将事件派发到canvas元素 (canvas.dispatchEvent(keyboardEvent);)。然而，许多Web游戏（尤其是基于window或document监听全局按键事件的游戏）可能不会在特定的canvas元素上直接监听KeyboardEvent。
- canvas元素： 当按键事件需要直接作用于canvas内部的特定逻辑时使用。
- document对象： 许多应用程序会监听document上的全局按键事件。
- window对象： 最顶层的全局对象，通常用于捕获所有按键事件，无论焦点在哪里。
通常，将事件派发到document或window会更有效，因为它们是按键事件的常见监听者。
焦点的重要性
浏览器中的按键事件通常只在具有焦点的元素上触发。如果unity-canvas元素没有获得焦点，即使派发了事件，游戏也可能不会响应。在模拟按键之前，确保目标元素获得焦点是至关重要的一步。
canvas.focus(); // 尝试让canvas获得焦点
按键序列与时序
真实的按键操作包含“按下”(keydown)和“释放”(keyup)两个阶段。仅仅派发一个keydown事件可能不足以触发某些游戏逻辑，或者游戏可能期望在keydown和keyup之间存在一个短暂的间隔。
为了更真实地模拟按键，建议派发一个keydown事件，稍作延迟后，再派发一个keyup事件。
优化后的按键模拟方案
综合上述分析，我们可以构建一个更完善的按键模拟函数，并将其集成到Tampermonkey脚本中。
改进后的按键模拟函数
/**
* 模拟键盘按键操作
* @param {HTMLElement} targetElement - 派发事件的目标元素（通常是document或window）
* @param {string} keyChar - 按键的字符表示（如 'a', 'd'）
* @param {number} duration - 按键按下的持续时间（毫秒），用于模拟按下和释放
*/
function simulateFullKeyPress(targetElement, keyChar, duration = 100) {
let code;
let keyCode;
// 根据keyChar确定key, code, keyCode，确保兼容性
switch (keyChar.toLowerCase()) {
case 'a':
keyChar = 'a';
code = 'KeyA';
keyCode = 65;
break;
case 'd':
keyChar = 'd';
code = 'KeyD';
keyCode = 68;
break;
// 可根据需要添加更多按键映射
default:
console.warn(`未知的按键字符: ${keyChar}`);
return;
}
const commonOptions = {
key: keyChar,
code: code,
keyCode: keyCode,
which: keyCode,
bubbles: true,
cancelable: true,
composed: true,
};
// 1. 派发 keydown 事件
const keydownEvent = new KeyboardEvent('keydown', commonOptions);
targetElement.dispatchEvent(keydownEvent);
console.log(`Dispatched keydown for ${keyChar} on`, targetElement);
// 2. 延迟后派发 keyup 事件
setTimeout(() => {
const keyupEvent = new KeyboardEvent('keyup', commonOptions);
targetElement.dispatchEvent(keyupEvent);
console.log(`Dispatched keyup for ${keyChar} on`, targetElement);
}, duration);
}集成到Tampermonkey脚本
将上述simulateFullKeyPress函数集成到Tampermonkey脚本中，并调整事件监听器，使其在复选框选中时，首先确保Unity Canvas获得焦点，然后模拟按键。
// ==UserScript==
// @name Erz Online Energy Pump (Optimized)
// @namespace https://app.erz.online/
// @version 2
// @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 = '10000'; // 确保在最上层
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);
// 模拟按键的核心逻辑
let pumpingInterval = null; // 用于存储按键循环的定时器ID
/**
* 模拟键盘按键操作
* @param {HTMLElement} targetElement - 派发事件的目标元素（通常是document或window）
* @param {string} keyChar - 按键的字符表示（如 'a', 'd'）
* @param {number} duration - 按键按下的持续时间（毫秒），用于模拟按下和释放
*/
function simulateFullKeyPress(targetElement, keyChar, duration = 100) {
let code;
let keyCode;
switch (keyChar.toLowerCase()) {
case 'a':
keyChar = 'a';
code = 'KeyA';
keyCode = 65;
break;
case 'd':
keyChar = 'd';
code 
