Есть ли способ заставить элемент двигаться в определенном направлении при нажатии двух клавиш? ⇐ CSS

[Anonymous]

Итак, у меня возникла проблема с перемещением квадрата по диагонали при нажатии двух клавиш. Я пытаюсь заставить оператор if выполнять два нажатия клавиш одновременно, а затем запускать их. Пока ничего из того, что я пробовал, не сработало, и поэтому я не знаю, будет ли работать фактический перевод x и y на квадрате. При необходимости могу предоставить дополнительную информацию.
JavaScript

Код: Выделить всё

//creates the function for the lighting up keys
function pressed() {
let squarePosY = 0;
let squarePosX = 0;
// looks for the key press
document.addEventListener("keydown", (event) => {
if (event.keyCode === 87 ) {
// changes the background to yellow
document.getElementById("w-key").style.backgroundColor = "yellow";
squarePosY -= 5;
anime({
targets: '#square',
translateY: squarePosY
})
} else if (event.keyCode === 83) {
document.getElementById("s-key").style.backgroundColor = "yellow";
squarePosY += 5;
anime({
targets: '#square',
translateY: squarePosY
})
} else if (event.keyCode === 65) {
document.getElementById("a-key").style.backgroundColor = "yellow";
squarePosX -= 5;
anime({
targets: '#square',
translateX: squarePosX
})
} else if (event.keyCode === 68) {
document.getElementById("d-key").style.backgroundColor = "yellow";
squarePosX += 5;
anime({
targets: '#square',
translateX: squarePosX
})
} else if (event.keyCode == 87 && event.keyCode == 65) {
squarePosX += 5;
squarePosY += 5;
anime({
targets: '#square',
translateX: squarePosX,
translateY: squarePosY
})
alert("worked")
}
})
//removes the yellow background on the key.
document.addEventListener("keyup", (event) => {
if (event.keyCode === 87 ) {
document.getElementById("w-key").style.backgroundColor = "white";
}})
document.addEventListener("keyup", (event) => {
if (event.keyCode === 83 ) {
document.getElementById("s-key").style.backgroundColor = "white";
}})
document.addEventListener("keyup", (event) => {
if (event.keyCode === 65 ) {
document.getElementById("a-key").style.backgroundColor = "white";
}})
document.addEventListener("keyup", (event) => {
if (event.keyCode === 68 ) {
document.getElementById("d-key").style.backgroundColor = "white";
}})
}

function startAnim() {
pressed()
}

css

Код: Выделить всё

#square {
width: 10px;
height: 10px;
background-color: black;
left: 50%;
bottom: 50%;
position: absolute;
}

.squareStartPos {
width: 8px;
height: 8px;
border: 1px solid black;
left: 50%;
bottom: 50%;
position:absolute;
}

html

Код: Выделить всё

Document

Я пытался использовать '&&' в операторе if, чтобы добавить два кода ключа, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/783 ... o-keys-are