Keystrokes for Sploop.io

Keystrokes made for Sploop.io! | For support please join our Discord - https://discord.gg/zpVgaMdrrd
目前为 2023-04-07 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Keystrokes for Sploop.io
// @namespace    Sploop.io keystrokes
// @version      0.1
// @description  Keystrokes made for Sploop.io! | For support please join our Discord - https://discord.gg/zpVgaMdrrd
// @author       Ashureth
// @match        ://*sploop.io/*
// @license MIT
// @grant        none
// ==/UserScript==

let html = `
<html>

    <style>
    .KeyBoard {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 200px;
    left: -50px;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
}
.line {
    width: 300px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.line2 {
    width: 300px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Key {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 50px;
    height: 50px;
    left: 0px;
    top: 0px;
    border: 3px solid black;
    background: #2F3336;
    color: #fff;
    margin: 5px;
    border-radius: 12px;
    box-shadow: 0px 0px 5px hsl(0, 0%, 0%);
    overflow: hidden;
    transition: ease-in-out;
}
.Space {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    width: 200px;
    height: 50px;
    left: 0px;
    top: 0px;
    border: 3px solid black;
    background: #2F3336;
    color: #fff;
    margin: 2px;
    border-radius: 12px;
    box-shadow: 0px 0px 10px hsl(0, 0%, 0%);
    overflow: hidden;
}
.keyText {
    font-family: Helvetica;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-shadow: 0px 0px 10px hsl(0, 0%, 100%);
}
    </style>
<head>
    <div class="KeyBoard">
        <div class="line">
            <div class="Key" id="keyQ">
                <span class="keyText">Q</span>
            </div>
            <div class="Key" id="keyW">
                <span class="keyText">W</span>
            </div>
            <div class="Key" id="keyE">
                <span class="keyText">E</span>
            </div>
        </div>
        <div class="line2">
            <div class="Key" id="keyA">
                <span class="keyText" id="keyA">A</span>
            </div>
            <div class="Key" id="keyS">
                <span class="keyText">S</span>
            </div>
            <div class="Key" id="keyD">
                <span class="keyText">D</span>
            </div>
        </div>
        <div class="line">
            <div class="Space" id="keySpace">
                <span class="keyText">━━━━━</span>
            </div>
        </div>
    </div>
</head>

<body>
</body>

</html>
`
let HeldKeys = [];

setInterval(() => {
    var Element;

    let arr = ['W', 'A', 'S', 'D', 'E', 'Q', 'Space'];

    for(let i of arr) {
        document.getElementById(`key${i}`) && (document.getElementById(`key${i}`).style.background = '#2F3336');
    }


    for(let Key in HeldKeys) {

        if(HeldKeys[Key]) {
            Element = document.getElementById(`key${HeldKeys[Key]}`);

            if(Element) {
                Element.style.background = '#52585e'
            }
        }
    }
});

document.body.insertAdjacentHTML('beforeend', html);

let game = document.getElementById('game-canvas');

window.addEventListener('keydown', e => {
    let isSpace = e.key === ' ';
    if(isSpace) {
        HeldKeys['Space'] = 'Space';
    } else {
        HeldKeys[e.key.toUpperCase()] = e.key.toUpperCase();
    }
});
window.addEventListener('keyup', e => {
    let isSpace = e.key === ' ';
    if(isSpace) {
        HeldKeys['Space'] = null;
    } else {
        HeldKeys[e.key.toUpperCase()] = null;
    }
});