JavaScript p5.js：ReferenceError

Question

我的代码到目前为止应该能够创建一个带有蛇和食物的空白画布，每当我的蛇在食物上，食物应该找到一个新的位置，食物应该与蛇对齐一个'网格'，但现在它不是。这是我的第一个问题，在控制台中我也遇到了这个错误：

ReferenceError: floor is not defined

请注意，floor应由p5.js定义。

如何做到这一点以及如何解决错误？

这是我的代码：

var snake;

var scl = 10;
var food;

var columns = floor(width/scl);
var rows = floor(height/scl);

function setup()
{
  //Sets the Canvas
  createCanvas(700, 700);

  //Creates a new object using the variable snake
  snake = new Snake();

  food = new Food();

  //Sets the frame rate
  frameRate(10);

}

function draw()
{
  //Sets the Background, number implies the colour
  background(45);

  //Adds all the values set within the function to the snake
  snake.updateSnake();
  snake.showSnake();
  snake.keyPressed();

  food.showFood();
  food.updateFood();

  if(snake.eatFood(food))
  {
    food.updateFood();
  }
}


function Food()
{
  this.x = random(0,700);
  this.y = random(0,700);

  this.updateFood = function()
  {
    this.pos = createVector(floor(random(columns)), floor(random(rows)));
    this.pos.mult(scl);
  }

  this.showFood = function()
  {
    fill(255, 0, 10);
    rect(food.x, food.y, scl, scl);
  }

}

function Snake()
{
  this.x = 0;
  this.y = 0;

  this.xspeed = 0;
  this.yspeed = 0;

  this.updateSnake = function()
  {
    this.x = this.x + this.xspeed * scl;
    this.y = this.y + this.yspeed * scl;

    this.x = constrain(this.x, 0, width - scl);
    this.y = constrain(this.y, 0, height - scl);
  }

  this.showSnake = function()
  {
    fill(255);
    rect(this.x, this.y, scl, scl);
  }

  this.direction = function(x, y)
  {
    this.xspeed = x;
    this.yspeed = y;
  }

  this.eatFood = function(pos)
  {
    var distance = dist(this.x, this.y, pos.x, pos.y);

    if(distance < 1)
    {
      return true;

      console.log("WITHIN RANGE");

    }else
    {
      return false;

      console.log("OUTSIDE RANGE");

    }
  }

  this.keyPressed = function()
  {
    if (keyCode === UP_ARROW)
    {
      snake.direction(0, -1);
    } else if (keyCode === DOWN_ARROW)
    {
      snake.direction(0, 1);
    } else if (keyCode === RIGHT_ARROW)
    {
      snake.direction(1, 0);
    } else if (keyCode === LEFT_ARROW)
    {
      snake.direction(-1, 0);
    }
  }
}

Answer 1

另一个答案是使用JavaScript Math.floor()函数。您正在尝试使用P5.js floor()功能。

在调用setup()函数之前，您无法使用P5.js函数。换句话说，你想做这样的事情：

var columns;
var rows;

function setup()
{
  //Sets the Canvas
  createCanvas(700, 700);

  //Creates a new object using the variable snake
  snake = new Snake();

  food = new Food();

  //Sets the frame rate
  frameRate(10);

  columns = floor(width/scl);
  rows = floor(height/scl);

}

可以在the reference找到更多信息。

（免责声明：P5.js floor()函数几乎肯定在幕后使用Math.floor()函数。但一般情况下，你应该尽可能使用P5.js函数。那就是为什么他们会在那里。）

另请注意，您需要在setup()函数中执行此操作，原因与width和height变量相关：他们只有createCanvas()之后的默认值被称为。

另请参阅：Why can't I assign variables using p5 functions and variables before setup()?

如果您有后续问题，请将它们发布在自己的问题帖子中。还请尝试将问题范围缩小到MCVE，而不是发布整个草图。祝你好运。