When the user clicks ready, a random rect will spawn (random x, y, w, h). After the player clicks within the walls of that rect they reach level 2 and 2 rects spawn they must click inside of. Level 3, 3 rects spawn they must click inside and so on. IDK where this code is wrong because no rects are spawning after the player clicks ready.
Code
var colors = (random(0, 255), random(0, 255), random(0, 255));
var levelNumber = 0;
var randomRects = [];
var scene;
var randX = random(20, 370);
var randY = random(20, 370);
var randW = random(5, 45);
var randH = random(5, 45);
//button object
var Button = function(config) {
this.x = config.x;
this.y = config.y;
this.width = width;
this.height = height;
this.label = config.label;
};
Button.prototype.draw = function() {
fill(0, 0, 0);
rect(this.x-5, this.y+64, this.width-127, this.height-340, 5);
fill(252, 18, 29);
textSize(40);
textAlign(CENTER);
text(this.label, this.x+134, this.y+106);
};
//Asks player if they're ready
var btn1 = new Button ({
x: 70,
y: 100,
label: "Click to Play"
}
);
//Asks player if they want to play again
var btn2 = new Button ({
x: 111,
y: 100,
label: "Play Again?"
}
);
//generate increasing number of rectangles
var randRect = function () {
return {
x: randX,
y: randY,
width: randW,
height: randH,
color: colors,
clicked: false,
};
};
//+1 rectangle spawns after each level
var levelUp = function () {
levelNumber++;
for (var i = 0; i < levelNumber; i++) {
randomRects.push(randRect);
}
};
//draw the rectangles
var drawRects = function () {
for (var i = 0; i < randomRects.length; i++) {
var r = randomRects[i];
stroke (0, 0, 0);
fill (r.color);
rect (r.x, r.y, r.width, r.height);
}
};
//scene functions
var scene1 = function() { // 'Click to Play' button
scene = 1;
background(255, 255, 255);
btn1.draw();
};
var scene2 = function() { //bulk of game takes place here
scene = 2;
background(255, 255, 255);
drawRects();
};
var scene3 = function() { // Play Again button
scene = 3;
background(255, 255, 255);
btn2.draw();
};
scene1();
//Reserving // not sure what to put inside, if anything at all
draw = function() {
};
mousePressed = function() {
//scene change
if (scene === 1 && mouseX >= 135 && mouseX <= 248 && mouseY <= 263 && mouseY >= 150) {
scene2();
}
else if (scene === 3 && mouseX >= 135 && mouseX <= 248 && mouseY <= 263 && mouseY >= 150) {
scene2();
}
//Clicking inside the random rects
else if (scene === 2 && mouseX >= randX && mouseX <= randX+randW && mouseY >= randY && mouseY <= randY+randH ) {
text("HI", 50, 50); //test
}
};