Projeto JavaScript Aprenda a criar um jogo de memória e mais | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Projeto JavaScript Aprenda a criar um jogo de memória e mais

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

18 aulas (1 h 26 min)
    • 1. VÍDEO PROMOCIONAL

      1:02
    • 2. Array de configuração de 2 JavaScript

      2:55
    • 3. 1 Introdução de curso de jogo JavaScript

      2:27
    • 4. 3 funções de jogo JavaScript

      4:12
    • 5. 5 jogo JavaScript innerHTML

      4:56
    • 6. 6 ararys de concat de jogo JavaScript

      5:47
    • 7. Jogo de 7 JavaScript onclick

      3:50
    • 8. 8 Interruptor de imagem de jogo JavaScript passar este documento

      3:52
    • 9. Limites de abusos de jogo JavaScript 10

      4:00
    • 10. Verificação de comparação de azulejos de jogo JavaScript 12

      4:03
    • 11. 13 Jogo JavaScript Definir id flip back

      5:34
    • 12. 14 Jogo JavaScript remover duplo clique

      6:02
    • 13. Intervalos de compensação de configuração de jogo JavaScript

      2:28
    • 14. Jogo de fim de pontuação de jogo JavaScript 18

      3:40
    • 15. 19 Game Listener reiniciar

      5:58
    • 16. 21 usuário de mensagem de jogo JavaScript

      10:17
    • 17. Jogo JavaScript 22 Adicionando um temporizador e pontuação

      12:05
    • 18. Atualização de jogo de memória JavaScript 25

      2:41
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

358

Estudantes

--

Sobre este curso

Projeto JavaScript Aprenda a criar um jogo de memória e mais

Passo a Passo como criar seu próprio jogo usando JavaScript. Veja como o projeto de construção de aplicativos JavaScript funciona

Uma das melhores maneiras de aprender é trabalhar em um projeto. Começamos com uma página em branco e construímos o aplicativo passo a passo. Todos os arquivos de origem estão incluídos.

Você quer aprender JavaScript trabalhando em um projeto real?

Mostramos como usar o JavaScript para criar um jogo interativo, desde a criação do quadro de jogo até mensagens, texto, temporizadores e configuração de jogo.

Nós construímos este jogo na bootstrap, mostramos o CSS HTML e JavaScript.

Aprenda a criar seu próprio JOGO DE JavaScript!!

Neste curso, mostramos como adicionar funcionalidade JavaScript ao criar projetos e usar JavaScript para alcançar seus objetivos.

Nós projetamos este curso para otimizar a codificação de JavaScript praticante.

AMOSTRAS DE CÓDIGO INCLUÍDAS!
IMPLEMENTAÇÃO de CÓDIGO DE
EXERCISESCODE de

PRACTICE o código após cada lição de vídeo. Copie e cole o código que usamos no curso e TENTAR SER VOCÊ MESMO.

Tudo o que você precisa aprender sobre JavaScript é fornecido neste curso.

As lições rápidas são bem direitas aos arquivos de
pointsource baixáveis para trabalhar
the e lessons30 de curso de
garantia de reembolso de
30 dias adicionado regularmente nome
confiável na educação desde
2002full HD fácil de ler
codingLearn como o Javascript funciona e seus conceitos fundamentais quando se trata de criar jogos e projetos interativos. Aprenda a criar seu próprio código de Javascript para criar seu próprio jogo de memória JavaScript

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. VÍDEO PROMOCIONAL: dentro deste curso JavaScript, vamos estar trabalhando em um mundo real. Vamos construir uma memória, começando com uma página em branco. Nós vamos adicionar CSS, html e JavaScript, a fim de construir uma memória totalmente funcional veio até o final do curso ao longo do curso. Vamos explicar passo a passo, por que estamos adicionando o JavaScript e como ele vai funcionar dentro do jogo. E no final do curso, você deve ser capaz de construir sua própria equipe de memória e usar a funcionalidade que você aprendeu para criar e adicionar ao seu próprio trabalho. Trabalhar em um projeto real do início ao fim é uma ótima maneira de aprender empregos. Estamos desenvolvendo cursos online desde 2000 e dois. Também incluímos todos os arquivos de origem e recursos que você precisa conhecer e ter para começar. Você está pronto para aprender? Vamos começar 2. Array de configuração de 2 JavaScript: Então agora estamos começando com apenas uma página bancária em branco, então não há nada na página ainda. Nós configuramos nossos links de bootstrap ou links para o bootstrap Cdn porque vamos usar bootstrap para enquadrar este projeto e, dentro do curso, vamos mostrar-lhe como desenvolver um jogo JavaScript. Também estamos nos ligando para o estilo aqui, e vamos cobrir o JavaScript na página também. Claro, você sempre pode vincular um arquivo de origem. Mas só para que não tenhamos que fazer é muito clicar para frente e para trás. E eu posso simplesmente rolar de volta para o resto do conteúdo HTML e mostrar como estamos conectando o conteúdo HTML ao JavaScript criando essa interatividade com o JavaScript. E uma das primeiras coisas que precisamos fazer para configurar nosso jogo é ter algumas imagens lá dentro. Então eu encontrei algumas imagens no meu computador e, na verdade, este ar vai ser mosaicos de imagens de cursos reais que eu tenho então eu vou apenas usá-los e eu encontrei este outro cara feliz. Então eu vou usar esse cara para o fundo do azulejo. Então estas são as imagens que vou usar. E, é claro, quando você está configurando este jogo em seu computador, você pode usar quaisquer imagens que estão disponíveis para você. E então uma das primeiras coisas que estavam indo para fazer é que vamos começar configurando essa matriz com todas as imagens para que possamos conter os nomes de imagens em uma matriz. Então nós vamos apenas ir variável e vamos chamá-lo de nome do bloco. Somos imagens de mosaico e iguais, e não vamos realmente definir o caminho das imagens porque queremos ter a capacidade dinâmica de atualizar os caminhos conforme necessário. Então vamos chamá-los de telha um J-peg vírgula. E é assim que você configura em um Re e JavaScript. Então esta matriz vai conter todos esses nomes diferentes que temos para as imagens. Mas é rapidamente terminado aqueles acima, e eu vou console, logout minha matriz e vamos estar usando log console bem um pouco dentro deste tutorial. Então, e também o navegador que vamos usar vai ser cromado, e ele tem seu console aqui. Então, quando o Cônsul os desligou, vemos que obtemos nossa lista de todos os nossos itens, e estes são consistentes com os nomes de imagem que temos disponíveis para nós que vamos usar neste jogo. 3. 1 Introdução de curso de jogo JavaScript: Bem-vindo ao nosso tutorial em JavaScript. Dentro deste curso, vamos passar por tudo o que você precisa saber para construir um jogo JavaScript . Que melhor maneira de praticar JavaScript do que construir um divertido jogo de memória? Jogos de memória são muito populares e muitas das funcionalidades que vamos usar neste curso. E dentro deste jogo, build pode ser usado em outros projetos JavaScript. E é por isso que trabalhar com projetos JavaScript é uma ótima maneira de praticar e aprender mais sobre JavaScript. Meu nome é Lawrence, e eu sou um desenvolvedor web por mais de 14 anos, e eu vou compartilhar meu conhecimento com você ia começar com, ah página web em branco. E vamos construir todas as funções, funções e funcionalidades do JavaScript para alcançar o nosso jogo JavaScript. À medida que passamos por toda essa funcionalidade diferente que será necessária para o jogo , também vamos falar sobre o JavaScript e comentar sobre o que ele pode fazer. E há também vários componentes que você pode tomar e reutilizar dentro de seus próprios projetos também . Todos os arquivos fonte serão incluídos. Por isso, é incentivado que você trabalhe junto com seu próprio editor ou editor não online, onde você pode praticar o JavaScript como você percorre o curso após cada seção ou seção de palestras. Nós vamos incluir uma dessas funções ou alguns dos códigos que falamos dentro da palestra. E novamente, será encorajado que você pegue o código, trabalhe com o código e teste as várias funcionalidades que temos discutido na palestra. E no final do projeto, você será capaz de construir um jogo como este com funcionalidade completa, onde temos nosso temporizador no topo. Temos mensagens, Doc e a partir do jogo de volta para o usuário. E, em seguida, também a capacidade de reiniciar o jogo e jogar o jogo uma e outra vez. Volte novamente ao nosso curso de construção de jogos de memória JavaScript. 4. 3 funções de jogo JavaScript: Vou continuar a preparar o nosso jogo. Então nós vamos criar um cérebro, seu ativo e nós vamos apenas dar-lhe o I d. tabuleiro de jogo. E é aqui que vamos montar o jogo dentro do cadáver. E a maneira que queremos fazer isso é que queremos que todas essas peças sejam carregadas dinamicamente no tabuleiro de jogo. Então, toda vez que você reiniciar o jogo, você não vai realmente saber onde eles estão posicionados. Eso Nós vamos fazer isso carregando dinamicamente o código dentro com isso, usando JavaScript, usando JavaScript, carregando isso para o HTML, e nós também vamos para ir em frente e criar uma função que nós vamos apenas chamar função começar o jogo, E então esta vai ser a função que vai iniciar o jogo para começar, e vai configurar o nosso nós vamos ter todos esses elementos aqui ao iniciar o jogo. Então vamos primeiro. O que precisamos fazer é jogar. Então, toda vez que o jogo está começando, sempre que alguém clica para iniciar o jogo, temos que criar um novo tabuleiro de jogo. Então, a melhor maneira de fazer o loop. Todos esses itens no raio é que vamos fazer quatro vidas normais, então vamos configurar nossa variável. Ele vai chamá-lo de I. Então eu defini para zero então enquanto eu é menor ou igual a, e é aqui que nós vamos obter realmente o comprimento do re. Então, esta é uma função dentro JavaScript onde você pode fazer lista o nome A re e comprimento. Eu estava vendo lá que Dreamweaver está nos dando essa sugestão lá. Então vamos terminar esse loop, então vamos incrementar por um, e criamos uma marca que você funciona para exibir as imagens porque não queremos que nossas funções fiquem muito complicadas. E queremos realmente tentar quebrar toda essa funcionalidade. Então nós vamos ter outro chamado imagem de exibição, e de lá vamos passar o valor fora I porque aqui nós vamos obter valor em qualquer lugar de zero todo o caminho até seis. E na verdade, nós precisamos fazer mais um ajuste aqui porque nós precisamos realmente fazer cada um aparecer duas vezes então eu vou apenas adicionar o comprimento e eu vou multiplicá-lo por dois. Então eu vou pegar um número todo de zero todo o caminho até 11 para todos os itens dentro do Saray Times 2. E então quando eu for para exibir a imagem e talvez pudéssemos apenas fazer o console logout por enquanto, apenas para ter certeza de que tudo está funcionando de acordo com a maneira que queremos que funcione. Voltando para a página, vamos atualizar isso. E, na verdade, precisamos iniciar essa função. Então eu só vou fazer, começar o jogo lá e voltar para fora e iniciá-lo, e nós podemos ver que nós temos todo o caminho de zero todo o caminho até 12. E então eu tenho que fazer mais um pequeno ajuste aqui, então eu vou apenas fazer menos um e voltar para fora. Atualize-o apenas para ter certeza de que estamos contando para todos os itens dentro da corrida ou fazendo 012345 até o fim. Então agora vou voltar para cá. Então nós temos todos esses números incrementais todo o caminho até I ou de zero todo o caminho até contabilizar todos os valores que vamos ter dentro desta matriz vezes, também, porque nós queremos encontrar pares correspondentes. 5. 5 jogo JavaScript innerHTML: Então agora vamos usar o Dom um pouco, e a primeira coisa que queremos fazer quando iniciarmos o jogo é realmente queremos limpar qualquer conteúdo que esteja disponível dentro do tabuleiro de jogo. Então vai fazer um jogo claro para ele. E a maneira que nós vamos fazer isso é que nós vamos obter este elemento por D e em seguida, nós vamos apenas fazer o HTML interno e nós vamos apenas esclarecer isso como nada como em branco. Então tudo o que estamos fazendo é obter elemento por I d. Nós estamos identificando que eu d e nós estamos limpando todo esse html interno e talvez , na verdade uma maneira melhor é realmente identificar este elemento porque nós vamos estar usando isso sobre , e mais uma vez. Então nós vamos realmente fazer configurar uma variável para ele, a fim de ser capaz de acessá-lo um pouco mais fácil. Então, tudo o que fizemos aqui é que eu adicionei algum conteúdo lá apenas para mostrar a vocês que realmente vai limpar isso. Eu criei um tabuleiro de jogo e documento feito, obter elemento por I D e pegou esse tabuleiro de jogo e agora eu posso usá-lo onde Um formato muito mais simples e muito mais simples onde Basta fazer tabuleiro de jogo ponto oito html interno eso também aqui eu vou fazer em um pendente do conteúdo em que interior HTML eso A maneira que nós vamos fazer isso é que vamos apenas fazer Ah, mais Então nós vamos fazer tabuleiro de jogo em seu HTML e vamos fazer isso mais iguais e aqui vamos definir em algum novo conteúdo dentro de sua Planeta. Apenas faça div. E eu mantenho isso muito simples por agora, onde eu vou apenas configurar a div lá e fechar essa definição e nós vamos apenas ver como isso se parece. Então nós realmente obter um monte de dibs e é apenas listado os números eso Queremos fazer um pouco de styling lá porque estamos usando bootstraps. Então, você quer tirar proveito da capacidade de bootstrap e do sistema de grade? Assim, a forma como o sistema de grade funciona para bootstrap é que você pode definir há uma grade de 12 e você pode definir várias classes como esta. Então, se eu quisesse fazer em telas médias. Eu quero ser quatro e talvez eu queira fazer ainda menor na tela extra pequena. Só te mostro como isso parece. Então, quando eu atualizá-lo, vemos que temos esse sistema de grade e o que eu redimensioná-lo. Então vai encolher lá embaixo. No lado menor, eso vemos que obtemos todos esses números e estes essencialmente vão ser as células com as quais vamos trabalhar. E então agora vamos ter que adicionar algum estilo adicional a essas células para realmente fazê-las sair . E talvez o que eu faça esteja aqui. Vou apenas adicionar em estilo e fechá-lo para que ainda tenhamos tudo em uma página. Normalmente, eu iria apenas ligar para ele, mas porque estamos trabalhando com, hum, dentro deste curso, eu só quero manter tudo em uma única página. Então vamos chamar isso de algo como azulejo ou jogo. Então eu criei um cérebro que você classe lá e, em seguida, aqui dentro, eu vou fazer alguma coisa. Vota a altura. Eu bacon definir em 400 fotos e então nós podemos. Podemos sempre atualizar isso mais tarde. E só para mostrar que é assim que está configurando o tabuleiro de jogo para nós. E talvez outra coisa que queremos fazer é que queremos apenas isso para ser três, e isso para ser força que nós temos mais peças dentro do tabuleiro de jogo e talvez nós não queremos ir tão grande, colocar para fora 200 apenas uma fronteira lá. Então você vai para uma fronteira de bloco e nós vamos fazer uma escolha realmente sólida e apenas ver como isso é agora. Então veja que estamos começando a obter esse tabuleiro de jogo. Está começando a se configurar lá, e na próxima lição, vamos estar prontos para começar a construir esses blocos e torná-los clicáveis e tornar este jogo realmente interativo e fazer algo 6. 6 ararys de concat de jogo JavaScript: Então, dentro desta lição, vamos falar sobre configurar em um raio uma nova matriz. Mas desta vez vamos ter uma solução. Então vamos chamá-lo de solução para Ray, e vamos tê-lo igual às imagens de azulejos. E nós vamos chegar Katyn oito, na verdade com ele mesmo. Então, quando você faz Kam Katyn ating, você está realmente juntando adega a outra. Então, se tivéssemos dois Aries separados, podemos concordar. Katyn oito, eles são criados juntos. Mas uma vez que só temos um array e queremos ter duplicatas para cada item individual dentro desse array, então vamos poder Katyn comê-los juntos. Então nós vamos ter essencialmente Honore com todos esses itens desta taxa original, mas nós vamos tê-lo duas vezes. E agora podemos realmente fazer isso onde podemos eliminar essa multiplicação de dois e agora devemos realmente consolar. Log isso para fora. Vou remover este aqui, e eu tinha um console. La cabra. matrizes de solução que sabemos o quê? Isso o quê? O conteúdo daquele vai voltar para lá. Bem, aqui nós vemos que esta é a nossa matriz de soluções aqui no lado direito. Agora que construímos o Solucionário, vamos precisar de uma maneira de aleatorizá-lo e embaralhar a chuva. Então, infelizmente, com JavaScript, não há solução integrada para parar Hillary. Então eu tenho esta função útil onde podemos fazer em um shuffle re. Então, essencialmente, ele vai levar nessa matriz. Vai verificar o comprimento menos um. E então ele vai fazer um par de variáveis aqui que nós vamos trabalhar dentro de sua taxa e vai fazer um plano, uh, uh, matemática chão matemática aleatório. Ele vai multiplicá-lo por C mais um eso Aqui, vemos que estamos configurando esse valor de ver é o comprimento D menos um eso aqui, estamos apenas fazendo mais um. E então, basicamente, isso é contagem regressiva e loop para baixo a partir do comprimento da taxa decrescente. E essencialmente está retornando uma versão embaralhada da chuva. Então também por aqui. Então, a fim de usar isso, tudo o que temos que fazer é fazer aquele solutário colocar na ordem embaralhada. E aqui vamos fazer a matriz de soluções novamente. Apenas você pode ser capaz de ver que ele está realmente embaralhando. E é aleatório a ordem dos itens em seu caminho. Então, basicamente, se quisermos exibir todas essas imagens apenas em um formato de tipo aleatório, vai mostrar rapidamente como fazer isso. Então poderíamos entrar em algo aqui onde poderíamos fazer imagem e fazer fonte. E agora só precisamos definir uma fonte. Então tudo o que eu vou fazer aqui é eu vou apenas entrar no caminho da imagem e porque nós vamos ter realmente esses valores já presentes dentro de seu alcance porque nós tivemos nós apenas copiado para fora o Ray original que nós usamos. Então nós vamos ter todos esses valores realmente presentes dentro de seu alcance. Então eu vou apenas fazer mais e matriz de solução. Isto é apenas para demonstrar que realmente vamos ter todos os. As imagens sobre isso é como nós vamos ser capazes de puxá-los através através do tabuleiro de jogo e vamos colocar uma aula lá dentro. Esta é uma classe bootstrap em ordem, fazer as imagens responsivas e apenas voltar aqui e ver como isso acaba. Eso vemos que, na verdade, temos todas essas imagens que estão carregando. Temos dois de cada. E talvez essa imagem responsiva provavelmente não seja a melhor. Então nós vamos fazer Eu só vou chamá-lo flip, flip image e trazer isso de volta para o estilo e em algum estilo adicional para lá. Então vamos fazer com igual a 100% certo? É 100% e nós vamos fazer excesso de fluxo, e nós vamos apenas esconder o transbordamento lá. Então, no caso de haver algo que esteja transbordando aquela célula, podemos esconder aqueles que então isso se encaixa um pouco melhor dentro do quadro com o qual temos que trabalhar . E você pode ver que toda vez que eu atualizá-lo, nós temos essa coleção de imagens e agora nós vamos ser capazes de esconder elas, e quando essa célula for clicada, nós vamos virá-las e ver se elas realmente combinam. Se as duas imagens que são viradas para cima, se eles combinam e se eles fazem, nós vamos continuar com o desenvolvimento do jogo para desenvolver pontuação de aveia e assim por diante . 7. Jogo de 7 JavaScript onclick: dentro desta lição, vamos adicionar algumas funcionalidades a essas imagens, então basicamente, basta fazê-las clicáveis. Então vamos usar a opção on click que temos para o script Java, e nós vamos chamá-lo de chamada para uma função pick hard, e nós vamos apenas passar sobre este valor, e nós vamos fazer um retorno. Falso. Nada mais do passado acontece justo. Isso é o que normalmente incluímos que retornou falso eso que esta ação é tomada em. Não há nenhuma ação adicional, então geralmente não precisa dela em uma imagem. Isto é mais para o nosso Se você tem um evento nobre ação real que pode acontecer com o clique eso aqui agora temos que realmente criar essa função. Então nós vamos fazer outra função, e nós vamos chamá-lo escolher um cartão, e eu vou apenas colocar um valor lá fora de um e o que nós vamos fazer é apenas ir console logout e novamente isso vai ser puxar essa informação que foram recuperando quando este card é escolhido. Então, se eu chamar de volta aqui e atualizar a página, minhas imagens agora devem ser clicáveis e devem realmente me dizer qual imagem está sendo exibida aqui. Então, quando eu clicar em ou que são os mesmos, eles vão estar realmente combinando imagens. Então agora podemos continuar a construir algumas funcionalidades também. Nós vamos manter essas imagens aqui por um pouco mais, e então nós vamos eventualmente mudar isso para a imagem do bloco, e nós vamos ter que realmente passar esta solução, eu talvez nós poderíamos fazer isso. Agora passamos isso para o cartão que é escolhido, então pode ser enfraquecido. Faça isso agora. Então, infelizmente, eu não acho que, uh, essa opção vai funcionar para nós agora porque precisamos que as pessoas passem por esse valor. Então vamos mover isso e voltar para Utes e refrescá-lo. E uma vez que essa página recarrega algo que eu acho, deu errado lá, eu tenho que colocar as aspas lá porque nós queremos passar como um valor de string lá. É por isso que não é, diz sempre que diz não definido. Normalmente, isso indica que é um valor de string. Então, novamente, eu acho que nós temos algum tipo de problema lá token inesperado, e eu acabei de perceber que nós temos que realmente caixa barra essas aspas porque nós já estamos usando-as lá. Então esse é um dos problemas quando você tem várias aspas. Então eu tenho solteiro. Eu tenho o dobro já usei um, e eu preciso de outra citação adicional lá, então tem que barra de caixa isso. Então, espero que desta vez realmente obtenhamos o resultado que queremos. E, na verdade, mais uma coisa eu preciso fazer essas aspas simples quando eu estou de volta cortando-o porque você tem que ter certeza de que você está de volta cortando-o com um que está realmente encapsulando esse item específico em JavaScript. Então, desta vez, volte mais uma vez e espero que obtenhamos esse valor que é passado. E agora vemos que obtemos esse valor que é passado ao longo quando clicamos nas telhas. 8. 8 Interruptor de imagem de jogo JavaScript passar este documento: Então, além disso, isso realmente quer passar algumas informações adicionais sobre o cartão de escolha, e isso vai nos permitir construir alguns ou funcionalidade eso. O que quero fazer aqui é passar mais informações, e um deles vai passar esse valor. Eu e eu também queria passar por cima apenas indo para apenas fazer isso. E se você não está familiarizado com isso é que ele apenas passa a informação que está disponível dentro deste elemento, algo que vai fazer A, B e C e exatamente como isso sai. Atualize a página e veja o código. Agora, quando clicamos, você vê isso no clique? Temos toda essa fonte de imagem aqui, e tudo o que estamos fazendo é passar esses números para ir inspecionar o elemento. Temos força de azulejos. Temos o número do azulejo. Temos o número I. Então este é o 3º 1 Então sabemos qual é o número. Eso Vai para 0123 em todo o caminho para baixo. E então sabemos que se quisermos bloquear isso, podemos bloquear isso e então estamos apenas passando a informação do elemento. E a razão pela qual estamos passando essa informação do elemento é porque queremos finalmente ser capazes de mudar o que é realmente visível lá. Então, a maneira que vamos fazer isso é apenas poderia usar aquele outro, aquele outro item lá. E eu vou apenas atualizar esta página novamente e apenas mostrar como isso vai funcionar. Eso de novo. Agora temos que trancá-lo e mantê-lo em um limite de dois, e então podemos colocar nosso tempo ou em suas duas imagens uma vez que foram colhidas. Talvez seja uma boa altura em que possamos reverter esta informação. E eu posso apenas mudar esses dois ao redor para que nós estamos realmente quando nós estamos fazendo nossa escolha. Na verdade, temos algo diferente acontecendo aqui. Eu não preciso dessas duas citações e ele vai atualizá-lo. Então vai construir o quadro com essas caras felizes. E quando eu cliquei, algo deu errado lá. Então eu não estou definido, e isso é porque estamos passando por cima de mim como abelhas. Essa é a única mudança que temos que fazer para voltar atrás. Então, espero que desta vez possamos ver que estamos recebendo informações passadas lá, então isso deve estar funcionando. E podemos ver agora quando clicamos nele, nós realmente obter os novos blocos aparecendo. Então agora o que precisamos fazer é construir em um temporizador com para construir em uma comparação das telhas escolhidas. E temos que limitar Teoh apenas os dois azulejos que poderiam ser virados ao mesmo tempo. Swift executar um limite lá que não podemos continuar clicando no mesmo bloco. E nós também queremos ter essa funcionalidade que ele faz essa comparação para verificar se os azulejos são os mesmos e se eles são os mesmos, então nós vamos deixá-los virados, e nós vamos permitir que o usuário para ir para virar túmulo ou até Eles estão resolvidos. E se não forem os mesmos, então vamos passá-los de volta para esse cara feliz depois de um certo período de tempo . Então, provavelmente um segundo ou dois segundos. Então, dependendo do que queremos definir isso como 9. Limites de abusos de jogo JavaScript 10: Então aqui eu vou iniciar cartas, levantar o valor e configurar 20 e, alternativamente, uma vez que o cartão é escolhido aqui e se vai ser um novo, eu vou realmente adicionar duas cartas viradas para cima. E eu vou fazer exatamente assim para adicionar um valor às cartas viradas, e então aqui, eu vou fazer uma declaração condicional. Então lá, a fim de ter certeza de que eu realmente não estou virando mais de duas cartas para realmente toe limite que é assim que eu vou fazer se as cartas viradas é maior do que ou igual a dois. Ou devo dizer, é menor ou igual a dois. Então, basta ir lá para fora só para ter certeza de ver se isso funciona então realmente foram capazes virar três. Então, novamente, talvez isso seja menos de dois. Isso faz um pouco mais de sentido. Então isso nos dá esse valor de zero em um, e então isso nos impede de virar quaisquer telhas adicionais. O que precisamos fazer é ter uma comparação dessas telhas, a fim de verificar se elas são as mesmas. Então precisamos de uma maneira de armazenar esses valores nos blocos. E provavelmente a melhor maneira de fazer isso é porque nós vamos ter que valorizar aqui. Talvez possamos apenas criar uma nova matriz e apenas armazenar esses valores dentro de suas taxas. Nós vamos ter uma matriz de dois valores, e nós vamos armazenar as cartas lá como se fossem viradas. Então nós vamos apenas configurar este novo array e nós vamos apenas chamá-lo de Flip Flipper Re, e nós vamos igualá-lo a três novos. E agora vamos pegar Flip Parade aqui e vamos fazer definindo um valor para ele e o que vamos fazer, vamos definir esse valor aqui. E depois desta função, runs ia listar que onde Cônsul Lagos o valor que está contido dentro de virar uma taxa. E agora, quando voltarmos para o quintal aqui, devemos realmente obter os dois valores das telhas. Então remova isso. Mas então nós temos um bloco três em um bloco cinco e não fomos capazes de realmente adicionar mais valores. Agora podemos começar a fazer essa comparação, então eu vou me livrar de alguns desses outros logs de console que eu tenho aparecendo aqui porque isso está adicionando a um pouco de confusão lá sobre o que está acontecendo aqui fora . Então, novamente, apenas refrescando isso. E aqui podemos ver que estamos, de fato, adicionando esses dois itens no estupro. E então o que vamos fazer é limpar essa matriz. Verificamos se combina com o que vamos deixar. Mas, em seguida, nós também vamos ainda claro para essa matriz e permitir que o usuário para começar a virar alguns blocos novamente. 10. Verificação de comparação de azulejos de jogo JavaScript 12: Então o que eu quero fazer é eu quero adicionar em outra condição aqui que para verificar se e este é o lugar onde nós vamos verificar para ver se o nosso cartão invertido é igual a e nós vamos ver que se ele é igual a dois, então nós vamos apenas fazer um console, logout que estamos fazendo um cheque aqui, e eu vou me livrar de alguns desses aqui. Então, adicionando a um pouco menos da confusão sobre o que está acontecendo aqui eso quando eu atualizá-lo novamente eso eu deveria apenas ter essa comparação e eu realmente não posso clicar em nada mais. Hum, mas nós temos essa comparação lá. Então você vê que agora somos capazes de comparar para certificar-se de ver se o valor zero e o valor um são iguais. E se estiverem, então vamos reiniciá-lo e seguir adiante. Teoh dar o uso da habilidade de escolher cartas mawr eso da maneira que vamos fazer isso, vamos fazer outra declaração condicional dentro da camada. E nós vamos fazer esta condição que se este valor flip ary zero é igual ao valor flip ary um, então a diferença entre ter que iguais sinais e três é que isso também está comparando o tipo. Então, tecnicamente, não precisamos disso. Podemos ir com dois. Mas se tivéssemos um valor de cinco string valor de cinco em um valor de entrevista de cinco e não quiséssemos que eles se aproximassem iguais, então precisaríamos ter três dentro dessa comparação lá. Então, puxe isso para fora. O mesmo e fazer diferente. E acho que o que vou ter de fazer é o suficiente para inverter isto. Apenas remova isso por um pouco porque eu realmente não vou ser capaz de ver quais cartões são eles Na verdade, o mesmo s que vai apresentar um pouco de um problema para mim quando eu estou tentando testar isso para fora. Então trazê-lo de volta para o seu e eu acredito que o valor era que eu faço que eu deveria ter essas imagens realmente precisam. Basta verificar isso e atualizá-lo. E isso deve me dar todas essas imagens novamente sobre isso vai realmente ajudar com testes para que possamos ver que isso vem da mesma forma e isso vem acima diferente. Então, isso é exatamente o que queríamos na parte de comparação, e agora podemos continuar a construir a lógica e fazer essa comparação e, em seguida, também estávamos em um edifício fora desse temporizador, a fim de invertê-los de volta. E dentro desta verificação de comparação, temos apenas que ser capazes de verificar completamente, caso afirmativo, se eles são os mesmos ou se eles são diferentes. Então, se eles são diferentes do que as cartas precisam virar de volta para o seu fundo original, e se eles são os mesmos, então eles podem ficar virados para cima, e nós vamos apenas dar ao usuário. Independentemente disso, vamos dar ao usuário a capacidade Teoh continuar a virar para cartões adicionais. 11. 13 Jogo JavaScript Definir id flip back: Então, para esta etapa, parece que vamos ter que definir algumas idéias aqui dinamicamente, a fim de ser capaz acessar esses blocos individuais via JavaScript. Então o que eu estou fazendo aqui é que eu vou chamar de cartões e aqui eu vou adicionar. Então isso vai me dar essa habilidade, a fim de puxar para trás e ver quais cartas em particular eu virei. E também, eu só vou usar este flip array novamente, a fim de adicionar em. Então eu vou apenas fazer flip array, e eu vou colocar isso em ainda um suporte aqui apenas para ser seguro, e isso vai adicionar a ele que vai me dar a habilidade em algum lugar para realmente colocar isso. Vejo que desvalorizo. Então esta é a desvalorização que vamos precisar para podermos identificar esse cartão em particular. Então, quando eu atualizar então agora eu deveria ter sido um re com o título. Inicialmente, zero, o primeiro item vai segurar o primeiro cartão, valorizar o valor da imagem, e então estamos deixando o slot número um, item número um vazio até termos a capacidade de preenchê-lo e então slot número dois vai segurar o I d desse elemento em particular. Então eu vejo aqui quando eu vou ter cartões, também. Então agora eu vou ir em frente e clicar nisso, e ele sai da mesma forma. Então nós temos telha cinco, cinco em cartões um e cartões para. Então isso vai nos dar a capacidade de redefinir esses cartões quando eles são diferentes. Aqui é o Eso. O que eu vou fazer é eu só vou redefinir essa imagem deste elemento I em particular com este i d. Eu vou redefinir a imagem fonte de volta Teoh, toe feliz Jay Pek e eu tenho realmente criar uma nova função para isso apenas para quebrar isso até um pouco mais e apenas chamando que a área de função cartão kyd escola. E vamos passar por um valor que vamos usar e que vai chamá-lo de A por enquanto. E ele vai passar por cima para esconder cartão e nós vamos fazer isso nós vamos fazer flip ou um dois e nós estamos em um esconder cartão flip são três ou realmente provavelmente nem mesmo precisa fazer isso porque nós sabemos que eles são consecutivos lá com o cartão de pé, então nós não precisamos mesmo passar isso por cima. Então agora tudo o que temos que fazer aqui, é fazê-lo, obter elemento por I d. e redefinir essa fonte fora, não elemento. Obter e realmente fazer o documento. Não pegue elemento por i d. e tipo de quem usou o flip card, também. E coloque aquela fonte ali. E vamos definir essa fonte para ser igual à imagem feliz. E vamos fazer a 2ª 1 assim. Então, agora, quando voltarmos aqui, devemos ver que ele deve virar para trás se eles não são os mesmos. E agora o que podemos fazer aqui também podemos nos livrar disso. Não precisamos mais ver isso para completar o que estamos tentando fazer aqui. Então agora devemos ser capazes de virar duas cartas, e uma vez que nós invertemos essas cartas, ele faz essa verificação. Então, porque eles são realmente diferentes, nós realmente não somos capazes de vê-lo porque ele está fazendo isso muito, muito rápido. Nós temos que colocar algum tipo de mecanismo lá dentro para retardar isso e assim eu posso ver que este e este aqui são iguais. Então, se eles são iguais, então eles vão ficar acordados assim. E se eles são diferentes do que eles realmente vão virar para trás. Então ele estava fazendo isso muito rápido. Você tem que colocar algum tipo de mecanismo e seu para fazer um intervalo e realmente para fazer um reset de que em limpar aqueles fora. Então vamos fazer isso e acabar chegando aulas. 12. 14 Jogo JavaScript remover duplo clique: assim, configurar este intervalo. Então nós estamos realmente apenas indo para fazê-lo esperar alguns segundos e isso vai ser realmente fácil de fazer. Nós apenas definir intervalo, e então nós só temos que colocar essa função. Então ele vai usar essa função ocultar cartão que tínhamos criado anteriormente e dentro dos intervalos, isso é conhecido por ser uma função para que você não tem que fazer esses colchetes, e assim isso vai ser em milissegundos. Então o que eu vou fazer, eu vou definir para três milissegundos. Então isso dá a esse usuário a sensação de que há algum tipo de comparação acontecendo e eles têm essa habilidade de olhar para essas imagens, e eu as estudei Então, antes que eles revirem o eso Agora, nós temos que realmente redefinir o nosso contadores e permitir que o usuário para escolher alguns cartões adicionais eso porque porque descobrimos que a sua diferença alguns realmente comentar, pontilhada uma onda. E eu vou criar uma marca que você funciona que eu tenho aqui e eu vou apenas fazer função. E vamos chamar de “escolha “de novo, e vamos correr isso aqui depois das cartas de esconderijo. E vamos chamar de “escolha “de novo, Então vamos fazer aquela foto de novo lá. Na verdade, talvez possamos definir isso aqui porque independentemente do fato de que se viramos ou não, ou não,teremos que executar essa função aqui. Eso, independentemente do resultado aqui, vamos querer ter essa habilidade de ser capaz de escolher de novo. Então tudo o que temos que fazer é limpar esse valor aqui. As cartas viraram, e vamos definir isso para zero de novo. E isso deve nos dar a habilidade de escolher as cartas novamente. E agora só temos que esvaziar com a teoria. E, a fim de esvaziar o raio, ele vai estar aqui e em ordem de entrada para fora. Nós apenas dissemos isso para isso e vamos voltar fofinho e tentar isso para ver como isso funciona. Então, agora escolhemos duas cartas, vemos que elas são diferentes, então elas devem virar para trás. E parece que temos um problema aqui. Só vou dar uma olhada rapidamente e ver qual é o problema. Mas parece que esse intervalo, porque nós o redefinimos. Então nós vamos ter que realmente fazer isso aqui. E eu vou fazer isso aqui inchar e voltar fofo. E espero que isso resolva isso e diz que é diferente. E agora devemos ter a habilidade de escolher mais duas cartas e que elas são diferentes novamente . E então esse foi um dos bugs lá que nós tivemos que se você clicar na mesma imagem, ele vai aparecer o mesmo s. Então nós temos que realmente apenas ter certeza de que o usuário está pegando imagens diferentes ou valores diferentes aqui que eles s antes que eles são capazes de realmente adicionar isso na solução lá. Nós vamos ter que ter algum jeito de armazenar o valor numérico anterior de I e apenas para certeza de que nós não estamos realmente tendo esse mesmo valor, então nós vamos apenas criar uma nova variável, e nós vamos chamá-lo de cartão de perda, e nós não vamos ter nenhum valor para ele em tudo. E agora, quando fizermos esta seleção, última carta escolhida seria porque este vai ser o número de celular que estamos usando. Então os valores aqui que estamos passando serão na verdade os números de celular que estavam passando por aqui. Então, na verdade, nós poderíamos até mesmo eliminar isso. Traga isso. Elimine esta função. Mas talvez façamos isso mais tarde. Então, a última carta escolhida será qualquer que seja o valor que tiver aqui. Na verdade, o que eu vou fazer aqui é eu vou definir isso para um negativo para que nós possamos ter certeza que nós nunca estamos igualando isso, hum, e fazer a última carta escolhida aqui no final e depois aqui, indo para fazer uma verificação e última carta escolhida não é igual a ser Ver se isso funciona. Parece que está funcionando, então não somos capazes de realmente DoubleClick mais. E isso deve ajudar-nos a evitar o ar. Então, é a mesma coisa. Tudo bem, então parece que eles ainda estão em erro existindo, mas nós ainda podemos pegar através e parece que algo foi pego lá em cima dentro da fonte lá. Então vou dar uma olhada nisso na próxima lição. 13. Intervalos de compensação de configuração de jogo JavaScript: lição que eu estava olhando e nós estamos vendo que nós temos esse ar que continua aparecendo sempre que estamos clicando muito rápido. Parece que há algo que não está indo bem aqui com como estamos definindo isso escorregadio. E isso é provavelmente porque nós nem sempre temos um valor para este, uh, este item se nós estamos clicando através realmente rápido Então em algum lugar ao longo do caminho, o cálculo está ficando confuso. Então esse tipo de coisa é bastante comum quando você está usando o intervalo. Porque o javascript nem sempre sabe que você deseja limpar esse intervalo para outras vezes. Então o que eu vou fazer é criar uma variável chamada temporizador, e eu estava indo para definir para nada. E então aqui, eu vou fazer temporizador igual intervalo definido, e então aqui embaixo, eu vou fazer um intervalo claro e claro. E porque agora eu nomeei esse intervalo, eu posso realmente fazer uma limpeza dele. Eso Isso deve cuidar desse intervalo. Isso pode ter ficado atrás da quantidade de cliques que estávamos enviando. E com isso agora vamos ser capazes de limpar esses intervalos. Então, no caso de haver um monte de cliques lá. Não vai interferir, e não vai mais causar esses erros e problemas. Então tentamos clicar em um monte de vezes e ver se algo quebra. E até agora, tudo bem. E vamos nos certificar de que se conseguirmos alguns que são iguais e até agora eu não sou muito bom no esquema. Mas então lá nós temos um o mesmo, e nós podemos ver que nós podemos imediatamente ir para clicar em alguns outros. E nada parece estar quebrando eso. Tudo parece muito bom e que está funcionando. Então agora podemos começar a construir e tocar, marcar e fazer mais alguns ins de personalização, a fim de verificar se os usuários realmente ganharam o jogo. Ah, e novamente porque suas botas embutidas caem, ele redimensiona, então isso é muito legal. Eso que funcionará em dispositivos móveis também 14. Jogo de fim de pontuação de jogo JavaScript 18: Então agora o que vamos fazer é entrar na pontuação zero, e vamos limpar isso um pouco porque realmente não faz sentido ter essa função apenas saindo para isso. Eles não apenas se certificam de que ainda estamos funcionando corretamente e voltam para ele e clicam nas imagens. Na verdade, parece que tudo ainda está funcionando. Certo, Eso. É uma coisa boa. Agora você pode voltar ao nosso código e continuar a limpar as coisas. Então, quando é o mesmo que queríamos fazer pontuação, pontuação, mais um. E agora também queremos ter algo construído aqui onde podemos fazer uma verificação para ter certeza ver se realmente tudo foi concluído e o que poderíamos fazer, provavelmente a maneira mais fácil de fazer isso e configurar isso é quando começarmos o jogo, Talvez pudéssemos definir o placar 20 e então toda vez que reiniciarmos o jogo, o placar vai voltar a zero, e podemos fazer uma verificação aqui para ver se vamos fazer, mais um assim, é um pouco mais limpo. E então aqui nós vamos verificar para ver se nós realmente alcançamos o número de itens dentro da Serie e se nós temos, então nós vamos saber que nós realmente resolvemos tudo. Então, se eles são iguais ou se é mais longo assim tamanho itens tailandeses e o cheque supremo Sim, câmbio. Eu vou fazer se e então é para aqui que vamos correr. Estão terminando são opções de acabamento aqui. Aqui é o Eso. Isso só vai ser longo e só vai colocar isso de volta aqui. Então, se este comprimento é igual a apenas a maior ou igual a pontuação, uh, então nós vamos apenas fazer o fim do jogo. E agora vamos voltar. Você tinha aqui e apenas um teste para ter certeza de que ele funciona tanto que eles vão pausar o vídeo e jogar através do jogo e apenas para ter certeza de que tudo está funcionando corretamente quando eu resolvi, nós tivemos este final de jogo apareceu, então tudo parece que está funcionando corretamente. Eu tive que mudar isso para menos do que a pontuação para que o final do jogo apareça, mas sim, tudo parece que está funcionando corretamente, e agora podemos adicionar mais algumas mecânicas para ele e dar o uso da habilidade de reiniciar se eles querem, Ah, e construir uma nova placa novamente com um novo conjunto de telhas e o posicionamento da telha. 15. 19 Game Listener reiniciar: Então eu vou adicionar um cérebro. Você faria se aqui e eu só vou dar um eu d de controle de jogo. E é aqui que vamos adicionar em botões clicáveis que se quiser reiniciar o jogo, ele vai criar botão real aqui para uma div. E eu vou fazer uma classe off bt final 10 solos padrão são botas, soltar classes para torná-lo parecido com um botão e começar. E então o que eu quero fazer aqui é que eu quero realmente esconder isso para que não fique visível. Eso O que eu vou fazer no estilo é que eu vou mostrar nenhum. Portanto, isso não deve ser visível quando saímos e atualizamos a página. Então eu adicionei e você, def, aqui, aquela serra que não vai ser mostrada. E quando eu terminei o jogo, o que eu quero fazer é mostrar essa div escondida. Então o que eu vou fazer é pegar elemento por D, e eu só vou mostrar a esse tipo talvez o que vai fazer por agora? Nós vamos mostrar o tempo todo dizendo que eu apenas removo isso lá fora e de novo, dependendo de como você quer executar o seu jogo. Talvez você queira ter esse botão de reiniciar o jogo aqui o tempo todo. E na verdade, vou tirar isso aqui porque não preciso me separar para isso. Então eu vou apenas remover isso e eu vou ter um div com o i d. Isso é apenas dizer reinício do jogo. Eso deve ter o nosso botão aqui para reiniciar o jogo e um estilo que em bootstrap, na verdade. Então, é agora que saímos aqui, só temos este botão. Eu só queria centralizar um pouco. É mesmo quando nós re tamanho, nós tê-lo centrado. E ainda assim, agora, não está fazendo nada. Então eu vou adicionar alguns ouvintes de eventos em JavaScript para ouvir um clique nesse botão. Eu adicionei neste ouvinte evento para um controle de jogo e quando ele é clicado, em seguida, ele executa este jogo de início, e que realmente apenas redefine toda a funcionalidade lá. E há algumas outras coisas que precisamos fazer aqui para fazer essa matriz embaralhada. E temos que configurar isso dentro do jogo inicial. Então, agora, quando voltarmos aqui e executarmos o jogo, então eu realmente tenho que encontrar um casal que vai ser o mesmo aqui. Espero que não demore muito. Então eu tenho aqueles que são os mesmos. E agora quando eu bater este jogo reiniciar, espero que nós deveríamos ter e eu acho que nós provavelmente temos que claro que esse intervalo também. Então, reinicie o jogo. Nós poderíamos ver que ele realmente está redefinindo o jogo e é trazer tudo. Deve estar trazendo a pontuação de volta a zero quando reiniciarmos. E talvez apenas vamos fazer a clara do intervalo do caso há um intervalo, eles são configurados para que ele não lançar quaisquer erros se não temos um intervalo configurado. Não, não parece. Então eu acho que nós somos capazes de configurar este botão de reinicialização do jogo e isso nos dá a capacidade de talvez depois que o jogo é concluído, nós queremos dar a capacidade de reiniciá-lo. Ou talvez queiramos ter isso lá o tempo todo. Eso de novo. Dependendo da sua preferência, você pode adicionar este botão de reinicialização do jogo e isso é feito através do ouvinte de eventos através do JavaScript. E uma das perguntas que você pode ter é por que não configuramos ouvintes de eventos para tudo isso? E, honestamente, é um pouco mais fácil se fizermos isso apenas no clique. E outra coisa, também, é que estamos carregando isso depois que o amanhecer já carregou eso você. Às vezes você obtém esses problemas em que você configura o i d. Depois, dinamicamente, e você não é capaz de se conectar a ele com um ouvinte de eventos que você tentou configurar antes de configurar este. D. S. Então ele não vai realmente capaz de ouvi-lo porque nós não criamos essas idéias ainda. Eso é por isso que a maneira ideal de fazê-lo desta forma é apenas ter isso no clique e chamando para a função. A fim de fazer isso 16. 21 usuário de mensagem de jogo JavaScript: mais alguns toques finais, a fim de tornar este jogo um pouco mais jogável pelos usuários . Então eu atualizei alguns dos CSS. Eles estão removendo o preenchimento. Então, essas imagens agora passam por toda a célula que está disponível. E também, precisamos atualizar algo para quando o jogo terminar. Então vamos ter outra função aqui e vamos chamá-lo de jogo feito. E isso é algo que nós vamos invocar quando nós realmente terminar o jogo s O. Que este é o lugar onde nós tivemos aquele cálculo lá, aquela declaração condicional para verificar se nós tínhamos terminado o jogo. Então nós vamos apenas dio-game feito e nós também vamos criar outro. Ou talvez nós podemos apenas usar este é Nós vamos apenas obter elemento por i d. e talvez nós vamos apenas mudar o texto lá no botão, Teoh, Teoh, em vez de reiniciar o jogo para jogar novamente. Então, voltando para aqui, vamos fazer o documento get elemento por i d. então a idéia vai ser eu acredito que foi o controle de jogo que vamos usar e talvez possamos apenas definir esse html interno para ser por favor novamente. E também nós provavelmente precisamos de algum tipo de mensagem aqui que vai apenas talvez passar o mouse sobre tabuleiro de jogo ou algo assim para indicar que o jogo foi concluído. Então, talvez possamos colocar uma mensagem aqui no topo, dar o “D” e vamos chamar de “mensagem”. Isso vai dar ao nosso jogo a capacidade de se comunicar para trás e para frente e depois para aqui , na verdade vai colocar alguns dos alguns estilos na mensagem. Então se destaca um pouco mais. Então eu vou fazer e eu sei definir o peido tamanho 125 da tarde e eu vou fazer cor. Então, só para se destacar, talvez possamos fazer cor vermelha e talvez apenas fazer um fundo também. Então ele se destaca novamente um pouco mais. E, claro, dependendo do que você está styling é provavelmente tem que atualizar alguns desses s O. Isso vai nos dar a capacidade de enviar mais uma mensagem. E então nós vamos criar outra variável aqui para mensagem para que nós não temos que continuar estudando aqueles fazendo esses elementos get por i d. E aqui nós temos que lembrar quando começamos o jogo, nós queremos limpar essa mensagem. Então vamos manter isso em linha com o tabuleiro de jogo, então HTML interno é igual e agora podemos. Então esses logs de console que vamos fazer provavelmente tem que definir outro intervalo para limpar a mensagem. Então eu vou fazer outra função de Então, na verdade, talvez nós vamos apenas enviar as mensagens para esta função, e isso pode funcionar um pouco melhor. Então teremos outra mensagem de texto. E aqui nós vamos apenas ter valor que estaríamos passando quarto que nós vamos apenas chamar mensagem e, em seguida, dentro de anos, onde vamos definir que HTML interno aplicação mensagem e, em seguida, voltar para aqui e e nós também vamos definir um intervalo interno a fim limpar essa mensagem eso quando não queremos mais que esta mensagem seja passada, talvez nós vamos enviar algo Teoh Apenas ter um intervalo para que nós não estamos sempre tendo esta mensagem tão acima. Então, para que esta mensagem apareça e desapareça novamente, vamos definir outro intervalo. Eso eu só vou chamar uma bagunça e eu vou apenas igual a nada para que fique em branco ou e, em seguida, apenas aqui no jogo de imprensa mensagem para nós. Jogar. Começar o quê? E eu vou mudar isso para jogar e então quando vamos para a mensagem real aqui, então aqui, eu vou primeiro configurar esse intervalo eso Nós vamos configurar esse intervalo dentro da própria função para que ele realmente chame a si mesmo e executar através de sua própria função aqui. Então vamos enviar mensagens de texto, e eu tive que mudar essa função. Então é diferente da mensagem que estou passando aqui ou do argumento que estou passando aqui. Eso Eu só vou colocá-lo por um segundo e eu só vou empurrar uma mensagem padrão, clique mais dois ou encontrar um andan muito também. Agora ainda temos que fazer uma clara desse intervalo, e nós vamos apenas limpar esse intervalo que acabamos de criar S O. Isso iria evitar ter esse problema que tínhamos antes de ter vários intervalos rodando no fundo e que estava causando alguns problemas com o navegador eso aqui, vamos atualizar isso. Então temos nosso teste inicial lá e vemos que temos mensagens não encontradas. Encontrar uma correspondência não encontrada. E agora tudo o que temos que fazer para chamar para esta função para enviar esta mensagem, nós apenas fazemos mensagem de texto. E nós poderíamos realmente fazer isso aqui quando estamos montando o jogo também. Então nós vamos dio-uh, rápido um início de azulejos. E, na verdade, temos que mudar o quê? Este O jogo controlar o HTML interno não é porque nós não queremos que ele seja mais jogar uma vez que o jogo está em jogo. Então talvez nós vamos ter que realmente criar outro e nós vamos apenas chamá-lo de mensagem de botão e obter esse elemento por d e agora Enfraquecer Digite html para a mensagem de botão e estamos apenas em HTML interno igual reiniciar jogo. E agora podemos Podemos também temos que redefinir esta mensagem eso quando o jogo está em jogo e quando o jogo termina. Então aqui vamos fazer, mas mensagem e caminho. E assim podemos nos livrar dessa parte aqui. Então, parece muito mais limpo e muito mais simples e de rua à frente, e também temos que enviar outra mensagem aqui também, e vamos acabar com o jogo. E então estamos usando HTML porque estamos colocando em nosso html eso agora. Devemos ter algumas mensagens lá em cima, encontrar uma correspondência não encontrada, correspondência não encontrada, encontrar uma partida e continuar jogando. E nós temos essa mensagem aqui, e isso está nos fornecendo essa comunicação entre nós e o usuário. E então isso vai redefinir. Assim que terminarmos o jogo, teremos a habilidade de jogar de novo, e estaremos concluídos com isso. E geralmente é importante adicionar nesta comunicação adicional entre o jogo e o usuário. Isso é jogar o jogo. Eso mensagens é muito boa adição ao seu jogo JavaScript. 17. Jogo JavaScript 22 Adicionando um temporizador e pontuação: Então eu notei uma coisa que nosso intervalo foi mantido contando e nós continuamos tendo essas mensagens contando s. Então eu tive que adicionar uma declaração condicional para verificar se esta mensagem realmente é igual a isso. Então não vamos redefinir esse intervalo para que não tenhamos esse intervalo em execução em segundo plano. Uma das coisas que queremos definir é um temporizador. Então vamos definir todos os valores que precisamos para o temporizador. E nós vamos apenas definir essas variáveis aqui em cima. O que vamos precisar é de segundos igual a zero. Também fazer. Talvez Miller segundo ou apenas para finalizar segundos é igual a zero e fará minutos igual a zero e horas igual a zero e mais um para o tempo. E isso vai configurar todos esses valores que estarão prontos para nós. Eso Agora temos que adicionar em uma função de um temporizador. Então, de novo, vamos usar o que parece. E então vamos criar uma função chamada timer e vamos usar essa variável t que configuramos. E desta vez vamos definir o tempo limite e vamos apenas ter algo estranho tempo recriado você função para isso também. E vamos definir esse tempo a cada segundo ou a cada segundo, então a cada 1000 milissegundos. Mas a diferença entre o tempo definido e o intervalo definido é que o tempo limite definido, Sr. Função em Lee uma vez após o tempo limite. Enquanto intervalo executa a função em intervalos com o comprimento do tempo limite entre eles. Eso, essa é a diferença. E é por isso que para este aqui, nós só queríamos sair porque vai ser um contador de tempo. Queremos executar esta função de cada vez, e isso vai adicionar tempo para a função e dentro desta função. Então nós montamos os segundos e nós vamos realmente mudar isso para os milissegundos depois. Mas, por enquanto, vamos executá-lo como segundos e vamos adicionar os segundos. E agora vamos fazer uma verificação para ver se segundos é maior ou igual a 60 tem 60 segundos em um minuto. E se for, vamos fazer segundos iguais a zero, e vamos adicionar aos minutos que vamos fazer minutos em um para o minuto, e agora vamos fazer outra verificação. Aqui está tão esperançosamente para que eles não estão jogando o jogo por tanto tempo. Mas nós temos que fazer uma verificação aqui para ter certeza se os minutos estão realmente passando em nosso nós temos realmente 60 minutos, nós vamos ter que incrementar que nosso Valium E eu quero dizer este temporizador que você provavelmente poderia usar para outras coisas como Bem. Então agora vou fazer minutos igual a zero. Então, para reiniciá-los para zero e vamos fazer horas é igual a horas mais um. E na verdade, devemos redefinir tudo isso quando definimos esse novo valor e inchar. Então eu só vou trazer isso aqui onde nós temos nós estamos começando o jogo e apenas que nós estamos definindo todos estes mais de 20 mais uma vez provavelmente escrever uma função para isso também . E agora temos que adicionar esse temporizador. Então talvez nós vamos fazer algo aqui além de mudar isso em um espaço de extensão. E aqui vamos ter um div. E então, se você se lembrar que os vãos são diferentes do que dibs causa vãos só vão estar na linha, então na verdade poderia ter vários vãos aqui. Então eu vou ter outro intervalo para o tempo em si e dado eu d o meu tempo e fechá-lo e, em seguida, apenas ter esse span abertura e fechamento s Então este é o lugar onde eu realmente vou , uh, quando nós realmente começar o temporizador. E isso significa que eu tenho que configurar isso dentro do elemento get por i d. então eu vou ter o meu tempo. E eu acabei de receber uma cópia isso sobre para que desta forma nós possamos realmente escrever para o tempo dentro da função lá. É agora, vamos voltar àquela hora do anúncio, e uma vez que fizermos esses cálculos aqui em cima, estamos realmente prontos para escrever para que o meu tempo que acabamos de configurar e vamos tentar algo um pouco diferente Inter html. Nós vamos usar conteúdo de texto, e então isso vai definir esse valor fora deste elemento eu em particular e foram em vez de valor para o seu E eu vou apenas copiar isso em porque isso vai realmente fazer aquilo. Onde anúncios em que zero extra. Se sim, se o nosso for maior que nove, vai fazer todo esse alojamento aqui. Assim que atingirmos um nove e se não for inferior a nove, teremos aquele zero na frente dele. Eso mesma coisa com segundos e a mesma coisa por minutos. E agora vamos executar essa função, aquela função temporizador, trazendo de volta o tempo definido. Então, a cada segundo, devemos ter um incremento dentro desses segundos valor. Há quando nós atualizá-lo e ele deve aparecer pouco antes de lá e realmente acho que temos um pouco de problema de estilo que há. O que eu faria é colocar isso em uma estrada separada, só para separar isso. Eu seria um pouco melhor, e eu vou removê-lo esse vão também. E eu vou fazer a mesma coisa por aqui. Acho que temos algumas botas, gotas, estilo, acontecendo lá. Vamos ver como isso acaba. E eu acabei de adicionar em alguns espaços reservados aqui também e reiniciar essas quedas. E, por fim, é claro, temos que iniciar este temporizador. Então, quando começarmos o jogo. Na verdade, estamos em um e acredito que temos a disfunção chamada temporizador chamado duas vezes . Então eu só vou ter que colocar um X aqui por agora porque nós tivemos esse tempo ou aqui naquela mensagem. Nós só queremos ter certeza de que nós não estamos duplicando essa função. E eu acho que é por isso que estamos tendo alguns problemas lá. Então, quando eu atualizá-lo agora, ele deve começar esse tempo, que aconteceu, e agora nós podemos clicar através e nós podemos realmente obter um tempo quando estamos jogando aqui. Então esta é a quantidade de segundos que jogamos, e isso vai ajudar com a pontuação do jogo. Vamos fazer um pouco de estilo adicional lá só para fazer isso parecer um pouco mais, melhor um pouco melhor. Então eu vou fazer mais de uma grande cor lá e também, eu vou fazer um pouco de estilo para isso. O meu tempo. E vamos enviar-lhe aquela mensagem para lá. E acho que vamos fazer isso também para essa mensagem e o mesmo tamanho de fonte. Então, quando eu voltar aqui, devemos ter um estilo um pouco melhor. Deveríamos ver o tempo no meio. E sim, parece um pouco melhor do que antes. Então você pode ver que agora temos um temporizador incremental e nós o temos configurado para que possamos configurar para os milissegundos também, modo que pode ser muito facilmente adicionado à funcionalidade. E você também pode pegar esse valor do temporizador e podemos aplicar isso à pontuação também. Então podemos ter algo sobre uma pontuação que aumenta de acordo com os tempos para que possamos adicionar em nossos valores aqui. E eu só vou fazer algo como s jogos para, então eu vou criar um novo valor lá de pontuação jogo. E novamente quando eu reiniciá-lo, eu quero colocar isso de volta em 20 Então um monte de variáveis agora. E então o que eu quero fazer é que eu quero o idealmente eu acho que o jogo pode ser jogado que nós tentamos marcar tão pouco responsável eso funciona indo para baixo. Então talvez pudéssemos fazer uma contagem regressiva do placar. Inicialmente, pode ser que dê 100 segundos à pessoa e faça a contagem regressiva a partir daí. Então, toda vez que passamos por este temporizador, podemos fazer a pontuação do jogo pode apenas menos um, e então no final do jogo, podemos mostrar com o placar ligado. Então, voltando aqui, ceda. Obrigado por jogar você marcou. E assim, poderíamos adicionar na pontuação do jogo. Então, quando eles terminarem de jogar, vamos mostrar-lhes uma pontuação aqui, então vai ser decrescente pontuação, e talvez nós vamos fazer mais uma verificação. Então, se a pontuação do jogo for menor que zero, vamos definir como igual a zero. Assim não temos um valor negativo. E novamente, isso não afeta realmente a jogada até que você chegue ao final e então você vai conseguir o placar lá 18. Atualização de jogo de memória JavaScript 25: como uma atualização para o curso. Um dos alunos tinha apontado que havia um problema em realmente limpar o tempo limite. Eso eu adicionei isso na função de início do jogo e o que ele vai fazer agora é vai executar esse tempo claro quando estamos reiniciando o jogo e ele vai limpar o valor fora T e isso vai ser diferente do intervalo claro porque nós estamos definindo isso como um tempo limite em vez de um intervalo. E nós temos isso aqui dentro do temporizador de função X s ou configuração t aqui e nós temos aquele loop de tempo limite definido onde estamos adicionando no tempo e, em seguida, ele está passando e looping através. Então, esta foi uma atualização rápida para corrigir a falha com o início, função do jogo e o tempo da função frontal do portão de partida. E eu também quero aproveitar esta oportunidade para passar pela matriz embaralhada em um pouco mais de detalhes. Então o que estamos fazendo aqui é que nós estamos realmente incremental através e nós estamos reorganizando a saída de matriz eso ele vai continuar toe loop através de todos os elementos de seu Ray Ah, usando o loop aqui e ele continua toe loop através do restante elementos. Então é por isso que estamos fazendo. Veja, estamos subtraindo do total de C, então estamos diminuindo o mar porque é o comprimento que é originalmente definido para o comprimento do raio e estamos constantemente diminuindo porque queremos trabalhar com o que resta elementos restantes da taxa. E também estamos fazendo um número aleatório fora dos elementos restantes da taxa. E estamos estudando isso para um valor de B e então toda a variável A está fazendo. Isso nos permite realmente trocar a variável d colchetou ver com ele S o com d e B no final. E apenas para delinear o que s O.A está apenas sendo usado no espaço reservado temporário e B é onde estamos definindo o número aleatório eo valor do mar é sempre vai ser o valor do índice atual