如何在 W A S D 上进行字符控制？-解网

问：

我制作了鼠标控件，但是，当我使用 onkeydown 而不是 onmousedown 时，角色会移动几毫秒并停止，当松开按钮时，角色会进入空闲动画。我该如何解决？

这是我向右和向左移动的代码：

const rightHandler = () => {
heroImg.style.transform = "scale(1,1)";
direction = "right";
spritePosition = spritePosition + 1;
imgBlockPosition = imgBlockPosition + 1;
if (spritePosition > 7) {
    spritePosition = 0;
}
heroImg.style.left = `-${spritePosition * 64}px`;
heroImg.style.top = '-64px';
imgBlock.style.left = `${imgBlockPosition * 7}px`;
}

const leftHandler = () => {
heroImg.style.transform = "scale(-1,1)";
direction = "left";
spritePosition = spritePosition - 1;
imgBlockPosition = imgBlockPosition - 1;
if (spritePosition < 7) {
    spritePosition = 13;
}
heroImg.style.left = `-${spritePosition * 64}px`;
heroImg.style.top = '-64px';
imgBlock.style.left = `${imgBlockPosition * 7}px`;
}

这是 onmousedown 和 onmouseup 的代码：

let onMouseDown = (event) => {
clearInterval(timer);
x = event.screenX;
timer = setInterval(() => {
    if (x > halfWidth) {
        direction = "right";
        rightHandler();
    }
    else {
        direction = "left";
        leftHandler();
    }
}, 100);
}

let onMouseUp = (event) => {
clearInterval(timer);
idleAnimation();
}

但是当我使用此代码时：

let onKeyDown = (event) => {
clearInterval(timer);
var keyCode = event.keyCode;
timer = setInterval(() => {
    if (keyCode == 39) {
        direction = "right";
        rightHandler();
    }
    else if (keyCode == 37) {
        direction = "left";
        leftHandler();
    }
}, 100);
}

let onKeyUp = () => {
clearInterval(timer);
idleAnimation();
}

我的角色在几秒钟后停止移动。我需要更改什么？

JavaScript 游戏开发键盘 - 事件

var keyPressed = -1;

const DIRECTIONS = {
  39: {direction: 1, name: "rightArrow"},
  37: {direction: -1, name: "leftArrow"}
}

let onKeyDown = (event) => {
  if (keyPressed == event.keyCode) { return }
  
  let keyCode = event.keyCode;
  
  if (DIRECTIONS[keyCode]) {
    move(DIRECTIONS[keyCode], keyCode);
  }
}

const move = (direction, keyCode) => {
  console.log(direction);
  
  if (keyCode == keyPressed) {
    requestAnimationFrame(() => move(direction, keycode));
  }
}

let onKeyUp = (event) => {
  keyPressed = -1;
}

document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);

Click on this area, then hit left or right arrows.

如何在 W A S D 上进行字符控制？

how to do character control on w a s d?

评论

评论