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

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

Answer 1

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:
How to check if line segment intersects a rectangle?
Line intersection with AABB Rectangle?
How to know if a line intersects a rectangle
How to test if a line segment intersects an axis-aligned rectange in 2D?
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.