Estoy usando casi el mismo código en dos lugares ("A" y "B"), pero solo funciona en "A" y no en "B". No puedo encontrar ningún problema, y no recibo ningún error. Si alguien pudiera ayudar, ¡sería genial! Y edite mi publicación si ve algo que hice mal. ¡Gracias!
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") } } }En p5.js puede usar las devoluciones de llamada mousePressed() y mouseReleased() . Crea variables que almacenen los rectángulos de los botones:
var button1 = [1, 1, 150, 150] var button2 = [1, 1, 100, 100] var button3 = [103, 1, 100, 100] var button4 = [206, 1, 100, 100]Cree una función que pruebe si un punto está dentro de un rectángulo:
function inRectangle(x, y, r) { return x > r[0] && x < r[0] + r[2] && y > r[1] && y < r[1] + r[3]; } Use esta función, la devolución de llamada mousePressed , para detectar cuándo se hace clic en un botón:
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>