javascript - 我如何在我的 javascript 类中使用 DOM 事件？

Question

我正在尝试在我的类中创建一个函数，通过按 ArrowUp 键，它会变为真。但是，它只是说:“无法读取未定义的属性‘键’？

class Boks{
  constructor(x,y,w,h,r,k){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.r = r;
    this.k = k;
  }

  visSnake(){
    rect(this.x,this.y,this.w,this.h)
  }

  moveSnake(){
    this.x = this.x + speed;
  }

  keyb(event){
    if(event.key === "ArrowUp"){
      return true;
    }
  }
}

我的猜测是我必须在构造函数或构造函数的参数中定义某种 DOM 事件键，但我不知道如何做？

Answer 1

在p5.js你只需定义函数 keyPressed()如果按下按钮，它会自动调用。您不需要定义任何 DOM 事件，p5.js 会为您完成这项工作，您只需“使用”现有的回调，这些回调有据可查。
我建议阅读 p5.js - Get Started .

如果你想评估 UP 键是否被按下，那么你可以评估内置变量的状态 keyIsPressed和 keyCode在 draw 中:

function draw() {

    if (keyIsPressed && keyCode === UP_ARROW) {
        // [...]
    }

    // [...]
}

查看简短示例:

let x=0, y=0, w=20, h=20;

function setup(){
    createCanvas(window.innerWidth-20,window.innerHeight-20)
    x = width/2;
    y = height/2;
    frameRate(10);
}

function draw(){
    
    if (keyIsPressed && keyCode === LEFT_ARROW){
        if (x > 0) { 
            x -= w;
        }
    }
    if (keyIsPressed && keyCode === RIGHT_ARROW){
        if (x < width-w) { 
            x += w;
        }
    }   
    if (keyIsPressed && keyCode === UP_ARROW) {
        if (y > 0) { 
            y -= h;
        }
    }
    if (keyIsPressed && keyCode === DOWN_ARROW){
        if (y < height-h) { 
            y += h; 
        }
    }

    background(0);
    stroke(255);
    fill(255);
    rect(x, y, w, h);
}

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