在 p5.js 中来回移动矩形时停止延迟

Question

我正在编写一个正在进行的游戏，我运行遇到了一个小问题。我正在使用 keyPressed 函数，当我向左移动时，我突然快速地开始向右移动，我的矩形就停止了（反之亦然）。在我的游戏中会有闪避，所以能够尽快切换方向很重要。我该怎么办？

//main file, sketch.js: 

var person;

function setup() {
    createCanvas(380, 720);

    person = new Person();
}

function draw() {
    background(64, 64, 64);
    person.show();
    person.move();
}

function keyReleased() {
    if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
        person.setDirX(0);
    }
}

function keyPressed() {
    if (keyCode === RIGHT_ARROW) {
        person.setDirX(1)
    }

    else if (keyCode === LEFT_ARROW) {
        person.setDirX(-1);
    }
}

//person(rectangle) file, person.js:

function Person() {
    this.x = width/2;
    this.y = height - 20;
    this.xdir = 0;
    this.ydir = -0.25;

    this.show = function() {
        noStroke();
        fill(250);
        rectMode(CENTER);
        rect(this.x, this.y, 25, 25);
    }

    this.setDirX = function(dir) {
        this.xdir = dir;
    }

    this.move = function(dir) {
        this.x += this.xdir * 5;
        this.y += this.ydir;
    }
}

Answer 1

试着想一想当您从左侧按住快速变为右侧按住时，您按下和释放了哪些键。这就是你正在做的：

首先你按住左键。
然后你按住右边。所以一瞬间你同时按下了两个键。
然后你松开左边，但继续按住右边。

您的代码检测到您释放了左键并将移动速度设置为 0，这就是您停止移动的原因。

要解决此问题，您需要跟踪当前按下了哪些键。为此，您可以跟踪您关心的每个键的布尔变量，在 keyPressed() 和 keyReleased() 函数中设置这些布尔值，并在 draw() 函数中检查这些布尔值。

无耻self-promotion：我写了一个使用这种方法的教程here。请参阅标题为 "Handling Multiple Keys" 的部分。本教程适用于处理，但同样的想法适用于 P5.js.

在 p5.js 中来回移动矩形时停止延迟

Stopping delay when moving a rect back and forth in p5.js

javascript

html

web

p5.js