var largura = 120;

var altura = 40;

var xMenu1 = 30;

var xMenu2 = 190;

var xMenu3 = 350;

var yMenu1 = 350;

var yMenu2 = 350;

var yMenu3 = 350;

var xVoltar1 = 450;

var yVoltar1 = 1;

var xVoltar2 = 450;

var yVoltar2 = 1;

var xVoltar3 = 450;

var yVoltar3 = 1;

var larguraVoltar1 = 80;

var alturaVoltar1 = 50;

var larguraVoltar2 = 80;

var alturaVoltar2 = 50;

var larguraVoltar3 = 80;

var alturaVoltar3 = 50;

var img;

var img2;

var img3;

var img4;

var img5;

var theminionFont; 

​

function preload(){

  theminionFont = loadFont("BlippoBlackBT.ttf");

  img = loadImage('1.png');

  img2 = loadImage('2.png');

  img3 = loadImage('3.png');

  img4 = loadImage('4.jpg');

  img5 = loadImage('5.png');

}

​

function setup() {

  createCanvas(500, 400);

​

}

​

function draw() {

  textStyle(NORMAL);

​

  //MENU INICIAL

​

  if (tela == 1) {

    background(img, 100);

    textAlign(CENTER);

    textFont(theminionFont); 

    fill(0);

    noStroke(0);

    textSize(20);

​

    // JOGAR INICIAL

​

    noFill();

    rect(xMenu1, yMenu1, largura, altura, 15);

    noStroke();

​

    if (

      mouseX > xMenu1 &&

      mouseX < xMenu1 + largura &&

      mouseY > yMenu1 &&

      mouseY < yMenu1 + altura

    ) {

      noStroke();

      cursor(HAND);

      noFill(0);

      rect(xMenu1, yMenu1, largura, altura, 15);

      if (mouseIsPressed) {

        tela = 2;

      }

​

    }

    noStroke();

    fill(0);

    text("JOGAR", 90, 380);

​

​

​

    // MANUAL INCIAL

​

    noFill(0);

    rect(xMenu2, yMenu2, largura, altura, 15);

    noStroke();

​

    if (

      mouseX > xMenu2 &&

      mouseX < xMenu2 + largura &&

      mouseY > yMenu2 &&

      mouseY < yMenu2 + altura

    ) {

      noStroke(0);

      cursor(HAND);

      noFill(0);

      rect(xMenu2, yMenu2, largura, altura, 15);

      if (mouseIsPressed) {

        tela = 3;

      }

    }

    noStroke();

    fill(0);

    text("MANUAL", 250, 380);

​

​

    // CRÉDITOS

    noFill(0);

    rect(xMenu3, yMenu3, largura, altura, 15);

    noStroke();

​

​

    if (

      mouseX > xMenu3 &&

      mouseX < xMenu3 + largura &&

      mouseY > yMenu3 &&

      mouseY < yMenu3 + altura

    ) {

      noStroke(0);

      cursor(HAND);

      noFill(0);

      rect(xMenu3, yMenu3, largura, altura, 15);

      if (mouseIsPressed) {

        tela = 4;

      }

    }

    noStroke();

    fill(0);

    text("CRÉDITOS", 410, 380);

  }

  //JOGO: Tela 2

  else if (tela == 2) {

    background(img4, 100);

    textAlign(CENTER);

    // VOlTAR

    textSize(16);

    stroke(180);

    fill(255, 255, 0);

    rect(xVoltar1, yVoltar1, larguraVoltar1, alturaVoltar1, 50); 

    if (

      mouseX > xVoltar1 &&

      mouseX < xVoltar1 + larguraVoltar1 &&

      mouseY > yVoltar1 &&

      mouseY < yVoltar1 + alturaVoltar1

    ) {

      stroke(300);

      cursor(HAND);

      fill(0, 255, 0);

      rect(xVoltar1, yVoltar1, larguraVoltar1, alturaVoltar1, 50);

      if (mouseIsPressed) {

        tela = 1;

      }

    }

    fill(0);

    text("Voltar", 475, 31);

    textSize(0);

    noFill(0);

    noStroke();

  }

​

  //MANUAL: Tela 3

  else if (tela == 3) {

    background(img2, 100);

    textAlign(CENTER);

​

    //VOLTAR

    textSize(16);

    stroke(180);

    fill(255, 255, 0);

    rect(xVoltar2, yVoltar2, larguraVoltar2, alturaVoltar2, 50);

    if (

      mouseX > xVoltar2 &&

      mouseX < xVoltar2 + larguraVoltar2 &&

      mouseY > yVoltar2 &&

      mouseY < yVoltar2 + alturaVoltar2

    ) {

      stroke(300);

      cursor(HAND);

      fill(0, 255, 0);

      rect(xVoltar2, yVoltar2, larguraVoltar2, alturaVoltar2, 50);

      if (mouseIsPressed) {

        tela = 1;

      }

    }

    fill(0);

    text("Voltar", 475, 31);

    textSize(0);

    noFill(0)

    noStroke(0);

  }

​

  //CRÉDITOS: Tela 4

  else if (tela == 4) {

    background(img3, 100);

    textAlign(CENTER);

    //VOLTAR

    textSize(16);

    stroke(180);

    fill(255, 255, 0);

    rect(xVoltar3, yVoltar3, larguraVoltar3, alturaVoltar3, 50);

    if (

      mouseX > xVoltar3 &&

      mouseX < xVoltar3 + larguraVoltar3 &&

      mouseY > yVoltar3 &&

      mouseY < yVoltar3 + alturaVoltar3

    ) {

      stroke(300);

      cursor(HAND);

      fill(0, 255, 0);

      rect(xVoltar3, yVoltar3, larguraVoltar3, alturaVoltar3, 50);

      if (mouseIsPressed) {

        tela = 1;

      }

    }

    fill(0);

    text("Voltar", 475, 31);

    image(img5, 465, 31, 30,30);

    textSize(0);

    noFill(0);

    noStroke(0);

  }

}

​

​