如何停止紧张的运动

Question

在我制作的这个游戏中，每当我移动我的角色时，它只走一步，暂停，然后继续移动。示例：如果我按住一个按钮移动它会向任何方向移动 2.5 个单位，暂停大约 1/2 秒，然后只要我按住按钮就继续移动。

这里是相关代码：

addEventListener('keydown',function(action){
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    
    if (action.code == "KeyD" || action.code == "ArrowRight" ){
        ui.image_x = 192;
        ui.hero.position.x = ui.hero.position.x + 2.5;
        ui.update();
        ui.draw();
        ui.draw_sprite();
    }
    if (action.code == "KeyA" || action.code == "ArrowLeft" ){
        ui.image_x = 288;
        ui.hero.position.x = ui.hero.position.x - 2.5;
        ui.update();
        ui.draw();
        ui.draw_sprite();
    }
    if (action.code == "KeyW" || action.code == "ArrowUp" ){
        ui.image_x = 128;
        ui.hero.position.y = ui.hero.position.y - 2.5;
        ui.update();
        ui.draw();
        ui.draw_sprite();
    }
    if (action.code == "KeyS" || action.code == "ArrowDown" ){
        ui.image_x = 32;
        ui.hero.position.y = ui.hero.position.y + 2.5;
        ui.update();
        ui.draw();
        ui.draw_sprite();
    }

Answer 1

正如@MarkRotteveel 在上面的评论中提到的，您注意到的是内置的延迟浏览器，用于防止意外输入错误。如果您在文本框中按住字母键，您会在第一个字符后看到相同的延迟。

我知道解决这个问题的唯一方法是使用更传统的“游戏循环”。这是基本的想法：

• 使用

  keydown

  事件来检测和存储按下的箭头键。
• 使用

  requestAnimationFrame

  按下箭头键时移动字符。
• 使用

  keyup

  事件停止移动。

举个例子：

var moveRight = false;
var moveLeft = false;
var moveUp = false;
var moveDown = false;

// Detect when movement keys are pressed
addEventListener("keydown", function (action) {
  if (action.code === "KeyD" || action.code === "ArrowRight") {
    moveRight = true;
  }
  if (action.code === "KeyA" || action.code === "ArrowLeft") {
    moveLeft = true;
  }
  if (action.code === "KeyW" || action.code === "ArrowUp") {
    moveUp = true;
  }
  if (action.code === "KeyS" || action.code === "ArrowDown") {
    moveDown = true;
  }
});

// Detect when movement keys are released
addEventListener("keyup", function (action) {
  if (action.code === "KeyD" || action.code === "ArrowRight") {
    moveRight = false;
  }
  if (action.code === "KeyA" || action.code === "ArrowLeft") {
    moveLeft = false;
  }
  if (action.code === "KeyW" || action.code === "ArrowUp") {
    moveUp = false;
  }
  if (action.code === "KeyS" || action.code === "ArrowDown") {
    moveDown = false;
  }
});

// Move the character (if necessary)
function moveCharacter() {
  if (moveRight && !moveLeft) {
    ui.image_x = 192;
    ui.hero.position.x = ui.hero.position.x + 2.5;
    ui.update();
    ui.draw();
    ui.draw_sprite();
  }
  else if (moveLeft && !moveRight) {
    ui.image_x = 288;
    ui.hero.position.x = ui.hero.position.x - 2.5;
    ui.update();
    ui.draw();
    ui.draw_sprite();
  }
  if (moveUp && !moveDown) {
    ui.image_x = 128;
    ui.hero.position.y = ui.hero.position.y - 2.5;
    ui.update();
    ui.draw();
    ui.draw_sprite();
  }
  else if (moveDown && !moveUp) {
    ui.image_x = 32;
    ui.hero.position.y = ui.hero.position.y + 2.5;
    ui.update();
    ui.draw();
    ui.draw_sprite();
  }
  requestAnimationFrame(moveCharacter); // Continue the game loop
}
moveCharacter(); // Start the game loop

上面的检查像

moveLeft && !moveRight

确保用户没有试图同时向两个相反的方向移动。