Help with Maze

ROCCOSMODERN

Hey, so I'm relatively new at processing here and I'm currently using p5.js to make a maze. The thing I'm having the most trouble with its trying to keep the ball in side the lines. Here is my code so far:

// Variables
var player;
var speed = 3;




// Runs once at start of code

function setup() {
    // Set size
    var canvas = createCanvas(600, 600).parent('sketch');

    player = new Player(50, 120);

    background(255);
    drawMaze();

    loadPixels();
}

function draw() {
    background(255);

    drawMaze();

    player.draw();

    print(getColor(mouseX, mouseY));
}

function drawMaze() {
    strokeWeight(5);

    line(275, 250, 275, 100);
    line(320, 250, 320, 150);
    line(275, 100, 550, 100);
    line(320, 150, 400, 150);
    line(400, 150, 400, 200);
    line(400, 200, 370, 200);
    line(370, 200, 370, 250);
    line(370, 250, 450, 250);
    line(450, 250, 450, 100);


    line(225, 250, 275, 250);
    line(225, 300, 275, 300);
    line(225, 150, 225, 250);
    line(225, 300, 225, 400);
    line(175, 100, 175, 450);

    line(175, 100, 275, 100);
    line(175, 450, 275, 450);
    line(275, 450, 275, 350);
    line(275, 350, 450, 350);
    line(275, 300, 500, 300);
    line(500, 150, 500, 450);
    line(450, 350, 450, 400);
    line(500, 450, 350, 450);
    line(450, 400, 325, 400);

    line(350, 450, 350, 500);
    line(350, 500, 350, 450);
    line(350, 500, 125, 500);
    line(125, 500, 125, 50);
    line(125, 50, 600, 50);

    line(550, 100, 550, 500);
    line(600, 0, 600, 600);
    line(0, 600, 0, 0);
    line(0, 0, 600, 0);
    line(600, 600, 0, 600);

    line(550, 500, 400, 500);
    line(400, 500, 400, 550);
    line(400, 550, 75, 550);
    line(75, 550, 75, 100);

    line(75, 100, 25, 100);
    line(25, 0, 25, 600);
    line(75, 100, 75, 50);

    line(450, 600, 450, 550)
    line(450, 550, 550, 550)
}


function keyPressed() {

    if (keyCode == UP_ARROW) {
        player.speedY = -speed;
    }
    if (keyCode == DOWN_ARROW) {
        player.speedY = speed;
    }
    if (keyCode == LEFT_ARROW) {
        player.speedX = -speed;
    }
    if (keyCode == RIGHT_ARROW) {
        player.speedX = speed;
    }

}

function keyReleased(e) {
    player.speedX = 0;
    player.speedY = 0;
}

function Player(sx, sy) {
    this.x = sx;
    this.y = sy;
    this.speedX = 0;
    this.speedY = 0;
}
Player.prototype.draw = function () {

    if (!this.touchingBlack()) {
        this.x += this.speedX;
        this.y += this.speedY;
    }

    fill(0);
    noStroke();
    ellipse(this.x, this.y, 20, 20);
    fill(255, 0, 0);
    ellipse(this.x - 10, this.y, 5, 5);
    ellipse(this.x, this.y - 10, 5, 5);
    ellipse(this.x + 10, this.y, 5, 5);
    ellipse(this.x, this.y + 10, 5, 5);
}
Player.prototype.touchingBlack = function () {
    return getColor(this.x + 10 + this.speedX, this.y) == 0;
}

function getColor(x, y) {
    x = floor(x);
    y = floor(y);
    return pixels[((y * width) + x) * 8];


}

If anyone has any ideas on what to do next, it would be greatly appreciated. Thank you

Chrisir

ist the code complete? Can't see the class player

**to keep the ball in side the lines: **

you could check the pixels in front of your ball with get (depending on current dir)

so have a var currentDir and set it in keyPressed()

0 means north, 1 east, 2 south and 3 west e.g.

then say

 switch (currentDir)
case 0:
break;
case 1:
.......
........
}

and inside each do a check

case 0: 
// north 
color currCol = get (player.x,player.y-11); 
if (currCol == wallColor) {
    player.speedX = 0;
    player.speedY = 0;
}
break;