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

Question

我希望用户能够按 a+d once 并且我的游戏应该增加分数，而不是按住它来增加分数，类似于按 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

要检测同时按下的按键，您需要使用

keydown

和

keyup

事件来监控它们的状态。

var obj_down = {}

window.addEventListener("keydown", function(ev) {
  if (obj_down[event.key]) {

    // prevent multiple triggering
    return
  }
  obj_down[event.key] = true;

  if (obj_down["a"] && obj_down["d"]) {
    console.log("a and d were pressed together! score++");
  }
})

window.addEventListener("keyup", function(ev) {
  delete obj_down[event.key];
})

Focus me with mouse then you can press "a" and "d" together

Answer 2

有几种方法。事件驱动方法是使用 p5 的

keyPressed

和

keyReleased

回调，从本机 code

 对象中拉出密钥的 

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.6.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.6.0/p5.js"></script>

如前所述，您可以实施多种行为变体。这是一个防止使用相同密钥重新触发的变体：

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.6.0/p5.js"></script>

在上述所有情况下，该行为都会让用户无限期地按住一个键，然后按另一个键。如果您希望在完全相同的帧上或在

n

帧内按下这些键，则可以在该键在其中存在

n

帧后将其从集合中删除，然后将其添加到

requireRetrigger

集合中，这样防止它触发一个动作，直到它被释放。

keyReleased

在这里可能会很方便。

Answer 3

我使用 p5.js 函数

keyIsDown()

来检测同时按下的按键。它需要一个密钥代码并返回

true

或

false

。

if (keyIsDown(65) && keyIsDown(68)) {
  print('keys a + d are pressed');
}

我写了一个util函数

getKeyCode()

这样我就可以做

if (keyIsDown(getKeyCode('a')) && keyIsDown(getKeyCode('d'))) {
  print('keys a + d are pressed now too');
}

查看关键代码的一个简单方法是

print(`${key}: ${keyCode},`);

这是返回关键代码的util函数

function getKeyCode(value) {
    return { 
    ArrowRight:39, 
    ArrowDown:40, 
    ArrowUp:38, 
    ArrowLeft:37, 
    Alt:18, 
    Meta:93, 
    Control:17, 
    Space:32, 
    Shift:16,
    Backspace:8,
    Enter:13, 
    CapsLock:20, 
    Tab:9, 
    Escape:27, 
    F1:112, 
    F2:113, 
    F3:114, 
    F4:115, 
    F5:116, 
    F6:117, 
    F7:118, 
    F8:119, 
    F9:120, 
    F10:121, 
    F12:123,  
    0:48,
    1:49,
    2:50,
    3:51,
    4:52,
    5:53,
    6:54,
    7:55,
    8:56,
    9:57,
    a:65,
    b:66,
    c:67,
    d:68,
    e:69,
    f:70,
    g:71,
    h:72,
    i:73,
    j:74,
    k:75,
    l:76,
    m:77,
    n:78,
    o:79,
    p:80,
    q:81,
    r:82,
    s:83,
    t:84,
    u:85,
    v:86,
    w:87,
    x:88,
    y:89,
    z:90,
    '=':187, 
    '-':189, 
    '`':192, 
    '\\':220, 
    ']':221, 
    '[':219, 
    '\'':222, 
    ';':186, 
    '/':191, 
    '.':190, 
    ',':188
    }[value];
}

参考