var planodefundo;

var imagemprof;

var imagemtoane;

var largura = 400;

var altura = 100;

var xMenu = 100;

var yMenu1 = 150;

var yMenu2 = 300;

var yMenu3 = 450;

var xSaida = 500;

var ySaida = 20;

var larguraSaida = 90;

var alturaSaida = 75;

var vida = 5;

var vida1;

var vida2;

var vida3;

var vida4;

var vida5;

var score = 0;

var alt = 50;

var larg = 100;

var xsim = 250;

var y = 480;

var and;

var or;

var not;

var nand;

var nor;

var xret = 200;

var yret = 100;

​

​

function preload () {

 planodefundo = loadImage("plano_de_fundo.jpg");

 imagemprof = loadImage("professor.png");

 imagemtoane = loadImage("toane.jpg");

 vida1 = loadImage ("1.jpg");

 vida2 = loadImage ("2.PNG");

 vida3 = loadImage ("3.PNG");

 vida4 = loadImage ("4.PNG");

 vida5 = loadImage ("5.PNG");

 and = loadImage ("1.jpg");

 or = loadImage ("or.jpg");

 nand = loadImage ("nand.jpg");

 nor = loadImage ("nor.jpg");

}

​

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(220);

  textFont('stylesheet');

  textStyle (BOLDITALIC);

  cursor (ARROW);

  //Tela de Menu

  if (tela == 1) {

    background (planodefundo);

    //Titulo do jogo

    stroke (200);

    fill (500);

    rect ( 50 , 20, 500, 125, 15);

    fill (50);

    text ("Descobrindo As", 300, 75);

    text ("Portas Lógicas", 300, 125);

    //Iniciar o jogo

    textAlign (CENTER);

    textSize (60);

    textFont('stylesheet');

    stroke (200);

    fill (20);

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

    fill (240);

    text ("Iniciar", 300, 215 );

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

    cursor (HAND);

    stroke (220);

    fill (500);

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

    fill (50);

    text ("Iniciar", 300, 215 );

      if (mouseIsPressed) {

      tela = 2;

      }

    }

    //Instrução

    stroke (200);

    fill (20);

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

    fill (240);

    text ("Informações", 300 , 365);

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

    cursor (HAND);

    stroke (220);

    fill (500);

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

    fill (50);

    text ("Informações", 300 , 365);

     if (mouseIsPressed) {

      tela = 3;

      }

    }

    //Créditos

    stroke (200);

    fill (20);

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

    fill (240);

    text ("Créditos", 300, 515 );

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

    cursor (HAND);

    stroke (220);

    fill (500);

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

    fill (50);

    text ("Créditos", 300, 515 );

     if (mouseIsPressed) {

      tela = 4;

      }

    }  

  }

  else if (tela == 3) {

    background (planodefundo);

    cursor (ARROW);

    //Informações do jogo

     stroke (200);

    fill (20);

    rect (xMenu, 20 , largura, altura, 15);

    textSize (60);

    fill (240);

    text ("Informações", 300, 85);

    stroke (200);

    fill (20);

    rect (50,150,500,400, 15);

    textSize (25);

    fill (240);

    text ("SOBRE O JOGO", 160,190);

    text ("COMO JOGAR?", 160, 460);

    textSize (20);

    fill (240)

    text ("O jogo foi desenvolvido pensando em ensinar os alunos", 300, 230);

    text ("de Lógica de Programação e de Eletrônica Digital de uma", 300, 260);

    text ("forma descontraida as portas lógicas e suas saídas, fazendo", 300, 290);

    text ("o jogador identificar o tipo de porta pelo desenho, saber o", 300, 320);

    text ("operador lógico correspondente a porta e a resolver proble- ", 300, 350);

    text ("mas relacionado as portas lógicas identificando qual a", 300, 380);

    text (" saída esperada para o problema proposto.", 300, 410);

    text ("Utilizando um mouse, clique no botão que achar que ", 300,500);

    text ("é a resposta certa.", 300, 530);

    //Botão de Saída

    textAlign (CENTER);

    textSize (20);

    textFont('stylesheet');

    stroke (200);

    fill (20);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (240);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseX > xSaida && mouseX < xSaida + larguraSaida && mouseY > ySaida && mouseY < ySaida + alturaSaida) {

    cursor (HAND);

    stroke (200);

    fill (500);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (50);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseIsPressed) {

      tela = 1;

        }

     }

  }

  else if (tela == 4) {

    background (planodefundo);

    cursor (ARROW);

    //Créditos

    stroke (200);

    fill (20);

    rect (xMenu, 20 , largura, altura, 15);

    textSize (60);

    fill (240);

    text ("Créditos", 300, 85);

    image (imagemprof, 50,180,120,150)

    stroke (200);

    fill (20);

    rect (185, 165 , 410, 185, 15);

    textSize (25);

    fill (240);

    text ("Orivaldo Vieira de Santana Junior", 390,214);

    text ("ORIENTADOR",390,189)

    textSize (18);

    fill (240);

    text ("Doutor e mestre pelo Centro de Informática da UFPE.", 390, 240);

    text ("Graduado em Ciência da Computação pela UFBA.", 385, 260);

    text ("Professor Adjunto da ECT/UFRN e Professor do " , 390, 280);

    text ("Programa de Pós Graduação Ciência, " , 390, 300);

    text ("Tecnologia e Inovação (PPgCTI).", 390, 320);

    image (imagemtoane, 50,400, 120, 150)

    stroke (200);

    fill (20);

    rect (185, 385 , 410, 185, 15);

    textSize (25);

    fill (240);

    text ("Toane Stefhany de Lima Gomes", 390,434);

    text ("PROGRAMADORA",390,409);

    textSize (18);

    fill (240);

    text ("Técnica em Manutenção e Suporte em Informática", 390, 470);

    text ("pela UFRN. Graduanda em Ciências e Tecnologia", 390, 490);

    text ("pela Universidade Federal do Rio Grande do Norte.", 390, 510);

    //Botão de Saída

    textAlign (CENTER);

    textSize (20);

    textFont('stylesheet');

    stroke (200);

    fill (20);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (240);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

        if (mouseX > xSaida && mouseX < xSaida + larguraSaida && mouseY > ySaida && mouseY < ySaida + alturaSaida) {

    cursor (HAND);

    stroke (200);

    fill (500);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (50);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseIsPressed) {

      tela = 1;

        }

     }

  }

  else if (tela == 5) {

    //Fim de Jogo

    background (0);

    cursor (ARROW);

    textAlign (CENTER);

    textSize (60);

    fill (255);

    text ("GAME", 200,100);

    text ("OVER",400,200);

    text ("Score:"+" " + score, 200, 300);

​

    textSize (40);

    text ("Jogar Novamente?",200,450 );

    noStroke ( );

    noFill ( );

    rect (xsim, y, larg, alt, 15);

    fill (255);

    text ("SIM", 300,520);

    if (mouseX > xsim && mouseX < xsim + larg && mouseY > y && mouseY < y + alt){

      stroke (255);

      noFill ();

      rect (xsim, y, larg, alt, 15);

      noStroke ( );

      fill (255);

      text ("SIM", 300,520);

      if (mouseIsPressed) {

        tela = 2;

        vida = 5;

      }

    }

    //Botão de Saída

    textAlign (CENTER);

    textSize (20);

    textFont('stylesheet');

    stroke (200);

    fill (20);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (240);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

        if (mouseX > xSaida && mouseX < xSaida + larguraSaida && mouseY > ySaida && mouseY < ySaida + alturaSaida) {

    cursor (HAND);

    stroke (200);

    fill (500);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (50);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseIsPressed) {

      tela = 1;

        }

     }

  }

  else if (tela == 2) {

    //Jogo em ação

    cursor (ARROW);

    background (planodefundo);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (240, 40, 250, 50, 15);

    noStroke ()

    fill (20);

    textSize (25);

    text ("Vida:", 275, 75);

    //Vida

    if (vida == 5) {

      image (vida5, 305, 50, 175,35 );

    }

    else if (vida == 4) {

      image (vida4, 305,50,150,35);

    }

    else if (vida == 3) {

      image (vida3, 305,50,125,35);

    }

    else if (vida == 2) {

      image (vida2, 305,50,100,35);

    }

    else if (vida == 1) {

      image (vida1, 305,55,55,25);

    }

    else if (vida == 0) {

      tela = 5;

    }

    fill (0);

    rect (30,40,180,50,15)

    textSize (35)

    fill (255);

    text ("Nível 1", 100, 75);

    fill (0);

    rect (5, 130, 590, 60, 15);

    textAlign (LEFT);

    textSize (24)

    fill (255)

    text ("Qual o nome dessa porta lógica e seus operadores lógicos?", 10,170);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (200, 220, xret,yret,15);

    image (and,230,230, 150,75);

    noStroke ();

    fill (0);

    rect (50,350,xret,yret,15);

    rect (50, 480, xret,yret,15);

    rect (350,350,xret,yret,15);

    rect (350, 480, xret, yret, 15);

    textSize (30)

    fill (255);

    text ("AND; &&; X", 65 , 410); 

    text ("OR; || ; X", 85, 540);

    text ("AND; &&; +", 365,410);

    text ("OR; &&; +", 385, 540);

    if (mouseX > 50 && mouseX< 50+xret && mouseY > 350 && mouseY < 350+yret){

    stroke (0);

    fill (255);

    rect (50,350,xret,yret,15);

    noStroke ( );

    textSize (30)

    fill (0);

    text ("AND; &&; X", 65 , 410);

      if (mouseIsPressed) {

      tela = 6;

        }

    }

    if (mouseX > 50 && mouseX< 50+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (50, 480, xret,yret,15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("OR; || ; X", 85, 540);

      if (mouseIsPressed) {

      tela = 6;

        }

    }

    if (mouseX > 350 && mouseX< 350+xret && mouseY > 350 && mouseY < 350+yret){

      stroke (0);

      fill (255);

      rect (350,350,xret,yret,15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("AND; &&; +", 365,410);

      if (mouseIsPressed) {

      tela = 7;

        }

    }

    if (mouseX > 350 && mouseX< 350+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (350, 480, xret, yret, 15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("OR; &&; +", 385, 540);

      if (mouseIsPressed) {

      tela = 6;

        }

    }

    //Botão de Saída

    textAlign (CENTER);

    textSize (20);

    textFont('stylesheet');

    strokeWeight(1) 

    stroke (200);

    fill (20);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    noStroke ()

    fill (240);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseX > xSaida && mouseX < xSaida + larguraSaida && mouseY > ySaida && mouseY < ySaida + alturaSaida) {

    cursor (HAND);

    stroke (200);

    fill (500);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (50);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseIsPressed) {

      tela = 1;

        }

     }

  }

else if (tela == 6) {

  // Errado

   background (0);

​

    textAlign (LEFT);

     noStroke ( );  

     fill (255,0,0);

     textSize (100);

     text ("Incorreto", 100,200);

    noStroke ( );

    noFill ( );

    rect (200, 265, 180, alt, 15);

​

     fill (255);

     textSize (34);

     text ("Continuar", 220, 300);

    if (mouseX > 200 && mouseX < 200+180 && mouseY > 265 && mouseY < 265+alt){

      stroke (255);

      noFill ();

      rect (200, 265, 180, alt, 15);

      noStroke ( );

      textSize (34)

      text ("Continuar", 220, 300);

      if (mouseIsPressed) {

        tela = 2;

        score = score -10;

        vida = vida - 1;

      }

    }

}

  else if (tela == 7) {

    //Correto

    background (0);

​

    textAlign (LEFT);

     noStroke ( );  

     fill (0,255,0);

     textSize (100);

     text ("Correto", 130,200);

    noStroke ( );

    noFill ( );

    rect (200, 265, 180, alt, 15);

​

     fill (255);

     textSize (34);

     text ("Continuar", 220, 300);

     score = score + 20;

     textSize (50)

     fill (255);

     text ("Score: "+score, 200,450);

    if (mouseX > 200 && mouseX < 200+180 && mouseY > 265 && mouseY < 265+alt){

      stroke (255);

      noFill ();

      rect (200, 265, 180, alt, 15);

      noStroke ( );

      textSize (34)

      text ("Continuar", 220, 300);

      if (mouseIsPressed) {

        tela = 8;

      }

    }

  }

  else if (tela == 8) {

    //Jogo em ação

    cursor (ARROW);

    background (planodefundo);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (240, 40, 250, 50, 15);

    noStroke ()

    fill (20);

    textSize (25);

    text ("Vida:", 275, 75);

    //Vida

    if (vida == 5) {

      image (vida5, 305, 50, 175,35 );

    }

    else if (vida == 4) {

      image (vida4, 305,50,150,35);

    }

    else if (vida == 3) {

      image (vida3, 305,50,125,35);

    }

    else if (vida == 2) {

      image (vida2, 305,50,100,35);

    }

    else if (vida == 1) {

      image (vida1, 305,55,55,25);

    }

    else if (vida == 0) {

      tela = 5;

    }

    fill (0);

    rect (30,40,180,50,15)

    textSize (35)

    fill (255);

    text ("Nível 1", 100, 75);

    fill (0);

    rect (5, 130, 590, 60, 15);

    textAlign (LEFT);

    textSize (24)

    fill (255)

    text ("Qual o nome dessa porta lógica e seus operadores lógicos?", 10,170);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (200, 220, xret,yret,15);

    image (or,230,230, 150,75);

    noStroke ();

    fill (0);

    rect (50,350,xret,yret,15);

    rect (50, 480, xret,yret,15);

    rect (350,350,xret,yret,15);

    rect (350, 480, xret, yret, 15);

    textSize (30)

    fill (255);

    text ("AND; &&; X", 65 , 410); 

    text ("OR; || ; X", 85, 540);

    text ("AND; &&; +", 365,410);

    text ("OR; &&; +", 385, 540);

    if (mouseX > 50 && mouseX< 50+xret && mouseY > 350 && mouseY < 350+yret){

    stroke (0);

    fill (255);

    rect (50,350,xret,yret,15);

    noStroke ( );

    textSize (30)

    fill (0);

    text ("AND; &&; X", 65 , 410);

      if (mouseIsPressed) {

      tela = 9;

        }

    }

    if (mouseX > 50 && mouseX< 50+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (50, 480, xret,yret,15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("OR; || ; X", 85, 540);

      if (mouseIsPressed) {

      tela = 10;

        }

    }

    if (mouseX > 350 && mouseX< 350+xret && mouseY > 350 && mouseY < 350+yret){

      stroke (0);

      fill (255);

      rect (350,350,xret,yret,15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("AND; &&; +", 365,410);

      if (mouseIsPressed) {

      tela = 9;

        }

    }

    if (mouseX > 350 && mouseX< 350+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (350, 480, xret, yret, 15);

      noStroke ( );

      textSize (30);

      fill (0);

      text ("OR; &&; +", 385, 540);

      if (mouseIsPressed) {

      tela = 9;

        }

    }

    //Botão de Saída

    textAlign (CENTER);

    textSize (20);

    textFont('stylesheet');

    strokeWeight(1) 

    stroke (200);

    fill (20);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    noStroke ()

    fill (240);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseX > xSaida && mouseX < xSaida + larguraSaida && mouseY > ySaida && mouseY < ySaida + alturaSaida) {

    cursor (HAND);

    stroke (200);

    fill (500);

    rect (xSaida,ySaida, larguraSaida, alturaSaida, 15);

    fill (50);

    text ( "Voltar Ao", 545, 55);

    text ( "Menu", 545 , 75);

     if (mouseIsPressed) {

      tela = 1;

        }

     }

  }

  else if (tela == 10) {

    //Correto

    background (0);

​

    textAlign (LEFT);

     noStroke ( );  

     fill (0,255,0);

     textSize (100);

     text ("Correto", 130,200);

    noStroke ( );

    noFill ( );

    rect (200, 265, 180, alt, 15);

​

     fill (255);

     textSize (34);

     text ("Continuar", 220, 300);

     score = 20;

     textSize (50)

     fill (255);

     text ("Score: "+score, 200,450);

    if (mouseX > 200 && mouseX < 200+180 && mouseY > 265 && mouseY < 265+alt){

      stroke (255);

      noFill ();

      rect (200, 265, 180, alt, 15);

      noStroke ( );

      textSize (34)

      text ("Continuar", 220, 300);

      if (mouseIsPressed) {

        tela = 11;

      }

    }

  }

    else if (tela == 9) {

  // Errado

   background (0);

​

    textAlign (LEFT);

     noStroke ( );  

     fill (255,0,0);

     textSize (100);

     text ("Incorreto", 100,200);

    noStroke ( );

    noFill ( );

    rect (200, 265, 180, alt, 15);

​

     fill (255);

     textSize (34);

     text ("Continuar", 220, 300);

    if (mouseX > 200 && mouseX < 200+180 && mouseY > 265 && mouseY < 265+alt){

      stroke (255);

      noFill ();

      rect (200, 265, 180, alt, 15);

      noStroke ( );

      textSize (34)

      text ("Continuar", 220, 300);

      if (mouseIsPressed) {

        tela = 8;

        score = score -10;

        vida = vida - 1;

        }

      }

    }

   else if (tela == 11) {

    //Jogo em ação

    cursor (ARROW);

    background (planodefundo);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (240, 40, 250, 50, 15);

    noStroke ()

    fill (20);

    textSize (25);

    text ("Vida:", 275, 75);

    //Vida

    if (vida == 5) {

      image (vida5, 305, 50, 175,35 );

    }

    else if (vida == 4) {

      image (vida4, 305,50,150,35);

    }

    else if (vida == 3) {

      image (vida3, 305,50,125,35);

    }

    else if (vida == 2) {

      image (vida2, 305,50,100,35);

    }

    else if (vida == 1) {

      image (vida1, 305,55,55,25);

    }

    else if (vida == 0) {

      tela = 5;

    }

    fill (0);

    rect (30,40,180,50,15)

    textSize (35)

    fill (255);

    text ("Nível 2", 100, 75);

    fill (0);

    rect (5, 130, 590, 60, 15);

    textAlign (LEFT);

    textSize (24)

    fill (255)

    text ("Qual o resultado esperado dessa operação?", 85,170);

    strokeWeight(5)

    stroke(0)

    fill (255);

    rect (200, 220, xret,yret,15);

    noStroke ( );

    fill (0);

    textSize (50);

    text ("1 + 0 X 1",205,290);

    fill (0);

    rect (50,350,xret,yret,15);

    rect (50, 480, xret,yret,15);

    rect (350,350,xret,yret,15);

    rect (350, 480, xret, yret, 15);

    textSize (50)

    fill (255);

    text ("0", 135 , 420);

    text ("2", 135, 540);

    text ("1", 435,420);

    text ("3", 435, 540);

    if (mouseX > 50 && mouseX< 50+xret && mouseY > 350 && mouseY < 350+yret){

    stroke (0);

    fill (255);

    rect (50,350,xret,yret,15);

    noStroke ( );

    textSize (50)

    fill (0);

    text ("0", 135 , 420);

      if (mouseIsPressed) {

      tela = 12;

        }

    }

     if (mouseX > 50 && mouseX< 50+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (50, 480, xret,yret,15);

      noStroke ( );

      textSize (50);

      fill (0);

      text ("2", 135, 540);

      if (mouseIsPressed) {

      tela = 12;

        }

    }

    if (mouseX > 350 && mouseX< 350+xret && mouseY > 350 && mouseY < 350+yret){

      stroke (0);

      fill (255);

      rect (350,350,xret,yret,15);

      noStroke ( );

      textSize (50);

      fill (0);

      text ("1", 435,420);

      if (mouseIsPressed) {

      tela = 13;

        }

    }

     if (mouseX > 350 && mouseX< 350+xret && mouseY > 480 && mouseY < 480+yret){

      stroke (0);

      fill (255);

      rect (350, 480, xret, yret, 15);

      noStroke ( );

      textSize (50);

      fill (0);

      text ("3", 435, 540);

      if (mouseIsPressed) {

      tela = 12;

        }

    }

    //Botão de Saída

    textAlign (CENTER);