俄罗斯方块 Java 脚本键控制问题

Question

我在移动键控时遇到问题，主要是键盘上的箭头。如果视点足够小，它也会因为垂直侧边栏和俄罗斯方块同时上下移动屏幕。我希望只有当我按下箭头时，棋子才会移动。我是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);
    }
}

Answer 1

所以这里的问题是它单独感应每个键（我遇到了同样的问题所以你需要一个键映射来跟踪所有按下的键，就像这样：

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
}

您可能还想使用正确的标识符“===”

Answer 2

箭头键移动浏览器 window 是 默认浏览器行为。
使用 event.preventDefault()
只听箭头键使用if (k >= 37 && 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%;}

俄罗斯方块 Java 脚本键控制问题

Tetris on Java Script key control problem

javascript

tetris