javascript - 在 p5.js 中检测多个按键并触发一次操作

Question

我希望用户能够按 a+d 一次 并且我的游戏应该增加分数，而不是按住它来增加得分，类似于按下 a+d 会在游戏中产生特殊效果。

此代码不起作用，所以我懒得将其称为失败尝试测试。

function keyPressed() {
    if (key == 'a' && key == 'd')
  score += 1;
}

这是我第一次失败的尝试:

function keyPressed() {
    if (key == 'a' || key == 'd')
  score += 1;
}

这是我第二次失败的尝试。

这是因为当我按下1个按钮时，它仍然增加分数，而当按下2个按钮并按住它们时增加更快但不会停止，这不是我的想法。

Score2keypress.js:

let RightButtom = false;
let LeftButtom = false;

let character = {
  "score": 0
}

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);

  // draw score character
  fill(0, 0, 255); //move6
  text("Score: " + character.score, 20, 120);

  // update score increase character
  if (RightButtom) {
    character.score += 1;
  } //move8
  if (LeftButtom) {
    character.score += 1;
  } //move10

  /////////////ScoreExtra
  // show boolean values onscreen for clarity
  textSize(20);
  text("RightButtom = " + RightButtom +
    "\nLeftButtom = " + LeftButtom, 10, 10, width / 2, height / 2);
}

//////////////ScoreExtra

function keyPressed() {
  if (key == 'a') {
    LeftButtom = true;
  }
  if (key == 'd') {
    RightButtom = true;
  }
}

function keyReleased() {
  if (key == 'a') {
    LeftButtom = false;
  }
  if (key == 'd') {
    RightButtom = false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

有几种方法。事件驱动的方法是使用 p5 的 keyPressed和 keyReleased回调，拉 key 的 code来自 native KeyboardEvent 对象的字符串。向 pressed 集添加和删除这些键码可让您实现单触发逻辑的变体。

const character = {score: 0};
const pressed = new Set();

function setup() {
  createCanvas(600, 600);
  textSize(20);
}

function draw() {
  background(220);
  text("Score: " + character.score, 20, 50);
}

function keyPressed(evt) {
  const {code} = evt;

  if (!pressed.has(code)) {
    pressed.add(code);

    if (pressed.has("KeyA") && pressed.has("KeyD")) {
      character.score++;
    }
  }
}

function keyReleased(evt) {
  pressed.delete(evt.code);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

如果你想纯粹在draw中检测并采取行动，p5.js提供keyIsDown它接受参数 keycode .

const character = {score: 0};
const pressed = new Set();

function setup() {
  createCanvas(600, 600);
  textSize(20);
}

function draw() {
  background(220);
  text("Score: " + character.score, 20, 50);
  
  if (keyIsDown(65) && keyIsDown(68)) {
    if ((keyIsDown(65) && !pressed.has(68)) ||
        (!pressed.has(65) && keyIsDown(68))) {
      character.score++;
    }

    pressed.add(65);
    pressed.add(68);
  }

  if (!keyIsDown(65)) {
    pressed.delete(65);
  }
  if (!keyIsDown(68)) {
    pressed.delete(68);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

如前所述，您可以实现多种行为变体。这是防止使用相同 key 重新触发的变体:

const character = {score: 0};
const pressed = new Set();

function setup() {
  createCanvas(600, 600);
  textSize(20);
}

function draw() {
  background(220);
  text("Score: " + character.score, 20, 50);
  
  if (keyIsDown(65) && !pressed.has(65) && // 'a' and 'd'
      keyIsDown(68) && !pressed.has(68)) {
    character.score++;
    pressed.add(65);
    pressed.add(68);
  }

  if (!keyIsDown(65)) {
    pressed.delete(65);
  }
  if (!keyIsDown(68)) {
    pressed.delete(68);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

在上述所有情况下，该行为都会让用户无限期地按住一个键，然后再按另一个键。如果您希望在完全相同的帧上或在 n 帧内按下这些键，您可以在该键已经存在 n 帧后将其从集合中删除，并且将它添加到 requireRetrigger 集，以防止它在被释放之前触发操作。 keyReleased在这里可能会很方便。