☰

Key press visual representation

Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc.

当前为 2024-03-07 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Key press visual representation
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1
  5. // @description  Shows what keys you are hitting. Can be useful for .io game streaming, tutorials etc. 
  6. // @author       MrBlank
  7. // @license      MIT
  8. // @match        https://lolbeans.io
  9. // @match        *://diep.io/*
  10. // @match        *://moomoo.io/*
  11. // @match        *://sandbox.moomoo.io/*
  12. // @match        *://*.shellshock.io/*
  13. // @match        https://smashkarts.io/
  14. // @match        https://sploop.io/
  15. // @match        https://sploop.io/
  16. // @match        https://yohoho.io/
  17. // @match        https://hexanaut.io/
  18. // @match        https://copter.io/
  19. // @match        https://www.crazygames.com/
  20. // @grant        GM_setValue
  21. // @grant        GM_getValue
  22. // @run-at       document-end
  23. // ==/UserScript==
  24.  
  25. (function() {
  26.     'use strict';
  27.  
  28.     function changeColorToRed(box) {
  29.         box.style.backgroundColor = 'red';
  30.     }
  31.  
  32.     function resetColor(box) {
  33.         box.style.backgroundColor = 'transparent';
  34.     }
  35.  
  36.     var boxes = [];
  37.  
  38.     var boxLayout = [
  39.         { key: 'W', top: '50px', left: '100px', size: '50px' }, // W key
  40.         { key: 'A', top: '110px', left: '50px', size: '50px' }, // A key
  41.         { key: 'S', top: '110px', left: '120px', size: '50px' }, // S key
  42.         { key: 'D', top: '110px', left: '190px', size: '50px' } // D key
  43.     ];
  44.  
  45.     boxLayout.forEach(function(item) {
  46.         var box = document.createElement('div');
  47.         box.textContent = item.key;
  48.         box.style.position = 'fixed';
  49.         box.style.top = item.top;
  50.         box.style.left = item.left;
  51.         box.style.width = item.size;
  52.         box.style.height = item.size;
  53.         box.style.backgroundColor = 'transparent';
  54.         box.style.border = '2px solid black';
  55.         box.style.textAlign = 'center';
  56.         box.style.lineHeight = item.size;
  57.         document.body.appendChild(box);
  58.         boxes.push(box);
  59.     });
  60.  
  61.     // Create the space bar
  62.     var spaceBar = document.createElement('div');
  63.     spaceBar.textContent = 'Space';
  64.     spaceBar.style.position = 'fixed';
  65.     spaceBar.style.top = '170px'; // Adjusted position
  66.     spaceBar.style.left = '50%';
  67.     spaceBar.style.transform = 'translateX(-330%)'; // Centering horizontally
  68.     spaceBar.style.width = '200px'; // Making it wider
  69.     spaceBar.style.height = '50px'; // Making it longer
  70.     spaceBar.style.backgroundColor = 'transparent';
  71.     spaceBar.style.border = '2px solid black';
  72.     spaceBar.style.textAlign = 'center';
  73.     spaceBar.style.lineHeight = '50px';
  74.     document.body.appendChild(spaceBar);
  75.     boxes.push(spaceBar);
  76.  
  77.  
  78.  
  79.     document.addEventListener('keydown', function(event) {
  80.         if (event.key === 'a' || event.key === 'A') {
  81.             changeColorToRed(boxes[1]);
  82.         } else if (event.key === 'w' || event.key === 'W') {
  83.             changeColorToRed(boxes[0]);
  84.         } else if (event.key === 's' || event.key === 'S') {
  85.             changeColorToRed(boxes[2]);
  86.         } else if (event.key === 'd' || event.key === 'D') {
  87.             changeColorToRed(boxes[3]);
  88.         } else if (event.key === ' ' || event.key === 'Space') {
  89.             changeColorToRed(spaceBar); // Space bar
  90.         }
  91.     });
  92.  
  93.     document.addEventListener('keyup', function(event) {
  94.         if (event.key === 'a' || event.key === 'A') {
  95.             resetColor(boxes[1]);
  96.         } else if (event.key === 'w' || event.key === 'W') {
  97.             resetColor(boxes[0]);
  98.         } else if (event.key === 's' || event.key === 'S') {
  99.             resetColor(boxes[2]);
  100.         } else if (event.key === 'd' || event.key === 'D') {
  101.             resetColor(boxes[3]);
  102.         } else if (event.key === ' ' || event.key === 'Space') {
  103.             resetColor(spaceBar); // Space bar
  104.         }
  105.     });
  106.  
  107.     setInterval(function() {
  108.         boxes.forEach(function(box) {
  109.             document.body.appendChild(box);
  110.         });
  111.     }, 1000);
  112.  
  113. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址