您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Shows what keys you are hitting. Can be useful for .io game streaming, tutorials, etc.
当前为
// ==UserScript== // @name Key press visual representation // @namespace http://tampermonkey.net/ // @version 4 // @description Shows what keys you are hitting. Can be useful for .io game streaming, tutorials, etc. // @author MrBlank // @match https://lolbeans.io // @match *://diep.io/* // @match *://moomoo.io/* // @match *://sandbox.moomoo.io/* // @match *://*.shellshock.io/* // @match *://*.smashkarts.io/* // @match *://*.sploop.io/* // @match *://*.yohoho.io/* // @match *://*.hexanaut.io/* // @match *://*.copter.io/* // @match *://*.defly.io/* // @grant GM_setValue // @grant GM_getValue // @run-at document-end // ==/UserScript== (function() { 'use strict'; function createMenu() { var menuContainer = document.createElement('div'); menuContainer.id = 'keyPressMenu'; menuContainer.style.cssText = ` position: fixed; top: 300px; left: 550px; background-color: white; padding: 10px; border: 2px solid black; z-index: 9999; `; menuContainer.innerHTML = ` <h3>Key Press Visual Representation Settings</h3> <label for="keyInput">Key:</label> <input type="text" id="keyInput" placeholder="Enter key"> <br> <label for="colorInput">Color:</label> <input type="color" id="colorInput" value="#ff0000"> <br> <button id="addKeyButton">Add Key</button> <button id="closeMenuButton">Close</button> `; document.body.appendChild(menuContainer); document.getElementById('addKeyButton').addEventListener('click', function() { var key = document.getElementById('keyInput').value.toUpperCase(); var color = document.getElementById('colorInput').value; if (key && color) { addKeyBoxs(key, color); document.getElementById('keyInput').value = ''; } }); document.getElementById('closeMenuButton').addEventListener('click', function() { document.getElementById('keyPressMenu').style.display = 'none'; document.getElementById('reopenMenuButton').style.display = 'block'; }); } function reopenMenu() { document.getElementById('keyPressMenu').style.display = 'block'; document.getElementById('reopenMenuButton').style.display = 'none'; } function addKeyBox(key, color, pos) { var existingBoxes = document.querySelectorAll('.keyBox'); var leftOffset = pos.left + existingBoxes.length * 70; var topOffset = pos.top; var box = document.createElement('div'); box.className = 'keyBox'; box.textContent = key; box.dataset.color = color; box.style.cssText = ` ${boxStyle} background-color: transparent; left: ${leftOffset}px; top: ${topOffset}px; `; if (key === 'SPACE') { box.style.width = '200px'; box.style.height = '50px'; } keyBoxContainer.appendChild(box); } function addKeyBoxs(key, color) { var existingBoxes = document.querySelectorAll('.keyBox'); var leftOffset = 10 + existingBoxes.length * 70; var box = document.createElement('div'); box.className = 'keyBox'; box.textContent = key; box.dataset.color = color; box.style.cssText = ` ${boxStyle} background-color: transparent; left: ${leftOffset}px; `; keyBoxContainer.appendChild(box); } var boxStyle = ` position: absolute; width: 50px; height: 50px; background-color: transparent; border: 2px solid black; text-align: center; line-height: 50px; `; createMenu(); var reopenMenuButton = document.createElement('button'); reopenMenuButton.id = 'reopenMenuButton'; reopenMenuButton.textContent = 'Open Menu'; reopenMenuButton.style.cssText = ` position: fixed; top: 50px; right: 10px; display: none; padding: 10px; font-size: 16px; `; reopenMenuButton.addEventListener('click', reopenMenu); document.body.appendChild(reopenMenuButton); var keyBoxContainer = document.createElement('div'); keyBoxContainer.id = 'keyBoxContainer'; keyBoxContainer.style.cssText = ` position: absolute; top: 100px; left: 200px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border: 2px solid black; `; document.body.appendChild(keyBoxContainer); var initialKeys = [ { key: 'W', color: '#ff0000', top: '50px', left: '150px' }, { key: 'A', color: '#00ff00', top: '110px', left: '50px' }, { key: 'S', color: '#0000ff', top: '110px', left: '53px' }, { key: 'D', color: '#ffff00', top: '110px', left: '56px' }, { key: 'SPACE', color: '#ff00ff', top: '170px', left: '-158px' } ]; initialKeys.forEach(function(item) { addKeyBox(item.key, item.color, { top: parseInt(item.top), left: parseInt(item.left) }); }); function resetColor(box) { box.style.backgroundColor = 'transparent'; } function changeColor(box, color) { box.style.backgroundColor = color; } document.addEventListener('keydown', function(event) { var key = event.key.toUpperCase(); if (key === " ") key = "SPACE"; var keyBoxes = document.querySelectorAll('.keyBox'); keyBoxes.forEach(function(box) { if (box.textContent === key) { var color = box.dataset.color; changeColor(box, color); } }); }); document.addEventListener('keyup', function(event) { var key = event.key.toUpperCase(); if (key === " ") key = "SPACE"; var keyBoxes = document.querySelectorAll('.keyBox'); keyBoxes.forEach(function(box) { if (box.textContent === key) { resetColor(box); } }); }); makeDraggable(keyBoxContainer); function makeDraggable(element) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(element.id + 'Header')) { document.getElementById(element.id + 'Header').onmousedown = dragMouseDown; } else { element.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; element.style.top = (element.offsetTop - pos2) + 'px'; element.style.left = (element.offsetLeft - pos1) + 'px'; } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } } setInterval(function() { document.body.appendChild(keyBoxContainer); boxes.forEach(function(box) { keyBoxContainer.appendChild(box); }); }, 1000); })();