Virtual WASD Keyboard

Draggable Virtual Keyboard

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/589289/1889735/Virtual%20WASD%20Keyboard.js

Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.

Bọc các dòng

// ==UserScript==
// @name         Virtual WASD Keyboard
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Draggable Virtual Keyboard
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const panel = document.createElement("div");
    panel.id = "vk-panel";
    panel.innerHTML = `
<div id="dragBar">⌨ Virtual Keyboard</div>

<div class="row">
<button data-key="KeyW">W</button>
</div>

<div class="row">
<button data-key="KeyA">A</button>
<button data-key="KeyS">S</button>
<button data-key="KeyD">D</button>
</div>

<div class="row">
<button class="space" data-key="Space">SPACE</button>
</div>
`;

    document.body.appendChild(panel);

    const style = document.createElement("style");
    style.textContent = `
#vk-panel{
position:fixed;
left:20px;
bottom:20px;
width:220px;
background:#111;
border:2px solid cyan;
border-radius:15px;
box-shadow:0 0 20px cyan;
z-index:999999;
font-family:sans-serif;
user-select:none;
}

#dragBar{
padding:8px;
background:#222;
color:white;
cursor:move;
text-align:center;
font-weight:bold;
border-radius:12px 12px 0 0;
}

.row{
display:flex;
justify-content:center;
margin:6px;
gap:6px;
}

button{
width:55px;
height:55px;
font-size:20px;
font-weight:bold;
border:none;
border-radius:10px;
background:#222;
color:white;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#0ff;
color:black;
box-shadow:0 0 15px cyan;
}

button:active{
transform:scale(.9);
}

.space{
width:180px;
}
`;
    document.head.appendChild(style);

    function send(type, code) {
        document.dispatchEvent(new KeyboardEvent(type, {
            code,
            key: code === "Space" ? " " : code.replace("Key",""),
            bubbles: true
        }));
    }

    panel.querySelectorAll("button[data-key]").forEach(btn=>{

        btn.addEventListener("mousedown",()=>{
            send("keydown",btn.dataset.key);
        });

        btn.addEventListener("mouseup",()=>{
            send("keyup",btn.dataset.key);
        });

        btn.addEventListener("mouseleave",()=>{
            send("keyup",btn.dataset.key);
        });

        btn.addEventListener("touchstart",(e)=>{
            e.preventDefault();
            send("keydown",btn.dataset.key);
        });

        btn.addEventListener("touchend",(e)=>{
            e.preventDefault();
            send("keyup",btn.dataset.key);
        });

    });

    // Drag
    let dragging=false,offsetX=0,offsetY=0;

    const bar=document.getElementById("dragBar");

    bar.onmousedown=e=>{
        dragging=true;
        offsetX=e.clientX-panel.offsetLeft;
        offsetY=e.clientY-panel.offsetTop;
    };

    document.onmousemove=e=>{
        if(!dragging)return;
        panel.style.left=(e.clientX-offsetX)+"px";
        panel.style.top=(e.clientY-offsetY)+"px";
        panel.style.bottom="auto";
    };

    document.onmouseup=()=>{
        dragging=false;
    };

})();