var yBtn = 160;

var lBtn = 200;

var hBtn = 50;

var distYBtn = 10;

var bordaBtn = 10;

var cor1 = 255;

var cor2 = 255;

var cor3 = 255;

​

function setup() {

  createCanvas(400, 400);

}

​

function criarBotoes() {

  fill(cor1);

  rect(xBtn, yBtn, lBtn, hBtn, bordaBtn);

  push();

  textAlign(CENTER);

  textSize(32);

  fill(0, 0, 0);

  text("Jogar", xBtn + lBtn / 2, yBtn + 33);

  pop();

​

  //Botão Informações

  xBtn2 = xBtn;

  yBtn2 = yBtn + distYBtn + hBtn;

  fill(cor2);

  rect(xBtn2, yBtn2, lBtn, hBtn, bordaBtn);

  push();

  textAlign(CENTER);

  textSize(32);

  fill(0, 0, 0);

  text("Informações", xBtn2 + lBtn / 2, yBtn2 + 33);

  pop();

​

  //Botão Créditos

  xBtn3 = xBtn2;

  yBtn3 = yBtn2 + distYBtn + hBtn;

  fill(cor3);

  rect(xBtn3, yBtn3, lBtn, hBtn, bordaBtn);

  push();

  textAlign(CENTER);

  textSize(32);

  fill(0, 0, 0);

  text("Créditos", xBtn3 + lBtn / 2, yBtn3 + 33);

  pop();

}

​

function draw() {

  background(220);

​

  criarBotoes();

}

function mouseClicked() {

  cor1 = cor2 = cor3 = "white";

  if (

    mouseX >= xBtn &&

    mouseX <= xBtn + lBtn &&

    mouseY >= yBtn &&

    mouseY <= yBtn + hBtn

  ) {

    console.log("Click!: 1 " + mouseX + " " + mouseY);

    cor1 = "cyan";

  }

  if (

    mouseX >= xBtn2 &&

    mouseX <= xBtn2 + lBtn &&

    mouseY >= yBtn2 &&

    mouseY <= yBtn2 + hBtn

  ) {

    console.log("Click!: 2 " + mouseX + " " + mouseY);

    cor2 = "magenta";

  }

  if (

    mouseX >= xBtn3 &&

    mouseX <= xBtn3 + lBtn &&

    mouseY >= yBtn3 &&

    mouseY <= yBtn3 + hBtn

  ) {

    console.log("Click!: 3" + mouseX + " " + mouseY);

    cor3 = "yellow";

  }  

  console.log(cor1,cor2,cor3)

}

​