If you went through the Intro to JS course, then you made a few simple buttons in the Logic challenges Your First Button and Smarter Button. In case you forgot, let’s re-hash how to make a simple button.First, what are the bare minimum features of a button?
- A shape on the canvas (typically a rectangle)
- Includes a label or icon that describes what it will do
- Responds to the user clicking on it (but not elsewhere)
We can achieve #1 and #2 pretty easily:
fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("Useless button", 110, 133);
To achieve #3, we need to define a mouseClicked
function that will get called when the user clicks, and inside of that, we need to check whether mouseX
and mouseY
are within the bounding box of the button