var bg;

var cjg;

var inst;

var crdt;

var jg;

//Variaveis dos botões

var alturaBotao;

var larguraBotao;

var XMenu;

var YJogar;

var YInstrucoes;

var YCreditos;

//Variaveis de tela

var tela = 0

// tela 0:Menu

// tela 1:Como jogar

// tela 2:Instruções

// tela 3:Créditos

// tela 4:Iniciar

​

//Variaveis das cartas

var fundocarta;

var cartas = []; // variavél referente a matriz imagens das cartas

var cartasviradas; // variavél referente a matriz que guarda o estado das cartas  

var matrizcartasviradas = [];

var matrizvalores; // 

var posicaoiX = 160;

var posicaoiY = 45; 

var larguracartas = 105;

​

​

function preload (){

  bg=loadImage('imagens/Bckgrd.png'); 

  cjg=loadImage('imagens/Tela1.png');

  inst=loadImage('imagens/Instrucoes.png');

  crdt=loadImage('imagens/Credts.png');

  jg=loadImage('imagens/Bckjg.png')

  fundocarta=loadImage('imagens cartas/Fundocartas.png');

  cartas[0] = [];

  cartas[0][0] = loadImage('imagens cartas/C1.png');

  cartas[0][1] = loadImage('imagens cartas/c1.1.png');

  cartas[0][2] = loadImage('imagens cartas/C2.png');

  cartas[0][3] = loadImage('imagens cartas/c2.2.png');

  cartas[1] = [];

  cartas[1][0] = loadImage('imagens cartas/C3.png');

  cartas[1][1] = loadImage('imagens cartas/c3.3.png');

  cartas[1][2] = loadImage('imagens cartas/C4.png');

  cartas[1][3] = loadImage('imagens cartas/c4.4.png');

  cartas[2] = [];

  cartas[2][0] = loadImage('imagens cartas/C5.png');

  cartas[2][1] = loadImage('imagens cartas/c5.5.png');

  cartas[2][2] = loadImage('imagens cartas/C6.png');

  cartas[2][3] = loadImage('imagens cartas/c6.6.png');

  cartas[3] = [];

  cartas[3][0] = loadImage('imagens cartas/C7.png');

  cartas[3][1] = loadImage('imagens cartas/c7.7.png');

  cartas[3][2] = loadImage('imagens cartas/C8.png');

  cartas[3][3] = loadImage('imagens cartas/c8.8.png');

}

​

function setup() {

  createCanvas(720, 540);

  alturaBotao = 50;

  larguraBotao = 130;

  XMenu = 270;

  YJogar = 270;

  YInstrucoes = 340;

  YCreditos = 410;

  matrizvalores =   [ [3,3,4,4],

                      [5,5,6,6],

                      [7,7,8,8],

                      [9,9,10,10]

                    ]

  matrizcartasviradas = [ [false,false,false,false],  //false : desvirada

                    [false,false,false,false],

                    [false,false,false,false],

                    [false,false,false,false]

                    ]  

  console.log(matrizcartasviradas)

}

​

function draw() {

  background(bg);

  if(tela == 0){

    menu();

  }

  if(tela == 1){

    comojogar();

  }

  if(tela == 2){

    instrucoes();

  }

  if(tela == 3){

    creditos();

  }

  if(tela == 4){

    jogar();

  }

}

​

//------------------------------------Tela Menu------------------------------------

function menu (){

  textSize(20)

  textFont('monospace')

  fill('black')

  text(parseInt(mouseX) + " " + parseInt(mouseY), 100, 35);   

//~~~~~~~~~~~Botão Jogar~~~~~~~~~~~

  if ( mouseX > XMenu && mouseX < XMenu + larguraBotao && mouseY > YJogar && mouseY < YJogar + alturaBotao){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 1

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(XMenu,YJogar,larguraBotao,alturaBotao,15)

  fill('#222222')

  text('Jogar',310,300)   

//~~~~~~~~~~~Botão Instrucoes~~~~~~~~~~~

  if ( mouseX > XMenu && mouseX < XMenu + larguraBotao && mouseY > YInstrucoes && mouseY < YInstrucoes + alturaBotao){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 2

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(XMenu,YInstrucoes,larguraBotao,alturaBotao,15)

  fill('#222222')

  text('Instruções',280, 370) 

//~~~~~~~~~~~Botão Creditos~~~~~~~~~~~

  if ( mouseX > XMenu && mouseX < XMenu + larguraBotao && mouseY > YCreditos && mouseY < YCreditos + alturaBotao){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 3

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(XMenu,YCreditos,larguraBotao,alturaBotao,15)

  fill('#222222')

  text('Créditos',290,440)

}

​

//------------------------------------Tela Como jogar------------------------------

function comojogar (){

  image(cjg,0,0)

 text(parseInt(mouseX) + " " + parseInt(mouseY), 100, 20);  

//~~~~~~~~~~~Botão Voltar~~~~~~~~~~~

 if ( mouseX > 545 && mouseX < 545 + 100 && mouseY > 460 && mouseY < 460 + 30){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 0

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(545,460,100,30,15)

  fill('#222222')

  textSize(15)

  text('Voltar',570,480) 

 //~~~~~~~~~~~Botão Iniciar~~~~~~~~~~~

 if ( mouseX > 60 && mouseX < 60 + 100 && mouseY > 460 && mouseY < 460 + 30){

  fill('#ffffff')

   if(mouseIsPressed){

     cartasviradas = true;

     tela = 4

   }

 }

 else{

 noFill();

} 

 stroke('#222222')

 rect(60,460,100,30,15)

 fill('#222222')

 textSize(15)

 text('Iniciar',83,480)  

}

//------------------------------------Tela Instruções------------------------------

function instrucoes (){

 image(inst,0,0)

 text(parseInt(mouseX) + " " + parseInt(mouseY), 100, 35);  

//~~~~~~~~~~~Botão Voltar~~~~~~~~~~

 if ( mouseX > 545 && mouseX < 545 + 100 && mouseY > 460 && mouseY < 460 + 30){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 0

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(545,460,100,30,15)

  fill('#222222')

  textSize(15)

  text('Voltar',570,480)

}

​

//------------------------------------Tela Creditos--------------------------------

function creditos (){

  image(crdt,0,0)

  text(parseInt(mouseX) + " " + parseInt(mouseY), 100, 35);

//~~~~~~~~~~~Botão Voltar~~~~~~~~~~~

 if ( mouseX > 545 && mouseX < 545 + 100 && mouseY > 460 && mouseY < 460 + 30){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 0

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(545,460,100,30,15)

  fill('#222222')

  textSize(15)

  text('Voltar',570,480)

}

​

//------------------------------------Tela Jogar-----------------------------------

function jogar (){

  image(jg,0,0)

  text(parseInt(mouseX) + " " + parseInt(mouseY), 100, 530);

//Desenhando as cartas no tabuleiro

  for (l=0; l<4; l++){

    for (c=0 ; c<4; c++){

      if(matrizcartasviradas[l][c]){

        image(cartas[l][c],posicaoiX + c*larguracartas,posicaoiY + larguracartas*l,larguracartas,larguracartas) 

      }else{

        image(fundocarta,posicaoiX + c*larguracartas,posicaoiY + larguracartas*l,larguracartas,larguracartas) 

      } 

    } 

  }

//~~~Botão Menu~~~

  if ( mouseX > 395 && mouseX < 395 + 65 && mouseY > 480 && mouseY < 480 + 25){

  fill('#ffffff')

    if(mouseIsPressed){

      tela = 0

    }

  }

  else{

  noFill();

  }

  stroke('#222222')

  rect(395,480,65,25,15)

  fill('#222222')

  textSize(12)

  text('Menu',415,495)

//~~~Botão Dúvidas~~~

  if ( mouseX > 290 && mouseX < 290 + 80 && mouseY > 480 && mouseY < 480 + 25){

  fill('#ffffff')

   if(mouseIsPressed){

     tela = 1

   }

 }

 else{

 noFill();

} 

 stroke('#222222')

 rect(290,480,80,25,15)

 fill('#222222')

 textSize(12)

 text('Dúvidas?!',300,495)  

}

​

function mouseClicked(){

  if(tela == 4){

    console.log("click")

    //Verificação das cartas   

    for(l=0; l<4; l++){

      let pIY = posicaoiY + larguracartas*l;

      for(c=0; c<4; c++){

        let pIX = posicaoiX + c*larguracartas;  

        if(mouseX > pIX && mouseX < pIX + larguracartas && mouseY > pIY && mouseY < pIY + larguracartas){

          console.log("carta["+l+"]["+c+"]")

          matrizcartasviradas[l][c] = true

          console.log((posicaoiX + c*larguracartas)+" "+ (posicaoiY + larguracartas*l))   

        }  

      }    

    }

  }

}