var larguraBotao = 200

var xMaxBotao = xMinBotao + larguraBotao

var yMinBotao1 = 200

var alturaBotao = 60

var yMaxBotao1 = yMinBotao1 + alturaBotao

​

var yMinBotao2 = 280

yMaxBotao2 = yMinBotao2 + alturaBotao

​

var yMinBotao3 = 360

yMaxBotao3 = yMinBotao3 + alturaBotao

​

​

var imagemEducador 

var imagemProgramadora

​

var tela = 0

​

function keyPressed() {

  if (keyCode === ESCAPE && tela!=0) {

    tela = 0;

  } 

} 

​

​

function menuBotao (texto, yMin, yMax, opcao) {

 // bota 2 -> intruções

  if (mouseX > xMinBotao && mouseX < xMaxBotao && mouseY > yMin && mouseY < yMax) {

      fill(250)

      if (mouseIsPressed){

        tela = 2

      }

    }  

  else {

      noFill()

    }

    rect(xMinBotao, yMin, larguraBotao , alturaBotao, 15)

    textSize(30)

    fill(10)

    text(texto, xMinBotao + 35 , yMin + 40)

}

​

function menuBotao1(texto, yMin, yMax, opcao) {

 // jogar

  if (mouseX > xMinBotao && mouseX < xMaxBotao && mouseY > yMin && mouseY < yMax) {

      fill(250)

      if (mouseIsPressed){

        tela = 1

      }

    }  

  else {

      noFill()

    }

    rect(xMinBotao, yMin, larguraBotao , alturaBotao, 15)

    textSize(30)

    fill(10)

    text(texto, xMinBotao + 35 , yMin + 40)

}

​

function menuBotao2(texto, yMin, yMax, opcao) {

 // créditos

  if (mouseX > xMinBotao && mouseX < xMaxBotao && mouseY > yMin && mouseY < yMax) {

      fill(250)

      if (mouseIsPressed){

        tela = 3

      }

    }  

  else {

      noFill()

    }

    rect(xMinBotao, yMin, larguraBotao , alturaBotao, 15)

    textSize(30)

    fill(10)

    text(texto, xMinBotao + 35 , yMin + 40)

}

  function telaJogar(){

  background(imagemJogar)

  fill(0)

  textSize(40)

  text("Jogar", 200, 80)

  textSize(35)

  text(" Começando o Jogo", 100, 160)

}

function telaInstrucoes(){

  background(imagemInstruções)

  textSize(36)

  fill(10)

  text("Instruções", 150, 70 )

  textSize(20)

  text("- O jogo possui 1 nivel", 20, 150)

  text("- Necessario apenas o uso do mouse", 20, 190)

  text("- Para voltar a tela inicial aperte o botão 'ESC'", 20, 230)

  text("- O objetivo do jogo é completa as palavras", 20, 270)

}

​

​

function telaCreditos(){

   background(imagemCreditos)

  fill(10)

  textSize(35)

  text("Créditos", 170 , 80)

  fill(10)

  textSize(22)

  text("GHEDDA", 260, 130)

  textSize(16)

  text("Função: Educador", 250, 150 ) 

  textSize(16)

  text("Graduanda de Licenciatura em ", 230, 180)

  text("Pedagogia. Pela Faculdade ", 230, 200)

  text("de Ensino Superior do Piauí -FAESPI.", 230, 220)

  fill(30)

  textSize(22)

  text("TAÍS CIBELE", 270, 320)

  textSize(16)

  text("Função: Programadora", 250, 340)

  textSize(16)

  text("Graduanda em Ciência e Tecnologia."  , 230 ,370)

  text("Pela Faculdade de Ensino Superior", 230, 390) 

  text("do Rio Grande do Norte - UFRN.", 230, 410)

​

    //                   x  y   larg  altu 

  image(imagemEducador, 40, 100 , 160 , 160)

  image(imagemProgramadora, 40 , 300, 160, 160)

}

​

function preload(){

  imagemEducador = loadImage("ghedda-1.jpg")

  imagemEducador1 = loadImage("tais1.jpg")

  imagemProgramadora = loadImage("cibele.jpg")

  imagemInstruções = loadImage("borboletas.jpg")

  imagemJogar = loadImage("borboleta1.jpg")

  imagemCreditos = loadImage ("borboleta2.jpg")

}

​

function setup() {

  createCanvas(500, 500);

}

​

 function draw() {

  if(tela == 0){

    background(imagemEducador1)

    textSize(36)

    fill(10)

    text("Completando o Conto", 80, 70 )

    menuBotao1 ("Jogar",  yMinBotao1, yMaxBotao1, 1 )

    menuBotao ("Instruções", yMinBotao2, yMaxBotao2, 2) 

    menuBotao2 ("Créditos", yMinBotao3, yMaxBotao3, 3) 

  }

  if(tela == 1){ 

    telaJogar()

  }

  if(tela == 2){ 

    telaInstrucoes()

  }

  if(tela == 3){ 

    telaCreditos()

  }

​

}

​

function mouseClicked() {

}

​