Introdução ao desenvolvimento de jogos Javascript: Parte 1

1. 1 Introdução: Você já se perguntou como criar jogos 2D simples que funcionam dentro do navegador, então essa classe foi projetada para você. Como o JavaScript está integrado em todos os principais navegadores, é perfeito para criar jogos baseados em navegador. Esta aula ensinará todos os conceitos que você precisa saber ao construir um jogo estilo Pong, colocar tudo em prática. Esta classe não foi projetada para ir muito fundo ou se você tiver algum conhecimento de JavaScript existente, ela realmente o ajudará à medida que você progride. Vamos tentar abordar todos os principais conceitos que você precisa para criar jogos 2D básicos no navegador e, para isso, começamos configurando o HTML Canvas. O Canvas é uma maneira ideal de desenhar dentro do navegador. É perfeito para desenhar nossa área de jogo, coisas como a bola, as poças. Também podemos usar JavaScript para movê-los no Canvas também. Mas, trabalhando com um Canvas, precisamos de um pouco de conhecimento sobre o sistema de grade. Isso é tudo coberto nesta classe também. Mas não se preocupe, é muito fácil de pegar. Vamos dar uma olhada em todas as funções básicas de desenho como desenhar texto, como linhas, como desenhar quadrados e retângulos, círculos e como também podemos aplicar loop para que possamos repetir processos que tornam um jogo realmente suave. Vamos dar uma olhada também como podemos interagir com nosso jogo e mover objetos usando o teclado. Claro, que tipo de jogo de Pong estaria completo? Não lidamos com a bola saltando de vários itens. A bola precisa saltar de todos os lados do nosso jogo. Precisamos quebrar uma pontuação se ela atingir um lado em particular. Precisamos saltar das remos em movimento. Tudo isso está coberto por dentro desta aula. Você não precisa de ferramentas adicionais ou para fazer compras para essa classe. Tudo o que precisamos é de um navegador da Web e de um editor de texto livre. Se isso soa como algo que o excita e você quer aprender, entre na aula e eu o verei na primeira lição, onde começaremos configurando o HTML Canvas. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder e se afastar da aula, e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto posteriormente. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Configurando a tela HTML: Como estamos criando um jogo 2D, precisamos de uma maneira de criar várias formas e vários elementos e colocá-los na tela. Para fazer isso, faremos uso intenso da tela HTML5. O Canvas é apenas um elemento HTML como uma div ou mesmo uma imagem. Ele tem uma etiqueta de abertura e fechamento, e por si só não faz nada. Mas assim que tivermos isso no lugar, podemos fazer uso da API de tela para desenhar gráficos. Também podemos fazer muito mais para casos de uso excessivo, como manipulação de fotos, alterando os pixels e as animações, para citar alguns. Este curso será mais focado em gráficos 2D. Muitas outras APIs e bibliotecas também estão disponíveis para lidar com recursos 3D. Para acessar esses recursos 2D, a API de tela tem uma interface disponível chamada CanvasRenderingContext2D. Isso não é algo que você precisa memorizar. Mas saiba que é por isso que temos acesso aos recursos de desenho 2D na tela usando JavaScript. Aqui, você pode ver uma seleção de algumas das propriedades e métodos aos quais temos acesso , que nos permitirão desenhar na tela. Você verá mais alguns desses durante o curso. Vamos agora entrar no editor de texto e configurar as coisas com um novo projeto. Primeiro, precisamos de uma nova pasta de projeto para armazenar todos os nossos arquivos dentro do. Deixe-me chamar esse jogo, qualquer coisa que você quiser, mas eu quero chamar este jogo e clicar em “Enter”. Abra o Visual Studio Code. Se preferir, você pode usar um editor diferente, se quiser. Arraste isso. Então precisamos de dois novos arquivos para começar. O primeiro que você pode clicar no ícone Novo arquivo aqui, isso criará um novo arquivo. Vou chamar isso de index.html. O segundo arquivo que precisamos será para o nosso script, o script.js. Isso vai lidar com todas as nossas funções de desenho em nosso código de jogo. Vamos começar de novo em nosso index.html. Aqui dentro, o Visual Studio Code tem um atalho prático chamado html:5, que nos dará toda a nossa estrutura HTML básica. O título é o mesmo. Não precisamos de muito conteúdo dentro da seção do corpo, mas a primeira coisa que precisamos é a tela. Como mencionado anteriormente, a tela tem as etiquetas de abertura e fechamento. Se salvarmos isso e abrirmos isso dentro do navegador, você não verá nenhum conteúdo ainda na tela. Se copiarmos a página de índice de caminho, cole-a em, você não verá nenhum conteúdo dentro do navegador. Para realmente ver a tela, precisamos desenhar coisas dentro do nosso arquivo JavaScript ou também podemos adicionar algum estilo dentro daqui para tornar nossa tela mais visível. No estilo, então tudo que queremos fazer aqui é pegar nossa tela, definir uma cor de fundo para tornar isso mais visível. Você pode fazer isso qualquer cor que quiser , mas eu vou buscar um valor rgb. O vermelho de 61 e 59 para o verde e o azul. Isso nos dará essa cor de fundo mais escura. Agora podemos ver a tela dentro do navegador. Você pode ver por padrão que é uma tela bem pequena. Por padrão, a tela será renderizada como 300 pixels de largura e 150 pixels de altura. Podemos substituir isso dentro do nosso roteiro. Para fazer isso no centro, podemos fazer isso exatamente como faríamos com outros elementos HTML regulares. Primeiro, defina o tipo de exibição como o valor do bloco. Em seguida, podemos definir a margem como zero na parte superior e inferior e , em seguida, automaticamente à esquerda e à direita. Salve e atualize, e isso agora aparecerá dentro do centro porque eu dividi automaticamente o espaço à esquerda e à direita. A última coisa a fazer dentro da nossa página de índice, logo abaixo da tela é o link nosso arquivo de script. Colocando a fonte que aponta para o nosso script.js. Em seguida, podemos passar para esse arquivo para adicionar algum conteúdo. A primeira coisa que precisamos fazer dentro daqui é realmente pegar nosso elemento de tela. Fazemos isso como faríamos com qualquer outro elemento HTML. Temos acesso aos nossos elementos usando coisas como QuerySelector, GetElementById, GetElementByClassName, e podemos armazenar isso dentro de uma constante chamada canvas. Para esse acesso, o documento completo, vou usar o QuerySelector passando nosso elemento de tela. Agora, isso armazena nossa referência aos nossos elementos dentro dessa variável ou constante. Agora podemos acessar isso logo abaixo. Começando por substituir esse padrão, tamanho de 150 por 300 pixels. Pegue nossa tela. Podemos definir a largura desse elemento como qualquer valor que você quiser. Digamos que 800. Em seguida, a altura de 400. Isso agora deve ser atualizado dentro do navegador. A última coisa que precisamos fazer dentro desse arquivo é acessar as funções de desenho 2D de telas com GetContext. Podemos armazenar isso dentro de uma constante chamada ctx, pegar nossos elementos de tela e, em seguida, chamar um método chamado GetContext. Passando uma cadeia de 2D para nos dar acesso aos recursos de desenho 2D. O nome constante de ctx depende de nós, mas esta é uma convenção de nomenclatura comum para acessar o contexto de renderização, e essa constante agora pode ser usada para desenhar para a tela quando precisamos. Usaremos essa abundância ao longo deste curso. Esta tela agora está pronta para desenharmos também. Mas pouco antes de fazermos isso, no próximo vídeo, vamos dar uma olhada em como podemos trabalhar com grades e coordenadas, que realmente nos ajudará a entender as colocações de nossos objetos em a tela. 4. Gritos e Co-Ordinates: Não vamos sair muito longe para o Canvas, se primeiro não entendermos algumas coordenadas básicas. Você já pode entender alguns desses, e não precisamos ir muito fundo, mas se não, agora vamos ter uma rápida recapitulação. Quando o desenhamos para o Canvas, ou na verdade, maioria dos sistemas de grade 2D, temos duas direções que precisamos saber. Este é o eixo x e y, x é horizontal da esquerda para a direita e y é vertical de cima para baixo. Ou seja, se você quisesse localizar o canto superior esquerdo desta grade, x e y, ambos serão zero, mas e algo como esse quadrado de muitas formas como esta? Embora ocupe vários espaços de grade, o local inicial é o canto superior esquerdo. É aqui que temos esse ponto vermelho. Novamente, a partir do canto superior esquerdo desta grade, vamos atravessar três espaços no eixo x e para baixo dois espaços no eixo y, que nos dá nossa posição inicial. Depois disso, uma vez que tenhamos nossa posição inicial no canto, podemos definir a altura e a largura de qualquer forma que você queira. Isso é tudo o que você realmente precisa saber para começar. Podemos então definir o tamanho dos gráficos e fazer outras coisas quando os criamos também. Isto é o que vamos ter vindo a seguir. 5. Desenhando na tela: Para ajudar com o desenho para a tela, criei um download para você usar durante este curso e também no futuro. Tudo o que você precisa fazer é acessar este link que você pode ver na tela, baixar o PDF e mantê-lo em um lugar seguro. Agora vamos entrar em nosso roteiro e dar uma olhada em como podemos usar alguns desses. No vídeo de coordenadas anteriormente, analisamos um exemplo de desenho de um quadrado. Vamos começar com isso. Observe também que os quadrados e retângulos usam o mesmo método de desenho. Acabamos de mudar os valores de largura ou altura Para desenhar um retângulo ou um quadrado usando a tela, o que precisamos fazer é primeiro acessar nossa variável de contexto, então ctx, e isso tem um método disponível chamado FillRect. Isso preencherá um retângulo com uma cor sólida ou mesmo algo como um gradiente. Vamos analisar em valores diferentes do ano 4. Assim como olhamos com o vídeo de coordenadas anteriormente, os dois primeiros valores são o local onde queremos colocar esse retângulo. Como isso é baseado no canto superior esquerdo do retângulo ou quadrado, quero começar este exemplo mostrando isso no canto superior esquerdo. A parte superior esquerda será x, 0 e y, 0. Em seguida, analisamos a largura e a altura que queremos que a forma seja. Para tornar isso um quadrado, podemos analisar em alguns valores pares como 100. Isso colocará um quadrado de 100 por 100 pixels no canto superior esquerdo da nossa tela. Também podemos empurrar isso pelo eixo x ou no eixo y, qualquer valor que quisermos. Se mudarmos o eixo y para 50, isso empurrará isso mais para baixo na tela. Assim como o método FillRect, também podemos alterar isso para ser traçado, então StrokeRect. Em vez de preencher uma cor sólida como estamos vendo, traço colocará um contorno ao redor da forma. Isso nos dará um contorno de um retângulo ou um quadrado. Para a maioria das coisas que desenhamos para a tela, teremos um traçado ou uma alternativa de preenchimento. Vou mudar isso de volta para ser preenchido. Também podemos criar um retângulo alterando a altura ou a largura. Se mudarmos isso para 200, por exemplo, isso nos dará um retângulo. Por padrão, teremos essa cor preta sólida. Podemos mudar isso acessando uma propriedade nesse contexto chamada FillStyle, logo acima do FillRect, novamente, acesse nosso contexto como faremos com todos esses recursos de desenho. Podemos acessar a propriedade chamada FillStyle. FillStyle será igual a uma string e definirá isso igual a uma cor como vermelho. Se atualizarmos o navegador, isso agora atualizará a cor de fundo. Se estivéssemos usando o StrokeRect em vez de preencher, como vimos antes, para fazer o esboço, também precisaríamos atualizar isso para ser o StrokeStyle para corresponder. Isso mudará a cor do contorno para vermelho. Vamos apenas desfazer essas duas alterações e sair como preenchimento. Como seria de esperar, esses retângulos serão úteis dentro do nosso jogo. Poderíamos usá-los para desenhar o jogador e também o remo do computador, que será usado para acertar a bola. Vamos dar a isso uma chance começando com os jogadores remar à esquerda. Para começar, como temos uma tela de altura de 400 pixels, podemos começar colocando isso no centro alterando o valor y para 200. A largura da tela, vamos definir isso como um valor de oito e a altura de 80. Atualizar. Você esperaria que o remo estivesse no meio, já que definimos esse valor y como 200, que é metade da altura. Mas, como já aprendemos, a posição inicial das coordenadas x e y está na posição superior esquerda da nossa forma, o que significa que a parte superior da forma está no centro da tela e não na centro do nosso retângulo. É aqui que precisamos começar a pensar sobre as coisas com mais cuidado. Para que o remo esteja corretamente no centro da tela, precisamos agora deduzir metade da altura do remo. Como sabemos que a altura do remo é de 80 pixels, poderíamos deduzir 40 da posição inicial. Isso funciona, mas uma opção melhor seria alterar esses valores para fazer uso de variáveis. As variáveis seriam usadas para realizar esse cálculo para nós, e também seria útil no futuro se mudássemos algum desses valores. Apenas ambos, podemos criar algumas variáveis. A primeira é a largura do remo usando os mesmos valores, então a largura de oito pixels. Então o segundo é para a altura do remo. A altura do remo é de 80 pixels, assim como já temos. Em seguida, podemos fazer uso desses em nosso método FillRect. A largura do remo, também a altura, e isso ainda deve funcionar exatamente da mesma forma. Mas agora, em vez de codificar esse valor de 160, o que vamos fazer agora é calcular isso usando JavaScript. Podemos pegar a altura da tela, que atualmente é de 400 pixels, dividir isso por dois para obter o centro que atualmente nos dá o valor de 200. Mas, como sabemos, 200 não colocarão isso no centro da tela. Também precisamos deduzir metade da altura da pá, então tela.altura dividida por 2. Também vou tirar a altura do remo dividida por dois. O que temos aqui é exatamente o mesmo de antes. Temos o valor de 200, takeaway 40. Isso é exatamente o mesmo de antes, mas usando variáveis. Salve e atualize. Agora, para o remo do computador, que vai acabar à direita, e isso tudo deve parecer bem parecido, tudo o que precisamos fazer é mudar a posição x para ficar à direita. Podemos alterar o FillStyle para ter uma cor diferente também. Movendo-se para baixo, todo o código a partir de agora terá uma cor diferente alterando o FillStyle. Vamos para o azul. Em seguida, usamos CTX.FillRect. Como mencionado, a única diferença entre o remo dos jogadores e o remo do computador é que queremos empurrar isso para o lado direito. O remo dos jogadores tem a localização inicial x de zero, que está à esquerda. O que queremos fazer para a versão do computador é colocar isso à direita acessando o canvas.width, que atualmente é igual a 800. Mas como essa posição inicial é baseada na parte superior esquerda do retângulo, isso realmente empurraria isso para fora da borda da tela. O que precisamos fazer é trazer isso de volta, deduzindo a largura do remo. Os últimos três valores são exatamente os mesmos que acima. Isso vai começar no centro. Podemos usar isso, e a largura e a altura do remo também foram definidas. Pegue todos esses três, adicione-os logo após a vírgula, deixando-nos com duas pás agora no lugar na tela. A próxima coisa que precisamos desenhar é uma bola. Você pode estar esperando um método chamado FillCircle ou algo ao longo dessas linhas. Mas para círculos, usamos um método chamado arco. Novamente, no contexto, chame o método arc. Isso é usado para criar um arco ou uma curva. Podemos formar um círculo girando essa curva de volta para a posição inicial. Ao contrário de um retângulo, como um arco é curvo, a forma não tem um canto superior para localizá-lo. Em vez disso, nós o localizamos pelo centro. Para colocá-lo no meio da tela, poderíamos fazer algo assim. Poderíamos acessar a divisão canvas.width por 2. Isso está colocando isso no centro do eixo x. Então também o mesmo para a altura. Ainda não terminamos. Em seguida, vem o raio do círculo, que é a dimensão do centro do círculo até a borda externa. Basicamente, metade da largura do círculo. Vamos colocá-lo em 50, separados por uma vírgula. O próximo valor no sentido horário é o ângulo inicial e final. Para iniciar isso efetivamente na vertical às 12:00 horas, começamos com a posição de zero. Para que a posição final gire isso ao redor e crie um círculo, precisamos girar isso em 360 graus. Mas ao usar o método do arco, essa rotação é em radianos, não em graus. O equivalente a 360 graus em radianos é 2 vezes Math.pi. É assim que podemos fazer isso usando JavaScript. Agora, se salvarmos isso e atualizarmos o navegador, atualmente não veremos nenhum círculo na tela. Ainda não vemos nosso círculo na tela, porque primeiro precisamos declarar se queremos que esse círculo seja um preenchimento ou um traço. Podemos fazer isso com ctx.fill. Este é um método, então precisamos dos suportes logo depois. Atualizar. Isso agora preencherá nosso círculo com uma cor de fundo sólida. Como seria de esperar, também poderíamos usar o método do traçado para nos dar o contorno do nosso círculo. Vou manter isso como preenchimento. Altere também a cor de preenchimento logo acima usando FillStyle e defina isso igual a cinza. Como 2 vezes Math.pi é um círculo completo, você provavelmente pode adivinhar que metade desse valor é um meio círculo, então, em vez de cronometrá-lo por dois, podemos apenas dizer Math.pi. Este será um meio círculo. Novamente, se você quiser que essa seja uma linha, você pode mudar isso para ser traçado. Você também pode reduzir ou aumentar o valor de Math.pi. Se dividirmos o valor de Math.pi por 2, isso nos dará um quarto de círculo. Como você pode imaginar, esse arco é um método bastante versátil. Mas como precisamos de uma bola, vou restabelecer isso para ser 2 vezes Math.pi, assim como tínhamos antes. Também podemos alterar isso para ser uma cor de preenchimento, e também um raio de bola menor de 10 pixels. Este é apenas um primeiro olhar básico sobre o desenho para a tela. Como seria de esperar, há muito mais para aprender e muitas outras coisas que você pode fazer. Começaremos a ver alguns desses no próximo vídeo. 6. Texto, linhas e caminhos: Continuando com o vídeo anterior, agora vamos descobrir mais algumas técnicas que podemos usar para desenhar para o Canvas, desenhar algumas linhas e também algum texto. Isso vai ser muito útil para o nosso jogo. Começarei desenhando textos para o Canvas, que será usado para desenhar a pontuação do usuário e também solicitar que o usuário comece o jogo. O desenho de textos na tela temos dois textos de traçado, mas um contorno, e o FillText, ou uma cor sólida. Vamos começar na parte inferior do nosso roteiro. Acesse o contexto e começaremos com FillText. Para FillText, a primeira coisa precisamos adicionar é uma string, que é o texto que queremos exibir, então ei, seguido pelas posições x e y onde queremos colocar isso. Vamos para 150. Salve e atualize. Podemos ver esse pequeno texto no Canvas, mas é muito difícil de ver porque o tamanho padrão é 10 pixels com uma fonte sans serif. Mas, é claro, podemos mudar isso em nosso JavaScript. Primeiro de tudo, vamos alterar o FillStyle para ser igual a qualquer cor, como vermelho e também para alterar o tamanho e também a família de fontes. Podemos acessar ctx ou fonte. Defina isso igual a uma string. Isso leva exatamente a mesma sintaxe que faríamos com a propriedade CSS on para que possamos passar uma string do tamanho do pixel. Vamos para 30 e depois a família de fontes de Helvetica. Atualize e isso entra em vigor. O que seria bom ter é a pontuação do jogador exibida em ambos os lados da tela. Se tivéssemos a pontuação do jogador no meio da metade esquerda e a pontuação do computador no meio da metade direita. Para simular isso para a pontuação do jogador, precisamos efetivamente nos empurrar em um quarto da largura da tela. Para simular uma pontuação, podemos colocar em qualquer valor dentro daqui, como três, e depois empurrar mais de um quarto da largura. Podemos primeiro pegar a tela, essa largura e dividir isso por 4. A pontuação do computador, isso precisa ser de três quartos do caminho através do Canvas e podemos duplicar isso. Altere a pontuação por enquanto. Mas em vez de dividir o Canvas por 4, vamos multiplicar isso por 0,75, empurrando nosso texto três quartos do caminho através da tela. Finalmente, também podemos armazenar esses dois valores em variáveis para que possamos acessá-los e usá-los mais tarde no curso. De volta ao topo, usando LET para que possamos atualizá-los à medida que o jogo está progredindo. A primeira variável é a pontuação do jogador. Temos um valor inicial de 0, seguido pela pontuação do nosso computador. Essas variáveis agora podem ser usadas dentro do nosso método FillText. Remova o valor codificado e esta é a pontuação do jogador. A segunda é a pontuação do computador. Outra coisa que o Canvas nos dá é a capacidade de desenhar usando linhas. Temos dois métodos úteis disponíveis chamados ferramenta de movimentação e ferramenta de linha. Vamos dar uma olhada nestes. CTX.moveto e CTX.Lineto. O primeiro de movimento para é usado para mover para a posição inicial e, em seguida, linha para é o que realmente desenhar uma linha na tela para a posição final que definimos. Mover para é como levantar a caneta pouco de papel e movê-la para uma determinada posição. A linha para é usada para realmente desenhar a linha. O que vou usar isso é desenhar uma linha central verticalmente na tela e também no círculo central também. Primeiro, vamos começar com essa linha vertical e precisamos primeiro mover a posição da caneta para estar no centro da tela e no topo. Os valores para isso, em primeiro lugar, para x é metade da largura da tela e a posição y é 0, já que queremos manter isso no topo. Mova-se dependente para estar nessa posição aqui. Agora, precisamos usar a linha para método. Na verdade, desenhe uma linha para o local final, que está na parte inferior, passando no local final para que isso ainda esteja no centro da tela para que possamos pegar a largura da tela dividida por 2 e a posição y final está na parte inferior. Esta é a tela.Altura. Isso então definirá onde queremos desenhar nossa linha mas na verdade coloca no Canvas, precisamos usar o método de traçado, então ctx.stroke e há uma linha de cima para baixo. Isso é muito bom, mas se olharmos de perto, também temos uma linha indesejada adicional em torno desta bola. Isso acontece porque, no momento, não temos nenhuma separação entre todos esses caminhos do Canvas e os gráficos que criamos. Por exemplo, logo acima, desenhamos um círculo usando o método do filme. Nós desenhamos isso, como seria de esperar com essa cor cinza, mas o código continua sendo executado todo o caminho para baixo e também desenha o mesmo círculo usando o método de traçado também. É por isso que a bola tem um preenchimento e também um contorno do golpe para. Quando isso acontece, podemos separar cada uma dessas seções usando um método chamado start path. Vamos chamar isso logo acima nossa seção de linha com ctx.beginpath. caminho inicial eliminará efetivamente todos os caminhos existentes acima e iniciará um novo a partir desta linha. Salve e atualize e agora nossa linha foi removida do círculo, deixando apenas a linha vertical que pretendemos , bem como essa linha sólida. Também podemos alterar isso para ser uma linha tracejada também. Podemos fazer isso antes de traçarmos nossa linha com ctx.setlinedash. Set line dash é um método que leva uma matriz dentro dessa matriz JavaScript, definimos o tamanho de forma que os traços e também as lacunas entre cada um deles. Se fizermos algo assim, 10, 10, 20, 20 e 30, isso definirá todos os valores para nossos traços e espaços para que tenhamos o tamanho do primeiro traço, o tamanho do primeiro espaço, o tamanho do segundo traço, o tamanho do segundo espaço e, em seguida, o tamanho do terceiro traço e, em seguida, ele será repetido até o final da linha. Dez pixels para a primeira linha e, em seguida, 10 pixels para a primeira lacuna e depois passamos para 20 e depois 30. Para manter isso simples, vou passar um único valor de 6 e isso garantirá que cada um dos nossos espaços e também nossos traços estejam em igual valor. A última coisa a desenhar será um círculo central. Sabemos como desenhar um círculo usando o método de arco. Mas desta vez também definiremos uma linha tracejada até o final e começaremos uma nova seção com ctx.beginpath. Para o nosso círculo, ctx.arc. Assim como nossa posição de bola inicial, precisamos colocar isso no meio da tela com tela Largura dividida por 2 e também a mesma para a altura. Pegue isso, cole-os. O terceiro valor é o raio e como temos uma bola de 10, vamos fazer disso um valor de 20. Para o círculo, a posição inicial é 0 e um círculo completo é 2 vezes math.pi. Na verdade, desenhe o círculo que você precisa para chamar o método do traçado deixando nosso círculo central agora no lugar na tela. Isso é a maior parte do que precisamos para nossos jogos em funções de desenho e a grande parte sobre o uso variáveis como essa é que no futuro podemos atualizar esses valores para mover nossos objetos no Canvas. 7. Looping: Looping será uma parte muito importante do movimento das coisas dentro do nosso jogo. Se você pensar sobre isso no momento, atualmente estamos desenhados coisas como uma bola e também os pedais na tela. Mas o que precisamos fazer é atualizar esses valores para movê-los para uma direção diferente, e então precisamos redesenhar e repetir continuamente isso usando um loop. Isso é o que vamos dar uma olhada agora. Na parte inferior do nosso script, a primeira coisa a fazer é criar uma função que você deseja chamar repetidamente loop. Você pode dar a isso qualquer nome de sua escolha, eu vou ficar com loop este. O objetivo desta função é desenhar autográficos repetidamente , como a bola e remos depois que eles se movem de posição. Para chamá-lo, podemos usar um método JavaScript chamado setInterval. setInterval repetirá nossa função de loop após vários milissegundos. Chamamos isso na parte inferior, isso vai levar duas coisas, a primeira coisa é a coisa que queremos repetir e, no nosso caso, é nossa função de loop. Vamos passar isso, seguido um atraso de tempo em milissegundos. Vamos definir isso atualmente para 15, e você pode aumentar isso para o jogo mais lento e reduzir isso para um jogo mais rápido. Esta função de loop acabará por repetir muitas partes do nosso código que temos acima, mas, por enquanto, vamos colocar em um simples log de console para que possamos verificar se isso está funcionando. Então, qualquer texto dentro daqui, salve isso, e agora podemos entrar no console e verificar nosso setInterval está chamando nossa função, inspecionar, pular para o console, e agora, se atualizarmos, podemos ver que isso é chamado a cada 15 milissegundos. Vamos começar substituindo este registro do console pela nossa bola. Para desenhar nossa bola, poderíamos cortar e colar o código que usamos para desenhar nossa bola, que é o método ctx.arc. Ou, em vez disso, poderíamos envolver isso em uma função e chamar isso diretamente. Logo acima disso, criará uma nova função chamada DrawBall. Isso vai envolver todo o nosso código logo abaixo. Abra os suportes encaracolados assim, e então podemos cortar e colar e mover isso diretamente para dentro da nossa função. Agora, podemos chamar nossa função DrawBall de dentro do nosso loop, substituir o registro do console, passar nossa função DrawBall e chamaremos isso a cada 15 milissegundos e atualizaremos o navegador. Algumas coisas a serem observadas aqui, a primeira coisa que você notará é que nossa bola agora é grande demais. Parece que temos um conflito entre os caminhos que estamos desenhando novamente, que pode ser corrigido com CTX.BeginPath. Vou adicionar isso dentro da nossa função DrawBall, atualizar e isso agora corrige nosso primeiro problema. O próximo problema é que a bola na verdade ainda não está se movendo. Isso pode ser esperado porque, embora tenhamos desenhado essa bola repetidamente a cada 15 milissegundos, sempre a desenhamos no mesmo local. Na função DrawBall, sempre desenhamos isso para o centro, e podemos alterar esses dois valores com algumas variáveis que podemos atualizar. Para a largura, que é a exposição, substituímos isso por BallX e Bally pela posição Y. Ainda queremos que ambas as variáveis estejam inicialmente no centro da tela. Primeiro de tudo, BallX, será igual à largura da tela dividida por 2. Coloque isso inicialmente no centro e, em seguida, para Bally logo abaixo, dividiremos a altura da tela por 2. Como esperaríamos se salvássemos e atualizássemos, ainda não vemos nenhuma porque realmente precisamos atualizar os valores de BallX e Bally cada vez que o quadro for repetido. Podemos fazer isso novamente em nossa função DrawBall depois que isso foi desenhado. Assim que passarmos para o próximo loop, atualizaremos o valor de ambas as variáveis , além de igual a 2. Além disso, adicionaremos o valor de dois à nossa variável BallX e, em seguida atualizaremos a variável, Bally é igual. Vamos manter isso curto, já que não temos tantos problemas no eixo y, então o valor de um está bom. Atualize isso. Agora vamos ver a bola viajando na tela. Isso agora está atualizando, mas ainda temos essa trilha sólida na tela, já que a posição anterior da bola precisa ser removida. Podemos consertar isso com um método de tela chamado ClearRect, que limpará todos os desenhos existentes da tela antes de redesenharmos nossa bola até o nosso loop, coloque-o no início, pouco antes de nós repetido para chamar nossa função, passando ClearRect, que está disponível no contexto. Se quisermos ter a opção de limpar apenas peças pequenas ou uma seção específica da tela, em nosso estojo, limparemos a tela completa. Primeiro, passamos no local inicial que está no canto superior esquerdo, que é a coordenada de 0, 0, e depois limpamos a largura total e a altura total. Primeiro de tudo, passando em tela.width, separada por uma vírgula, tela.height e, novamente, substitua isso por pequenos valores. Se você quiser remover apenas uma pequena parte da tela para o navegador, a bola agora se move como esperado sem sair dessa trilha sólida. Vá para a bola, agora se move como esperamos, e não vemos mais nada agora na tela, já que a limpamos com o ClearRect. Estamos limpando a tela cada vez, chamamos essa função de loop. O que precisamos fazer é pegar nossas funções de desenho de cima e também movê-las para o nosso loop. Além disso, os benefícios adicionais de todas essas funções de desenho estarem no loop é que muito em breve vamos atualizar a posição do remo com um teclado, e isso também atualizará a posição na tela em cada loop. Mas, por enquanto, iremos até onde desenhamos nossas formas, e faremos o mesmo que fizemos com a bola, que é envolver todo o código relevante em uma função autônoma. Então, ele pode ser chamado de dentro do nosso loop. Primeiro, a função de desenho foi o remo do jogador, que está aqui logo abaixo de nossas variáveis. Recorte isso e crie uma nova função chamada DrawPlayerPaddle, cole isso de volta em nossa função. segundo é desenhar um remo de computador, e isso é para toda a seção azul. Recorte isso e crie nossa nova função chamada DrawComputerPaddle. Mais uma vez, cole em nosso código, função DrawBall ainda está em vigor. O próximo foi FiltText, e isso é para desenhar a pontuação na tela. Então, corte isso, crie uma nova função chamada DrawScore e, em seguida, cole isso de volta no corpo. As próximas duas seções são para desenhar nossas linhas para a tela. Este era para a linha central e também para o círculo no meio. Colocaremos ambos em uma única função chamada DrawCanvas. Cole isso em. Agora podemos chamar todas essas novas funções do nosso loop: DrawplayerPaddle, que foi o primeiro, seguido por DrawComputerPaddle, DrawScore e, finalmente, DrawCanvas. Vamos experimentar isso, vamos ver o navegador. Agora, depois de limpar nosso retângulo junto com a bola, todas as outras funções de desenho agora estão funcionando. Como seria de esperar, esta é uma parte muito importante do nosso jogo e um grande passo na direção certa. na próxima lição, vamos dar uma olhada em como podemos usar o teclado para mover os jogadores cima e também para baixo até a bola. 8. Como mover objetos com o teclado: Agora chegamos à parte divertida onde podemos realmente fazer as coisas se moverem no Canvas usando controles como o mouse ou o teclado. O objetivo deste vídeo é ouvir quando o usuário pressionar o botão para cima ou para baixo no teclado, então vamos mover o remo dos usuários. Podemos fazer tudo isso com JavaScript regular. No momento, temos esse jogador remo à esquerda. Se formos para a função de remo do jogador de desenho , que controla isso , aqui, podemos ver com o local das coordenadas x e y. Embora isso acabe à esquerda porque temos o valor x para ser 0 e o valor y está definido para estar no centro. Para atualizar nosso remo com o teclado, precisamos substituir esse valor y por uma variável. Para mantê-lo posicionado no centro e não no canto superior esquerdo, ainda podemos manter essa altura de peddle dividida por 2. Mas a altura da tela dividida por 2 pode ser substituída por uma variável chamada posição do jogador. Uma posição precisará ser criada no topo com o resto de nossas variáveis. Usamos let, pois isso precisa ser atualizado. Jogue a posição e defina isso igual a Altura da tela dividida por 2. Para começar, isso deixará nosso jogador no centro da tela, como antes. Mas agora temos uma variável que podemos atualizar. Isso também será verificado em cada loop pois chamamos nossa função do nosso loop. Com essa variável agora configurada, podemos começar a ouvir eventos de teclado, mover a posição do jogador. Logo abaixo disso, o que precisamos fazer é ouvir um evento de teclado com addEventListener. Este é apenas um documento JavaScript regular . ADDEventListener. Vamos ouvir o evento de um usuário. O evento que queremos ouvir é uma tecla que está sendo pressionada, o que acionará uma função que vou chamar de MovePaddle. Função MovePaddle. Como isso não é evento, precisamos acessar as informações do evento para descobrir exatamente qual tecla o usuário pressionou, precisamos passar as informações do evento para nossa função. Comece, começaremos com um log de console transmitindo o valor de e. Podemos ver exatamente quais informações de eventos temos para o nosso evento chave para baixo. Pule para o console, atualize. Isso não fará nada para começar até que o usuário tenha pressionado a tecla. Vamos começar com a tecla para cima, que imprimirá todas as informações de nossos eventos de teclado. Há muitas informações aqui que não precisamos. Mas a principal coisa que você precisa para este projeto é essa propriedade de código. Você pode ver que esta é uma sequência de seta para cima. Se agora fecharmos isso e pressionarmos a seta para baixo, o código que você precisa para este é Seta para baixo. Podemos acessar e.code e verificar se cada um deles é igual à seta para cima ou a seta para baixo, então podemos definir o valor da posição do jogador. Vamos remover o log do console pois sabemos o que estamos procurando agora e substituí-lo por uma instrução de switch JavaScript. O valor que queremos verificar, como acabamos de ver, é e.code. Como somos apenas a lista atual agora para a seta para cima sendo pressionada ou a seta para baixo, ela pode substituí-la por instruções if else, se você preferir. Mas eu quero usar uma instrução switch para que possamos estender isso mais tarde para usar o teclado para iniciar o jogo. Para começar, o primeiro caso que precisamos ouvir é Arrow Up. Certifique-se de que isso corresponda à string exatamente como vemos dentro do console. Cada palavra começa com uma maiúscula. Se a seta para cima tiver sido pressionada com a necessidade de atualizar a posição do jogador deduzindo um valor. Porque lembre-se, o valor de y no topo é 0. Isso é atualizado à medida que a posição do jogador se move para baixo passando nossa variável de posição do jogador. Para isso, faremos uso do operador de atribuição de subtração, que subtrairá nossos valores específicos, como 15 do nosso valor atual e, em seguida, reatualizará essa variável. Cada um de nossos casos precisa ser seguido com uma cláusula break. Saia da nossa instrução switch se este caso estiver sendo correspondido. Também precisamos colocar em dois pontos dentro daqui. Nosso segundo caso está logo abaixo. Este será para o caso de Seta para baixo : Desta vez, atualizaremos a posição do jogador com o operador de atribuição de adição, que adicionará 15 e, em seguida, reatribuirá nosso novo com o valor atualizado. Vamos sair disso se este for verdade. Como nossa posição do jogador é usada dentro da nossa função quando desenhamos o remo, agora devemos poder atualizar isso quando pressionarmos as teclas para cima e para baixo. Também podemos mover qualquer outra coisa na tela usando a mesma técnica. Em um vídeo futuro, veremos como mover o remo do computador para cima ou para baixo, mas este precisa ser feito automaticamente. Em seguida, vamos cobrir como lidar com a bola saltando de nossos objetos. 9. Detectando colisões e saltos: Que tipo de jogo teríamos se a bola não saltasse dos lados ou também das remos? Bem, este é complicado porque envolve algum trabalho porque todas as nossas coordenadas atuais são baseadas nas linhas centrais de coisas como a bola e também o remo. Mas faremos o nosso melhor para descobrir as coisas e seguiremos para isso agora. Se localizarmos essa função de draw ball, sabemos que essas duas linhas de código no final são responsáveis por mover nossa bola. Cada vez que a bola é desenhada para a tela, vamos mover o valor da bola X e também o valor da bola Y. Além disso, sabemos como mudar a direção. Se agora atualizarmos isso, isso passará em uma direção positiva. Também podemos mudar a direção alterando qualquer um desses valores para ser um número negativo. Esta será a base de saltar de nossas paredes e também do remo. Para fazer isso, em vez de ter nossos valores codificados assim, vamos atualizar essa função para usar variáveis. Mova x para o local x e mova y para a direção y. Isso tornará a atualização desses valores dinamicamente muito mais fácil para que possamos reverter a direção quando houver uma colisão. Na parte superior, vamos configurá-los como variáveis. Primeiro de tudo, mova x e, por enquanto, vamos manter os mesmos valores codificados que tínhamos antes. Mover y isso era igual a um. Mas você pode atualizá-los para valores diferentes, se quiser. Também mais uma variável para o raio da bola, que é um valor inicial de 10. Vamos precisar muito disso quando estamos calculando as colisões. Isso ocorre porque a bola está posicionada a partir do ponto central do círculo, mas quando ela chega ao topo, por exemplo, também precisamos levar em conta o raio da bola. Também podemos atualizar nossas funções para fazer uso do raio da bola logo abaixo. De volta para desenhar bola. Aqui estamos definindo o raio da bola para ser também alguns pixels, ou podemos atualizar isso para usar nossa variável. Agora, vá para a função para verificar se há uma colisão. Vamos configurar uma função na parte inferior logo acima do nosso loop. Vou chamar minha função de colidir. Então essa função será responsável por verificar quatro coisas diferentes. A primeira coisa é saltar de cima e de baixo. Também queremos verificar se há contato à esquerda ou à direita do nosso jogo, então precisamos verificar a pontuação no eixo x. Isso se aplica a ambos os lados. Também queremos verificar se há contato com o remo dos jogadores. Além disso, o mesmo para o remo do computador também. Bom. Agora sabemos o que queremos fazer dentro dessa função, e podemos chamar isso logo abaixo do nosso loop. Isso significa que verificaremos todos os pontos de colisão em qualquer quadro do nosso loop. Verificaremos o contato sempre que algo se mover. Agora temos um pouco de trabalho para fazer dentro dessa função de colisão. Pouco antes de começarmos a trabalhar nossos quatro pontos de contato, vou desenhar uma bola temporária na tela. Podemos mover isso e garantir que temos os pontos de contato corretos. Primeiro de tudo, começaremos um novo caminho. Ele não interfere em nenhum outro desenho. O estilo de preenchimento. Você pode fazer isso qualquer cor que quiser apenas para que ele se destaque, eu vou para o roxo. Então ctx.arc para desenhar nossa bola na tela. Qualquer local por enquanto, qualquer local aleatório está bom, 10 pixels no x e y como no raio da bola. Para fazer nosso círculo, o ângulo inicial pode ser zero e, em seguida, 2 vezes Math.pi. Desenhe isso, a última coisa que precisamos fazer é ctx.fill, save, e há uma bola no canto superior da nossa tela. Certo. Os primeiros pontos de contato que queremos verificar são a parte superior e inferior da tela. Começando pela parte inferior. Vamos mover nossa bola temporária até a parte inferior da tela e garantir que temos o ponto de colisão correto. O eixo x não importa por enquanto, mas precisamos mudar a direção y. Mas antes de tudo, passaremos na tela.height, salve isso. Como você pode ver, isso empurrará isso para fora da borda da tela, então precisamos puxar essa metade do raio da bola. Já temos isso armazenado como uma variável, para que possamos deduzir isso da altura da nossa tela. Lá vamos nós. Este é o ponto de colisão na parte inferior da tela que queremos tomar cuidado. Agora, podemos fazer uso disso em uma declaração if. Queremos verificar se algo é verdade. A verificação que você deseja fazer é se a bola y, que é a localização no ponto central da bola, é maior do que a localização da bola que acabamos de desenhar; se a bola foi mais longe abaixo desse ponto atual, ele é considerado fora da tela, e então precisamos girar a direção. Pouco antes de fazermos isso, vamos testar que isso está funcionando bem com o log do console do hit bottom. Entre no console e atualize o navegador. Assim que o ponto de contato chegar à parte inferior da tela ou se apagar, queremos que nosso log do console seja executado dentro daqui. Saltar esta bola é bem simples. Atualmente, quando o jogo começa, a bola vai em uma direção positiva ou descendente, mas podemos reverter isso mudando isso para um número negativo, assim como vimos no início deste vídeo. Agora, nisso e como estamos trabalhando na direção y, podemos substituir nosso log do console atualizando a variável. Mover y, que é o local atual, é igual a uma versão negativa do movimento y. que efetivamente reverterá o positivo para um negativo e um negativo para um positivo. Vamos salvar isso e experimentar isso. Atualize, e devemos ver um salto fora do fundo. Claro que ainda sai do canto do lado direito da tela, mas tudo bem. Agora podemos ver que nosso salto está funcionando. Bom. Agora precisamos explicar a colisão na parte superior da tela também. Dentro da instrução if, adicionaremos uma condição ou. Desta vez, queremos verificar se a localização da bola y está apenas tocando a parte superior da tela. Não queremos verificar se isso é igual a zero porque se fosse, por causa do raio da bola, isso seria meio desligado e meio na tela. Também queremos deduzir o raio da bola. Verificamos se isso é menor ou igual a zero. Se for, ele deve saltar da parte superior da tela. Atualmente, quando recarregamos o navegador, a bola se move na direção descendente. Mas para testes, podemos mover a direção y de movimento para ser um número negativo, e isso fará com que a bola se mova em uma direção ascendente. Este é o básico de como podemos saltar uma bola. Na verdade, é principalmente um caso de apenas verificar se nossos pontos de contato estão corretos, e também garantir que também consideramos o raio da bola também. Agora vamos adicionar uma condição para verificar se a bola atinge o lado esquerdo ou direito da nossa tela e, posteriormente, isso aumentará as pontuações. Este será todo baseado na localização da bola x para o lado esquerdo e direito do nosso jogo. Volte para a nossa função, que está colidindo. Então, logo abaixo dos nossos comentários, também queremos colocar em uma declaração if. Primeiro de tudo, para verificar se a bola está colidida no lado esquerdo. Atualmente, nossa bola temporária é exatamente onde queremos que o ponto de contato esteja, que é definido como um valor de 10. Tudo isso funciona bem porque nosso raio de bola está definido para 10. Queremos verificar se a localização armazenada dentro da variável da bola x é menor ou igual ao raio da bola. Efetivamente, se a bola estiver à esquerda, onde está agora, queremos passar uma pontuação para o computador. Forneceremos uma maneira de fazer isso mais tarde, mas, por enquanto, basta colar em um registro do console da pontuação do computador. Então, abaixo disso, uma seção else-if. Isso será para o nosso cheque ver se o jogador marcou movendo a bola para o lado direito. Para este, passamos na localização da bola x. Queremos ter certeza de que a bola está tocando o lado direito da tela. Novamente, a posição x verticalmente está no centro da bola. Também queremos verificar se a bola x mais o raio da bola é maior que igual à largura total da nossa tela. Podemos pegar isso com a largura da tela. Em seguida, colocando um registro de console para a pontuação do jogador, teste isso no console. É um pouco maior. Você tem um erro de digitação na linha 85. Isso só quer ficar juntos, sem espaço no meio. Vamos experimentar isso agora. Se a bola se mover para a direita, vemos que há uma pontuação de jogador. Se subirmos à nossa localização x no topo, pode ser apenas um número negativo. Podemos então testar a pontuação do computador. Aqui vamos nós. Isso agora tudo funciona como esperado. As coisas estão realmente começando a tomar forma agora com o nosso jogo. Em seguida, vamos dar uma olhada em outra seção importante, que é saltar a bola das remos em movimento. 10. Contato com pá: De forma semelhante a saltar dos lados da nossa tela, agora também precisamos explicar a bola batendo nossas pás móveis também. Isso envolve um pouco mais de trabalho porque precisamos explicar não só a bola batendo na frente do remo, mas também precisamos verificar se a localização da bola está entre a parte superior e a parte inferior do remo também. Começando com o remo do nosso jogador, para verificar se estamos trabalhando corretamente, podemos usar esta bola temporária, colocar isso na frente do remo e verificar se temos o ponto de contato correto. Salte para a função colide e, no topo, temos esse arco que está criando esta bola temporária. Remova esse valor e coloque isso na face do remo, precisamos mover isso no eixo x, no raio da bola, mais a largura da pá que é armazenada na variável de largura da pá. Atualize e, em primeiro lugar, podemos ver esse movimento e, apenas para confirmar isso, podemos mover isso o centro ajustando o eixo y igual à altura da tela dividida por 2. Lá vamos nós. Agora temos o ponto de contato correto para o nosso remo. Podemos usar esse ponto de contato agora para verificar se a bola é menor ou igual a esse valor X. vez, configuramos uma declaração if assim. Vá para o nosso comentário, que é verificar o contato do remo do jogador. A instrução if verificará se a posição da bola X é menor ou igual à posição X que acabamos de definir, que é o raio da bola mais a largura da pá neste final. Basicamente, verificando se esta posição da bola está onde ela está agora ou menor que. Usando nossa variável move X, podemos reverter isso definindo isso igual ao equivalente negativo. Lembre-se aqui, embora tudo o que estamos fazendo é verificar a localização X, então a bola deve saltar em qualquer lugar verticalmente, de cima para baixo, desde que esteja em linha com a face do remo. Vamos atualizar isso e testar isso. Agora devemos ver um salto antes que ele atinja a parte de trás da tela. Bom, então tudo isso agora funciona bem. Em seguida, queremos restringir esse salto para que só aconteça quando a bola estiver entre a parte superior e a parte inferior do remo. Já temos uma variável em nosso jogo chamada posição do jogador, que está definida para estar inicialmente no centro da tela, que para nós agora seria 200. Quando as teclas para cima e para baixo são pressionadas, o ponto central para o remo atualizará a variável de posição do jogador para que sempre saibamos onde isso está. Por exemplo, digamos que esteja atualmente em 100, em seguida, precisamos verificar onde a bola está em relação ao remo. Agora podemos usar 70 como posição da bola. Tire esse valor do remo e podemos ver que a diferença é de 30 pixels, e esse é um número positivo. Em outro exemplo, aqui podemos ver que a posição da bola é 125. Mais uma vez, tire isso da posição do jogador, mas desta vez o resultado é um número negativo de 25. Mas por que esse cálculo é importante? Bem, isso importa porque se esse número estiver dentro da altura do remo, deve haver um contato. Teríamos metade da altura do Paddle já que estamos trabalhando a partir da linha central e também precisamos explicar o raio da bola também. É aqui que as coisas podem ficar um pouco mais complexas. Aqui nós adicionamos o raio ou deduzido, dependendo de qual lado da bola está ligado, valores positivos e negativos. No slide anterior, também tínhamos os mesmos números positivos e negativos para contabilizar também. Isso significa que poderíamos escrever algum código complexo para explicar isso ou poderíamos tornar nossas vidas muito mais fáceis mudando cada comparação para ser positiva ou podemos fazer isso com um método matemático chamado absoluto. Para ver como o matemato. absoluto funciona, vamos pular para o console e testar isso. Colocando um registro de console com o valor de matemática, delta abs passando em um número positivo, como dois. Agora, se atualizarmos e entrarmos no console, podemos ver que temos o valor de dois , assim como esperado no console. No entanto, se mudarmos isso para ser um valor negativo, vou apenas mover isso para fora do loop para que ele não continue repetindo. Atualize, também podemos ver que o valor ainda é um número positivo de dois. Independentemente de passarmos em um número positivo ou um número negativo, sempre obtemos o equivalente positivo mostrado. O ponto aqui é que podemos usar esses métodos absolutos para garantir que o cálculo entre a bola e o remo seja sempre positivo, o que significa que sempre podemos comparar esse valor com um positivo ação de adicionar o raio da bola em vez de ter que trabalhar se quisermos adicionar ou deduzir isso. Vá para o código e vamos ver como isso parece. Podemos remover nosso registro do console e, em seguida, entrar em nossa declaração if na parte superior. Atualmente, verificamos apenas a exposição, mas agora também precisamos verificar a posição Y com o operador “AND”. Agora vamos verificar se a bola está entre a parte superior e a parte inferior. Passando matemática para abdominais. Sempre recebemos um número positivo. O que queremos fazer é verificar se a posição da bola Y, tirar a posição do jogador. Lembre-se que isso nos dará esse valor entre a bola e o remo, mas sempre será um número positivo ao contrário dos slides. Em seguida, verificamos se esse valor é menor ou igual à altura do remo, dividido por 2 mais o raio da bola. A razão pela qual podemos adicionar o raio da bola, e não precisamos nos preocupar em tirar dependendo de qual lado ele está é porque estamos sempre convertendo isso para ser um número positivo, portanto, estamos sempre adicionando o raio da bola. Vamos salvar isso e experimentar isso dentro do navegador. Em primeiro lugar, a bola pode jogar automaticamente, e se agora movermos o remo no lugar, eles agora devem causar um ponto de contato entre a bola e o remo. Sei que isso pode parecer difícil, mas sem essa conversão positiva, não precisaríamos duplicar isso para a bola estar acima ou abaixo da linha central do remo. Agora, com isso funcionando, a próxima coisa a fazer é verificar o ponto de contato para o remo do computador. Este será bem parecido, então podemos copiar a declaração if completa na seção do player e colar isso logo abaixo do comentário do computador. Primeiro, a exposição precisa estar à direita. Agora precisamos verificar se a posição da bola agora é maior, adicionar o raio da bola para explicar isso. À direita do maior ou igual, precisamos verificar se a bola está além da face do remo do computador. Podemos fazer isso verificando a tela, largura, levando a largura do remo. Esta deve ser a posição X cuidada e, para a posição y, isso será bem semelhante. Queremos também verificar se isso está entre a parte superior e a parte inferior do remo em vez verificá-lo contra a posição do jogador, queremos verificar isso contra a posição do computador. É claro que este ainda não foi criado então vamos até o topo onde criamos nossas variáveis e podemos duplicar posição do jogador e mudar essa para ser a posição do computador. Novamente, definir isso para estar no centro da tela é completamente bom para o início do nosso jogo. A posição do computador também será atualizada em um vídeo futuro. Para limpar isso, agora podemos voltar para a função colide e remover nossa bola temporária, não precisamos mais disso. Vai ser muito difícil testar se o remo do computador está funcionando, já que não podemos mover isso em direção à bola. Mas uma coisa que podemos fazer apenas para verificar as coisas e verificar que temos um salto, é mudar a posição Y de movimento para ser um valor de zero. Isso moverá a bola horizontalmente em nosso jogo, fora do remo dos jogadores. Excelente, então o salto agora está funcionando em ambos os remos. Agora ele muda de volta, Negativo 1 já que sabemos que isso está funcionando. Nós passamos por uma das partes mais difíceis do nosso jogo. Pode ser um pouco difícil de aceitar, mas isso realmente é uma parte essencial para fazer nosso jogo funcionar corretamente. Não é perfeito. Não contabilizamos certos casos de borda, como se a bola atingisse o topo ou o fundo do remo, mas não queremos ir muito fundo neste curso. Em seguida, no próximo vídeo, vamos dar uma olhada em como rastrear as pontuações, tanto para o jogador quanto para o computador também. 11. Seguindo pontuações: Já usamos o método filtText para desenhar nossa pontuação no Canvas e nossas pontuações também são armazenadas em variáveis. Também sabemos quando o jogador ou o computador marca acertando a bola do lado esquerdo ou direito do nosso Canvas. O próximo passo lógico seria atualizar essas variáveis quando isso acontecer, para depois atualizar a pontuação na tela, essas variáveis onde o jogador pontuação e também a pontuação do computador na nuvem Função, vamos localizar isso dentro do nosso script. Só aqui. No momento, entramos no console quando um jogador ou o computador marcou. Dentro da nossa instrução if else if, poderíamos atualizar diretamente nossas variáveis de pontuação dentro daqui, mas, em vez disso, vou chamar uma função. Esta função também verificará outras coisas, como se o jogo acabou e também colocará a bola de volta no centro. Substituiremos esses dois logs de console por uma função que vamos criar em breve chamada score. A função de pontuação também precisará estar ciente de qual de nossos jogadores marcou. Para o nosso primeiro, passaremos no computador como uma corda, e para o segundo, se o jogador marcou, passaremos o jogador para essa função. Claro, precisamos criar isso e apenas explodir nossa Função Cloud, criar nossa função chamada score. Aqui dentro, vamos pegar o jogador. Lembre-se que esta variável de jogador será igual ao nosso computador ou ao nosso jogador. Podemos verificar qual deles foi passado com uma instrução if. Se a variável player for igual ao computador, faremos algo dentro daqui, que é atualizar nossas variáveis. Lembre-se, no início, analisamos a pontuação do jogador e a pontuação do computador, e aqui vamos atualizar ambas as variáveis pelo valor de uma. Este é para a pontuação do computador. Aumenta com plus-plus. Caso contrário, atualizamos na pontuação do jogador. Vá para o navegador e vamos testar este. Vamos deixar a bola desmaiar e o remo. Podemos ver que a pontuação do computador está subindo muito rápido. A razão pela qual isso acontece é porque cada vez a bola se move ou cada vez que temos um novo quadro dentro do nosso loop, estamos verificando se a bola está atrás do jogador ou do remo do computador. Como estamos continuamente atrás do remo, a pontuação continuará aumentando. Para corrigir isso, podemos colocar a bola de volta no centro do nosso jogo para que possamos começar de novo. A maneira como podemos fazer isso dentro da nossa função de pontuação é redefinir a localização da bola com BallX é igual à tela. Largura dividida por 2, coloque isso no centro. Também faremos o mesmo pela localização do Bally. Desta vez, isso é baseado na altura da tela, também dividido por 2. Vamos testar isso. Refresque, deixe a bola passar atrás do remo, isso é definido para um, então a bola é colocada de volta ao centro para o nosso jogo continuar. Essa é uma maneira simples de rastrear as pontuações do nosso jogo. Na próxima seção, vamos dar uma olhada em como podemos adicionar uma pontuação máxima para que saibamos quando o jogo terminou e também mostraremos o vencedor no Canvas. 12. Encerrando o jogo: O primeiro passo para terminar nosso jogo é definir quantos pontos queremos ser o máximo. Para isso, precisamos de uma variável no topo chamado total vencedor. Const WinningTotal e meu valor será igual a três, então o primeiro jogador a chegar a três será o vencedor e podemos atualizar isso dentro da nossa função de pontuação. Vamos voltar para nossa função. Aqui precisamos verificar se a pontuação do nosso computador ou pontuação do jogador é igual a esse total vencedor. Colocando uma instrução if para começar, verifique se a pontuação do computador é igual à nossa nova variável, que está ganhando o total. Se for, vamos fazer algo, se não, passaremos em uma cláusula else-if e desta vez verificaremos se a pontuação do jogador também é igual ao nosso total vencedor. O que queremos fazer dentro daqui, vamos terminar o jogo criando uma função EndGame. Obviamente, ainda não criamos isso, mas é chamado EndGame. Assim como quando criamos nossa função de pontuação, que assumiu o jogador, também faremos o mesmo para a função EndGame. Esta é a esquerda, essa função sabe qual foi a vencedora. Este foi o computador, então também passaremos a palavra-chave return para sair das instruções. De forma semelhante, a instrução else-if também chamará nossa função EndGame, mas passando no jogador. Também retorne disso se isso for verdade e a razão pela qual a função EndGame precisa saber qual desses jogadores foi o vencedor é porque vamos mudar as cores dependendo de qual foi o vencedor. Como você pode ver, temos a cor vermelha para o jogador e a cor azul para o computador. Isso será refletido dentro do nosso texto final do jogo. Vamos criar essa função logo abaixo. Lembre-se de que isso está sendo passado pelo computador ou pelo jogador, que armazenará dentro de um vencedor e depois passará em uma declaração if else. A seção if podemos verificar se o vencedor é igual ao computador. Só precisa remover esses suportes que não os temos na seção else. Se o vencedor for igual ao computador, que é a cor azul, vamos mudar a cor do texto para exibir os resultados para serem uma cor azul. CTX.FillStyle é igual a azul e, em seguida, na seção else, alteramos FillStyle para ser igual à cor vermelha para corresponder ao nosso jogador. Agora, a razão pela qual estamos mudando essa cor do texto é porque vamos exibir algum texto na tela quando o jogo terminar. Isso simplesmente informará ao jogador se ele ganhou ou se o computador ganhou. Pouco antes do texto, definiremos a linha de texto como igual ao centro. Coloque isso no meio da tela e, em seguida, criamos nossos textos com uma função chamada FillText. Abra o backtick para que possamos inserir uma variável porque também precisamos inserir a variável do vencedor, dependendo se o computador ou o jogador ganhou. Digamos que o vencedor seja, dois pontos, depois usando o símbolo do dólar e as chaves em JavaScript, podemos inserir a variável do vencedor. Este será o vencedor do jogador ou o vencedor é computador. Após os backticks, adicione uma vírgula , então podemos colocar isso no centro da tela. Primeiro de tudo, a exposição, que é a tela.largura dividida por dois. Na posição Y está a lona.altura dividida por dois. Navegador automático e podemos experimentar isso. Atualize e vamos mover isso do caminho para chegar ao valor de três. Isso é um, dois e três. Você pode ver imediatamente que vemos inicialmente nosso texto, mas ele desaparece rapidamente e o jogo continua. A razão pela qual isso acontece é porque nosso loop ainda está em execução. Não fizemos nada para parar nosso intervalo definido. Quando o jogador ou o computador chegar à pontuação de três, ainda estamos desenhando o texto muito brevemente para a tela, mas na próxima iteração do nosso loop, estamos executando esse método de texto claro, que está limpando todos os textos da tela e, em seguida, redesenhou todas as nossas funções do jogo. Como impedimos que esse loop seja executado? Bem, o intervalo definido pode ser interrompido por um método chamado intervalo claro. Isso envolve armazenar uma referência a esse intervalo quando o criamos e, em seguida, usar essa referência para interrompê-lo mais tarde com intervalo claro. Essa referência pode ser armazenada dentro de uma variável e, como todas as demais variáveis, isso estará no topo. Chame esse GameLoop e, em seguida, na parte inferior, defina essa variável como igual ao nosso intervalo para que o GameLoop seja igual ao nosso setInterval. Aqui, ainda estamos chamando setInterval como antes, mas isso retornará um ID exclusivo que é armazenado dentro dessa variável. Podemos ver isso se registrarmos isso no console, entrar no navegador e nos atualizarmos no console e pudermos ver o valor de um. Se tivéssemos vários intervalos em execução, cada uma dessas IDs retornadas será única. De volta à nossa função EndGame, essa variável agora pode ser passada para ClearInterval para impedir que o loop seja executado. Faremos isso logo no início da nossa função. Passe qualquer método que seja ClearInterval, que leva em nosso ID, nosso intervalo de armazenamento de referência chamado GameLoop. Agora podemos testar isso, atualizar, esperar que isso chegue a um valor de três. Bom. Podemos ver imediatamente os congelamentos do jogo e ainda temos o texto na tela. Para melhorar isso, seria melhor limpar a bola, limpar as remos e também essas linhas pontilhadas no fundo. Mesmo apenas a pontuação no vencedor na tela. Isso é algo que já sabemos como fazer a partir do nosso loop onde limpamos nossa tela, nós ClearRect. Vamos copiar isso e colocar isso dentro da nossa função EndGame. Isso somente o método ClearInterval, limpará todo o resto do Canvas. Como isso acontece antes de desenharmos nosso texto, ainda devemos ver o texto na tela mas seria útil se também pudéssemos ver a pontuação no topo. Bem, isso é bem simples. Também sabemos como desenhar a pontuação com essa função aqui. Depois de limpar nosso Canvas, atualize e tentaremos isso mais uma vez. Ótimo, a tela foi limpa ainda vemos o texto. Ainda vemos a pontuação final no topo também. Com tudo isso agora funcionando, em seguida, vamos começar e reiniciar nosso jogo. 13. Iniciando e recomeçando o jogo: Em vez de nosso jogo começar imediatamente assim que o navegador carregar, seria bom acionar essa ação com o teclado usando algo como a barra de espaço. Agora vamos dar uma olhada em como fazer isso e também como reiniciar nosso jogo assim que ele terminar. Usarei a barra de espaço para iniciar o jogo, mas você pode mudar para uma chave diferente, se preferir. Olhe dentro de nossas instruções switch. vamos ouvir a seta para cima e a seta para baixo. Podemos criar um novo caso para ouvir nossa chave escolhida para começar o jogo. Então, caso, desta vez como uma string. A chave que vou ouvir é a barra de espaço, colocar dois pontos, e então vamos chamar uma função para iniciar o jogo chamado game start. Na cláusula break, se isso for verdade, e pouco antes de criarmos essa função, também faria mais sentido agora renomear essa nova parte da função para ser outra coisa, já que ela faz outras coisas em vez de simplesmente mover nosso jogador para cima ou para baixo. Eu quero ir para uma tecla manipulada pressionada. Lembre-se de que também precisamos alterar isso em nosso ouvinte chave para baixo logo acima. Claro, precisamos criar esta função de início do jogo. Configure isso logo abaixo. Se pensarmos sobre isso, o que você quer que este jogo faça? Bem, como atualmente não podemos atualizar o jogo e ele começa atualmente sem fazer nada, queremos agora mover esse loop, que chamamos isso na parte inferior para o nosso função. Em vez de este jogo começar imediatamente, podemos cortar isso e colocá-lo em nossa função de início do jogo, então isso só acontecerá quando a barra de espaço for pressionada. Vamos tentar isso. Se atualizarmos, ainda não veremos nenhum jogo começar. Pressione a “Barra de espaço” ou a tecla escolhida e lá vamos nós. Em vez dessa tela vazia, também deve haver algumas instruções no início. Deixe o usuário saber que ele precisa pressionar a barra de espaço para começar. Isso não precisa entrar em uma função ou qualquer outra coisa, podemos simplesmente adicionar isso na parte superior do nosso script. Mas isso vai ser apenas alguns textos e usamos FillText, mas primeiro definiremos a cor com FillStyle igual a vermelho. Você pode mudar isso se preferir. CTX.font definirá que isso seja uma string ou 30 pixels para o tamanho da fonte com um estilo de Helvetica. Coloque isso no centro com a linha de texto, depois desenhe nosso texto com o método chamado filtText e passe uma string. Não precisamos inserir nenhuma variável, então as cotações regulares estão boas, então o texto do espaço de imprensa para reproduzir. Para as posições x e y, esta é a largura da tela dividida por duas e também divide a altura por duas. Vamos experimentar isso. Há nosso texto. Pressione “Espaço” e nosso texto também é limpo porque se você se lembrar de baixo na parte inferior, a tela será limpa antes de cada um dos nossos loops. De volta à nossa função de início do jogo, também há algumas outras coisas que precisam entrar aqui também. O primeiro passo no topo é redefinir todas as pontuações. A pontuação do jogador igual a 0 e a pontuação do computador também 0. uso de intervalo claro também eliminará todos os temporizadores existentes armazenados dentro da nossa variável de loop de jogo . Vamos experimentar isso. Atualize, pressione “Espaço” para começar, e tudo parece bem. Todas as pontuações atualizadas, mas há um pequeno problema se continuarmos pressionando a barra de espaço durante o jogo. Você pode ver no topo, se pressionarmos a barra de espaço agora, a pontuação é redefinida cada vez que começamos o jogo. Isso não é um problema se realmente quisermos começar o jogo, mas se o jogador pressionar isso acidentalmente durante o jogo, ele será reiniciado. Podemos ajudar isso acompanhando isso com uma variável. Deixe que o jogo seja inicialmente um valor de false, então mudaremos isso para ser verdade à medida que o jogo está em execução, que impedirá que a barra de espaço reinicie nosso jogo. Precisamos colar isso em alguns lugares diferentes. Primeiro de tudo, procuramos nossa função, que é o fim do jogo. Como você imagina, já que este é o fim do jogo, também podemos definir essa variável de execução do jogo como igual a false na função de início do jogo. Agora, no topo, queremos fazer uma verificação para ver se essa variável de execução do jogo é igual a verdadeira. Passe isso dentro de instruções if, se o jogo estiver em execução. Não precisamos dizer igual a verdadeiro ou algo assim. Se o valor da execução do jogo for igual a verdadeiro, o código dentro dessas chaves será executado. Ou também podemos colocar isso em uma única linha e remover as chaves e depois retornar para fora dessa função. Basicamente, se a execução do jogo for igual a verdadeira, saltaremos para essa função sem executar o resto do código abaixo. Isso impedirá que o jogo reinicie. Se não for, se for igual a false, queremos seguir em frente e executar o código abaixo. Também diríamos que em nossa variável de corrida de jogo agora seja igual a verdadeira. Portanto, isso impedirá que essa função executada pela segunda vez, se a barra de espaço for pressionada durante o jogo. Podemos tentar isso, atualizar, pressionar “Espaço”, deixar a bola ir para trás para a pontuação e, se agora tentarmos pressionar o espaço, o jogo não será redefinido. Mas temos outro problema para resolver e para ver isso, se reiniciarmos o jogo e esperar para chegar à pontuação de três, vamos passar para trás três vezes. Tudo é bom, temos o texto do vencedor é computador, a pontuação de 3-0. Mas agora, se reiniciarmos o jogo com a barra de espaço, o jogo reiniciará, mas ainda temos uma pontuação inicial de um. Mas você esperaria que isso fosse zero, já que definimos isso dentro de nossa função. Por que você acha que isso está acontecendo? Bem, para saber mais, vamos entrar em nossa função de pontuação. A função score é o único lugar onde atualizamos qualquer uma dessas variáveis. A função score está sendo chamada logo acima dentro da nossa função de collide. Entre na função collide e chamamos isso com nossa seção if else. Esta é a única função ou o único pedaço de código que é chamado em nosso jogo, que é responsável por atualizar essas variáveis. Sabemos que essa é a causa da nossa pontuação ser definida como uma inicialmente. Por que você acha que essa função de pontuação está sendo chamada no início de um novo jogo? Bem, a razão pela qual isso acontece é porque assim que o jogo terminar, nossa bola está no lado esquerdo para uma pontuação, ou no lado direito. Temos isso controlado pela variável chamada BallX. Sim, na nossa função de início do jogo, nós inicialmente redefinimos essas duas pontuações, mas assim que um novo jogo começa, a localização do BallX ainda está tocando um dos lados, fazendo com que a função de pontuação corra novamente. Consertar isso é bem simples, tudo o que precisamos fazer é redefinir a localização do BallX para voltar ao centro quando o jogo começar. O jogo começa logo após a execução de um jogo e antes de redefinir nossas pontuações, também podemos redefinir o valor do BallX para estar no centro da tela. Vamos testar isso. Chegamos ao final do nosso jogo, que é uma pontuação de três. O jogo acabou, ambas as nossas pontuações agora são redefinidas conforme o esperado. Ao criar jogos como esse, muitas vezes você encontrará casos de borda como esse para funcionar e geralmente é apenas um caso de experimentar coisas diferentes e ver qual deles funciona. Em seguida, vamos dar uma olhada em como podemos aplicar algum movimento aleatório à bola quando ela saltar. 14. Direção aleatória: Ter ambas as variáveis MoveX e MoVey predefinidas torna o jogo começar muito mais previsível. Sabemos porque nossos valores negativos 2 e negativos 1 em que direção a bola iria. Podemos melhorar isso tornando isso muito mais aleatório dentro de uma função. Vamos criar uma função logo abaixo nossos textos, chamada movimento aleatório. O objetivo dessa função é definir ambas as variáveis com alguns valores aleatórios, o que significa que agora podemos remover esses valores iniciais. Para definir essas variáveis, precisamos chamar essa função RandomMovement dentro do GameStart. Localize essa função, chame nossa nova função, que redefinirá nossas duas variáveis com um novo valor cada vez que nosso jogo começar. Volte para nossa função RandomMovement que gera nossos dois valores x e y, além de colocar a bola em direções imprevisíveis. Isso também diminuirá a velocidade e acelerará o jogo um pouco por causa dos valores e movimentos aleatórios, seja, o movimento x pode ser maior ou menor, fazendo com que ele se mova mais lento ou mais rápido. Mais uma vez, crie duas variáveis ou duas constantes. Isso é x aleatório, que será um número aleatório entre dois e quatro. Basicamente, vamos definir nosso valor x como igual a 2 ou 4 e também uma direção positiva ou negativa. Podemos fazer isso acessando uma função matemática JavaScript chamada aleatória. Math.random gerará um número aleatório entre 0 e 1. Mas vamos multiplicar esse valor por 3. Fazer isso nos permitirá gerar um número de um em diante. Também podemos arredondar isso cortando esse valor. No método math.ceil, cole isso em. Agora, já que estamos arredondando nosso valor, isso nos dará um valor de 1, 2 ou 3. Como queremos o valor de 2-4, podemos adicionar mais um a esse valor para nos dar nosso número aleatório. Vamos testar isso. Colocando um log de console do RandomX, salve e atualize o navegador, pule para o console. Para ver isso, também precisaremos chamar nossa função GameStart. Pressione Espaço, o valor de 2, o valor de 4, 2, 3, 2. Tudo isso parece funcionar corretamente. Para nossa localização Randomy, podemos duplicar essa linha, alterar o nome da variável para ser Randomy. Randomy será um número entre 0 e 2. Este não precisamos adicionar mais 1. Podemos usar math.round para arredondar esse número para baixo, deixando-nos com um valor de zero a dois. Agora também precisamos criar mais duas variáveis. Isso vai decidir se temos uma direção positiva ou negativa. Atualmente, temos apenas um valor x e y positivo, mas isso também aumentará a imprevisibilidade. Const PlusorMinusX. Mais uma vez, acessaremos a função JavaScript aleatória, que mais alguém nos dará um número entre 0 e 1. Usando o operador condicional JavaScript, podemos verificar se esse valor é menor que 0,5, o que deve ter aproximadamente uma chance 50/50. Se for, retornaremos ou armazenaremos dentro dessa variável uma string negativa. Caso contrário, será positivo. Como este é um número entre 0 e 1, há uma chance de meia ou 50/50 aproximadamente que isso seja um valor negativo ou positivo. Também adicionaremos isso aos nossos números em breve. Duplique esta e a única diferença desta vez é o nome da variável y. Em seguida, podemos usar essas variáveis para mesclar e criar nossos novos valores das variáveis MoveX e MoVey. Primeiro, a variável MoveX. Como também estamos retornando um valor de string para o positivo ou o negativo, vamos envolver isso dentro de uma função numérica para garantir que sempre obtemos um número em vez de uma string. Começando com x, PlusorMinusX, adicione isso ao nosso número aleatório. Por exemplo, isso pode ser negativo e, em seguida, um valor de dois ou positivo, ou qualquer número entre esse intervalo. Duplicado. Faremos isso pelo MoVey. Também muda para ser um plus ou menos y e o valor de yaleatório. Este é um número positivo ou negativo aleatório em ambas as direções, mas vou adicionar mais um pequeno pedaço de aleatoriedade. Crie constante para armazenar isso no número aleatório chamado. Basta definir isso igual a simplesmente math.random. A razão pela qual fazemos isso é adicionar um pequeno valor aleatório a ambas as variáveis. Adicione isso ao nosso primeiro número e, em seguida, ao nosso segundo número, deve ser tudo o que precisamos agora. Atualize o navegador. Cada vez que começamos o jogo, devemos ver a bola viajando em uma direção ligeiramente diferente. Temos ele indo para a esquerda, temos isso indo para a direita, temos ele subindo, nós o temos indo para baixo. Você também pode ver que temos várias velocidades diferentes dependendo dos valores reais para essas duas variáveis. Isso não está tudo acabado para nossa aleatoriedade. Um pouco mais tarde , veremos como adicionar algum movimento aleatório à direção da bola quando ela saltar das paredes e também do remo também. Falando em remos, é isso que vamos cobrir no próximo vídeo, onde veremos como mover automaticamente o remo do computador. 15. Movimento de computador: No topo de nossos scripts, temos o player e também as posições do computador dentro dessas variáveis. Ambos os valores definem as posições de remo no início de nossos jogos, estejam no centro verticalmente. A posição do jogador que já cuidamos com os movimentos dentro da nossa função pressionada por tecla de alça. Agora também podemos adicionar algum movimento ao computador para tornar o jogo um pouco mais jogável. Vamos fazer isso em uma função de remo de computador de desenho, que é esta aqui. Tudo o que estamos fazendo atualmente é definir a tela.altura dividida por 2, lugares no centro. Obviamente, não queremos fazer isso como acima. Também queremos substituir isso por uma variável. Nós tiramos a altura da tela e substituímos isso pela posição do computador. Isso significa, assim como a posição do jogador acima, cada vez que essa variável é atualizada e, em seguida, chamamos o loop, a nova posição do remo do computador também será refletida. O estágio ext é atualizar isso. Mas como decidimos sobre como mover isso? Bem, poderíamos ser muito complexos e incluir coisas como alguma inteligência artificial, mas não queremos que este curso seja muito complexo. Em vez disso, vamos substituir isso por algum movimento simples rastreamento. Para isso na parte inferior logo acima do nosso loop, vou criar uma nova função que é chamada em cada intervalo. nome da função é mover computador. Isso também precisa ser chamado em cada intervalo, que possamos pegar o nome da nossa função e adicionar isso em nosso loop. O rastreamento mais básico pode ser feito algo assim. Podemos atualizar nossa variável de posição do computador para ser igual à localização da bola Y. Isso rastreará efetivamente a localização verticalmente da nossa bola, mova o remo do computador para rastrear isso, podemos ver isso? Se voltarmos ao nosso navegador, atualize e agora você pode ver o remo do computador se movendo para cima e para baixo, dependendo da localização da bola. Ótimo, tudo isso funciona bem, mas como você pode ver, isso cria um jogo que é impossível para o jogador ganhar. Mais uma vez, poderíamos ser tão complexos quanto quisermos com um movimento de computador. Mas, para simplificar, vou apenas adicionar uma declaração if-else. Esta declaração if-else atualizará gradualmente a posição do computador, dependendo se a bola estiver acima ou abaixo do remo. Podemos remover isso, adicionar uma instrução if. Onde verificamos se a posição do computador atualmente está abaixo da localização atual da bola Y. Lembre-se de que o eixo y começa em 0 na parte superior e desce em uma direção positiva. A bola está abaixo do remo. Podemos então atualizar a variável de posição do computador para avançar em direção à bola. Isso pode ser feito adicionando mais, mais, caso contrário, se for a direção oposta, queremos mover o remo do computador na direção inversa. Podemos fazer isso dentro daqui. Vamos tentar isso. Atualize e teste isso. a bola para trás. Você pode ver que o computador agora está se movendo. Agora é um jogo vencível. Você também pode se quiser acelerar ou diminuir a velocidade dos passos que o remo do computador leva para ir em direção à bola. Mas isso é completamente opcional, e isso também pode precisar ser ajustado também, dependendo da rapidez com que o loop está sendo executado. Ótimo. Este é um movimento de computador muito básico e, em seguida, melhorará ainda mais o jogo adicionando alguma aleatoriedade adicional ao movimento da bola. 16. Salões aleatórios: A bola atualmente saltando de todas as paredes e as pás é um pouco previsível. Atualmente, cada salto está a 90 graus, o que muitas vezes nos deixa com uma situação em que a bola às vezes pode girar em um quadrado, e ela salta das remos sem sequer precisar se mover eles. Para melhorar isso, adicionaremos alguma aleatoriedade ao nosso salto de remo para tornar nosso jogo um pouco melhor. Para isso, precisamos de uma função. Vamos criar uma função em qualquer lugar nosso código com o nome de gerar rejeição aleatória. Adicione alguma aleatoriedade. Não precisamos fazer nada muito louco ou complexo. Se subirmos pela primeira vez para a nossa função de colisão, as duas últimas instruções if verificam o contato do remo tanto para o jogador quanto para o remo do computador. Atualmente, quando há algum contato entre a bola e o remo, tudo o que estamos fazendo com essas duas linhas de código aqui é reverter a direção. Fazemos isso definindo uma direção positiva para um negativo e também o contrário também. Para adicionar um pouco de aleatoriedade, tudo o que precisamos fazer é adicionar um pequeno valor positivo ou negativo a qualquer uma dessas linhas, que podemos retornar de nossa nova função. Dentro dessa função, primeiro vamos gerar um número entre zero e um. Zero e uma nos dão duas opções, que podemos usar para decidir se vamos criar um número positivo ou negativo. Mais uma vez, usamos Math.Floor para arredondar nosso número para baixo. O número que você deseja arredondar para baixo será gerado com Math.Random para nos dar um número entre zero e um. Lembre-se de tudo Math.Random gera um número aleatório entre zero e um. Na verdade, não inclui um. Por exemplo, ele vai até 0,999. número de aleatoriedade para baixo sempre nos dará um valor de zero. Para obter um valor entre zero e um, podemos multiplicar isso por dois, instalar isso dentro de uma constante chamada número zero para um. Essas duas opções agora podem ser usadas para criar um símbolo positivo ou negativo, assim como olhamos anteriormente. Armazene isso dentro de uma constante, positiva ou negativa. Em seguida, pegaremos nossa variável de cima, que é zero ou uma. Digamos, se isso for igual a uma das opções que é zero, usando as instruções condicionais JavaScript, a primeira opção retornará um valor negativo. Se não for separado por dois pontos, retornará um símbolo positivo. Se isso retornar um zero, obteremos um símbolo negativo. Se ele retornar um, obteremos um símbolo positivo. Lembre-se, como estamos retornando uma string, também precisamos envolver os resultados dentro da função numérica. Certifique-se de que sempre recebemos de volta um número em vez de uma string. Retornamos o símbolo que é positivo ou negativo, e adicionamos isso igual a um valor pequeno. Novamente, usamos Math.random para nos dar um número entre zero e um e também para torná-lo um pouco mais de um valor menor, vamos dividir isso por dois. Se retornarmos esse valor de volta da nossa função, isso retornará um número que é um número positivo ou negativo entre o valor de zero e 0,5. Com isso sendo um valor tão pequeno que agora estamos retornando, como dizemos se isso está sendo adicionado ao nosso salto ou não? Bem, podemos primeiro ver isso com um registro de console. Se dermos uma olhada em nossa Função de Nuvem e em nossas duas últimas seções que analisamos antes, podemos adicionar isso ao contato do remo do jogador logo acima, onde fazemos a mudança de direção em um log de console com o valor de mu de x. Copie isso e faça exatamente o mesmo logo depois. Cada vez que a bola salta do remo dos jogadores, devemos ver dois logs de console com o valor de mu de x. Lembre-se de que não adicionamos valor aleatório diferente a nenhuma das nossas mudanças de direção ainda. Esses dois valores devem ser exatamente o mesmo ou o oposto em termos de positivo ou negativo. Vamos experimentar isso. Atualize e pule para o console. Comece nosso jogo, e agora faça algum contato entre a poça, e podemos ver que temos menos 2,49 e também o equivalente positivo também. Como esses números são exatamente os mesmos, isso prova que tudo o que estamos fazendo é reverter a direção em 90 graus. Mas se agora seguirmos em frente e adicionarmos nosso pequeno valor aleatório, veremos dois valores diferentes dentro do console. Agora, vamos adicionar nosso pequeno volume que é retornado de volta da nossa função chamada gerar limites aleatórios. Também o mesmo com o remo do computador também. Agora, se testarmos isso , veremos o pequeno valor sendo retornado e adicionado de nossa função, e isso deve ser valores ligeiramente diferentes para nos dar uma mudança de direção diferente com nossa bola. Atualizar. Agora, se fizermos alguns contatos, lá vamos nós. Ótimo. Agora, há muita coisa acontecendo aqui mas se dermos uma olhada neles em pares. Nos dois primeiros pares, há menos 3,55, que depois reverte para ser um valor positivo de 3,22. Com esses dois valores sendo ligeiramente diferentes, isso significa que nosso valor de rejeição agora entrou em vigor. Se olharmos para o segundo par, novamente, agora não estamos apenas mudando o valor de um positivo para um negativo, também mudaremos ligeiramente qualquer valor de limite também. Isso é verdade para todos os pares que se seguem também. Pequenas mudanças podem fazer uma grande diferença e tornar nosso jogo muito menos previsível. Também pare a bola girando em um quadrado na tela também. Em seguida, vamos dar uma olhada em como podemos restringir nosso remo para que ele não saia da tela. 17. Mantendo a pá na tela de pá: À medida que nos aproximamos do final do nosso jogo, um dos toques finais que você deseja adicionar é restringir as pás dos jogadores para que ele não saia da parte superior ou inferior da tela, quando pressionamos o teclas para cima e para baixo. Para isso, entraremos na função HandleKeyPressed para adicionar nosso código que é necessário para restringir isso. Esta função HandleKeyPressed é a área em nosso código que detecta se pressionamos a seta para cima ou a seta para baixo. A instrução switch é responsável por mover os jogadores remando em direção ascendente ou em direção descendente. Aqui dentro, começando com o estojo de seta para cima, vamos adicionar algum código para impedir as pétalas dos jogadores saiam do topo da tela. Para fazer isso, antes de movermos a posição do jogador por qualquer valor específico, adicionaremos uma declaração if para verificar isso. Se algo for verdade, queremos voltar para fora desta seção sem mover a posição do jogador. Há algo que queremos verificar é a posição do jogador. Lembre-se quando estamos falando sobre a variável de posição do jogador, esta é a linha central do remo. Para encontrar o topo do remo, precisamos deduzir metade da altura do remo e encontrar a parte inferior do remo para garantir que ele não saia da parte inferior da tela. Também precisamos adicionar metade da altura do remo também. Podemos usar isso dentro da nossa declaração if. Saindo da localização superior dentro da nossa declaração if. Primeiro de tudo, vamos pegar a posição atual do jogador. Assim como vimos nos slides, vamos deduzir a altura do remo dividida por 2. Isso nos dará o ponto superior do nosso remo. Precisamos verificar se isso é menor ou igual a 0, que é o topo da nossa tela. Se isso acontecer, retornaremos a isso sem mover a posição do jogador. Então, na seção de seta para baixo, faremos uma declaração semelhante if onde verificamos se a posição do jogador, desta vez vamos adicionar metade da altura do remo, já que estamos lidando com a parte inferior do remo. Aqui, estamos verificando se a parte inferior do pedal é igual ou maior que a parte inferior da tela, que podemos encontrar com tela.height. Maior ou igual, na tela.height, se isso for verdade, novamente voltará para fora disso sem mover a posição do jogador, para que não vá além da parte inferior da tela. Teste isso, pressione a barra de espaço e iremos direto para o topo. O remo de lugar não vai além do topo. Mova isso para baixo para baixo. Agora é restrito que os jogadores remam para ficar dentro da área da tela. 18. Considerações finais: [MÚSICA] Este é agora para o final do nosso jogo e parabéns por chegar a esta fase. Agora aprendemos alguns conceitos fundamentais e, mesmo que nosso jogo não seja perfeito, é jogável, aprendemos todos os conceitos que precisamos para iniciar o desenvolvimento de jogos em JavaScript. Espero que você tenha gostado. Espero que você tenha adquirido novas habilidades e ansioso para mergulhar na construção de mais jogos baseados em JavaScript. Obrigado por fazer esta aula, e eu vou te ver na próxima.