var x = 50;

  var yMenu1 = 150;

  var yMenu2 = 200;

  var yMenu3 = 250;

  var xVoltar = 0;

  var yVoltar = 0;

  var largura = 150;

  var largura1 = 50;

  var altura = 30;

  var img1;

  var img2;

  var Horror;

  var Jack1;

  var Jack2;

​

  //DEFINIÇÃO DE VARIÁVEIS QUE SERÃO UTILIZADAS

​

  function preload(){

  //CARREGA IMAGENS/SONS/ARQUIVOS ANTES DO JOGO INICIAR PARA SEREM UTILIZADOS NO CÓDIGO

​

  img1 = loadImage('Cenario.gif');

  img2 = loadImage('Cenario2.jpg');

  Horror = loadFont('Horror.ttf');

  Jack1 = loadImage('Jack1.png');

  Jack2 = loadImage('Jack2.png');

  }

​

  function setup() {

    createCanvas(736, 458);

    // ESTABELECE O AMBIENTE INICIAL 

  }

​

  function draw() {

  //EXECUTA O CÓDIGO EM LOOP  

​

  textStyle(BOLD);

  textFont(Horror);

  background(31, 58, 135);

  image(img1,0,0);

  textAlign(CENTER);

  textSize(16);

  //ESTABELECI O CENÁRIO E O ESTILO DE TEXTO

  if(tela == 1){

  //TELA INICIAL    

​

  stroke(31, 58 , 135); 

  fill(255, 140 , 22);

  rect(x,yMenu1,largura,altura, 10); 

  fill(230, 25, 39);

  noStroke();

  text("Iniciar", 125 , 170 );

  //PRIMEIRO BOTÃO: INICIAR  

​

  if(mouseX > x && mouseX < x + largura && mouseY > yMenu1 && mouseY < yMenu1 + altura){

​

  fill(200, 250, 0);

  noStroke();

  rect(x,yMenu1,largura,altura, 10);

  fill(230, 25, 39);

  text("Iniciar", 125, 170);

  //DETECTANDO SE O MOUSE ESTÁ ACIMA DO BOTÃO INICIAR

​

  if(mouseIsPressed){

​

  tela = 2;

  //SE O BOTÃO FOR PRESSIONADO, ISSO IRÁ TRAZER PARA A TELA DE JOGO

​

  }}

​

  fill(255, 140 , 22);

  rect(x,yMenu2,largura,altura, 10);

  fill(230, 25, 39);

  noStroke();

  text("Como jogar", 125 , 220 );

  //SEGUNDO BOTÃO: COMO JOGAR

​

  if(mouseX > x && mouseX < x + largura && mouseY > yMenu2 && mouseY < yMenu2 + altura){

​

  fill(200, 250, 0);

  noStroke();

  rect(x,yMenu2,largura,altura, 10);

  fill(230, 25, 39);

  text("Como jogar", 125 , 220 );

  //DETECTANDO SE O MOUSE ESTÁ ACIMA DO BOTÃO COMO JOGAR      

​

  if(mouseIsPressed){

​

  tela = 3;

  //SE O BOTÃO FOR PRESSIONADO, ISSO IRÁ TRAZER PARA A TELA DE INSTRUÇÕES

​

  }}

​

  fill(255, 140 , 22);

  rect(x,yMenu3,largura,altura, 10);

  fill(230, 25, 39);

  noStroke();

  text("Créditos", 125 , 270 );

  //TERCEIRO BOTÃO: CRÉDITOS

​

  if(mouseX > x && mouseX < x + largura && mouseY > yMenu3 && mouseY < yMenu3 + altura){

​

  fill(200, 250, 0);

  noStroke();

  rect(x,yMenu3,largura,altura, 10);

  fill(230, 25, 39);

  text("Créditos", 125 , 270 );

  //DETECTANDO SE O MOUSE ESTÁ ACIMA DO BOTÃO CRÉDITOS      

​

  if(mouseIsPressed){

​

  tela = 4;

  //SE O BOTÃO FOR PRESSIONADO, ISSO IRÁ TRAZER PARA A TELA DE CRÉDITOS

​

  }}}

​

  else if (tela == 2){

  //TELA DE JOGO

​

  background(31, 58, 135);

  image(img2,0,0);

  //ESTABELECI O CENÁRIO DA TELA DE JOGO

​

  fill(255, 140 , 22);  

  rect(xVoltar,yVoltar,largura1,altura, 10);

  fill(230, 25, 39);

  noStroke();

  text("<---", 25  , 20 );

  //BOTÃO VOLTAR 

​

  if(mouseX > xVoltar && mouseX < xVoltar + largura1 && mouseY > yVoltar && mouseY < yVoltar + altura){

​

  fill(200, 250, 0);

  noStroke();

  rect(xVoltar,yVoltar,largura1,altura, 10);

  fill(230, 25, 39);

  text("<---", 25 , 20 );

  //DETECTA SE O MOUSE ESTÁ ACIMA DO BOTÃO VOLTAR

​

  if(mouseIsPressed){

  tela = 1;

  //SE O BOTÃO FOR PRESSIONADO, ISSO IRÁ VOLTAR A TELA INICIAL

​

  }}}

  noCursor(); 

  if (mouseIsPressed){

    image(Jack2, mouseX,mouseY, 10, 10)

  }

  else {

    image(Jack1, mouseX,mouseY, 10, 10)

  }  

}