Key press visual representation

Shows what keys you are hitting. Can be useful for game streaming etc
当前为 2024-03-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Key press visual representation
// @namespace    http://tampermonkey.net/
// @version      1
// @description  Shows what keys you are hitting. Can be useful for game streaming etc
// @author       MrBlank
// @license      GPL-3.0
// @match        https://lolbeans.io
// @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: 'A', top: '50px', left: '50px', size: '50px' },
        { key: 'W', top: '50px', left: '150px', size: '50px' },
        { key: 'S', top: '150px', left: '50px', size: '50px' },
        { key: 'D', top: '150px', left: '150px', size: '50px' },
        { key: 'Space', top: '250px', left: '100px', size: '150px' }
    ];

    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);
    });


    document.addEventListener('keydown', function(event) {

        if (event.key === 'a' || event.key === 'A') {
            changeColorToRed(boxes[0]);
        } else if (event.key === 'w' || event.key === 'W') {
            changeColorToRed(boxes[1]);
        } 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(boxes[4]);
        }
    });

    document.addEventListener('keyup', function(event) {

        if (event.key === 'a' || event.key === 'A') {
            resetColor(boxes[0]);
        } else if (event.key === 'w' || event.key === 'W') {
            resetColor(boxes[1]);
        } 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(boxes[4]);
        }
    });


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

})();