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

在processing (respectively p5.js) you don't need any application loop. The draw() function is continuously executed and 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 respectively Global and instance mode。

p5.js Rect() 方法未定义

p5.js Rect() method undefined

javascript

processing

game-development

p5.js