Key press visual representation

Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc.
目前為 2024-03-07 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Key press visual representation
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc. 
// @author       MrBlank
// @license      MIT
// @match        https://lolbeans.io
// @match        *://diep.io/*
// @match        *://moomoo.io/*
// @match        *://sandbox.moomoo.io/*
// @match        *://*.shellshock.io/*
// @match        https://smashkarts.io/
// @match        https://sploop.io/
// @match        https://sploop.io/
// @match        https://yohoho.io/
// @match        https://hexanaut.io/
// @match        https://copter.io/
// @match        https://www.crazygames.com/
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    function changeColorToRed(box) {
        box.style.backgroundColor = 'red';
    }

    function resetColor(box) {
        box.style.backgroundColor = 'transparent';
    }

    var boxes = [];

    var boxLayout = [
        { key: 'W', top: '50px', left: '100px', size: '50px' }, // W key
        { key: 'A', top: '110px', left: '50px', size: '50px' }, // A key
        { key: 'S', top: '110px', left: '120px', size: '50px' }, // S key
        { key: 'D', top: '110px', left: '190px', size: '50px' } // D key
    ];

    boxLayout.forEach(function(item) {
        var box = document.createElement('div');
        box.textContent = item.key;
        box.style.position = 'fixed';
        box.style.top = item.top;
        box.style.left = item.left;
        box.style.width = item.size;
        box.style.height = item.size;
        box.style.backgroundColor = 'transparent';
        box.style.border = '2px solid black';
        box.style.textAlign = 'center';
        box.style.lineHeight = item.size;
        document.body.appendChild(box);
        boxes.push(box);
    });

    // Create the space bar
    var spaceBar = document.createElement('div');
    spaceBar.textContent = 'Space';
    spaceBar.style.position = 'fixed';
    spaceBar.style.top = '170px'; // Adjusted position
    spaceBar.style.left = '50%';
    spaceBar.style.transform = 'translateX(-330%)'; // Centering horizontally
    spaceBar.style.width = '200px'; // Making it wider
    spaceBar.style.height = '50px'; // Making it longer
    spaceBar.style.backgroundColor = 'transparent';
    spaceBar.style.border = '2px solid black';
    spaceBar.style.textAlign = 'center';
    spaceBar.style.lineHeight = '50px';
    document.body.appendChild(spaceBar);
    boxes.push(spaceBar);



    document.addEventListener('keydown', function(event) {
        if (event.key === 'a' || event.key === 'A') {
            changeColorToRed(boxes[1]);
        } else if (event.key === 'w' || event.key === 'W') {
            changeColorToRed(boxes[0]);
        } else if (event.key === 's' || event.key === 'S') {
            changeColorToRed(boxes[2]);
        } else if (event.key === 'd' || event.key === 'D') {
            changeColorToRed(boxes[3]);
        } else if (event.key === ' ' || event.key === 'Space') {
            changeColorToRed(spaceBar); // Space bar
        }
    });

    document.addEventListener('keyup', function(event) {
        if (event.key === 'a' || event.key === 'A') {
            resetColor(boxes[1]);
        } else if (event.key === 'w' || event.key === 'W') {
            resetColor(boxes[0]);
        } else if (event.key === 's' || event.key === 'S') {
            resetColor(boxes[2]);
        } else if (event.key === 'd' || event.key === 'D') {
            resetColor(boxes[3]);
        } else if (event.key === ' ' || event.key === 'Space') {
            resetColor(spaceBar); // Space bar
        }
    });

    setInterval(function() {
        boxes.forEach(function(box) {
            document.body.appendChild(box);
        });
    }, 1000);

})();