p5.js Rect() 方法未定义

Question

我正在尝试使用键使矩形移动，但它给了我以下错误消息：

   function  setup(){
  createCanvas(800, 500);
  background(255, 0, 255);
}
var character = {
  size: 50,
  positionX: 400,
  positionY:  250,
  moveR: function(){
    this.positionX += size;
  },
  moveL: function(){
    this.positionX -= size;
  },
  moveUp:function(){
    this.positionY += size;
  },
  moveDown:function(){
    this.positionY -= size;
  }
};
function detectKeys(){
function keyPressed(){
  if(key == 'a'){
    character.moveL();
  }
  if(key == 'd'){
    character.moveR();
  }
  if  (key == 's'){
    character.moveDown();
  }
  if (key == 'w'){
    character.moveUp();
  }
  console.log(character.positionX, character.positionY)
}}
function draw(){
  rect(character.positionX,  character.positionY, character.size, character.size);
}
x = 1;
while(x ==  1){
  detectKeys();
  draw();
}

我正在使用 p5.js。我可以使用很多帮助，任何关于任何事情的帮助将不胜感激，我对javascript相当陌生

Answer 1

在处理(分别为 p5.js(中，您不需要任何应用程序循环。draw()函数连续执行，每次按下一个键时调用keyPressed()一次：

function  setup(){
    createCanvas(800, 500);
    background(255, 0, 255);
}
var character = {
    size: 50,
    positionX: 400,
    positionY:  250,
    moveR: function(){
      this.positionX += this.size;
    },
    moveL: function(){
      this.positionX -= this.size;
    },
    moveUp:function(){
      this.positionY += this.size;
    },
    moveDown:function(){
      this.positionY -= this.size;
    }
};
function keyPressed(){
    if(key == 'a'){
      character.moveL();
    }
    if(key == 'd'){
      character.moveR();
    }
    if  (key == 's'){
      character.moveDown();
    }
    if (key == 'w'){
      character.moveUp();
    }
    console.log(character.positionX, character.positionY)
}
function draw(){
    background(255, 0, 255);
    rect(character.positionX,  character.positionY, character.size, character.size);
}

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

有关更多文档，请参阅入门分别全局模式和实例模式。