why do i need to click multiple times for the code to work? - p5.js

Question

Im making this game where you can collect pokemon and when you run into a pokeball a new page shows up and shows the pokemon you found and you can click anywhere to continue. I always have to click about 10 times for it to actually work
I thought it may be because the page is in the draw function but when I took it out the draw function it didnt work. Also I dont have this problem with the start page and that is in the draw function
I also have a problem that it sometimes falls through the block when I finish collecting a pokemon but that one should be a little easier to figure out.
https://openprocessing.org/sketch/1786189
function preload() {
sprite = loadImage('sprite1.png')
lava = loadImage('lava3.png')
pokeball1 = loadImage('pokeball.png')
pokeball2 = loadImage('pokeball.png')
pokeball3 = loadImage('pokeball.png')
pokeball4 = loadImage('pokeball.png')
pokeball5 = loadImage('pokeball.png')
pichu = loadImage('0172Pichu.png')
shinx = loadImage('shinximage.png')
wooper = loadImage('194.png')
hoppip = loadImage('Hoppip-Pokemon-PNG-Image.png')
rowlet = loadImage('5859604c4f6ae202fedf2854.png')
srowlet = loadImage('ddhnzm5-18daf778-cd90-49bf-bcc3-3cd51b9c7d02.png')
gymBadges = loadImage('gymbadges.webp')
}
function setup() {
createCanvas(700, 700);
background(100);
/*start = createButton('START')
start.size(400,80)
start.position(350,620)*/
background(194, 220, 255)
//frameRate(30)
/*page1 = createButton('X');
page1.position(10,30);
page1.size(60,60)
page1.style('background-color',255 )
page1.style('border-radius', '10px')
page1.style('font-size', '30px')
page1.mousePressed(back)*/
}
let page = 0
let x = 10
//let y = 300
let y =580
function draw() {
let bcolor = [255, 203, 164, 255];
//let bcolor = [0,0,0,255]
let rightColor = get(x + 47, y + 22.5)
let leftColor = get(x - 3, y + 22.5)
//let downColor = get(x + 23, 350)
let downColor = get(x + 23, y + 47)
let upColor = get(x + 23, y + 50)
let shinyOrNo = int(random(4))
//strokeWeight(10)
//point(x-3,y+22.5)
if (page == 0) {
fill(128, 157, 255)
rect(150, 300, 400, 100, 5)
fill(255)
textSize(60)
text('START', 240, 370)
textSize(28)
text('use arrow keys to play', 200, 450)
}
if (page == 1) {
background(224, 209, 255)
fill(266)
ellipse(x, y + 22.5, 5, 5)
stroke(0)
strokeWeight(5)
//sky
fill(210, 235, 249)
rect(0, 0, 700, 700, 10)
//grass
noStroke()
fill(148, 244, 176)
rect(3, 630, 694, 67)
//obstacles
stroke(0)
strokeWeight(2)
fill(255, 203, 164)
//fill(0)
//noStroke()
rect(70, 610, 45, 20, 2)
rect(140, 590, 45, 40, 2)
rect(210, 570, 45, 60, 2)
rect(278, 540, 290, 25, 2)
rect(600, 530, 40, 25, 2)
//rect(610, 500, 40, 20, 2)
rect(500, 470, 60, 25, 2)
rect(430, 410, 50, 30, 2)
rect(70, 370, 113, 25, 2)
rect(200, 370, 60, 25, 2)
rect(280, 370, 100, 25, 2)
rect(15, 330, 30, 25, 2)
rect(100, 290, 30, 25, 2)
rect(15, 250, 30, 25, 2)
rect(100, 210, 30, 25, 2)
rect(175, 165, 30, 25, 2)
rect(260, 130, 270, 25, 2)
rect(560, 100, 100, 25, 2)
fill(134, 89, 248)
triangle(210, 360, 200, 370, 220, 370)
triangle(230, 360, 220, 370, 240, 370)
triangle(250, 360, 240, 370, 260, 370)
image(lava, 310, 488, 70, 70)
image(pokeball1, 222, 540, 23, 23)
image(pokeball2, 520, 441, 23, 23)
image(pokeball3, 150, 340, 23, 23)
image(pokeball4, 18, 220, 23, 23)
image(pokeball5, 420, 100, 23, 23)
rect(620, 50, 30, 16)
line(650, 66, 650, 99)
//sprite
//print (y)
if (eqColor(downColor, bcolor)) {
} else {
y = y +2
}
//y=y+2
image(sprite, x, y, 45, 45)
if (keyIsPressed) {
if (keyIsDown(RIGHT_ARROW)) {
if (eqColor(rightColor, bcolor)) {
} else {
x = x + 2
}
} else if (keyIsDown(LEFT_ARROW)) {
if (eqColor(leftColor, bcolor)) {
} else {
x = x - 2
}
}
if (keyIsDown(UP_ARROW)) {
if(eqColor(upColor,bcolor)) {
}else{
y=y-6
}
}
} //end of keyispressed
//jump
//if (y = y - 6) {
//y = y + 9
//}
//ground
if (y > 590) {
y = 591
}
//walk off screen
if (x < 0 || x > 700) {
x = 0
} else if (x > 655) {
x = 655
} else if (y < 0) {
y = 0
}
//collisons on the top
/*if (x>60 && x<90) {
y = 565
}*/
//pokeball 1
if (x > 189 && x < 218 && y > 512 && y < 535) {
page = 2
}
if (page == 2) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(pichu, 230, 200, 300, 300)
fill(0)
strokeWeight(1)
text('click anywhere to continue', 200, 600)
text('You found Pichu!!', 250, 150)
pokeball1 =loadImage('640px-HD_transparent_picture.png')
}
//print(x,y)
//pokeball 2
if (x > 505 && x < 533 && y > 420 && y < 444) {
page = 3
}
if (page == 3) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(shinx, 150, 200, 450, 300)
fill(0)
strokeWeight(1)
text('You found Shinx!!', 250, 150)
textSize(19)
text('fun fact: shinx is micaiah\'s favorite pokemon', 180,530)
textSize(28)
text('click anywhere to continue', 200, 600)
pokeball2 =loadImage('640px-HD_transparent_picture.png')
}
//pokeball 3
if (x > 114 && x < 145 && y > 302 && y < 350) {
page = 4
}
if (page == 4) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(wooper, 230, 200, 300, 300)
fill(0)
strokeWeight(1)
text('click anywhere to continue', 200, 600)
text('You found Wooper!!', 250, 150)
pokeball3 =loadImage('640px-HD_transparent_picture.png')
}
//pokeball 4
if (x > 0 && x < 25 && y > 200 && y < 225 && shinyOrNo == 1) {
page = 5
}
if (x > 0 && x < 25 && y > 200 && y < 225 && shinyOrNo == 2) {
page = 5
}
if (page == 5) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(rowlet,230,200,300,300)
fill(0)
strokeWeight(1)
text('click anywhere to continue', 200, 600)
text('You found rowlet!!', 250,150)
pokeball4 =loadImage('640px-HD_transparent_picture.png')
}
if (x > 0 && x < 25 && y > 200 && y < 225 && shinyOrNo == 3) {
page = 7
}
if (page == 7) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(srowlet,230,200,300,300)
fill(0)
strokeWeight(1)
text('click anywhere to continue', 200, 600)
text('You found a shiny rowlet!!', 250,150)
pokeball4 =loadImage('640px-HD_transparent_picture.png')
}
//print(page)
//pokeball 5
if (x > 382 && x < 415 && y > 84 && y < 115) {
page = 6
}
if (page == 6) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
image(hoppip, 230, 200, 300, 300)
fill(0)
strokeWeight(1)
text('click anywhere to continue', 200, 600)
text('You found Hoppip!!', 250, 150)
pokeball5 =loadImage('640px-HD_transparent_picture.png')
}
//lava
/*if (x > 285 && x < 355 && y > 454 ) {
x = 10
y = 580
}*/
point(322,502)
//flag
if (x > 595 && x < 620 && y < 63) {
page = 8
}
if (page == 8) {
fill(192, 176, 232)
rect(0, 0, 700, 700)
fill(0)
strokeWeight(1)
text('your prize is all of the pokemon gym badges',100,200)
image(gymBadges, 160,200,430,300)
text('You finished the game!!', 220, 150)
}
//spikes
if (x > 200 && x < 250 && y > 323 && y<375) {
x = 10
y = 580
}
/*if(y>330 && y<335){
y=331
}*/
} //end of page 1
//print(x,y)
} //end of draw
function mousePressed() {
if (page ==0 && mouseX >= 150 && mouseX <= 550 && mouseY >= 300 && mouseY <= 400) {
page = 1
}
if (page>1) {
page = 1
print(true)
}
}
function eqColor(a, b) {
return a[0] == b[0] && a[1] == b[1] &&
a[2] == b[2] && a[3] == b[3];
}