我怎样才能让精灵无法穿过线条？

Question

所以我导入了一个迷宫图像 (png) 作为我 canvas 的背景，并在 p5 图像中的相应线条上绘制了线条。我已经创建了一个 sprite，它是我的 'character'，它只是一个小图像，目前它所做的只是使用迷宫图像顶部的箭头键移动。我想让它穿过这个迷宫，而不是穿过这些线中的任何一条。我确定这是一个非常简单的答案，但我无法理解它。这是我的代码：

var spr;
var slimeMould;
var maze;
var line1;
var line2;
var line3;
var line4;
var line5;
var line6;
var line7;
var line8;
var line9;
var line10;
var line11;
var line12;
var line13;
var line14;
var line15;
var line16; 
var line17;


function preload () {
    slimeMould = loadImage("assets/slimemould-01.png");
    maze = loadImage("assets/maze-02.png");

}


function setup() {
  createCanvas(1000, 1000);
     imageMode(CENTER)


  spr = createSprite(595, 100);


        spr.addImage(slimeMould);      

}


function draw() {
  background(10);
  fill(255);
  noStroke();


    image(maze,width/2,height/2);

  textAlign(CENTER, CENTER);
    textSize(25);
  text("find the shortest route to the food!", width/2, height*0.79);
  drawSprites();



    strokeWeight(15);
    stroke(255);
    line1 = line(86,168,460,168);
    line2 = line(460,168,460,265);
    line3 = line(460,265,310,265);
    line4 = line(310,265,310,220);
    line5 = line(310,220,380,220);
    line6 = line(86,168,86,730);
    line7 = line(140,168,140,220);
    line8 = line(240,220,240,410);
    line9 = line(140,260,240,260);
    line10 = line(140,260,140,360);
    line11 = line(140,360,190,360);
    line12 = line(190,360,190,330);
    line13 = line(86,410,140,410);
    line14 = line(140,410,140,508);
    line15 = line(86,553,125,553);
    line16 = line(125,553,125,619);
    line17 = line(125,619,260,619);   

}


function keyPressed() {
  if (keyCode == RIGHT_ARROW) {
    spr.setSpeed(1.75, 0);
  }
  else if (keyCode == DOWN_ARROW) {
    spr.setSpeed(1.75, 90);
  }
  else if (keyCode == LEFT_ARROW) {
    spr.setSpeed(1.75, 180);
  }
  else if (keyCode == UP_ARROW) {
    spr.setSpeed(1.75, 270);
  }
  return false;
}

function keyReleased() {
    if (keyCode == RIGHT_ARROW) {
        spr.setSpeed(0,0);
    }
      else if (keyCode == DOWN_ARROW) {
    spr.setSpeed(0,0);
  }
  else if (keyCode == LEFT_ARROW) {
    spr.setSpeed(0,0);
  }
  else if (keyCode == UP_ARROW) {
    spr.setSpeed(0,0);
  }
  return false;
}

Answer 1

您正在寻找 collision detection。具体来说，听起来您想要线-矩形碰撞检测。谷歌搜索 "line rectangle collision detection" 将 return 大量结果，包括：

How to check if line segment intersects a rectangle?
线与 AABB 矩形相交？
如何判断直线是否与矩形相交
如何在二维中测试线段是否与轴对齐的矩形相交？

但基本上，听起来一般的方法是将矩形分成 4 条线，然后进行线对线相交检测。另一种选择是将迷宫中的线视为矩形，然后执行 rectangle-rectangle collision detection.

我怎样才能让精灵无法穿过线条？

How can I make a sprite unable to pass through lines?

maze

line

sprite

p5.js