Tudo bem, de volta.
Vamos continuar e começar a isso.
RG deve ser uma aplicação de jogo de adivinhação.
Eu vou fazer o arquivo h tim primeiro e o C S S e criar essa grade simples.
Então, não vamos desenhá-lo com as cores de fundo e as fontes e este pequeno
agora está aqui, vamos começar simplesmente simples com seis quadrados e dar-lhes algumas cores de fundo talvez um
pouco de espaçamento entre eles, mas não vamos faça coisas como adicionar os cantos arredondados, mas não vamos
adicionar nenhuma das animações.
O desvanecimento e o desaparecimento de tudo o que faremos é obter seis quadrados e, em seguida, adicionaremos a lógica básica de eventos
rápidos e verificaremos se você consegue a cor correta e assim por diante.
Então, primeiro precisamos dar uma conta ao arquivo que eu tenho aqui.
Eu chamo esse jogo colorido de cada vez, então vamos adicionar em nossa equipe aqui.
A placa da caldeira.
Dê-lhe um título.
Eu faço o jogo de cores.
Vamos em frente e adicione os seis quadrados.
Então vou fazê-los divs.
Cada um é um div com uma classe de quadrado e usaremos essa aula quadrada para modelá-los mais tarde.
Tudo bem, então, vamos fazer a classe div igual praça e não precisamos colocar nada dentro disso
e teremos seis desses.
E então, apenas para fazer este limpador, eu vou colocá-los todos em vez de outra div que possamos
modelar mais tarde.
Só vou chamar isso de recipiente.
Então, não vai fazer nada adiantado.
Eventualmente, vamos usá-lo para tornar o site sensível e para reduzir a grade.
Por enquanto, apenas os agruparemos para que não possamos apenas 6 quadrados flutuando.
OK, então temos nossos seis quadrados aqui.
Se abrimos isso no jogo do navegador que se aproxima dele.
Não vemos nada, por certo, por alguns motivos.
Um, mesmo que tenhamos seis divs, eles não têm. Com isso, não há margem, não há cor, então
não vemos nada.
Então, vamos começar por denominá-los basicamente.
Então, precise adicionar uma folha de estilo, então eu vou ligar à folha de estilo primeiro, que eu não criei e faça isso
um pouco maior.
Então, eu vou chamar o jogo de cores, ver SS e salvar e, em seguida, fazer esse jogo de cor do arquivo C Ss e a primeira
coisa que farei é apenas adicionar uma cor de fundo ao nosso corpo inteiro.
Até agora, a cor de fundo e a cor que vou usar é um código hexadecimal.
É 2 3 2 3 2 3 e salve, certifique-se de estar conectado.
Sim.
Então nós conseguimos a cor de fundo correta.
Em seguida, vamos em frente e começamos a modelar nossos quadrados.
Nós vamos usar a mesma estratégia que usamos para criar este site VSS para portfólio de fotografia onde
tivemos essa grade responsiva de imagens quadradas.
Eles eram todos em preto e branco.
Você pode usar a mesma idéia aqui.
Então, a maneira como vamos fazer isso é que cada um deles está dentro de um recipiente e cada
um leva até 30% desse recipiente.
Então, o recipiente só vai em frente a esses quadrados.
Não é o corpo inteiro aqui ao redor dos quadrados.
Eles ocupam 30% e então temos uma margem entre eles em todos os lados.
1. 6 6 por cento.
Então, tudo se resume a 100 por cento do recipiente.
Então, vamos fazer essa primeira praça com 30 por cento.
E se pudermos deixá-lo e dar-lhe um fundo, vamos torná-los roxos e salvar e
não vemos nada ainda.
E o motivo que está acontecendo, eu vou te mostrar se inspecionamos nossas vidas estão na página.
Eles ainda estão vazios.
O que precisamos fazer.
A última vez que tínhamos imagens e imagens tinham algum conteúdo nelas, mas essas divs estão vazias.
Então, vamos adicionar algum espaço e vamos usar o fundo do preenchimento.
Nós também poderíamos usar a parte superior do preenchimento, portanto, o fundo do preenchimento e isso também será 30 por cento.
Então, se eu atualizar.
ESTÁ BEM.
Agora temos seis quadrados, embora estejam todos em uma linha que não é o que queremos.
Queremos que estejam na mesma linha.
Então, precisamos flutuar para a esquerda, o que fizemos com a grade da imagem também.
Então flutuasse para a esquerda e salve, nós atualizamos.
E agora acabamos com esta grade maciça aqui.
Oh vá em frente e na margem para que você possa ver o que está acontecendo.
Então, vamos ter a margem 1. 6 6 por cento e economize.
Agora você pode ver nossa grade aqui e esta grade ocupa toda a tela.
Então vou mudar isso um pouco.
Nós não queremos que seja tão grande.
E o que podemos fazer é usar esse recipiente que fornecemos este recipiente ID ID.
Então, se formos o estilo de que a div com a idéia de um recipiente que selecionaríamos assim,
e podemos começar dizendo que sua largura máxima deveria ser.
E eu acho que fui para 600 pixels.
Podemos jogar com esse número.
Agora, se eu atualizar Agora você pode ver que é muito menor.
Então é parte disso.
E então, o que também é Center.
Então, vamos 2 margens.
0 auto.
Lembre-se deste truque, a margem zero na parte superior e inferior do recipiente e auto na esquerda e na
direita fará com que seja do mesmo tamanho em ambos os lados.
E agora temos essa grade central agradável.
Tudo bem.
que está no nosso H-1, então vou ter um H1 aqui e só vai dizer o grande R.
E vamos fazer mais uma coisa G. Seja um jogo de cores e nós simplesmente começaremos assim.
E se refrescar, é claro, é realmente difícil de ver.
Então, vamos torná-lo branco de cor H-1 e salvar.
E vamos começar com isso.
Então, agora vamos usar alguns javascript.
Vamos configurar javascript para dar a cada uma dessas cores diferentes.
Então, vamos fazer um novo arquivo e chamaremos o jogo de cores.
J. S. e salve.
E, como eu sempre quero fazer, vamos adicionar em nosso alerta que diz que está conectado.
Agora vamos adicionar o script na fonte, igual ao jogo colorido.
Sim, salve a atualização da página e recebemos nosso alerta conectado.
OK, então eu vou redimensionar a janela lá.
Agora vamos adicionar o código para dar-lhes cores diferentes.
Então, no final, o resultado no final do jogo.
Toda vez que a página carrega ele escolhe seis cores aleatórias e então atribui cada cor a uma das divs.
o aspecto randomizado e apenas vamos atribuir seis cores que são sempre as mesmas.
Vamos começar com
E então, vamos seguir em frente para aleitá-los.
Então, vamos ao meu jogo de cores Sim e vou começar por fazer uma lista de cores e eu apenas as
chamarei de cores.
É uma matriz.
E lembre-se em nosso produto final, esta será uma lista aleatória de cores.
Por enquanto, eu vou apenas adicionar alguns dos meus.
Então G-B e eu começamos com todo o vermelho.
Então, 2 5 5 0 0 e apenas para tornar isso legível para você, eu vou fazer isso tudo em linhas separadas.
Então, teremos seis desses.
E o primeiro será todo vermelho e então teremos outro que é todo vermelho e todo verde
que faria amarelo.
E então o próximo será 0 vermelho e todo verde.
E então o próximo depois disso será zero vermelho ou verde e todo azul e depois também o fará.
Então você lê 0 verde 255 azul e então vamos fazer 255 vermelho 0 verde 255 azul e isso nos dará uma série
de seis cores como cordas.
E então, o que queremos fazer é selecionar todos os seis quadrados que os atravessam e depois atribuir uma
dessas cores ao fundo de cada uma.
Então, para percorrer primeiro, precisamos selecionar até agora e chamaremos de quadrados iguais ao documento e temos
muitas opções aqui.
Eu vou usar um seletor de consulta tudo.
Então eu tenho certeza de obter todos os seis deles, em vez de apenas o primeiro.
E vamos selecionar com base no quadrado da classe.
Se tivéssemos acabado de fazer, lembre-se de que temos um container div e não queremos selecionar aquele.
Nós só queremos essas seis divisões quadradas tão quadradas e, então, vamos percorrer quatro var igual a zero.
Eu menos do que o tamanho dos quadrados e eu mais plus, em vez de aqui, então, nós diremos quadrados que eu ponto estilo ponto de fundo
é igual e esta é a parte interessante que vamos levar esse olho e usá-lo para acessar
as cores.
Ou é o Colt, estou aqui com uma pequena correção que estou adicionando após o fato.
Apenas uma nota rápida.
É muito preferível preferível à sua cor de fundo do estilo, de modo a uma cor de fundo uma palavra com uma maiúscula
e em vez de um estilo ponto de fundo que é o que estou usando neste vídeo.
Então, qualquer vez que você vê o estilo de fundo, mude para a cor de fundo.
E o motivo disso é que ele funcionará em todos os navegadores no momento, mas o
plano de fundo não funciona no Firefox, portanto, ele funciona tecnicamente com estilo.
Esse pano de fundo funcionará no Chrome, por exemplo, é bom e o jogo funciona, mas eu tenho recebido
muitas perguntas sobre o que está acontecendo no Firefox e esta é realmente a principal cor do fundo de
estilo culpado.
Além disso, eu gostaria de pensar que Del Anderson, um dos alunos nos fóruns de
discussão, por apontar isso mais recentemente, vou voltar à codificação.
Então, o que estamos fazendo, temos seis quadrados e nosso olho vai passar de 0 1 2 3 4 5 e isso irá
percorrer cada quadrado.
E então, quando eu chegar ao primeiro quadrado eu vou pegar zero e dar-lhe a cor de fundo das
cores zero que está aqui.
Então, isso seria certo.
E então continuamos e tomamos um para o segundo div e nós damos a segunda cor com índice de 1
e continuamos fazendo isso até chegar ao fim.
divs estão na página é a ordem em que eles serão coloridos usando essas cores da matriz.
Então, estamos basicamente indo para que os
E se salvamos as atualizações, você pode ver nossas seis cores básicas.
Então, temos magenta azul amarelo cian verde e amarelo.
Então está tudo bem por enquanto.
Nós nos concentraremos em aleatorizar cores mais tarde.
Mas, como uma prévia, embora precisemos fazer é gerar três números, três números diferentes de
0 a 255 e depois os combinamos.
Então, são apenas três canais diferentes, todos randomizados.
E então nós os transformamos em uma grande corda com r. g B e parênteses à sua volta.
Mas agora iremos com essas cores.
A próxima coisa que precisamos fazer é toda vez que a página é carregada.
Eu mostro você aqui não só são escolhidas seis cores.
Uma dessas cores é selecionada para ser o objetivo ou para ser a cor que estamos procurando.
Então, neste caso, esta é uma cor que é escolhida.
Então, vamos fazer isso também e vamos começar a codificar o Portus e, em seguida, o
randomizaremos depois.
Então, vamos começar dizendo que a cor do ouro é ciano.
Então esse é o quarto índice de cores de três.
Então, tudo bem, a variável aqui var escolhida é igual ao índice de matrizes de cores 3.
E isso irá escolher Suyin ou essa cor aqui R. G. B.
0 2 5 5 2 5 5 e é uma seqüência de caracteres, lembre-se, então, o que queríamos fazer é atualizar nossa página para que ela
diga que aqui mesmo, como nós, temos aqui.
Obviamente, não é denominado da mesma forma, mas queremos que diga R. G. B.
para ele um pouco se você puder pensar no jogo do marcador onde tivemos um H1 e estamos mudando o.
E então entre parênteses 0 2 5 5 5 5 para fazer isso, teremos que mudar ou
Jogar um jogador dois pontos inicialmente.
Nós apenas tivemos um avião H-1 E quando atualizamos, ele substituiu automaticamente tudo o resto que estava
lá.
Mas não queremos fazer isso.
Queremos manter o texto o grande e o jogo colorido e a nossa cor só vai aqui, mas não queremos
ter um H-1 ou algo separado, porque esses irão em linhas separadas.
Então, vamos usar um intervalo exatamente como fizemos no jogo de pontuação e apenas adicione R. G. como um espaço reservado.
estar lá
Então, nada parece diferente, mas se inspecionamos.
Você pode ver que agora temos um espaço que significa que você pode facilmente selecioná-lo e manipular o texto.
E nós vamos dar uma idéia apenas para torná-lo ainda mais fácil.
Então, damos isso.
E vamos chamá-lo de exibição em cores.
Então, iremos para o nosso javascript e selecione isso.
exibição em cores é igual ao documento e nós vamos obter o elemento por identificação apenas para o elemento de criança de variedade por ID.
Até agora, a
E foi exibição em cores.
E vamos economizar e tornar isso um pouco maior.
Salve o arquivo e então queremos atualizar a exibição de cores para que ele diga essa cor que escolhemos.
Então, isso vai ser o conteúdo de texto de exibição de cores é igual a escolha é cor exatamente assim e irá atualizar.
E agora acabamos com nossa cor aqui.
Ótimo.
Vamos adicionar a lógica agora para os eventos de clique.
Então, quando eu clicar em um desses quadrados, queremos executar algum código que vai descobrir qual cor
do quadrado é que clicamos.
E uma vez que temos essa cor, vamos compará-la à cor do pix.
Este aqui mesmo.
E se eles são diferentes Vamos mudar a cor de fundo desse quadrado para que ele vá
para a mesma cor que o fundo do corpo.
E se eles são o mesmo, então isso significa que o jogador tem um.
E precisamos fazer algumas coisas especiais.
E se eles são diferentes, isso significa que um jogador escolheu a cor errada e também terá que lidar com
isso para começar.
Vamos adicionar apenas um manipulador de evento de simples clique que apenas alerta quando clicamos.
Então, vamos adicionar um manipulador de eventos a cada um dos quadrados para que possamos usar o
mesmo loop que temos.
Então, vou adicionar um comentário aqui, adicione cores iniciais aos quadrados e, em seguida, a próxima parte será dois
ouvintes do clique em dois quadrados.
Então, outro desses quadrados, eu dot, adiciono ouvinte de eventos.
É hora de clicar e nossa função de retorno de chamada.
Tudo o que faremos é alertar bastante um quadrado e ter certeza de que todos os seis deles nos alertarão.
Clique com o botão direito do mouse no quadrado.
Tudo bem, parece que todos eles funcionam bem como eles precisam.
Então agora o que precisamos fazer é pegar cor do quadrado clicado e, em seguida, comparar cores para escolher cores.
A cor da imagem variável que definimos aparece, então vamos começar a obter essa cor.
Lembre-se que podemos usar isso que se refere ao item que foi clicado no quadrado.
Então podemos dizer isso esse estilo de fundo.
E vamos fazer outro alerta aqui e vamos ver o que recebemos.
Então, se eu clicar no vermelho, ele me alerta.
RG B 2 5 5 0 0 e se eu clicar em atribuir um R G B 0 2 5 5 2 5 5.
Então, isso está funcionando.
Então, o que faremos agora é salvar isso em uma variável, vamos apenas chamar isso de cor clicada assim.
E então, vamos escrever uma declaração IF para comparar as cores de Quick, então, se a cor
for tripla igual, escolha a cor de uma boa rima lá se for esse o caso, alertaremos corretamente.
E se eles não combinam com ou então, alertaremos o erro.
Vamos dar um tiro refrescar.
Eu clique nisso.
Errado.
E o verdadeiro teste.
Eu clico no lado direito que diz correto.
está funcionando mesmo que não possamos ter nenhuma das cores aleatórias no que temos é uma série de
seis cores que estão codificadas e que estamos atribuindo uma cor a cada quadrado e depois estamos escolhendo.
Portanto, nossa lógica
Neste caso ciano e isso será aleatório, é claro, mas estamos escolhendo uma cor que é a nossa resposta.
E então, estamos adicionando um ouvinte de eventos a cada quadrado quando o usuário clica nesse quadrado ou em qualquer quadrado.
Comparamos a cor do quadrado dado com a cor da imagem se combinarem.
Nós fazemos uma coisa.
Se eles não combinam, fazemos outra coisa no próximo vídeo, vamos falar sobre o que realmente
fazemos se combinarem.
E o que fazemos se não combinarem.