Тетрис с проблемой управления ключом Java Script

#javascript #tetris

#javascript #тетрис

Вопрос:

У меня возникла проблема, когда я перемещаю свои клавиши, управляющие в основном стрелками на клавиатуре. Если точка обзора достаточно мала, она также перемещает экран вверх и вниз из-за вертикальной боковой панели и элемента тетриса одновременно. И я хочу, чтобы фигуры перемещались только тогда, когда я нажимаю стрелки. Я новичок в Js, и я не уверен, с чего начать, чтобы решить проблему, предложения, с чего начать смотреть?

Вот мой Js-скрипт

 document.addEventListener("keydown", CONTROL);

function CONTROL(event) {
    if (event.keyCode == 37) {
        p.moveLeft();
        dropStart = Date.now();
    }
    else if (event.keyCode == 38) {
        p.rotate();
    }
    else if (event.keyCode == 39) {
        p.moveRight();
        dropStart = Date.now();
    }
    else if (event.keyCode == 40) {
        p.moveDown(0);
    }
}

1. Привет, Mttaho09, добро пожаловать в SO! Не могли бы вы, пожалуйста, сократить свой код только до соответствующих частей, чтобы потенциальные респонденты могли легко увидеть, с какими частями кода вам нужна помощь или они имеют отношение к вопросу? Спасибо!

2. Вы можете вызвать event.preventDefault() в CONTROL функции, чтобы остановить прокрутку экрана с помощью клавиш со стрелками. Может раздражать пользователей, если они не могут перемещать экран без использования мыши. (Отредактируйте для уточнения — делайте это только внутри if инструкций — иначе НИ один ключ, включая такие вещи, как F5 , не будет работать должным образом.)

3. @SalmonKiller Спасибо за совет.

4. @RobinZigmond Похоже, что это сделало то, что я хотел, на данный момент выглядит как хорошее решение, но я продолжу изучать проблему. Спасибо

Ответ №1:

Клавиши со стрелками, перемещающие окно браузера, — это поведение браузера по умолчанию.
Использование event.preventDefault()
Для прослушивания используются только клавиши со стрелками if (k >= 37 amp;amp; k <= 40) { , или наоборот: if (k < 37 || k > 40) return;

 const p = { // JUST FOR THIS DEMO. You use Piece.prototype
    moveLeft()  { console.log("LEFT"); },
    rotate()    { console.log("ROTATE"); },
    moveRight() { console.log("RIGHT"); },
    moveDown()  { console.log("DOWN"); },
};

document.addEventListener("keydown", CONTROL);

function CONTROL(event) {
  const k = event.keyCode;
  
  if (k < 37 || k > 40) return; // Do nothing if was not an arrow key. Else Do:
  
  event.preventDefault();       // Prevent browser scroll on arrows
  if(k == 37 || k == 39) dropStart = Date.now(); // Only for left or right

  return {
    37: p.moveLeft,
    38: p.rotate,
    39: p.moveRight,
    40: p.moveDown
  }[k]();
}

 html, body {min-height: 100%;}

Ответ №2:

итак, проблема здесь в том, что он распознает каждую клавишу по отдельности (у меня была такая же проблема, поэтому вам нужна ключевая карта, чтобы отслеживать ВСЕ нажатые клавиши следующим образом:

 var keys = [];

function keysPressed(e) {
  keys[e.keyCode] = true;

}

function keysReleased(e) {

keys[e.keyCode] = false;
 }

if(keys[37] === true){
//do stuff here
}
if(keys[38] === true){
//do stuff here
}

Возможно, вы также захотите использовать соответствующий идентификатор «===»

1. Извините, я думаю, что пропустил часть вашего вопроса, если вы хотите, чтобы ваши фигуры перемещались только при нажатии клавиш со стрелками, вам нужно отключить функцию времени, которая заставляет ваши фигуры падать в // movedown в вашем скрипте