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

Question

So I've imported a maze image (png) as the background of my canvas, and drawn lines over the corresponding lines in the image in p5. I've created a sprite which is my 'character' and it's just a small image, and all it's doing at the moment is moving with the arrow keys on top of the maze image. I want this to move through this maze and not go through any of these lines. I'm sure its a really simple answer but I can't wrap my head around it. Here is my code:

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;
}

Please link between crossposts. This question has also been posted [here](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675). — Kevin Workman, Jun 04 '18 at 04:32

score 0 · Accepted Answer · answered Jun 03 '18 at 23:04

You're looking for collision detection. Specifically it sounds like you want line-rectangle collision detection. Googling "line rectangle collision detection" will return a ton of results, including:

But basically, it sounds like the general approach is to break your rectangle down into 4 lines and then do line-line intersection detection. Another option would be to treat the lines in your maze as rectangles and then do rectangle-rectangle collision detection.

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

1 Answers1