JavaScript p5.js:对象对齐 [英] JavaScript p5.js: Object Alignment

问题描述

我现在正在制作蛇游戏，但我遇到的问题是我的食物与蛇不对齐，因此我无法让蛇吃掉它，没有错误消息只会使它无法正常工作，请说明我哪里出了问题以及如何使它对齐并食用.

Hi I'm creating a snake game right now and I have a problem that my food is not aligned with my snake so I can't get my snake to eat it, no error messsages just can't get that working, please explain where I went wrong and how I can get this to be aligned and eaten.

这是我的代码:

我的食物:

function columns()
{
  return floor(width / scl);
}

function rows()
{
  return floor(height / scl);
}

function randomPlaceFood()
{
  return createVector(floor(random(columns())), floor(random(rows())));
}

function Food()
{
  this.vector = randomPlaceFood().mult(scl);

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

  this.updateFood = function()
  {
    this.vector = randomPlaceFood().mult(scl);
  }

  this.showFood = function()
  {
    fill(255, 0, 10);
    rect(this.x, this.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()
  {
     if (this.x === food.x && this.y === food.y)
     {
       randomPlaceFood();
     }else
     {
       randomPlaceFood();
     }
  }

  this.keyPressed = function()
  {
    if (keyCode === 87)
    {
      snake.direction(0, -1);
    } else if (keyCode === 83)
    {
      snake.direction(0, 1);
    } else if (keyCode === 68)
    {
      snake.direction(1, 0);
    } else if (keyCode === 65)
    {
      snake.direction(-1, 0);
    }
  }
}

主文件:

var snake;

var scl = 20;
var food;


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

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

  food = new Food();

  frameRate(10);

}

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

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

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

  if(snake.eatFood())
  {
    randomPlaceFood();
  }
}

推荐答案

查看以下行:

if (this.x === food.x && this.y === food.y)

您仅在检查蛇是否与食物完美对齐.就像您发现的那样，这几乎永远不会发生，因为它需要像素完美的精度.

You're only checking whether the snake is perfectly aligned with the food. Like you've found out, this almost never happens, because it requires pixel-perfect precision.

相反，您想检测蛇是否正在与食物碰撞.您可以使用冲突检测来执行此操作. Google是您的朋友，但是检查两个矩形的通用算法是:

Instead, you want to detect whether the snake is colliding with the food. You do this using collision detection. Google is your friend, but the general algorithm for checking two rectangles is this:

if(rectOneRight > rectTwoLeft && rectOneLeft < rectTwoRight && rectOneBottom > rectTwoTop && rectOneTop < rectTwoBottom){
  //rectangles are colliding
}

无耻的自我推广:我在此处编写了有关碰撞检测的教程.用于处理，但P5.js中的所有内容都相同.

Shameless self-promotion: I wrote a tutorial on collision detection available here. It's for Processing, but everything is the same in P5.js.

这篇关于JavaScript p5.js:对象对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！