I'm using almost the same code in two places ("A" and "B"), but it only works at "A", and not at "B". I can't find any problems, and I'm not getting any errors. If someone could help, that would be great! And please edit my post if you see anything that I did wrong. Thanks!
function setup() {
createCanvas(400, 500);
}
var clicked = false;
var canClick = true;
var test = 1;
function draw() {
if (canClick == true) {
addEventListener('mousedown', e => {
clicked = true;
})
}
addEventListener('mouseup', e => {
clicked = false;
canClick = true;
})
if (test == 1) {
rect(1, 1, 150, 150)
text("Play",30, 90)
textSize(50)
}
//A
if(clicked == true) {
clicked = false;
canClick = false;
if((mouseX > 1) && (mouseX < 151) && (mouseY > 1) && (mouseY < 151)) {
test = 2;
clear()
canClick = true;
}
}
//rock ,paper, scissors
if (test == 2) {
rect(1, 1, 100, 100)
rect(103, 1, 100, 100)
rect(206, 1, 100, 100)
textSize(28)
text("Rock", 18, 60)
text("Paper", 115, 60)
textSize(23)
text("Scissors", 208, 60)
textStyle(BOLD)
}
//B
if(clicked == true) {
clicked = false;
canClick = false;
if((mouseX > 1) && (mouseX < 101) && (mouseY > 1) && (mouseY < 101)) {
console.log("hi")
}
}
}
In p5.js you can use the mousePressed() and mouseReleased() callbacks. Create variables that store the rectangles of the buttons:
var button1 = [1, 1, 150, 150]
var button2 = [1, 1, 100, 100]
var button3 = [103, 1, 100, 100]
var button4 = [206, 1, 100, 100]
Create a function that tests whether a point is inside a rectangle:
function inRectangle(x, y, r) {
return x > r[0] && x < r[0] + r[2] &&
y > r[1] && y < r[1] + r[3];
}
Use this function, the mousePressed callback, to detect when a button is clicked:
function mousePressed() {
if (test == 1) {
if (inRectangle(mouseX , mouseY, button1)) {
test = 2
}
} else if (test == 2) {
if (inRectangle(mouseX , mouseY, button2)) {
console.log("Rock")
} else if (inRectangle(mouseX , mouseY, button3)) {
console.log("Paper")
}
else if (inRectangle(mouseX , mouseY, button4)) {
console.log("Scissors")
}
}
}
function setup() {
createCanvas(400, 500);
}
var test = 1;
var button1 = [1, 1, 150, 150]
var button2 = [1, 1, 100, 100]
var button3 = [103, 1, 100, 100]
var button4 = [206, 1, 100, 100]
function inRectangle(x, y, r) {
return x > r[0] && x < r[0] + r[2] &&
y > r[1] && y < r[1] + r[3];
}
function mousePressed() {
if (test == 1) {
if (inRectangle(mouseX , mouseY, button1)) {
test = 2
}
} else if (test == 2) {
if (inRectangle(mouseX , mouseY, button2)) {
console.log("Rock")
} else if (inRectangle(mouseX , mouseY, button3)) {
console.log("Paper")
}
else if (inRectangle(mouseX , mouseY, button4)) {
console.log("Scissors")
}
}
}
function draw() {
background(255);
if (test == 1) {
rect(...button1)
text("Play",30, 90)
textSize(50)
} else if (test == 2) {
rect(...button2)
rect(...button3)
rect(...button4)
textSize(28)
text("Rock", 18, 60)
text("Paper", 115, 60)
textSize(23)
text("Scissors", 208, 60)
textStyle(BOLD)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>