javascript - 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

在 processing (分别为 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>

有关更多文档，请参阅 Get Started分别Global and instance mode .