Написание игры для набора текста с анимированной клавиатурой ⇐ Html

[Anonymous]

Я новый веб-разработчик. Я надеялся поделиться некоторым кодом и посмотреть, есть ли набор функций, которые лучше всего подходят для моей проблемы.
Моя цель — создать игру с набором текста с CSS-анимацией. Я обнаружил, что могу довольно легко сопоставить множество клавиш для моих CSS-анимаций и преобразований, но некоторые клавиши, такие как Enter, Space или даже точки, представляющие собой запятые, доставляют мне некоторые проблемы.
Есть ли функции, которые хорошо справляются с сопоставлением с любым устройством, чтобы мне не приходилось создавать уникальные идентификаторы для каждой клавиши и каждого устройства?
Любой совет очень ценится.
Вот мой код:
// LOAD WINDOW
window.onload = () => {

const typeArea = document.getElementById("type-area");

// KEYDOWN LISTENER EVENT
typeArea.addEventListener("keydown",(e) =>{
if(!e.repeat) {
console.log(`${e.key} pressed!`)
// COMPARE CHARACTER TO QUOTETEXT
let typed = $(e.key).val();
// DO TRANSFORMS ON THE KEYBOARD AREA
try {
$(`#${e.key}`).css('color','var(--special-color)');
$(`#${e.key}`).css('transition','0.2s');
$(`#${e.key}`).css('border-top','5px solid var(--special-color)');
$(`#${e.key}`).css('border-right','5px solid var(--special-color)');
$(`#${e.key}`).css('border-bottom','5px solid var(--special-color)');
$(`#${e.key}`).css('border-left','5px solid var(--special-color)');
$(`#${e.key}`).css('transform','scaleY(0.8)');
} catch (e) {
if (e.key === "Space") {
$("#space").css('color','red');
} else {
console.log("Key unbound");
}
}
} else {
console.log(`${e.key} repeated!`)
try {
$(`#${e.key}`).css('transition','10s');
$(`#${e.key}`).css('border-top','10px solid red');
$(`#${e.key}`).css('border-right','10px solid red');
$(`#${e.key}`).css('border-bottom','10px solid red');
$(`#${e.key}`).css('border-left','10px solid red');
// $(`#${e.key}`).css('font-weight','bold');
$(`#${e.key}`).css('color','red');
} catch (e) {
console.log("Key unbound");
}
}
}) // END OF KEYDOWN FUNCTION
} // END OF ONLOAD FUNCTION


Подробнее здесь: https://stackoverflow.com/questions/798 ... d-keyboard