var yr = 200;

var xB = 10;

var yB = 280;

var xC = 200;

var yC = 200;

var C = 55;

var h = 56;

var x = 110;

var y = 200;

var opcao = 1;

var tela = 0;

var ponto = 0;

var xP = 50;

var yP = 300;

var colisao = false;

var pontos = 0;

var plano;

var imagem1;

var pro;

var x = [200, 150, 100, 50, 250, 300];

var y = [200, 150, 200, 150, 150, 200];

var cores = ["red", "blue", "green", "yellow", "pink", "gray"];

var daVez;

var proxima;

​

function setup() {

  createCanvas(400, 500);

  imagem1 = loadImage(

    "depositphotos_52460003-stock-photo-colorful-hands-raised.jpg"

  );

  pro = loadImage("WhatsApp Image 2022-01-20 at 23.52.00.jpeg");

  daVez = 0;

}

function draw() {

  background(imagem1);

  if (tela == 0) menu();

  if (tela == 1) tela2();

  if (tela == 2) tela3();

  if (tela == 3) tela4();

  if (tela == 5) tela5();

  if (tela == 6) tela6();

  if (tela == 7) tela7();

  ponto = 0;

}

​

//tela do menu

function menu() {

  fill(152, 251, 152);

  rect(xr, yr, 170, 45, 200, 116);

​

  fill(0, 0, 0);

  textSize(40);

  textFont("fantasy");

  text("Color game", 200, 150);

  textSize(26);

  textAlign(CENTER);

  fill(0, 0, 0);

  text("Bora Jogar", 200, 230);

  text("Instruções", 200, 280);

  text("Créditos", 200, 330);

}

​

//tela do jogo

function tela2() {

  textFont("fantasy");

  fill(0, 0, 0);

  textSize(35);

  text("Play with colors", 200, 90);

​

  textFont("fantasy");

  textSize(25);

  text("Pontos: " + pontos, 50, 30);

  textAlign(CENTER);

​

  textSize(20);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  text("Fase 1", 200, 120);

​

  fill(152, 251, 152);

  rect(xB, yB, 90, 30, 20, 20);

  fill(0, 0, 0);

  text("Black", 55, 302);

​

  fill(0, 0, 0);

  ellipse(xC, yC, 55, 56);

​

  if (yB > 302 || colisao == true) {

    xB = rect(xB, yB, 90, 30, 20, 20);

    yB = 0;

  }

  //colisão

  c = dist(xC, yC, xB, yB);

​

  if (c > 0 && c < 55) {

    colisao = true;

    pontos++;

  }

​

  if (pontos == 1) {

    tela = 6;

    colisao = false; 

  }

​

  if (keyCode === LEFT_ARROW) {

    xC = xC - 3;

  } else if (keyCode === RIGHT_ARROW) {

    xC = xC + 3;

  } else if (keyCode === UP_ARROW) {

    yC = yC - 3;

  } else if (keyCode === DOWN_ARROW) {

    yC = yC + 3;

  }

​

  //elipse azul

  /* fill(0,0,128)

  ellipse(150, 150, 55, 56)

​

   //elipse verde

   fill(0,255,0)

  ellipse(100,200,55,56)

​

   //elipse amarelo

   fill(255,255,0)

  ellipse(50,150,55,56)

   //elipse rosa

   fill(1255,20,147)

  ellipse(250,150,55,56)

​

   //elipse cinza

   fill(128,128,128)

  ellipse(300,200,55,56)*/

}

​

//tela de instruções

function tela3() {

  fill(0, 0, 0);

  textSize(40);

  text("Instruções", 200, 100);

​

  textFont("fantasy");

  textSize(15);

  text(

    "Instruções do jogo: Nesse jogo o intuito é aprimorar os\nconhecimentos sobre as cores e a lingua inglesa",

    190,

    140

  );

  textFont("fantasy");

  textSize(15);

  text(

    "Público: Esse jogo foi desenvolvido para as crianças do 1ºano do\nensino fundamental",

    200,

    200

  );

  textFont("fantasy");

  textSize(15);

  text(

    'Como o jogo funciona: A idéia é você levar a bolinha com a sua\ncor determinada para o nome da cor em inglês usando o teclado\ncom as setas para("Cima, Baixo, direita e esquerda")quando você\ndireciona a bolinha para o nome da sua cor correta vai\nganhando pontos',

    200,

    250

  );

  textFont("fantasy");

  textSize(15);

  text(

    "Habilidade: Saber distinguir as cores e seus nomes em inglês",

    190,

    360

  );

}

​

//tela de créditos

function tela4() {

  fill(0, 0, 0);

  textSize(40);

  textFont("fantasy");

  text("Créditos", 200, 160);

  image(pro, 15, 195, 130, 130);

​

  textFont("fantasy");

  textSize(25);

  text("Samara Kelly", 220, 220);

​

  textFont("fantasy");

  textSize(15);

  text("Função: Programadora", 218, 245);

​

  textFont("fantasy");

  textSize(15);

  text(

    "Graduanda em Ciências e Tecnologia da\nUniversidade Federal do Rio Grande do\nNorte",

    270,

    270

  );

}

​

function tela5() {

  fill(0, 0, 0);

  textSize(20);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  text("Fase 2", 170, 120);

  textFont("fantasy");

  textSize(35);

  text("Play with colors", 200, 90);

​

  fill(0, 0, 0);

  textSize(25);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  text("Red", 50, 300);

  text("Blue", 50, 360);

  text("Green", 50, 420);

  text("Yellow", 350, 300);

  text("Pink", 350, 360);

  text("Gray", 350, 420);

​

  textFont("fantasy");

  textSize(25);

  text("Pontos: " + pontos, 50, 30);

  textAlign(CENTER);

​

  if (colisao == true) {

    if (daVez < 3) {

      xP = 50;

      console.log(yP); 

      yP = yP + 60;

    } else {

      xP = 350;

      yP = 300 + (daVez - 3) * 60;

    }

    colisao = false;

  }

​

  for (i = 0; i < 6; i++) {

    //elipse vermelho

    fill(cores[i]);

    ellipse(x[i], y[i], C, h);

  }

​

  //Colisão

  c = dist(x[daVez], y[daVez], xP, yP);

  ellipse(xP, yP, 10, 10);

  if (c > 0 && c < 30) {

    colisao = true;

    pontos++;

    daVez++;

​

    if (pontos == 7) {

      tela = 7;

    }

  }

  if (keyCode === LEFT_ARROW) {

    x[daVez] = x[daVez] - 3;

  } else if (keyCode === RIGHT_ARROW) {

    x[daVez] = x[daVez] + 3;

  } else if (keyCode === UP_ARROW) {

    y[daVez] = y[daVez] - 3;

  } else if (keyCode === DOWN_ARROW) {

    y[daVez] = y[daVez] + 3;

  }

}

​

function tela6() {

  textSize(15);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  textAlign(CENTER);

  text("Parabéns você passou pra fase 2", 200, 220);

  textSize(15);

  text('Clique em "Enter" para seguir para fase 2', 200, 250);

}

​

function tela7() {

  textSize(25);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  text("Você é top!!", 130, 200);

​

  textSize(20);

  textStyle(BOLDITALIC);

  textFont("Georgia");

  text("Conseguiu passar por todas as fases", 10, 230);

}

​

function keyPressed() {

  if (tela == 0) {

    if (key == "ArrowUp" && yr > 230) {

      yr = yr - 50;

      opcao = opcao - 1;

      console.log(opcao);

    }

​

    if (key == "ArrowDown" && yr <= 280) {

      yr = yr + 50;

      opcao = opcao + 1;

      console.log(opcao);

    }

​

    if (key == "Enter") {

      tela = opcao;

    }

  }

​

  if (tela == 6) {

    if (keyCode == ENTER) {

      tela = 5;

    }

  }

  if (

    tela == 2 ||

    tela == 3 ||

    tela == 4 ||

    tela == 5 ||

    tela == 6 ||

    tela == 7 ||

    tela == 8

  ) {

    if (keyCode == ESCAPE) {

      tela = 0;

      pontos = 0;

    }

  }

}

​