Javascript как двигать элемент стрелкой? [закрыт]

134

11 сентября 2019, 00:50

в JS не очень разбираюсь, нужно управлять элементом стрелкой (верх,вниз,влево,вправо). Элемент(изображение) добавлен в canvas через JS, стартовая позиция задана в переменных, xPlane yPlane. Погуглил и попробывал вот так, чет не работает в консоле ошибок нету

function draw() {
        ctx.drawImage(plane, xPlane, yPlane, 200, 70);
        requestAnimationFrame(draw);
    }
document.addEventListener("keydown", move);
    function move(e) {
        if (e.keycode == 37) {
            xPlane -= 3;
        }
        if (e.keycode == 38) {
            yPlane -= 3;
        }
        if (e.keycode == 39) {
            xPlane += 3;
        }
        if (e.keycode == 40) {
            yPlane 5= 3;
        }
    }

Answer 1

В вашем примере e.keycode === undefined потому что у объекта e нет такого поля, зато есть e.keyCode Я сделал маленький пример, может он вам поможет разобраться как это работает

document.body.addEventListener('keydown', move); 
var square = document.querySelector('.square'); 
 
function move(e) { 
  e.preventDefault(); 
  var left = Number(square.style.left.slice(0, -2)); 
  var top = Number(square.style.top.slice(0, -2)); 
  if (e.keyCode == 37) { // Left 
    left--; 
  } 
  if (e.keyCode == 38) { // Up 
    top--; 
  } 
  if (e.keyCode == 39) { // Right 
    left++; 
  } 
  if (e.keyCode == 40) { // Down 
    top++; 
  } 
  square.style.left = left + 'px'; 
  square.style.top = top + 'px'; 
}

.square { 
  width: 50px; 
  height: 50px; 
  background-color: red; 
  position: absolute; 
  top: 0px; 
  left: 0px; 
}

<div class="square"></div>

Answer 2

Замените yPlane 5= 3; на yPlane += 3;.
Используйте console.log("номер действия"); либо Debugger из Chrome(или другого браузера) DevTools, чтобы отследить на каком месте программа работает, а на каком нет.