1
00:00:00,120 --> 00:00:00,390
Tudo bem.

2
00:00:00,390 --> 00:00:01,190
Bem vindo de volta.

3
00:00:01,350 --> 00:00:06,450
Nos próximos vídeos, vamos nos concentrar na construção de uma aplicação substancial, algo que tem muitas

4
00:00:06,450 --> 00:00:12,570
peças em movimento mais html mais CSSA muito estilo e, o mais importante, muita população e evento dominante, o

5
00:00:12,570 --> 00:00:18,260
que vamos construir é uma R. G. Seja um jogo de adivinhação colorido.

6
00:00:18,510 --> 00:00:23,820
Portanto, não é apenas uma ótima demonstração de como todas essas peças se encaixam, mas também é uma ferramenta

7
00:00:23,820 --> 00:00:24,980
muito agradável para você.

8
00:00:24,990 --> 00:00:30,510
E para você praticar R. G. Seja cores porque o sistema de cores RGV é um pouco insensível no início.

9
00:00:30,810 --> 00:00:35,300
É muito diferente da maioria dos sistemas de cores com os quais as pessoas costumam trabalhar.

10
00:00:35,310 --> 00:00:36,860
Então, deixe-me mostrar-lhe como isso funciona.

11
00:00:36,870 --> 00:00:40,330
Carregamos a página e obtemos seis cores aleatórias aqui.

12
00:00:40,530 --> 00:00:41,750
Estes são sempre diferentes.

13
00:00:41,850 --> 00:00:47,150
E uma dessas cores está listada aqui o nome da cor em nosso GP.

14
00:00:47,250 --> 00:00:50,330
E nosso trabalho é escolher qual deles.

15
00:00:50,340 --> 00:00:57,390
Lembre-se de que existem três canais de vermelho verde e azul e cada um varia de 0 a 255 e tudo o que precisamos

16
00:00:57,390 --> 00:01:01,020
são aquelas três cores para fazer todas as cores que poderíamos desejar.

17
00:01:01,170 --> 00:01:07,940
Preto branco e amarelo laranja roxo, todos esses são realmente feitos combinando vermelho verde e azul.

18
00:01:08,340 --> 00:01:09,410
Então, se olharmos.

19
00:01:09,570 --> 00:01:13,850
Tenho Wikipedia aberta, podemos ver como a mistura de cores aditivas funciona neste diagrama.

20
00:01:13,920 --> 00:01:21,330
Então, temos vermelho verde e azul e para amarelar nós realmente combinamos vermelho e verde, o que talvez seja um

21
00:01:21,330 --> 00:01:24,650
pouco diferente do que você espera que faça magenta.

22
00:01:25,170 --> 00:01:26,730
É azul e vermelho.

23
00:01:26,940 --> 00:01:31,340
E para fazer Cyan é de cor azul claro, é verde e azul.

24
00:01:31,470 --> 00:01:34,810
E, finalmente, fazer branco combinamos os três.

25
00:01:34,810 --> 00:01:38,170
Então, aqui está outro diagrama feito aqui que torna um pouco mais fácil.

26
00:01:38,190 --> 00:01:44,850
Nós temos vermelho verde e azul e, em seguida, magenta amarelo ciano e branco e então nenhuma cor é preta.

27
00:01:45,000 --> 00:01:49,640
Então, se voltarmos, podemos usar isso para tentar descobrir de que cor é isso.

28
00:01:49,920 --> 00:01:54,860
Então, se olharmos, temos um monte de vermelho quase todo vermelho.

29
00:01:55,140 --> 00:02:00,660
Até 255 por isso quase há muito verde e muito pouco azul.

30
00:02:00,840 --> 00:02:06,960
Então, um monte de vermelho em um monte de verde se você se lembrar deste gráfico vermelho e verde faz amarelo.

31
00:02:07,260 --> 00:02:11,670
Então, se tivéssemos 255 vermelho 255 verde, ficaria assim.

32
00:02:11,970 --> 00:02:16,290
Mas temos menos de 255 por isso não vai ser tão brilhante.

33
00:02:16,320 --> 00:02:17,440
Então vamos voltar.

34
00:02:17,700 --> 00:02:22,860
Espero que você possa saber qual é a resposta correta baseada no diagrama que acabamos de ver,

35
00:02:22,860 --> 00:02:25,790
mas acho que algo errado primeiro mostra o que acontece.

36
00:02:25,800 --> 00:02:27,450
Então, este está definitivamente errado.

37
00:02:27,450 --> 00:02:29,970
Isso é todo vermelho e muito pouco verde.

38
00:02:30,360 --> 00:02:33,900
Eu clico e ele vai embora e isso me diz que tente novamente.

39
00:02:33,900 --> 00:02:36,750
Então, vamos adivinhar alguns errados como esse.

40
00:02:36,750 --> 00:02:37,690
Este está errado.

41
00:02:37,860 --> 00:02:38,770
Este está errado.

42
00:02:38,990 --> 00:02:39,270
ESTÁ BEM.

43
00:02:39,270 --> 00:02:41,000
O conhecimento adivinha o correto.

44
00:02:41,130 --> 00:02:43,140
Vermelho e verde vai ser muito amarelo.

45
00:02:43,320 --> 00:02:44,370
Então está correto.

46
00:02:44,520 --> 00:02:48,120
Vou clicar e perceber que todos os seis quadrados voltam.

47
00:02:48,150 --> 00:02:53,080
Todos eles mudam para a cor correta e nosso plano de fundo aparece mudanças para ser a cor correta também.

48
00:02:53,760 --> 00:02:59,070
uma mensagem que diz correta e se eu quiser, posso clicar em jogar novamente e isso irá gerar novas cores.

49
00:02:59,070 --> 00:03:00,000
E para obter

50
00:03:00,210 --> 00:03:05,680
Minha tela volta para o azul aqui e eu tenho seis novos quadrados e uma nova cor aleatória aqui.

51
00:03:06,270 --> 00:03:08,870
E então o que eu também posso fazer é mudar a dificuldade.

52
00:03:08,910 --> 00:03:12,690
Então, se eu quiser mais fácil, eu só tenho três cores para escolher.

53
00:03:12,810 --> 00:03:18,990
Isso pode ser um pouco desafiador quando todos nós atualizamos algumas vezes, como aqui, temos dois tons de

54
00:03:18,990 --> 00:03:20,510
azul que são muito parecidos.

55
00:03:20,520 --> 00:03:25,080
Agora, depois de jogar este jogo por um tempo, você deve determinar qual é o correto com

56
00:03:25,080 --> 00:03:27,980
base nessas três máscaras rosa ou essas duas máscaras azuis.

57
00:03:28,020 --> 00:03:29,220
E esse é realmente o ponto aqui.

58
00:03:29,340 --> 00:03:32,520
Mas para começar, você pode querer apenas duas cores para escolher.

59
00:03:32,520 --> 00:03:33,420
Então, aqui está outro.

60
00:03:33,510 --> 00:03:35,290
Vamos fazer um pouco de vermelho.

61
00:03:35,310 --> 00:03:36,470
Quase nenhum vermelho.

62
00:03:36,690 --> 00:03:37,800
Um pouco verde.

63
00:03:37,830 --> 00:03:38,560
Não muito.

64
00:03:38,670 --> 00:03:42,890
E muito azul, claro, vai nos dar muito puro azul.

65
00:03:43,380 --> 00:03:44,690
Vamos voltar ao modo rígido.

66
00:03:44,700 --> 00:03:50,760
Um outro ponto que vou mostrar aqui é que é um site responsivo para que eu possa redimensioná-lo e

67
00:03:50,760 --> 00:03:52,830
meus quadrados se movem para o meio.

68
00:03:52,830 --> 00:03:54,870
Assista aqui a esta pequena barra de naff.

69
00:03:54,870 --> 00:03:59,060
O espaço entre eles nos lados aumentará e diminuirá.

70
00:03:59,130 --> 00:04:03,290
E se eu tiver uma mensagem, então vamos clicar em um desses. Isso está errado.

71
00:04:03,780 --> 00:04:04,880
Eu tentei novamente.

72
00:04:05,100 --> 00:04:08,140
Observe como estes se aproximam.

73
00:04:08,820 --> 00:04:11,950
E então eu posso separá-los e conseguimos um pouco mais de espaço lá.

74
00:04:12,270 --> 00:04:16,970
Então, para concluir antes de começar a criar, eu só quero resumir algumas coisas.

75
00:04:17,220 --> 00:04:22,260
Será um aplicativo bastante grande para ser muito javascript, cerca de uma centena de linhas

76
00:04:22,260 --> 00:04:25,130
ish, um pouco de sucesso, e alguns envelheceram também.

77
00:04:25,200 --> 00:04:29,580
Nós vamos começar um pouco de ossos nus com muito pouco estilo e nós vamos apenas

78
00:04:29,580 --> 00:04:33,030
começar a funcionalidade e depois iremos e adicionamos algum estilo em cima disso.

79
00:04:33,030 --> 00:04:34,160
A outra coisa.

80
00:04:34,530 --> 00:04:40,110
E então, uma vez que terminamos, espero que você possa usar isso com bastante frequência para melhorar sua R. G. algumas das minhas habilidades RGV.

81
00:04:40,110 --> 00:04:45,820
As habilidades mesmo apenas fazendo isso para o curso me ajudaram um pouco a desenvolver

82
00:04:45,870 --> 00:04:49,280
Eu notei que eu costumo confiar muito em máquinas de seleção de cores RGV.

83
00:04:49,410 --> 00:04:54,680
Então, isso é ótimo para mim também para obter alguma prática e lembrar-me de como o RGV funciona.

84
00:04:55,080 --> 00:04:56,970
Então, o próximo vídeo, vamos começar a escrever um código