p5.j​​s 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.j​​s ），您不需要任何應用程序循環。 連續執行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> 

有關更多文檔，請分別參閱“入門” 全局模式和實例模式 。