Как исправить оператор if для движущегося объекта? - PullRequest
Новая
       25

Как исправить оператор if для движущегося объекта?

0 голосов
/ 16 июня 2020

У меня объект движется, когда я нажимаю некоторые клавиши. Он также перемещается по диагонали, когда я нажимаю две клавиши. Проблема в следующем:

  1. Я нажимаю d, объект уходит влево.
  2. Я держу нажатой левую кнопку и также нажимаю 'w'. Объект движется по диагонали.
  3. Я отпускаю 'w', пока 'd' все еще нажата. Объект перестает двигаться, хотя буква «d» остается внизу.

Как это исправить? 

let keysPressed = ["a", "w", "d", "s"];
const box1 = document.getElementById("box1");


document.addEventListener('keydown', (event) => {
keysPressed[event.key] = true;
var box1x = box1.offsetLeft;
var box1y = box1.offsetTop;
if (keysPressed['d'] && keysPressed['s']) {
   box1.style.left = box1x + 20 + 'px';
   box1.style.top = box1y + 20 + 'px';
} else if (keysPressed['a'] && keysPressed['s']) {
   box1.style.left = box1x - 20 + 'px';
   box1.style.top = box1y + 20 + 'px';
} else if (keysPressed['w'] && keysPressed['a']) {
   box1.style.left = box1x - 20 + 'px';
   box1.style.top = box1y - 20 + 'px';
} else if (keysPressed['w'] && keysPressed['d']) {
   box1.style.left = box1x + 20 + 'px';
   box1.style.top = box1y - 20 + 'px';
} else if (keysPressed['w']) {
   box1.style.top = box1y - 20 + 'px';
} else if (keysPressed['s']) {
   box1.style.top = box1y + 20 + 'px';
} else if (keysPressed['a']) {
   box1.style.left = box1x - 20 + 'px';
} else if (keysPressed['d']) {
   box1.style.left = box1x + 20 + 'px';
}
});

1 Ответ

0 голосов
/ 16 июня 2020

Поскольку вы никогда не устанавливаете значение keysPressed на false, состояние остается неизменным, даже если вы отпустите клавишу.

Вы можете записать это так: 

let keysPressed = ['a', 'w', 'd', 's'];
const box1 = document.getElementById('box1');

const tick = () => {
    let box1x = box1.offsetLeft;
    let box1y = box1.offsetTop;
    if (keysPressed['d'] && keysPressed['s']) {
        box1.style.left = box1x + 20 + 'px';
        box1.style.top = box1y + 20 + 'px';
    } else if (keysPressed['a'] && keysPressed['s']) {
        box1.style.left = box1x - 20 + 'px';
        box1.style.top = box1y + 20 + 'px';
    } else if (keysPressed['w'] && keysPressed['a']) {
        box1.style.left = box1x - 20 + 'px';
        box1.style.top = box1y - 20 + 'px';
    } else if (keysPressed['w'] && keysPressed['d']) {
        box1.style.left = box1x + 20 + 'px';
        box1.style.top = box1y - 20 + 'px';
    } else if (keysPressed['w']) {
        box1.style.top = box1y - 20 + 'px';
    } else if (keysPressed['s']) {
        box1.style.top = box1y + 20 + 'px';
    } else if (keysPressed['a']) {
        box1.style.left = box1x - 20 + 'px';
    } else if (keysPressed['d']) {
        box1.style.left = box1x + 20 + 'px';
    }
};

document.addEventListener('keydown', (event) => {
    keysPressed[event.key] = true;
    tick();
});

document.addEventListener('keyup', (event) => {
    keysPressed[event.key] = false;
    tick();
});
...