Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc.
Version vom
// ==UserScript==
// @name Key press visual representation
// @namespace http://tampermonkey.net/
// @version 2.2
// @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://defly.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);
})();