var yBtn1 = 160

var yBtn2 = 240

var lBtn1 = 200

var hBtn1 = 50

var bordaBtn1 = 10 

var tela = 0

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  if ( tela === 0 ){

    background(220);

​

    fill(20);

    textSize(50); 

    textAlign(CENTER);

    text("Cobra", 200,100);

​

    // Botão 1 

    fill(255)

    // muda cor interna do botão quando o mause está sobre

    if ( mouseX >= xBtn1 && mouseX <= xBtn1 + lBtn1 && mouseY >= yBtn1 && mouseY <= yBtn1 + hBtn1 ) {

      fill(255,200,200)

    }

    rect(xBtn1,yBtn1,lBtn1,hBtn1,bordaBtn1);

    fill(40);

    textAlign(CENTER);

    textSize(32);

    text("Jogar", xBtn1+lBtn1/2, yBtn1+33)

    // Botão 2 

    fill(255)

    // muda cor interna do botão quando o mause está sobre

    if ( mouseX >= xBtn1 && mouseX <= xBtn1 + lBtn1 && mouseY >= yBtn2 && mouseY <= yBtn2 + hBtn1 ) {

      fill(255,200,200)

    }

    rect(xBtn1,yBtn2,lBtn1,hBtn1,bordaBtn1);

    fill(40);

    textAlign(CENTER);

    textSize(32);

    text("Créditos", xBtn1+lBtn1/2, yBtn2+33)

  }

  else if (tela === 1) {

    background(0);

​

    fill(255);

    textSize(50); 

    textAlign(CENTER);

    text("Ação", 200,100);

    if (keyIsDown(ESCAPE)) {

      tela = 0

    }

  }

  else if (tela === 2) {

    background(0);

​

    fill(255);

    textSize(50); 

    textAlign(CENTER);

    text("Créditos", 200,100);

    if (keyIsDown(ESCAPE)) {

      tela = 0

    }

  }

}

​

function mouseClicked(){

  if (tela === 0 ){

    if ( mouseX >= xBtn1 && mouseX <= xBtn1 + lBtn1 && mouseY >= yBtn1 && mouseY <= yBtn1 + hBtn1 ) {

      console.log("Click: "+mouseX+" "+mouseY)

      tela = 1

    }

    if ( mouseX >= xBtn1 && mouseX <= xBtn1 + lBtn1 && mouseY >= yBtn2 && mouseY <= yBtn2 + hBtn1 ) {

      console.log("Créditos")

      tela = 2

    }

  }

}

​

​