bem-vindos a todos este é mais um refrão do chris com seu anfitrião chris e hoje vamos codificar
seu primeiro jogo de luta vamos começar aprendendo como codificar algumas
mecânicas básicas de jogo de luta vamos começar com alguns retângulos que sabem lutar entre si
uma vez que desenvolvemos esses retângulos de luta então vamos em frente e transformamos esses
retângulos em sprites com animação vamos aprender como criar sprites tanto para nosso fundo quanto para
nossos lutadores e então vamos tocar o nosso design de interface tornando este jogo pronto para o live na web
então sem mais delongas vamos começar então a primeira coisa que vamos fazer é focar na
configuração do projeto isso significa apenas que vamos configurar nossas pastas nossos arquivos bem muito tudo o que precisamos
para começar a funcionar, então para fazer isso, o que eu gosto de fazer é dentro do texto sublime, eu gosto de arquivar um
novo arquivo e então eu tenho um novo arquivo aberto, tudo o que preciso fazer agora é pressionar o comando s para salvá-lo
e agora eu preciso ir em frente e criar um então vou entrar em
uma pasta que me é familiar que é um diretório da web que criei pessoalmente e
dentro daqui posso ir em frente e criar uma nova pasta e vou chamar esse
jogo de luta então com esta nova pasta criada agora eu posso ir em frente e salvá-la como index.html e clicar em salvar temos
nosso primeiro arquivo criado muito bem, então agora dentro de index.html que tipo de elemento html precisamos para
criar um jogo bem nenhum outro do que um elemento de tela, então vamos em frente e criá-lo agora
, assim que tivermos um elemento de tela no lugar, podemos pressionar o comando s e devemos estar
prontos para abrir isso em um navegador, para abrir isso dentro de um navegador podemos ir ao finder
e depois ir para dentro do nosso diretório web especificamente a pasta que acabamos de criar que
vai ser o jogo dash e este é o arquivo que acabamos de criar index.html então tudo que eu preciso
fazer aqui é duplo clique nele agora, nós o abrimos em um navegador, então eu vou em frente e inspecione este
elemento nt clicando com o botão direito do mouse e clicando na guia inspecionar elemento, você verá que temos uma tela em nosso
navegador e todos os elementos html que são praticamente colocados lá por padrão graças ao chrome, então
temos nosso elemento canvas dentro de nosso html, mas agora nós precisamos de um lugar no qual possamos realmente escrever
código, então vamos criar um arquivo javascript para fazer isso de volta em texto sublime, podemos ir para o arquivo
novo arquivo que criará um arquivo completamente novo para nós quando estivermos aqui podemos clicar no comando s
e então queremos ir em frente e criar um novo arquivo dentro da nossa pasta de jogos de luta chamado index dot
js, então vamos em frente e clicar em salvar e agora temos praticamente todos os arquivos que precisamos
para começar com este jogo é tão simples, então é muito útil ter ambos index.js
e index.html abertos ao mesmo tempo, então para fazer isso vamos abrir o arquivo e então
vamos em frente e encontre a pasta na qual queremos abrir em vez de um
arquivo específico, assim que tivermos e apenas esta pasta aberta não precisamos de clicar em nenhuma destas podemos simplesmente
clicar em abrir aqui e depois vamos ver o nosso projecto abrir temos as nossas pastas
do lado esquerdo vai ser muito mais fácil para o desenvolvimento de jogos, se tivermos isso aberto o tempo todo
, vamos em frente e comecemos redimensionando nossa tela para que seja o tamanho correto para o nosso jogo,
será 1024 por 576, normalmente acho uma boa proporção de tamanho para garantir que nosso o jogo se encaixa na
maioria dos tamanhos de tela de computador, então, para fazer isso, vamos entrar no index.js e
criar um const chamado canvas, que será igual ao
seletor de consulta de ponto de documento. quer ir em frente e selecionar um elemento desta lista aqui, seja
html head body ou canvas qual elemento queremos selecionar bem simplesmente o elemento que tem um nome
de canvas então tudo o que estamos fazendo é pegar a tela daqui e armazená-lo dentro do const
da tela simples o suficiente para a próxima coisa que queremos fazeréseleccionar o nosso contexto de canvas istoéo que
vai ser responsável por desenhar formas e sprites para o nosso jogo por issoéimportante
que vá em frente e puxe isto para puxar no nosso contexto vamos criar um const chame-o c
configure-o igual para nossa tela const e então queremos chamar um método em cima disso chamado get context
e então que tipo de contexto queremos obter um contexto 2d contexto 3d essas são principalmente nossas opções
queremos seguir em frente e obter um contexto 2d porque sabemos que este será um jogo 2d,
não um jogo 3d, então com 2d dentro daqui podemos ir em frente e salvar e agora temos nossos dois const principais
prontos para ir ao canvas e cc apenas significa contexto e a razão pela qual ' chamar este c é porque
vamos usar tanto isso que vai ser muito tedioso continuar chamando algo
que é longo normalmente eu nunca recomendo criar variáveis ​​que sejam apenas c ou algo realmente
curto como isso, mas esta é a única exceção vou fazer para o contexto da tela, não há problema em chamar isso s
c então temos nossa tela const e nossa c const nosso contexto, mas queremos ir em frente e redimensionar nossa
tela e vamos usar javascript para fazer isso
. vamos fazê-lo da maneira padrão dentro do javascript
, podemos fazer isso selecionando nossos contras de tela e, em seguida, queremos ir em frente e selecionar a
propriedade largura em cima disso, então, uma vez que avancemos e atribuamos qualquer valor a isso, seja seja mil
e dois mil, estamos basicamente dizendo que a largura da tela será igual a essa quantidade
de pixels, então um bom valor para a largura será 1024 e, abaixo disso, queremos ir em frente
e selecionar a altura da tela também e declaramos que nossa altura será 576. esta é uma
proporção de 16 por 9 e por ter uma largura de 10 24 vamos ter certeza de que ela se encaixa na maioria dos tamanhos de tela
. navegador e atualizar, ainda não veremos nenhuma diferença
no tamanho da tela porque um Depois de seguirmos em frente e salvarmos index.js com todo esse
código aqui, precisamos ter certeza de que isso é puxado para index.html, então agora
temos apenas nosso elemento canvas, mas quando estamos dentro daqui, também podemos criar um tag de script
que tem uma fonte igual a index.js então vá em frente e digite index.js salve volte para a
atualização do nosso navegador e então você pode ver que nossa largura e altura estão tendo efeito eu posso passar o mouse sobre isso
você verá que é bonito muito ocupando a largura de 1024 a altura para 576. então estamos muito bem
em relação ao tamanho da nossa tela, se quisermos ir em frente e ver a largura total
, podemos sempre mover nossas ferramentas de desenvolvimento para baixo clicando nestes três ícones bem aqui e depois clicando
neste pequeno ícone de guia dock para baixo que vai movê-lo para o fundo você pode passar o mouse sobre nossa
tela novamente e você verá que é a largura que ela realmente ocupa agora para ver
nosso plano de fundo da tela bem, precisamos passar o mouse sobre este elemento de tela aqui em baixo para emitir esse
destaque azul o em nossa tela vamos em frente e fazer com que nossa tela tenha um fundo branco
por padrão apenas para que possamos diferenciá-lo do nosso fundo real do navegador para que, dentro do index.js
, possamos ir em frente e selecionar nosso contexto de tela, isso é o que é usado para desenhar formas na tela
, uma vez que temos nosso contexto de tela, podemos começar a usar a api de tela, então o que é um método api que podemos
chamar para desenhar um fundo branco bem, podemos chamar c dot fill rect vamos criar um
grande retângulo vou usá-lo para preencher toda a largura e altura da tela, então o preenchimento rect
leva quatro argumentos, o primeiro será uma posição x, então vou em frente e coloco a posição x em
zero e, em seguida, o segundo argumento será seja a posição y, então vou em frente e atribuir
isso a zero também, tudo isso significa que aqui é desenhar começando do canto superior esquerdo de nossa
tela, esta é uma coordenada de zero e zero de volta em nosso código, deseja adicionar um terceiro e
um quarto argumento para que o terceiro argumento seja será a largura do retângulo quão grande queremos
desenhar isso bem, queremos seguir em frente e desenhar isso na largura total sobre a tela, então vá em frente e selecione
a largura da tela e, em seguida, para o nosso quarto argumento, queremos seguir em frente e colocar o altura lá
então vamos dizer que este será um retângulo que ocupa toda a largura e a altura total da nossa
tela que está atribuída aqui nas linhas quatro e cinco então vamos em frente e salve isso nós vamos
voltar aqui para o nosso navegador e atualize e agora temos um fundo preto para que realmente
cuide da necessidade de diferenciar nossa tela do fundo do navegador e estou
usando um navegador chamado min, é apenas um navegador mínimo que ainda usa chrome devtools
se eu vá em frente e feche isso você verá que nosso plano de fundo é branco mas nossa tela é preta o
que é totalmente bom para começar sabemos onde está nossa tela sabemos onde está nosso plano de fundo
podemos começar a desenvolver nosso jogo conforme necessário porque conhecemos nosso área de desenho está indo g para ser este
retângulo preto gigante, desde que tenhamos uma pasta com index.html e index.js, podemos voltar à
nossa lista de tarefas e podemos ir em frente e marcar a configuração do projeto, que é tudo o que precisamos para obter começou
com o nosso projeto a próxima coisa que vamos fazer é criar um jogador e um inimigo e vamos
começar a criá-los apenas com retângulos puros muitos jogos são criados dessa forma os desenvolvedores
apenas inserem retângulos no jogo e eles codificam a funcionalidade entre esses retângulos antes
de inserir sprites vamos fazer a mesma coisa porque é muito complicado adicionar alguns
sprites usando apenas javascript e canvas é mais importante aprender a funcionalidade
e o básico por trás de um jogo de luta antes de irmos vá em frente e vá para a parte do sprite,
então para criar um player e um inimigo queremos ter certeza de que estamos dentro do index.js e
, embora possamos criar um player retangular apenas usando fill rect, não queremos fazer isso dessa forma
queremos usar o programação orientada a objetos porque precisamos que esses retângulos interajam uns com os outros
e tenham suas próprias propriedades individuais que agem independentemente umas das outras, então para criar
um objeto vamos seguir em frente e criar uma classe que funcione como o projeto para o objeto
antes de realmente criá-lo, essa classe será chamada de sprite porque mais tarde, quando
começarmos a usar imagens e substituir nossos retângulos, movendo as coisas, enquanto imagens em movimento e
jogos são basicamente chamados de sprites, vamos chamá-la de sprite antecipadamente, mas dentro
vamos começar com os retângulos então sempre que você cria uma classe você precisa de algum tipo de
método construtor que é basicamente apenas uma função dentro da classe e o construtor é
acionado toda vez que criamos um novo objeto da classe sprite e então sempre que isso é disparado
queremos definir as propriedades associadas a um sprite então sempre que você estiver desenvolvendo
um jogo uma das principais propriedades que você deseja colocar praticamente qualquer objeto será position
e sempre que você criar uma propriedade dentro de uma classe e um construtor, você precisa ter certeza de que é
precedido por esse ponto, então cada vez que criarmos uma nova instância de sprite, ela terá uma propriedade
this stop position, ele terá algum tipo de posição associada a ele que podemos colocá
-lo na tela, mas sabemos que nossos sprites podem ter posições independentes um do outro e, se for
esse o caso, queremos entrar em nossa função de construtor e queremos passar por um argumento
, então queremos passar por um argumento chamado position e cada vez que instanciamos um sprite
enquanto essa posição for atribuída à posição do sprite individual que estamos criando
, agora temos uma classe de sprite com um construtor podemos ir em frente e começar a criar o nosso
jogador e inimigo vamos começar com o nosso jogador vamos apenas criar um const chamado jogador e
igualar isto a um novo sprite é assim que criamos um novo objecto desta classe aqui, agora que
estamos criando um novo sprite, podemos olhar dentro do nosso construtor e ver qual argumento isso leva
, então ele recebe um argumento de posição e esta é apenas uma posição que queremos associar ao nosso player agora a
posição pode ser qualquer tipo de dados pode ser um número pode ser um objeto pode ser uma string, mas
no nosso caso queremos ir em frente e fazer disso um objeto, então vou em frente e coloco um objeto aqui
e digo que o x for nosso objeto deve ser igual a zero para iniciar e o y de nosso objeto também
será igual a zero isso significa apenas que dentro do nosso jogo vamos colocar nosso sprite no canto
superior esquerdo da tela para iniciar e se nós salvamos isso e então o console sai do player
salve isso volte para o nosso navegador abra nosso inspetor e então aperte a aba do console e então
finalmente atualize você verá que nosso objeto sprite está desconectado nós criamos com sucesso uma
instância do nosso sprite classe que é perfeita é exatamente o que queremos, mas agora w e precisamos de algum tipo
de maneira para definir como um jogador realmente se parece, então também queremos fazer isso dentro de nossa classe sprite
dentro daqui eu vou em frente e criar um método draw e isso é arbitrariamente chamado podemos
chamar isso de qualquer coisa queremos, mas faz sentido chamá-lo de desenho porque sabemos como chamamos isso
, vamos desenhar nosso sprite, então sempre que chamarmos draw, como deve ser nosso sprite,
nosso sprite deve ser apenas algum tipo de retângulo como resultado queremos ir em frente e
chamar c dot fill rect para criar um novo retângulo, então o que podemos fazer é dizer bem, eu
quero que o sprite seja desenhado em qualquer posição que seja passada pelo nosso construtor aqui
, então basicamente o que nós estamos fazendo é que estamos criando um novo sprite estamos pegando este x e y
estamos indo até nosso argumento aqui onde as posições estão sendo passadas
estamos passando a posição para isso aqui e então finalmente a posição é
vai ser armazenado nesta posição de ponto que é o ind propriedade ividual que estamos criando para
nosso player const aqui, mas agora que temos esse objeto aqui sendo armazenado nesta
posição de parada, podemos seguir em frente e referenciar essa oposição em outros métodos dentro de nossa classe
, então agora que temos essa oposição, podemos use-o dentro de c ponto fill rect para dizer que nosso valor x
deve ser esta posição de ponto ponto x então agora isso aqui está apenas referenciando este x que
passamos pelo nosso segundo argumento será esta posição de ponto ponto y que irá referenciar
este valor de y aqui e então finalmente precisamos de algum tipo de largura e altura associadas ao
nosso player para começar podemos ir em frente e apenas colocá-los como valores estáticos eu vou em frente e digo que
nosso player terá 50 pixels de largura e, digamos, 150 pixels de altura, então agora precisamos de algum tipo
de cor associada a este método de desenho para garantir que ele se diferencie do
fundo preto de nossa tela, como resultado, podemos colocar o estilo de preenchimento de ponto c e definir isso igual a
uma string de simplesmente vermelho e se atribuirmos o estilo de preenchimento ao vermelho bem aqui antes de chamarmos c
dot fill rect ele só vai ter certeza de que estamos preenchendo um retângulo com uma cor vermelha
então se salvarmos isso nada vai acontecer acontecer se voltarmos ao nosso navegador, mas o que podemos fazer é
selecionar nosso player const e, em cima disso, chamar esse método draw que acabamos de criar
, agora com player.draw abaixo, se salvarmos, volte ao nosso navegador e atualize você verá que isso é
o que nosso jogador parece ótimo é exatamente o que queremos começar então temos nosso jogador lá
vamos em frente e criar um inimigo vamos colocar nosso inimigo em algum lugar aqui no lado direito
do a tela meio que faz sentido para jogos de luta colocar um inimigo ali ao invés de bem perto de
nós então para criar um inimigo nós simplesmente duplicamos o código que criamos para o nosso jogador
então vamos criar um const chamado inimigo e defina a sequência para um novo sprite, então quais propriedades
um novo sprite toma e bem sabemos que é uma posição que a posição é armazenada dentro de uma
propriedade position e estamos apenas dizendo que estamos usando uma propriedade x e ay dentro deste objeto pelo qual estamos
passando, então vou dizer que nosso x será igual a algo como 400
apenas um número arbitrário à direita e então nosso valor de y pode ser zero ou podemos adicionar alguns
números a isso para garantir que nosso inimigo seja empurrado para baixo, vamos dizer que nosso o valor de y
será igual a 100. então agora temos um inimigo criado para tirar esse inimigo,
basta chamar o inimigo.draw salve isso volte para o nosso jogo aqui atualize e lá está o nosso inimigo
não exatamente onde nós queria-o uma vez que não está totalmente no lado direito do ecrã
mas está suficientemente perto para começar istoétudo o que precisamos por isso agora sabemos que o nosso jogador e o nosso
inimigo vão mover objectos e sempre que se mover objetos dentro da tela é bastante
padrão adicionar uma propriedade de velocidade à sua classe sprite a velocidade irá apenas determinar
em que direcção estes devem estar a mover-se quando estiverem dentro de um loop de animação, por isso vamos em
frente e adicionar alguma velocidade e gravidade para nos certificarmos de que o nosso jogador e o nosso inimigo aqui caem
para o fundo do ecrã e eles param uma vez que atingem o fundo dele, então, para que eles
se movam, precisamos criar algum tipo de loop de animação para criar um loop de animação, podemos ir para o
fundo do nosso arquivo e criar uma função chamada animate totalmente arbitrariamente nomeada por a maneira como
você pode chamar isso do que quiser animate só faz sentido porque é isso que estamos prestes a fazer
agora podemos chamar o frame de animação de solicitação de ponto de janela que apenas diz qual função eu quero fazer um loop
repetidas vezes que preciso selecione um bem, nós realmente só temos uma função criada e
isso será animar para que possamos seguir em frente e pegar esse nome aqui e colá-lo no
quadro de animação de solicitação, então agora logo abaixo de nossa função se eu prosseguir e chamar anima te
com animate e então alguns parênteses de abertura e fechamento o que vai acontecer é que
vamos chamar requestanimationframe e então vai dizer que queremos chamar o que vai animar
então vamos em frente e voltamos a chamar isso então chamamos
essa função novamente o que acontece enquanto chamamos o quadro de animação de solicitação chamamos de animar estamos
basicamente criando um loop infinito que queremos continuar indefinidamente até que digamos que ele
pare para que você possa começar a animar seu quadro de objetos por quadro, então se realmente quisermos testar se o animate
está funcionando, podemos simplesmente colocar um log const dentro dele e vou colocar qualquer string dentro
daqui, não importa o que e eu posso ir em frente e salvar isso e verifique se você está chamando
animate abaixo para que isso seja acionado e, em seguida, desligue em nosso navegador, se atualizarmos e, em seguida, clique com o botão direito do mouse
em inspecionar elemento e, em seguida, abra nossa guia do console aqui, você verá que estamos saindo
e de novo e de novo é assim que fa st nossa função aqui de animate está sendo chamada
muito muito rápido para que possamos começar a mover esses objetos ao longo do tempo enquanto isso se repete
, então agora que sabemos que está funcionando, queremos ir em frente e alterar nossa posição de sprites
para que nosso jogador e nosso inimigo começar a se mover para baixo, eles serão afetados pela
gravidade, então, como mencionei um pouco antes, queremos ir em frente e adicionar uma propriedade de velocidade ao
nosso sprite para fazer isso logo abaixo da posição, podemos adicionar uma nova propriedade chamou essa
velocidade de ponto e isso será igual a uma nova velocidade pela qual passaremos como um
argumento, portanto, se você precisar de outro argumento em seu construtor, poderá adicionar uma vírgula
no final da posição e, em seguida, passar pela velocidade como o segundo argumento, mas um problema que
tenho com isso é, eventualmente, quando começamos a adicionar mais e mais propriedades ao nosso construtor
, precisamos lembrar a posição de nossas propriedades primeiro, precisamos passar pela posição n
e então a velocidade não podemos passar pela velocidade primeiro e não podemos passar pela segunda posição
e à medida que isso fica cada vez maior vai ser difícil lembrar a ordem de tudo
então o que eu gosto de fazer para consertar isso é que eu gosto envolvendo esses dois argumentos em um objeto singular
assim, agora estamos passando apenas por um argumento, mas dentro desse argumento de objeto vamos
passar por uma propriedade de posição e/ou uma propriedade de velocidade que não são necessárias
e a ordem não não importa mais porque estamos passando-os como propriedades dentro de um
objeto, um pequeno truque para tornar seu código mais limpo e fácil de gerenciar, então agora que estamos passando
por uma posição e uma velocidade, precisamos refatorar nossa instanciação de sprite para baixo abaixo
antes de estarmos apenas passando por um objeto singular, então isso aqui é exatamente igual à nossa
posição, mas precisamos definir que precisamos ir em frente e envolver este objeto em outro objeto
, então vou seguir em frente e fazer que envolvê-lo em chaves de abertura e fechamento e, em seguida,
dentro da primeira chave de curler de abertura eu quero pressionar enter e vou atribuir o
segundo objeto igual a uma propriedade de posição para que seu primeiro sprite fique assim e agora
isso é muito mais legível também sabemos que este objeto aqui é igual à nossa posição
, então precisamos passar por uma segunda propriedade que será igual à velocidade, então vou
adicionar uma vírgula aqui e dizer que nosso a velocidade também é igual a um objeto com uma propriedade x e ay
porque teremos velocidade bidimensional para garantir que nosso objeto possa se mover para a
esquerda e para a direita e também para cima e para baixo, então, por padrão, nosso jogador terá um x velocidade de zero
e uma velocidade de zero também isso significa apenas que nosso jogador não estará se movendo por
padrão, então esta é a maneira correta de instanciar nosso jogador agora vamos em frente e fazer a mesma
coisa para nosso inimigo, sabemos que nosso inimigo tem um x e y e xa diferentes 400 e ay de 100
, mas se quisermos fazer isso o mais rápido possível, podemos simplesmente copiar todo o nosso custo de jogador
é igual ao novo sprite, livrar-se de nosso const de inimigo e colar em uma duplicata de jogador
agora tudo o que precisamos a fazer é mudar o player do console para uma const de inimigo e depois definir sua posição de volta
igual a 400 e 100 e agora isso é instanciado da maneira correta, mas usando uma sintaxe muito mais limpa
porque adicionamos neste objeto desestruturação dentro de nossa função construtora aqui
então se salvarmos isso volte para o nosso jogo tudo deve ficar igual nós atualizamos isso é ótimo
funciona com todo o nosso novo código mas agora podemos começar a usar nossa velocidade para mover esses objetos
agora quando eu tiver coisas em movimento normalmente eu gosto de criar um método adicional dentro da minha
classe este método será chamado de updates quando eu quiser que as propriedades sejam atualizadas para começar a mover
meu spray pela tela é onde eu vou chamá-lo está dentro de update então sempre que eu chamar
update o abeto a coisa que eu quero fazer é chamar draw vamos em frente e chamar essas duas linhas
aqui e para chamar draw podemos simplesmente escrever este ponto desenhar isso significa apenas que estamos referenciando
isso aqui agora se quisermos nosso jogador e nosso inimigo cair, precisamos ir em frente e selecionar
a posição deles, então vamos selecioná-los com essa posição não dot y e então vamos
adicionar isso ao longo do tempo com mais igual tudo mais igual significa que estamos usando essa posição
de ponto ponto y e adicionando algo a ela ao longo do tempo, é exatamente a mesma coisa que essa posição de ponto ponto y
mais igual a 10 é apenas uma sintaxe abreviada para tornar nosso código um pouco mais limpo, então vamos
usar uma sintaxe abreviada, livre-se desta linha aqui, salve e agora o que estamos dizendo é que, com o tempo
, nossa posição.y terá 10 pixels adicionados a ela para cada quadro que percorrermos, mas
para que isso tenha efeito, precisamos para ter certeza de que estamos chamando update dentro do nosso loop de animação
aqui, então vamos em frente e nos livrar de player.draw porque eles só serão chamados quando nosso
arquivo for carregado pela primeira vez, queremos ter certeza de que eles serão chamados para cada quadro dentro do nosso loop de animação,
então dentro daqui podemos chamar player dot update em vez de draw porque lembre-se de que atualização é ainda
chamando this.draw então vamos chamar player.update e depois vamos chamar inimigo.update também
salvamos isso volte para o nosso jogo aqui e atualize e você verá que eles estão se
movendo pela tela embora esteja criando um efeito de pintura em vez de mostrar os
objetos individuais, para corrigir isso, precisamos ter certeza de que estamos sempre limpando nossa tela
para cada quadro que estamos percorrendo, caso contrário, obteremos essa pintura- como efeito, então antes
de atualizarmos nosso player e nosso inimigo logo antes disso, vamos chamar nosso contexto de tela com c
e, em seguida, vamos chamar clear rect em cima disso, certifique-se de que o segundo r seja maiúsculo, então isso
é apenas será a mesma coisa que fillrect, mas clearact significa apenas na verdade não estamos
desenhando nada quando chamamos esse método, então qual o tamanho do retângulo que queremos limpar,
temos que começar em zero zero no canto superior esquerdo da tela e isso deve ocupar uma
largura da largura da tela e uma altura ou altura da tela, por isso salvamos e atualizamos e eles estão
realmente caindo, mas perdemos nosso fundo preto porque estamos chamando clear act em vez de fill
erect bem, acho que clear destruído apenas certifique-se de que nada seja mostrado no
fundo então vamos em frente e mudar isso para preencher o rack para minhas desculpas, vamos apenas chamar c dot
certo para ter certeza de obter essa diferenciação de nossa tela e o plano de fundo e agora o que
aconteceu enquanto nosso plano de fundo é vermelho porque a última coisa que definimos para o estilo de preenchimento era vermelho bem
aqui dentro do desenho então logo antes de chamarmos c dot fill rect queremos definir c dot fill style igual a
preto então isso significa que quando chamamos c dot fill aqui vai ser um retângulo preto
mas então quando chamamos jogador e inimigo dot update eles terão um estilo de preenchimento de vermelho para
garantir que eles se diferenciem do fundo preto, então eu salvei volte aqui
atualizar as coisas estão muito melhores, embora nosso jogador e nosso inimigo estejam saindo da tela
agora então, para que esses dois parem na parte inferior aqui, vamos querer focar em
nossa função de atualização, a primeira coisa que queremos fazer é alterar seu valor estático de 10 igual à
velocidade pela qual estamos passando para tanto nosso jogador quanto nosso sprite inimigo, porque se quisermos que
nossos sprites parem de se mover, teremos que definir nossa velocidade igual a zero em algum momento
, então o que faremos aqui é, em vez de adicionar 10, vamos adicionar esta
velocidade de ponto ponto y então para nossa posição no eixo y estamos adicionando em nossa velocidade y salvamos isso
e atualizamos agora eles permanecem no lugar porque aqui nossa velocidade y para nosso jogador e nosso
inimigo é igual para zero, mas se formos em frente e mudarmos a velocidade do nosso jogador para 10 no
eixo y e atualize agora nosso player está se movendo para baixo para que você possa ver o benefício de usar
a programação orientada a objetos é que ela permite que você vá em frente e altere as propriedades de objetos individuais
independentes umas das outras agora apenas nosso player está se movendo para baixo porque dissemos para a
velocidade y que deve ser igual a 10 enquanto a velocidade do nosso inimigo deve ser igual a zero, então é
um começo, mas agora o que queremos dizer com uma atualização é que queremos escrever uma declaração if que diga
se este ponto posição ponto y que vai seguir em frente e nos dará o topo de um de nossos sprites
então isso aqui então se esta posição do ponto ponto y mais esta altura do ponto agora não temos uma
propriedade de altura ainda em nossos sprites vamos em frente e adicionar um para adicionar uma propriedade de altura logo abaixo
da velocidade, vamos apenas adicionar esta altura do ponto, vamos em frente e definimos isso igual ao valor estático que estamos
usando atualmente aqui de 150 e agora podemos trocar este local com esta altura do ponto dentro do
nosso método draw, mas agora podemos n também vá em frente e faça referência a isso dentro do nosso método de atualização,
então este position.y mais esta altura do ponto o que é igual a poço que será igual à parte
inferior de um retângulo aqui, então se a parte inferior do nosso retângulo mais o nosso a velocidade do sprite é
maior ou igual à parte inferior da nossa tela aqui, então vamos em frente e definir
a velocidade do nosso retângulo aqui igual a zero e isso impedirá que ele caia
além da nossa tela, então com isso em mente, em nosso código, temos a parte inferior do nosso retângulo
, também queremos adicionar essa velocidade do ponto no y, queremos dizer se isso é maior ou igual à
parte inferior da nossa tela, que podemos obter com a altura do ponto da tela porque na tela as coordenadas y
no topo começam em zero e quanto mais descemos, maior elas ficam, então aqui embaixo serão
576 pixels, que é igual à nossa altura da tela, então o que queremos fazer bem, queremos ir em
frente e selecionar this.velocity.y e igualar a zero queremos impedir o nosso jogador de
se mover para baixo todos juntos, então vamos em frente e salvamos isso e atualizamos e isso cai e então
para logo antes de atingir o fundo, então você verá que há uma pequena lacuna
aqui vá em frente e cuide disso usando a gravidade, então o que é gravidade, bem, é simplesmente apenas aceleração
em nossa velocidade y, o que significa que ao longo do tempo, enquanto nosso objeto estiver no ar
, continuaremos adicionando um valor a essa velocidade até atingir o solo e se continuarmos
a aumentar a nossa velocidade ao longo do tempo, quanto mais rápido vai ficar, mais longo cai é como
a gravidade da vida real, por isso para criar gravidade acima da nossa classe podemos criar uma const global chamada
gravidade e definir a sequela para algo como vamos apenas dizer 0.2 para começar, isso deve fazê
-lo cair relativamente no lado mais lento, então vamos em frente e salvá-lo e queremos manter nosso código
aqui o mesmo, mas antes de afetar nossa posição no y- eixo podemos ir em frente e dizer
th nesta velocidade do ponto, o ponto y terá algum tipo de valor adicionado a ele ao longo do tempo e isso
será gravidade, será um valor de 0,2, então agora não precisamos dizer nossa velocidade no
eixo y é igual a 10 porque isso vai ser afetado pela gravidade ao longo do tempo ele vai
adicionar essa aceleração para baixo aos nossos objetos então salvamos isso e atualizamos vamos ver o que acontece
atualizamos e essa gravidade está muito boa você verá isso ele teve essa aceleração quando
foi puxado para baixo, mas temos um problema enquanto nosso jogador e nosso inimigo estão saindo da
tela que não é um jogo de luta muito bom, então, para corrigir isso, o que podemos fazer é pegar esse
código que apenas colocamos e dizemos que não queremos chamar isso para todos os quadros, caso contrário,
continuaremos forçando nosso jogador para baixo, mas queremos chamar isso se isso não for igual a verdade
, então se formos em frente e adicionarmos um l declaração aqui e cole this.velocity.y mais a mesma
gravidade para aquele outro estado Agora só vamos adicionar gravidade à nossa velocidade y se
o nosso jogador e o inimigo estiverem realmente acima deste valor aqui que é a altura da nossa tela, então
vamos em frente e salve isso e atualize e você verá os dois estão praticamente na
posição perfeita, não há espaço abaixo de nenhum deles porque a gravidade entrou em vigor para
garantir que eles sejam puxados para a parte inferior da tela ao longo do tempo e que não sejam puxados
mais para baixo, desde que isso seja igual a verdade, então com isso estamos procurando estar em ótima forma
e isso nos leva de volta à nossa lista de tarefas, podemos ir em frente e marcar criar um jogador e um
inimigo, então agora vamos seguir em frente e mover nosso personagens tanto nosso jogador quanto nosso inimigo usando
ouvintes de eventos, vamos em frente e fazer deste um jogo para dois jogadores para começar, porque a codificação ai
é muito complicada, então vamos em frente e apenas nos concentramos no essencial
, pelo menos para começar talvez em alguns tutoriais premium mais tarde iremos em frente e adicione um ai
vamos em frente e fazer com que nossos personagens movam nosso jogador e nosso inimigo usando ouvintes de eventos,
então dentro do nosso código queremos ir em frente e adicionar um ouvinte de eventos este é apenas um trecho de código que
ouve algum tipo de evento específico então, para adicionar um ouvinte de evento, podemos chamar nosso objeto de janela
e, em cima dessa chamada, adicionar ouvinte de evento assim, então isso vai levar um argumento
apenas uma string simples que declara que tipo de evento queremos ouvir, então existem
coisas como clicar existem coisas como tocar queremos ir em frente e ouvir um evento de
tecla pressionada este é um evento que ocorre sempre que pressionamos qualquer tecla do teclado
, então aqui vamos adicionar uma função de seta como nosso segundo argumento, isso é o que
será disparado a qualquer momento que pressionarmos uma tecla e, dentro dessa função de seta, podemos passar por um
objeto de evento como so e, em seguida, o console efetuar logout dentro de nossa função de seta neste objeto de evento para
que possamos ver o que está acontecendo dentro disso, então estamos e indo para salvar este clique com o botão direito, clique em inspecionar elemento e, em seguida,
abra nosso console e certifique-se de que clicamos em nossa tela e, em seguida, pressionamos uma
tecla, vou em frente e pressione k, você verá que acabamos de desconectar esse objeto de evento,
então este é um evento de teclado e se eu abrir isso, temos várias propriedades de dados diferentes
associadas a esse evento, então aqui você pode ver que pressionamos uma tecla de k aqui pressionamos a tecla de k
muitas das coisas eu nem sei por que está aqui, mas o que queremos focar é em qual tecla
estamos pressionando, então esta propriedade aqui da tecla é o que queremos trazer para o nosso código
, então aqui nós pode fazer referência ao salvamento de tecla de ponto de evento que volta para a atualização do jogo, clique em nossa
tela e comece a pressionar as teclas que você verá que estou desconectando cada tecla que pressiono
em um teclado que é exatamente o que queremos porque quero determinar quais teclas devem mover nosso
jogador em qual direção, então se eu seguir em frente e me mover isso para o lado direito clicando nestes
aqui clicando no encaixe para agora podemos manter nosso console aberto enquanto vemos nosso jogador e
nosso inimigo também, então de volta ao nosso código dentro deste ouvinte de evento keydown eu quero ir em frente
e adicionar uma instrução switch case dentro deste switch eu vou em frente e referenciar a tecla ponto do evento
e dizer para um caso de que bem um caso de d então eu quero ir em frente e chamar o seguinte código
e então chamar break então o que estou dizendo aqui é que eu quero ir em frente e pegar a tecla
que estamos pressionando no momento com a tecla de ponto de evento e se essa tecla for igual a d no teclado, então
o que eu quero chamar bem, eu vou querer chamar algum código que move nosso player, então sempre que
eu pressionar di quero selecionar nosso player e então eu posso definir a velocidade do nosso player no eixo x
igual a cerca de um, isso significa que vamos mover um pixel para cada quadro que percorremos
dentro do nosso animate loop, então se eu salvar isso e atualizar e depois pressionar d enquanto não estamos realmente nos
movendo g mesmo que eu esteja clicando na tecla porque precisamos definir como nosso player deve se mover no
eixo x se olharmos dentro de nossa função de atualização aqui, apenas definimos como nosso player está se movendo
no eixo y que precisamos faça a mesma coisa para o x então logo acima de this.position.y eu vou
referenciar esta posição do ponto dot x e ao longo do tempo nós vamos adicionar nesta velocidade do ponto dot
x então com esta linha simples de código se eu salve isso e atualize agora quando eu for em frente e pressionar d no
teclado temos nosso player movendo-se para a direita simplesmente porque eu pressionei d no teclado agora
isso vai continuar porque eu não declarei o que deveria acontecer quando eu levanto uma chave
, de volta ao nosso código, vamos querer adicionar um novo ouvinte de evento logo abaixo deste,
mas para adicionar esse ouvinte de evento, quero copiar este que acabamos de criar, então vá em frente e copie que
cole-o abaixo e eu quero ouvir um evento de tecla para cima em vez de tecla para baixo, então sempre que
eu teclar bem, eu quero a velocidade do nosso jogador no eixo x igual a zero então eu salvo essa
atualização e então segure d você vai ver que está disparando estamos nos movendo para a direita mas
assim que eu levantar você verá paramos porque definimos a velocidade do nosso jogador no
eixo x igual a zero, então esta é uma ótima maneira de fazer com que nosso jogador e nosso inimigo se movam para começar
, vamos em frente e fazer com que nosso jogador possa se mover para a esquerda também para fazer com que o nosso jogador se mova
para a esquerda tudo o que temos de fazerécopiar esta declaração case colá-la em baixo e depois dizer quando
o nosso jogador deve mover-se para a esquerda quando temos um caso de a sabemos quando carregamos na
tecla a nosso jogador deve estar se movendo para a esquerda, mas para mover nosso jogador para a esquerda
, precisamos ter certeza de que a velocidade do jogador no eixo x é um valor negativo em vez de
positivo, então vamos definir a velocidade do jogador no eixo x -axis igual a menos um
e, em seguida, quando teclarmos, vamos definir isso de volta igual a zero, não importa em qual tecla p ress
, mas precisamos ter certeza de adicionar esse caso adicional para quando levantarmos a tecla
a, então vamos em frente e levantamos a tecla a, bem como a velocidade do jogador no
eixo x será igual a zero então eu salvo isso volte aqui e atualize
agora quando eu pressiono d começamos a nos mover para a direita eu solto nós paramos e então quando eu começo
a segurar a nós vamos para a esquerda quando eu levanto nós paramos então isso é legal e você pode pensar que terminamos
, mas há algo que eu quero mostrar a você se eu seguir em frente e segurar d bem, tudo parece ótimo
, mas agora se eu continuar segurando d pressionado e pressionar a para ir para a esquerda, parece ótimo, mas eu tenho um
elevador para cima em d eu ainda estou segurando a mas não estamos nos movendo para a esquerda porque dentro
do nosso código, mesmo se estivermos segurando um desses, estamos dizendo sempre que levantamos em d ou a
estamos definindo a velocidade do nosso jogador x igual a zero isso ocorre depois que um desses ocorrer, portanto
, estamos impedindo nosso jogador de se mover apenas levantando em um y como resultado, não queremos
definir nossa velocidade em nossa função de tecla para baixo ou tecla para cima, queremos ir em frente e configurá-la dentro de nosso
loop de animação para garantir que tenhamos o movimento mais preciso possível em nosso jogo
, então eu já tenho um método muito bom para fazer isso é criando um const e eu vou
fazer isso logo acima da função animar um const chamado keys isso vai ser igual a um objeto
que declara todas as chaves que queremos usar para controle nosso jogo para que a primeira chave que eu queira
usar seja um eu vou criar um novo objeto atribuído a isso e então eu quero
ir em frente e criar uma propriedade pressionada e defini-la igual a false para iniciar então isso é como será nossa primeira
propriedade e agora também sei que quero que a propriedade de anúncio mova nosso caractere para
a direita, então vou monitorar a chave de anúncio copiando essa propriedade aqui adicionando uma vírgula
e depois colando esse segundo objeto diz em vez de ai querer referenciar d por padrão, isso
vai pressionei igual a falso e agora dentro do animate posso dizer se as teclas marcam um ponto pressionado
é igual a verdadeiro bem, eu quero ir em frente e definir a velocidade do ponto do jogador no eixo x igual a um
e então posso escrever outro se aqui que diz se as teclas ponto d for igual a pressionada
o que eu quero fazer bem eu quero ir em frente e chamar o jogador ponto velocidade ponto x
é igual a um aqui na verdade então se formos e olharmos para um poço um meio que devemos vá para a esquerda
isso deve ser igual a um negativo em vez de um mas vamos em frente e salve que
nada vai acontecer na atualização porque precisamos definir um ponto pressionado ou d ponto pressionado igual
a verdadeiro quando na verdade pressionamos uma dessas teclas para definir um ponto pressionado igual a verdadeiro
, vamos fazer isso dentro do nosso ouvinte de evento q down e aqui quando pressionamos a,
não vamos mais definir a velocidade x do nosso player, em vez disso, estamos vamos pegar as teclas ponto a ponto pressionado
e vamos definir isso como verdadeiro porque sabemos que apenas pressionamos sed para baixo na nossa tecla a mas
sempre que levantamos a nossa tecla aqui queremos selecionar a mesma coisa então as teclas marcam um ponto pressionado
mas aqui vamos definir igual a falso vamos em frente e fazer a mesma coisa para a nossa chave d
vou apenas copiar esta linha de código aqui dentro do nosso caso de d
vou me livrar de player.velocity.x igual a 1 colar em keys.a.pressed igual a
true mas em vez disso de referenciar a esta deve ser a nossa tecla d que atribuímos aqui
e então quando estivermos ouvindo a tecla para cima queremos ir em frente e selecionar keys.d.pressed
e em vez de definir a velocidade do nosso jogador x igual a zero
estamos vamos definir keys.d.press igual a false sempre que pressionamos nossa tecla d, então agora, para cada
loop de nossa animação, estaremos ouvindo se uma de nossas teclas é pressionada
ou não e isso não acontece importa se apertarmos agora, ainda estaremos nos movendo para a esquerda ou para a direita
porque nosso ouvinte de evento de chave não é responsável pela velocidade real do nosso player
no momento e eixo x vamos em frente e salve isso e atualize e veja como isso se parece
, então agora se eu seguir em frente e segurar d estamos nos movendo para a direita, mas observe o que acontece se eu levantar
, ainda estamos nos movendo para o certo tudo bem mas se eu for em frente e pressionar a agora vamos para a
esquerda mas continuamos mesmo que ambas as mãos estejam levantadas não estou a pressionar nenhuma
tecla por isso mesmo antes de definirmos o nosso leitor velocidade igual a um negativo ou um
, precisamos ter certeza de que antes disso configuramos player.velocity.x igual a zero, então o
valor padrão para a velocidade x do nosso jogador será igual a zero, mas se um deles for igual a true
então vamos defini-lo igual a um e mover o nosso jogador nessa direcção vai
ter a certeza que paramos sempre que levantarmos uma das nossas teclas guarde e actualize agora se eu continuar
e manter premido d nós movemos para a direita mas se eu levantar ambas as mãos paramos de nos mover óptimo
se for em frente e manter premido movemo-nos para a esquerda agora observe o que acontece quando eu pressiono d
e depois pressiono um pouco estou segurando d começamos a nos mover para a esquerda mas se eu levanto d
continuamos nos movendo então corrigimos o problema em que nosso player parou se o levantarmos em uma das
teclas agora você pode pensar que estamos prontos para ir, mas há mais uma melhoria que queremos fazer aqui
para nos dar o movimento mais preciso possível, então vou em frente e movo nosso jogador para a direita
e paro e eu pressiono a e depois pressiono d bem, ambos estão pressionados, mas estamos nos movendo
para a esquerda mesmo que eu apenas pressione d por que isso está acontecendo bem se olharmos dentro
do nosso código especificamente esta parte aqui vamos analisar enquanto isso se a for pressionado estamos nos
movendo para a esquerda mas se a não for pressionado então vamos avançar e mover para a direita
se d for pressionado somente se d for pressionado a coisa é se eu for em frente e pressionar primeiro ,
vamos chamar este código aqui e, em seguida, quando eu pressionar d sim, queremos
chamar esse código, mas apenas esta primeira instrução if será chamada porque este valor
aqui ainda é pressionado para corrigir isso, queremos ir em frente e adicionar algum tipo de
variável que rastreie a última tecla que pressionamos para garantir que obtemos o
movimento mais preciso possível e que quando avançamos e pressionamos a nossa tecla d enquanto a também é premida
a tecla d substitui isso e garantimos que o nosso jogador se move para a direita porque essa foi
a última tecla que premimos então para fazer isso logo abaixo de nossas chaves const eu posso ir em frente e criar um
lut e isso será chamado de última chave eu não vou atribuir nada a isso para iniciar
, mas sempre que pressionarmos e tivermos um caso de di quero para selecionar nossa última tecla e igualá-la a
d apenas uma string d simples e então aqui mesmo para nosso caso de a eu irei em frente e selecionar nossa última
tecla e dizer que a última tecla que pressionamos foi a então agora teclas ponto d ponto pressionado e teclas um ponto pressionadas
podem ser iguais a true ao mesmo tempo, mas o último k ey só será igual a um
valor e essa será a última tecla que foi premida não precisamos de fazer nada
com a tecla para cima só queremos saber qual foi a última tecla que premimos por isso nada dentro de key up
agora que estamos monitorando qual tecla pressionamos por último, podemos usar isso em nossa instrução if e else
if, portanto, se keys.a.pressed for igual a true e nossa última tecla for igual a a, então
vamos vá em frente e mova nosso jogador para a esquerda senão se as teclas ponto d ponto pressionar for igual a true e
nossa última tecla for igual a d então vamos avançar e mover nosso jogador para a direita
para que isso resolva nosso problema com substituindo a direcção em que o nosso jogador deve estar a mover-se por isso guardo
que volto ao nosso jogo actualizo e começo a premir d com um aspecto óptimo pressiono a
agora estamos a mover-nos para a esquerda levante d e depois começo a premir d que substitui a, embora eu
ainda esteja segurando a no momento, é assim que vamos adicionar um movimento praticamente perfeito a
nosso jogo usando ouvintes de eventos e nosso loop de animação ao mesmo tempo agora vamos também adicionar um
efeito de salto ao nosso player para adicionar um efeito de salto enquanto queremos ouvir na tecla pressionada outro caso
este será um caso de não mas em vez disso, este será o nosso player na
tela do lado esquerdo sempre que pressionarmos a tecla w vamos pular para cima, então queremos ir em frente e
selecionar nosso objeto keys especificamente uma propriedade w que ainda não criamos, mas vamos e então
nossa última tecla será igual a w essa é a última tecla que pressionamos quando pressionamos w então
dentro da tecla para cima sabemos que precisamos de outro caso para ouvir se esta tecla está
pressionada ou não quando pressionamos temos um caso de w sabemos que keys.w dot press é igual a false então só precisamos
ir em frente e criar esta propriedade aqui e podemos fazê-lo dentro de nosso objeto keys definindo w
igual a um objeto com pressionado igual a false então, para criar um efeito de salto, a primeira coisa que queremos
fazer é adicionar um novo caso onde nunca definimos que caso queremos ouvir bem simplesmente um caso
de não a mas vamos de facto fazer isto de uma forma um pouco diferente de mover o nosso leitor para a
esquerda e para a direita não temos de monitorizar para saber se esta tecla é pressionada ou não e não
temos que usar uma última tecla o que queremos fazer é apenas ir em frente e selecionar a velocidade do nosso jogador no
eixo y e definir isso como algo ridículo, então vamos apenas dizer algo como 10 negativo.
vamos definir isso igual a 10 negativo sempre que pressionarmos w voltamos ao nosso
jogo atualizar deixamos nosso jogador cair e então vamos em frente e pressionamos w no teclado você
verá isso nosso jogador apenas se move para cima e para baixo perfeitamente porque adicionamos gravidade em nossa
classe de sprite aqui em cima, aqui sabemos que estamos sempre adicionando gravidade à nossa velocidade y
se a parte inferior do nosso player estiver acima da parte inferior da tela, então enquanto nosso jogador estiver acima disso
, continuaremos puxando nosso jogador para baixo por alte toque a velocidade y do nosso jogador e como nossa velocidade y
está sempre sendo adicionada à posição y do nosso jogador ao longo do tempo quando definimos nossa velocidade.y
igual a 10, estamos apenas disparando para cima, estamos basicamente apenas dizendo para subir o mais rápido
possível usando uma velocidade de 10. e ao longo do tempo estamos puxando isso de volta para baixo porque sabemos
que estamos chamando else e quando chamamos else estamos adicionando gravidade de volta à nossa velocidade até
atingir uma velocidade zero que está indo para manter o nosso jogador no chão é assim que funciona
aqui é definir a velocidade do nosso jogador y igual a menos 10. quando pressionamos w no teclado movemo-nos
para cima e depois a gravidade puxa-nos de volta para baixo isso é tudo o que temos de fazer fazer para criar esse efeito de salto,
então agora vamos em frente e mova nosso inimigo para cá usando nossas teclas de seta para monitorar nossas
teclas de seta, queremos ouvir um caso, mas podemos não saber em que caso é uma tecla de seta real
, se quiser ir em frente e monitorar esse caso, podemos ir em frente e console.log nosso objeto de evento
especificamente a propriedade key se vamos salvar isso volte para nosso navegador e atualize e
então nós apenas pressionamos algumas de nossas teclas de seta, então eu vou pressionar a tecla de seta para a direita
que você está indo para ver isso nos dá um valor de seta para a direita eu sei que também quero pressionar
a tecla de seta para a esquerda ela nos dará a seta para a esquerda e se eu pressionar para cima isso nos dará a seta para cima
então esses são os valores que queremos para ouvir dentro de nossa instrução case, então vou
em frente e duplicar esses três e, em seguida, vamos em frente e colar em
três novos valores de caso, de modo que d deve ser a seta para a direita com exatamente a mesma caixa que nós vi
aqui no navegador que isso está correto e sempre que pressionamos a seta para a direita enquanto as teclas
dot seta para a direita dot pressionada deve ser igual a true agora para a última tecla bem, não queremos definir a última
tecla igual à seta para a direita porque isso é vai ser o nosso segundo jogador, essencialmente, não queremos
substituir o do nosso primeiro jogador movimento definindo last key igual a algo como seta para a direita
, como resultado, faz sentido adicionar uma propriedade last key em nossa classe sprite porque sabemos que
essa propriedade será independente para nossos objetos inimigos do jogador e do jogador 2,
então, em vez disso de referenciar a última chave como esta, na verdade, vou entrar em nossas classes sprite e
dizer que esse ponto a última chave será uma propriedade dentro de nossa classe sprite, mas não
será igual a nada por padrão, mas agora que eu tenho isso declarado eu posso dizer dentro da
seta para a direita eu quero ir em frente e selecionar nosso inimigo especificamente a última propriedade de chave do inimigo
e definir isso igual a uma sequência de setas para a direita e agora eu posso excluir esta última chave aqui
então agora eu só preciso fazer claro que faço a mesma coisa para a seta para a esquerda por isso vou livrar-me de a
e dizer sempre que carregarmos para baixo as teclas de seta para a esquerda dot seta para a esquerda dot pressione deve ser igual a true
e não a nossa última tecla mas a última tecla do nosso inimigo também deve ser igual para a seta para a esquerda e, em seguida, finall y
precisamos dizer o que acontece quando pressionamos a tecla de seta para cima, então, quando temos um caso de seta para cima,
queremos ir em frente e selecionar nosso inimigo dot velocidade dot y e definir isso igual a menos 10, para que isso
cuide de nossos ouvintes de evento key down para nosso inimigo e precisamos ter certeza de que
adicionamos nossos ouvintes de evento key up também, então vamos em frente e duplicamos a instrução switch case
aqui para key up para nosso player, podemos ir em frente e comente isso para dizer que estas são as nossas
chaves inimigas aqui vamos colar uma duplicata disso e dizer que sempre que um caso de erro de
gravação for ativado então queremos prosseguir e declarar keys.arrowright.press é igual para false
sempre que um caso de seta para a esquerda for levantado, queremos ir em frente e dizer que as teclas ponto
seta para a esquerda ponto pressionado é igual a falso também, então isso cuidará da tecla para cima
agora precisamos ir em frente e adicionar isso em nosso loop de animação para que esta declaração seja o
movimento do jogador, podemos ir em frente e duplicar todos este código aqui cole-o abaixo e diga
que este será o movimento do nosso inimigo para mover nosso inimigo se as teclas não a forem pressionadas, mas a
seta para a esquerda for pressionada e a última tecla do inimigo for igual à seta para a esquerda, então queremos ir em frente e
selecione a velocidade do nosso inimigo no eixo x e empurre-o para a esquerda, em seguida, dentro deste outro
, se quisermos selecionar nossas teclas dot seta para a direita se for pressionada e a última tecla do inimigo for igual à
seta para a direita, então estamos vamos definir a velocidade do nosso inimigo.x igual a 1.
então o que precisamos fazer agora bem dentro de nossas teclas aqui precisamos ter certeza de que estamos adicionando a
seta para a direita que será igual a um objeto com um pressionamento propriedade igual a false
também precisamos adicionar a seta para a esquerda que também será igual a um objeto com uma propriedade pressionada
igual a false e devemos ser bons para ir com isso, então vamos em frente e salvar a atualização aqui
e então nós' vamos testar nossas teclas de seta, então, se eu continuar e segurar a tecla de seta para a esquerda
, você verá nosso e nemy aqui está se movendo para a esquerda eu seguro bem agora estamos nos movendo
para a direita e você vai ter que desculpar um pouco desse movimento agora porque eu
tenho esse console aberto meio que bagunçando as coisas um pouco quando pressiono essas teclas, mas temos
o mesmo problema em que nosso inimigo continua se movendo, mesmo com as duas mãos para cima, não estou pressionando
nenhuma das teclas, então, de volta ao nosso jogo, aqui estamos configurando nosso jogador velocidade x igual a zero
também queremos ter a certeza de que estamos a definir a velocidade do nosso inimigo x igual a zero também para ter a certeza de que
paramos em cada fotograma que não estivermos a carregar numa tecla que guardo que volto mantenha premida na
tecla de seta para a direita levante paramos paramos mantenha pressionada a tecla de seta para a esquerda levante paramos mas se eu continuar e
segurar d para o nosso jogador que se move também e agora veja o que acontece quando eu pressiono a
tecla de seta para a direita nós podemos mover os dois ao mesmo tempo independentes um do outro é um
estilo de jogo bastante clássico onde você sed ter que sentar ao lado do seu amigo e usar teclas diferentes no
teclado para realmente fazer as coisas se moverem, então para terminar este movimento com os ouvintes do evento
eu só quero ter certeza de que nosso inimigo e nosso jogador se movem um pouco mais rápido em toda a nossa cena
e eu também quero ir em frente e refatorar um pouco do código do nosso player bem rápido vamos em frente e
fazer isso primeiro vamos refatorar esse código do player que código eu quero refatorar bem, ele estará
dentro do nosso ouvinte de eventos aqui nós não não queremos mais ouvir a última chave porque
não precisamos dessa variável independente, criamos uma propriedade para nossos sprites, então podemos
referenciar nosso player last key igual a d aqui e em qualquer lugar onde a última chave esteja
sozinha, vamos ter certeza de que prefixamos isso com player para que esses dois locais
aqui sejam player dot last key e então ouviríamos a last key dentro de nosso
loop de animação, vamos dizer e player last key para um e jogador las t para d e finalmente podemos nos
livrar dessa linha aqui porque sabemos que criamos essa propriedade dentro de nossa classe sprite,
então salvamos essa atualização pressionada d nos movemos para a direita levante bom para ir segurar um
elevador para cima bom para ir então apenas uma pequena refatoração para se livrar daquele lut que não precisávamos mais agora vamos
fazer tudo se mover um pouco mais rápido queremos que tudo se mova mais rápido só precisamos
aumentar esses valores aqui então acho uma boa velocidade para um jogo de luta em vez de uns vai
ser cinco isto significa apenas que nos movemos a cinco pixels por fotograma em vez de apenas um por isso cada localização e
qual está actualmente dentro do nosso loop de animação vou mudar isso para cinco
guardar e atualize em nosso navegador agora se eu cair d nós nos movemos muito mais rápido tanto para nosso inimigo
quanto para nosso jogador se eu pular bem isso ainda é muito lento para garantir que nosso inimigo e nosso jogador
caiam mais rápido só precisamos mudar o valor da gravidade tão acima quando a gravidade é
igual a 0,2 nós caímos bem devagar mas se aumentarmos para algo como 0,7
salve e atualize e então comece a pular você vai ver que caímos bem rápido
embora não pulemos tão alto então como vamos em frente e cair nessa taxa, mas pular mais alto
, bem, queremos ir em frente e aumentar a gravidade, vamos mantê-lo em 0,7 por enquanto, mas em nosso
ouvinte de eventos especificamente quando pressionamos w ou seta para cima, queremos apenas definir isso igual a um
valor mais alto, então eu vou em frente e defini-lo igual a 30 para w e seta para cima salvar e atualizar
e agora quando eu for em frente e pressionar w você verá bem talvez um pouco alto demais
aqui nós vai para o espaço vai diminuir para algo como 20.
apenas diga que ambos devem ser iguais a 20 salvar e atualizar e então pular eu acho que é
muito bom para o salto em nosso jogo então agora temos alguns realmente movimento responsivo entre nosso
jogador e nosso inimigo e usando um bom método para garantir que nossas chaves veja bem qual deles
deve controlar a direção em que nosso personagem ou inimigo está se movendo para que possamos
marcar os personagens de movimento com os ouvintes de eventos, então agora vamos seguir em frente e
criar ataques para ambos jogador e nosso inimigo como isso vai funcionar bem aqui quando formos
em frente e nos aproximarmos do nosso inimigo do lado direito eventualmente vamos seguir em frente e
pressionar algo como a barra de espaço o que isso vai fazer é que vai ative um retângulo que é
desenhado em cima do nosso jogador este retângulo vai representar nosso ataque seja um
golpe de espada ou um soco ele vai representar qualquer um desses então o que queremos fazer é monitorar a
colisão entre este retângulo e nosso inimigo é este rectângulo a tocar no nosso inimigo
não, não é por isso vamos dizer que o ataque falhou não vamos fazer nada
mas se avançarmos e movermos o nosso jogador um pouco mais perto agora o nosso rectângulo quando avançarmos e
carregarmos barra de espaço s deve de facto estar a tocar no nosso inimigo pois o nosso inimigo foi atingido vamos em
frente e subtrair a saúde da barra de saúde dos nossos inimigos por isso para obter este efeito temos de ir em
frente e criar este rectângulo em cima do nosso jogador e do nosso inimigo para quando nosso inimigo quiser
usar um ataque, para criar esse retângulo, vamos voltar ao nosso código aqui e
focar em nossa classe de sprite para que o retângulo seja adicionado como uma propriedade
desta caixa de ataque de ponto como agora o que é uma caixa de ataque, bem, será a águia 2
e o objeto é basicamente apenas um retângulo, então quais propriedades um retângulo tem bem, eles
terão uma propriedade de posição e eles ' também teremos uma largura e uma altura, então adicionaremos
propriedades para largura, altura e posição aqui agora, qual posição deve ser igual a bem, eu
quero que nossa posição de caixas de ataque sempre siga nosso jogador, portanto, vou fazê
-lo com base na posição do nosso jogador real que vai g estar começando no canto superior esquerdo
aqui para ter certeza de que eu sempre sigo nosso jogador bem podemos atribuir
uma posição aqui igual a esta posição do ponto por padrão sempre que a posição mudar aqui
nossa posição da caixa de tags também irá mudar também isso é perfeito é exatamente o que queremos
agora para a nossa largura eu vou em frente e dar um valor de 100 para começar e para a altura
eu vou ter certeza que a altura é igual a 50. então agora se queremos a nossa caixa de ataque desenhada
vamos ter que ir para dentro da nossa função draw logo abaixo deste código aqui vou
criar um comentário que diz que é aqui que a caixa de ataque é desenhada e eu posso ir em frente e desenhar isso com
c ponto fill rect então o primeiro argumento será a posição da caixa de ataque então esta
caixa de ataque ponto ponto posição ponto x o segundo argumento será este ponto caixa de ataque ponto
posição ponto y então a posição y do nosso caixa de ataque e então precisamos da largura e altura das caixas de ataque
w o que podemos obter com esta largura de ponto da caixa de ataque e então nosso quarto argumento será
a altura da nossa caixa de ataque e podemos obter isso com esta altura do ponto da caixa de ataque, então se salvarmos isso
e atualizarmos nosso jogo aqui você vamos ver agora que nossa caixa de ataque é desenhada em cima do nosso
jogador e do nosso inimigo, então é meio difícil dizer agora qual é o nosso jogador qual é a nossa
caixa de ataque então logo antes de desenharmos o c ponto fill rect podemos adicionar no estilo de preenchimento de ponto c
definir essa águia para uma cor diferente, como verde, salve essa atualização, agora sabemos qual é nossa caixa de ataque
e qual é o nosso jogador, então agora precisamos detectar uma colisão entre esta caixa de ataque aqui
e nosso inimigo é esta caixa de ataque tocando bem nosso inimigo agora é preciso detectar para isso
e dizer ao nosso jogo o que deve acontecer como resultado agora para detectar uma colisão será um
pouco difícil dizer qual é o nosso jogador e qual é nosso inimigo enquanto fazemos isso, então quero
ter certeza de que nosso inimigo é uma cor diferente do nosso player apenas para que possamos ver onde as coisas
estão em relação umas às outras enquanto codificamos isso, então queremos alterar a cor apenas do nosso
inimigo o que podemos fazer é definir este estilo de preenchimento aqui igual a um argumento que passamos pelo
nosso construtor, então, em vez de referenciar o vermelho, quero ir em frente e dizer que isso
será igual a essa cor de ponto, o que significa que precisamos criar uma propriedade para essa cor de ponto bem aqui
dentro de nosso construtor, então isso a cor do ponto será igual a cor que agora vamos passar
como um argumento aqui, então vamos passar por esse argumento de cor por padrão
vou definir isso igual a vermelho para salvar isso e a atualização ainda funcionarão exatamente
da mesma forma, mas agora que temos isso como um argumento, o que podemos fazer é abaixo de onde estamos realmente
criando nosso jogador e nosso inimigo, quando formos em frente e criarmos um inimigo, podemos dizer que quer que a
cor do inimigo seja igual a um fio de azul se salvarmos isto volte aqui agora podemos facilmente
diferenciar entre o nosso jogador e o nosso inimigo porque o nosso jogador é vermelho o nosso inimigo é azul isto
vai ser muito bom para quando formos em frente e detectarmos a colisão vamos em frente e façamos
isso agora para detectar uma colisão precisamos de ir para dentro do nosso loop de animação mesmo por baixo de onde
estamos a enviar o movimento do nosso jogador e do nosso inimigo vamos em frente e detectar a nossa colisão
aqui para detectar a colisão temos de ir em frente e escreva uma declaração if e o que faz
isso if diga bem, precisamos ir em frente e dizer que é o lado direito da nossa caixa de ataque aqui
maior ou igual ao lado esquerdo do nosso inimigo se este for além deste ponto aqui
nós sabemos que os dois estão colidindo nesse caso, vamos começar com isso, então, como podemos obter o
lado direito de nossa caixa de aderência, vamos em frente e obtê-lo com nossa caixa de ataque do jogador
ponto posição ponto x isso é na verdade vai nos dar o lado esquerdo da nossa caixa de ataque s o isso
aqui precisamos do lado direito e para conseguir isso podemos obtê-lo com a largura do ponto da caixa de ataque dos pontos do jogador
que nos dará o lado direito da caixa de ataque do nosso jogador perfeito, mas agora precisamos
dizer que isso é maior que ou igual ao lado esquerdo do nosso inimigo para que possamos fazer isso com maior
ou igual ao lado positivo sobre o inimigo que obteremos com o inimigo ponto posição ponto x agora se isso for verdade
podemos ir em frente e fazer sair qualquer texto como apenas ir, realmente não importa o que colocamos aqui,
mas se salvarmos isso, volte ao nosso jogo, clique com o botão direito do mouse, clique em inspecionar, vá para o console agora, não estamos
realmente saindo do console para ir até o lado direito da nossa caixa de ataque é maior ou igual ao
lado esquerdo do nosso inimigo aqui assim que eu sair disso você verá que pára de sair
é perfeito é por isso que queremos começar a detectar a colisão
mas agora veja o que acontece se o nosso ataque caixa sai do nosso inimigo, mas continue se movendo, mesmo que nossa
caixa de ataque não esteja tocando o e nemy enquanto ainda estamos constantemente fora, então agora precisamos adicionar
uma condicional adicional, qual é essa condicional que será boa, precisamos detectar se
o lado esquerdo da nossa caixa de ataque aqui é menor ou igual a do lado direito do nosso inimigo
vamos basicamente fazer a condicional ao contrário que acabamos de escrever
, então para obter o lado esquerdo da nossa caixa de ataque queremos ir em frente e adicionar uma declaração e que diz que
é o nosso jogador dot attack box dot position dot x que é o lado esquerdo do ataque box é
menor ou igual ao que enquanto o lado direito do nosso inimigo podemos obter o lado direito do nosso inimigo
com inimigo dot position dot x que realmente nos dará o lado esquerdo, mas para obter o lado direito
, adicionamos a largura do inimigo e isso garantirá o lado direito do inimigo
, mas se estivermos referenciando uma propriedade de largura no inimigo e olharmos dentro de nossa classe acima
aqui em cima, você notará que nunca atribuímos uma propriedade with a ou r sprite class
precisamos ter certeza de que fazemos isso para que essa detecção de colisão funcione corretamente
, então logo acima da altura vou adicionar uma propriedade chamada this dot width e vou
atribuir isso aos 50 we' estamos usando atualmente para desenhar nosso player, então a largura será igual
a 50 aqui podemos substituir 50 por essa largura de ponto e, se salvarmos, volte ao nosso jogo agora, nossa
detecção de colisão deve funcionar como esperado no eixo x, então já não estamos a consolidar a saída
o que é óptimo agora quando a nossa caixa de ataque toca o nosso inimigo estamos a sair mas se eu passar pelo
nosso inimigo por aqui já não vamos sair para ir até ao lado esquerdo do nosso ataque a caixa
está a passar do lado direito do nosso inimigo por isso eventualmente vamos a esse ponto agora estamos a tocar sabemos
que o nosso inimigo deverá ser atingido neste caso agora também vamos querer ter em conta o eixo y
que verá se eu começar a pular e me mover para a área de nossos inimigos, ainda estamos saindo,
embora nossa caixa de ataque não seja necessária tocando o inimigo rimente, então precisamos ter certeza de que monitoramos
a colisão no eixo y que queremos dizer que é a parte inferior da nossa caixa de ataque aqui maior
ou igual à parte superior do nosso jogador, neste caso, definitivamente é assim queremos dizer que esses dois
estão colidindo, mas assim que pularmos para cima, esse não é o caso, queremos definir isso como false
, então vamos em frente e escrever esta condicional, queremos obter o lado inferior do nosso player, vamos
voltar para o nosso loop de animação é aqui que detectamos a colisão queremos adicionar uma
declaração e que diz obter o nosso jogador dot attack box dot position dot y queremos o fundo da nossa
caixa de ataque embora este aqui seja actualmente o topo para chegar ao fundo, adicionaremos em
nosso jogador a altura do ponto da caixa de ataque do jogador queremos dizer se isso é maior ou igual ao
lado superior do nosso inimigo que podemos obter com a posição do ponto do inimigo dot y então sabemos que os dois são colidindo
, mas precisamos adicionar mais uma condicional para garantir que isso s é o mais preciso possível
, queremos obter o lado superior da caixa de ataque do nosso jogador,
que podemos obter com o jogador .
inimigo a posição ponto y mais altura do ponto inimigo então sabemos que os dois
estão realmente colidindo no eixo y com certeza então vamos em frente e salvar esta atualização aqui
e agora quando avançarmos e pularmos para cima e para baixo quando estivermos sobrepostos nosso inimigo com nossa caixa de ataque
que vai desaparecer é exatamente o que queremos sabermos que nossa detecção de colisão está correta
para quando nossa caixa de ataque está sobreposta em cima de nosso inimigo então agora estamos basicamente andando
com nossa espada em tudo vezes isso não é realmente um jogo de luta divertido não podemos simplesmente entrar em
um inimigo e dizer ei você foi atingido precisamos de algo que realmente ative nossa espada para dizer que este
é o momento exato em que nosso inimigo pode ser atingido então dentro dessa condicional nós
vamos adicionar em um mês re e declaração que diz que se nossa caixa de ataque está colidindo com nosso inimigo e
nosso jogador está atacando, então sabemos que nosso inimigo foi realmente atingido, então, basicamente, precisamos adicionar uma
propriedade ao nosso jogador que diga se ele está ou não atacando, vamos lá adiante e
adicionamos essa propriedade vamos para nossa classe sprite e então aqui vamos adicionar uma propriedade chamada
este ponto está atacando não vamos atribuí-la a nada por padrão ela será igual a
false mas para ativar isso para true logo abaixo da atualização, podemos adicionar um método de ataque
e sempre que chamarmos o ataque a um desses objetos, iremos em frente e definir
este ponto está atacando igual a verdadeiro agora só devemos estar atacando por um certo período de tempo
vamos definir isso como verdadeiro sem definir de volta igual a falso bem, vai
dizer que estamos sempre atacando o tempo todo, só queremos ativar isso por um certo
período de tempo, então nós vai chamar uma função chamada set time out it vai pegar uma
função de seta como o primeiro argumento e um tempo como o segundo argumento para o tempo que vamos colocar em
100, que deve ser igual a cerca de 100 milissegundos, acredito que seja, mas
basicamente dentro da seta de tempo limite definida função podemos definir este stun está atacando igual a falso
então quando chamamos ataque este ponto está atacando será igual a verdadeiro então depois de 100
milissegundos isso que está atacando será igual a falso então apenas certifique-se de definir
isso de volta igual ao seu valor original em algum momento, mas precisamos de uma maneira de ativar
esse método de ataque, na verdade faremos isso em nosso ouvinte de eventos abaixo de onde
estamos ouvindo a tecla para baixo, portanto, se nossa chave de evento for o nosso jogador que são estes casos aqui
tem um caso de espaço vamos apenas incluir um espaço vazio aqui para um caso o que significa apenas
carregar na barra de espaço o que queremos fazer quando formos em frente e carregar para baixo no espaço
bem, queremos ir em frente e dizer t que nosso jogador vai atacar sempre que pressionarmos a
barra de espaço, então se eu for em frente e salvar isso e voltar ao nosso jogo e eu encontrar nosso inimigo
, você verá que não estamos mais no console.logging out para ir, mas assim que eu pressionar
espaço, ele definirá o ataque igual a verdadeiro, o que significa que vamos ativar nosso
código de detecção de colisão, que deve console.log out ir, então vamos em frente e pressione espaço e você verá
durante esse breve período de tempo essa condicional era verdadeira a nossa caixa de ataque estava sobreposta ao inimigo
por isso saímos constantemente da sessão por esse período se eu avançar e sair do nosso inimigo e pressionar espaço
não vamos sair porque a nossa caixa de ataque não está tocando o inimigo se eu voltar aqui
pressione espaço estamos desconectando-o mais uma vez porque sabemos que estamos atacando nesse momento
, então você verá que está sendo desconectado algumas vezes, o que significa que nosso inimigo foi atingido
, mas sabemos que nosso inimigo não foi atingido quatro ou duas vezes seguidas y só foi atingido uma vez
, então sempre que formos em frente e detectarmos a colisão e o chamamos de sair para ir imediatamente queremos
definir o jogador que está atacando de volta igual a falso e apenas com isso se voltarmos
aqui e atualizarmos e movermos para dentro do nosso inimigo e depois acertar o espaço você vai ver que agora
só vamos sair uma vez é exatamente isso que queremos subtrair a quantidade exata de saúde
do nosso inimigo quando o atingimos agora realmente não faz sentido mostrar nossa caixa de ataque o
tempo todo é meio confuso na verdade, então, de volta à nossa classe de sprite, podemos ter certeza de que a estamos
mostrando apenas quando estamos realmente atacando, então, onde estamos desenhando nossa caixa de ataque
, podemos escreva acima dele se este ponto estiver atacando se isso for igual a verdadeiro, então queremos ir em frente e
chamar o código de desenho dentro dele, caso contrário, nunca vamos desenhá-lo, então se eu salvar
e atualizar e clicar no espaço, você está indo para ver que nossa caixa de ataque só aparece por um breve período de
tempo e estamos apenas g para terminar a sessão que isto foi atacado se estivermos actualmente sobrepostos com o nosso
inimigo, é exactamente isso que queremos começar a criar ataques dentro do nosso jogo, por isso
vamos adicionar ataques para o nosso jogador vamos em frente e adicionar ataques para o jogador 2 ou nosso inimigo, como
temos chamado para garantir que esse cara azul aqui possa lutar contra o vermelho
, para colocar a posição da caixa de ataque dos inimigos no local correto, na verdade vou comentar
isso declaração que acabamos de escrever apenas para que possamos ver a caixa de ataque o tempo todo para que você possa atualizar
e isso parece bom, mas queremos esse ataque voltado para a esquerda, então precisamos mover esta
caixa de ataque sobre alguns para mudar a posição que precisamos certifique-se de que a posição das nossas caixas de ataque
não seja completamente dependente da posição do nosso jogador real ou entidade inimiga, então para fazer isso
, vamos em frente e mudar a posição aqui igual a um objeto com uma
propriedade x e ay e depois x por padrão será igual a a posição do lutador que podemos obter
com this.position.xe esta posição de parada dot y agora quando eu salvar isso e atualizar você
notará que nossas caixas de ataque estão ficando no céu porque com essa mudança não
temos uma cópia superficial de nossa posição pai quando não temos uma cópia superficial o que isso significa
é position.x não será mais diretamente vinculado a esta posição de parada, precisamos ir em frente
e garantir que nossa posição de caixas de ataque atualiza manualmente com base na posição do
pai, então, para fazer isso, precisamos apenas entrar na atualização e logo abaixo
deste desenho de ponto, diremos que esta posição do ponto da caixa de ataque do ponto no eixo x será igual a
esta posição do ponto ponto x e, em seguida, faremos a mesma coisa para a posição da caixa de ataque no eixo y,
que será igual a this.position.y, então eu salvei isso e atualizei agora os seguintes , o
que é ótimo, mas precisamos compensar nossa caixa de ataque dos inimigos, então para adicionar esse deslocamento
, vamos querer focar i n em onde estamos definindo a posição das nossas caixas de ataque no eixo x,
então estamos definindo-a igual à nossa posição pai atual, mas também queremos subtrair dela algum
tipo de ensaio se formos em frente e subtrairmos 50 daqui, salve e atualize, você verá que se moveu
um pouco para a caixa de ataque de nossos inimigos, mas também se moveu para a caixa de ataque do nosso jogador, também
não queremos que esse valor aqui seja dinâmico com base no que estamos passando através do nosso
construtor, em vez disso, vamos em frente e subtrair desta caixa de ataque de ponto ponto deslocamento
ponto x, então precisamos criar essa propriedade de deslocamento e vamos criá-la dentro de nossa caixa de ataque
aqui, então vamos adicione um deslocamento e esse deslocamento terá um x e também o que
x será igual a bem, qualquer deslocamento que passarmos dentro de nosso construtor, ele
passará por apenas um objeto de deslocamento, adicionaremos dentro de nosso construtor e offset
e então podemos seguir em frente e definir o offset igual a essa propriedade pela qual estamos passando
, então o deslocamento será igual ao deslocamento pelo qual estamos passando no momento e, se quisermos usar a
sintaxe abreviada, podemos nos livrar desses dois pontos e do deslocamento porque, como esses dois têm
exatamente o mesmo nome podemos simplesmente nos livrar dos dois pontos offset isso aqui é exatamente a mesma coisa
que isso aqui é apenas uma sintaxe abreviada para tornar nosso código um pouco mais limpo, mas agora que estamos
passando por um argumento de deslocamento precisamos ter certeza de que ' estamos fazendo isso sempre que estamos criando um
sprite, então aqui vamos adicionar um argumento de deslocamento, teremos apenas um x
e também ay nosso x para nosso player não será nada ser zero e a mesma coisa
para o nosso y, vamos apenas mantê-lo onde está no momento, mas se quisermos passar por
um argumento de compensação para nosso inimigo aqui, podemos dizer que nosso deslocamento para nossa caixa de ataque no
x -axis vai ser negativo 50. então salvamos que agora esse negativo 50 deve ter efeito ct
sendo configurado para compensar aqui, o que significa que quando entrarmos em atualização, vamos chamar
attackbox.offset no eixo x, isso aqui será igual a menos 50. então não queremos
subtrair os 50 negativos, mas sim adicioná-lo a isso nos dará o efeito correto que
queremos e se salvarmos isso e atualizarmos agora nossa caixa de ataque para o nosso jogador está no local correto
e nossa caixa de ataque para os inimigos no local correto também só precisamos de um pouco de refatoração e
onde esse retângulo é desenhado, então agora queremos monitorar uma colisão entre nossa
caixa de ataque de inimigos e nosso jogador real aqui, então para fazer isso, vamos nos concentrar em onde estamos atualmente
detectando uma colisão entre a caixa de ataque do nosso jogador e o nosso inimigo, nós simplesmente queremos
ir em frente e duplicar este código, mas refatorá-lo para a caixa de ataque do nosso inimigo e nosso jogador real,
mas esse código é meio difícil de ler porque temos tantos e declarações dentro daqui
faria muito mais faz sentido refatorar isso em sua própria função que detecta a colisão
como resultado, vou em frente e copiar essas quatro primeiras condicionais que estão realmente
detectando essa colisão e logo acima da animação vou criar uma nova função chamada
retangular colisão isso vai detectar uma colisão entre dois retângulos
e dentro daqui eu vou retornar alguns parênteses e colar nessas quatro condições
que acabei de copiar então agora se essas quatro condições forem verdadeiras vamos retornar verdadeiro se elas 're false
vamos retornar false, mas para que isso funcione, precisamos ter certeza de que temos
uma caixa de player.attack para referenciar e que temos uma referência de inimigo.positioner também, então sempre
que chamamos de colisão retangular, também quer passar por um argumento, será apenas
um objeto singular que leva um retângulo uma propriedade e, em seguida, um retângulo para a propriedade,
então qual é o primeiro retângulo que queremos detectar para colisão com ele será nosso
retângulo de jogador, então em todos os lugares em que tivermos jogador, vou em frente e substituir o jogador pelo retângulo 1
e, em cada lugar que tivermos inimigo, será nesses dois locais aqui,
vou substituir isso pelo retângulo 2. então agora temos uma função de colisão retangular reutilizável na
qual podemos usar para detectar uma colisão entre nossas caixas de ataque e nossos caças, mas também
será utilizável quando quisermos usá-la com nosso inimigo tão abaixo quando estivermos detectando uma
colisão podemos nos livrar dessas primeiras quatro condições e então podemos chamar de
colisão retangular o que isso leva leva um argumento que será um objeto e dentro
disso temos duas propriedades será retângulo um o que é o primeiro retângulo igual
ao que vai ser a águia 2 ou jogador e o segundo retângulo vai ser igual ao nosso inimigo
então se a caixa de ataque do nosso jogador e o nosso inimigo estão colidindo e o nosso jogador está atacando devemos
fazer logout ir deixe 's salve isso e atualize para garantir que isso esteja funcionando, nosso console aberto
se aproxime e, em seguida, atingi o espaço que, de fato, ainda está funcionando, mas queremos ter certeza de que faremos
isso para o nosso inimigo também, então o que podemos fazer é podemos copiar esta declaração se colá-la abaixo
e agora nosso retângulo 1 será nosso inimigo, queremos enviar um texto para a caixa de ataque de nossos inimigos e
qual será o nosso jogador real, este é o caso e nosso inimigo está atacando, então sabemos que o ponto inimigo é
atacar é igual a falso eventualmente porque sabemos que os acertamos, mas devemos fazer com que
o ataque inimigo seja bem sucedido, então a última coisa que precisamos fazer é determinar qual botão queremos pressionar
para definir o ponto inimigo é atacar igual a verdadeiro nós vamos fazer isso dentro do nosso
ouvinte de evento de tecla para baixo e dizer que vamos adicionar um novo caso, vamos em frente e dizer que nossa seta para baixo é
quando nosso inimigo ataca, então, para seta para baixo, quero ir em frente e selecionar nosso inimigo e dizer que está atacando
é igual a verdade, então agora sempre nós pressionamos a tecla de seta para baixo nosso inimigo vai estar
atacando então eu salvei isso e então eu atualizo os movimentos para o lado um pouco e eu me aproximo do
nosso jogador desde que nossa caixa de ataque aqui para o nosso inimigo esteja dentro do nosso player
e eu bati você verá que nosso ataque inimigo foi realmente bem-sucedido estamos apenas recebendo
um monte de logs do console aqui no momento porque estamos constantemente pendurando nossas
chaves de evento, não precisamos mais delas logs do console vamos apenas ir em frente e nos livrar deles tanto na tecla para baixo
quanto na tecla para cima e atualizar e fazer isso mais uma vez mover em direção ao nosso jogador
atingido para atacar o ataque inimigo foi bem-sucedido e agora já que nosso jogador também está sobrepondo
seu ataque box em nosso inimigo se eu acertar o espaço, estamos consolidando isso também sabemos que esses
dois métodos agora estão funcionando para ataque, então para terminar isso podemos voltar para nossa classe
e podemos descomentar este código onde realmente desenhamos fora o retângulo para quando estivermos atta Guardando
isso e atualizando agora quando me aproximo do nosso jogador, você pode ver que nossa caixa de ataque do inimigo
está mostrando que o ataque do inimigo foi bem-sucedido quando eu acertei o espaço para o nosso jogador agora estamos consolando para ir
, o que significa que o ataque do nosso jogador foi bem-sucedido, então com isso podemos ir em frente e marcar os ataques em
seguida vamos adicionar uma interface de barra de integridade, então o que vamos fazer é criar
alguns elementos html que se parecem com isso essencialmente esta barra à esquerda vai indicar a
saúde do nosso jogador e esta barra à direita vai indicar a saúde do nosso inimigo
vamos ter um cronômetro no meio, mas o mais importante é que coloquemos isso corretamente para
que quando começarmos a acertar algo como nosso inimigo enquanto sua saúde diminui ao longo do tempo
, então como podemos recriar esse efeito que temos no topo aqui para criar
essa interface que realmente queremos entrar no index.html e vamos começar
colocando isso como um html real d ocument então vou envolver nossa tag de tela e também nossa
tag de script dentro de uma tag de corpo para sabermos que esses são nossos elementos de corpo e basicamente o que queremos
fazer é envolver nossa tag de tela em um grande div this vai ser nosso container div
então este div que acabamos de criar vai representar toda a largura e altura da nossa tela
de cima para baixo e queremos ir em frente e colocar todos os nossos elementos dentro
dele um div grande porque todos esses elementos precisam ser relativos ao div que acabamos de criar
, não queremos nossos elementos em relação a algo como nossa janela do navegador, caso contrário eles podem ser
colocados em algum lugar como aqui embaixo fora de nossa tela, queremos ter certeza de que eles 'sempre colocados
dentro de nossa largura e altura da tela e é por isso que estamos envolvendo tudo nesse div agora
dentro deste div também queremos colocar mais um div dentro dele e isso vai ocupar toda a
largura do pai div, mas também será o local em que queremos colocar nossa
barra de saúde e o cronômetro aqui, então vamos adicionar mais uma div dentro dessa div que acabamos de criar
e essa div aqui é equivalente a esse retângulo vermelho que envia uma largura total que
acabamos de criar então o que está dentro deste retângulo vermelho menor enquanto temos um retângulo aqui temos
um retângulo aqui e temos um retângulo aqui então essencialmente vamos criar
mais três retângulos dentro daquele div que acabamos de criar então aqui dentro deste div vamos adicionar
mais três um dois três este primeiro será a saúde do jogador o último será a saúde do inimigo
e o terceiro será o temporizador então para começar a estilizar esses divs vamos em frente e adicione
um estilo atributo para estes e aqui vamos apenas escrever estilos embutidos para fazer isso porque
é o método mais fácil, então nosso modelador aqui será igual à cor do traço de fundo isso
muda a cor de fundo de qualquer div em que estamos atualmente nós vamos bunda coloque isto em amarelo
para se certificar de que temos esta cor amarelada para o fundo istoéo que estamos a criar
a propósito existe apenas este um rectângulo bem aqui com o vermelho dentro dele com a nossa
cor de fundo igual ao amarelo podemos prosseguir e dê a isto uma altura de algo como 30 pixels
e se nós dermos a isto uma largura de algo como 100 pixels vamos em frente e ver como isso se parece
vamos salvar volte aqui e atualize você verá que acabamos de criar o começo da
nossa barra de saúde perfeita, vamos notar que a barra de saúde aqui está empurrando nossa
tela para baixo, mas não queremos que ela seja sobreposta em nossa tela, o que isso significa é
que precisamos selecionar o div do contêiner principal bem aqui que será o maior retângulo vermelho
e precisamos adicionar uma posição relativa em cima disso que será o primeiro requisito
que você verá por que estou fazendo isso em breve, então isso será o mergulho do recipiente vermelho
podemos até comentar isso out red container div para nos ajudar um pouco em nosso código e dentro
deste div vamos adicionar um atributo de estilo e aqui podemos ir em frente e adicionar uma posição
relativa a isso, então se formos salvar e atualizar nada vai mudar por padrão, mas
precisamos disso para obter o efeito que desejamos, então agora poderemos obter
essa barra de saúde amarela no topo de nossa tela, como vamos fazer isso bem o que podemos fazer é podemos
selecionar este div filho dentro dele este é o menor div do contêiner vermelho que queremos ir em frente e
selecionar isso adicionar um atributo de estilo em cima dele e dar a isso uma posição absoluta, então se eu salvar isso
e atualizar agora, por padrão, isso está no topo de nossa tela, portanto, sempre que um elemento filho como este tiver uma
posição absoluta, basicamente o que isso significa é que queremos tirá-lo do fluxo de documentos quando for
retirado do fluxo de documentos, outros elementos, como nosso elemento de tela aqui não
serão afetados pela largura ou altura daquele elemento individual, então damos a ele uma posição
absoluta e, como é o contêiner div, o grande retângulo vermelho que contém toda a tela
tem uma posição relativa, basicamente, o que estamos dizendo é que esse elemento com uma posição absoluta
deve ser relativo a esse contêiner principal div com a posição relativa que está agora
porque esse contêiner contém toda a nossa tela, ele é desenhado no canto superior esquerdo de onde
esse contêiner div começa tão perfeito agora antes de fazermos isso com a largura correta, vamos em frente
e desenhe nossa caixa de cronômetro lá vai estar focando neste div bem aqui logo abaixo do
timer vamos adicionar um estilo dê uma cor de fundo vamos salvar o vermelho para começar
vamos dar uma largura de 100 pixels e então uma altura de 100 pixels também
, então salvamos isso e atualizamos isso será o div do contêiner para o nosso timer, então
obviamente isso é colocado abaixo da nossa barra de saúde aqui quando deveria estar próximo a ela,
então como movemos esses tw o discos um ao lado do outro ao invés de colocá-los em cima uns dos
outros por padrão se formos em frente e olharmos para estes dois elementos aqui dentro do nosso inspector
veremos que temos a nossa barra de saúde div e temos a nossa div do temporizador se olharmos abaixo por padrão os
divs têm uma exibição de bloco o que significa o bloco de exibição bem significa que os elementos são colocados em
cima uns dos outros como blocos eles são empilhados uns sobre os outros então por padrão o div sempre
será empilhado em cima de outro div, mas o problema é que, se formos em frente e adicionarmos uma exibição de flex
ao div pai, esses discos serão colocados um ao lado do outro por padrão, em vez de
estocados um em cima do outro, um div pai com um a exibição de flex afeta todos os elementos dentro desse
div pai, então vamos em frente e encontrar nosso div pai para esses dois elementos aqui
que o div pai será este com uma posição absoluta, vamos adicionar um
ponto e vírgula ao final do estilo e, em seguida, adicione a este estilo de exibição igual a flex, então agora que
este pai tem uma exibição de flex, está dizendo que pegue todos os elementos filhos e coloque-os
próximos um do outro por padrão, mesmo que eles tenham uma exibição de bloco, então salvamos essa atualização aqui
, você verá agora esses elementos estão próximos uns dos outros perfeitos estamos chegando cada vez mais perto
finalmente vamos em frente e adicionar a saúde do nosso inimigo para fazer isso eu vou simplesmente copiar este div
e colá-lo logo abaixo da saúde do inimigo salvando a atualização e nós' estamos chegando cada vez mais perto
do estilo que estamos indo para combinar com o que deveríamos ter aqui agora, este display flex
que acabamos de adicionar é bem mágico porque há um monte de subclasses que trabalham em conjunto com
display flex então por passando o mouse sobre esta div você verá que ela não ocupa toda a largura de nossa
tela, nós definitivamente queremos ter certeza de que ela ocupa toda a largura simplesmente porque
queremos que nossas barras de saúde se expandam para que possamos ver a quantidade exata de saúde, seja nosso jogador
ou inimigo foi embora, selecionando este elemento em nosso navegador aqui, podemos testá-
lo temporariamente para ver como ficaria com uma largura de 100 por cento; portanto, assim que eu der
uma largura de 100, não veremos nenhuma alteração, mas se passarmos o mouse sobre isso, você verá agora que o div está
ocupando toda a largura da tela, o que é perfeito, é o que queremos começar porque
se o pai tiver uma largura de 100, permitirá que nossos elementos filhos cresçam com base em nossas
necessidades, então adicionar uma largura de 100 aqui no navegador é apenas temporário, se eu for atualizar
, você verá que a largura desaparece, então queremos essa largura naquele elemento que
acabamos de colocá-lo no qual é será aquele com posição absoluta e display flex
, queremos que a largura seja 100, então adicionaremos isso aqui, salve e atualize, você verá
que entra em vigor permanentemente e agora podemos começar a afetar as larguras reais de nossas barras de saúde,
então não queremos uma largura estática de 100 para nossas barras de saúde agora eles são iguais a 100 pixels
, nós só queremos ter certeza de que eles ocupam todo o espaço restante da nossa tela real, então
aqui onde estamos usando a largura de 100 pixels não vamos mais definir isso como 100 pixels, mas
sim 100 por cento que salvamos que atualizamos e agora você verá bem aqui que a saúde do jogador está ocupando
100 por cento do espaço restante.
pixels para 100 também salve e atualize isso e agora
você verá que eles estão ocupando uma quantidade igual de espaço porque ambos têm uma largura de 100
e também estão dentro de um div que tem uma exibição de flex agora por adicionando essa largura de
100, você verá que nosso timer div aqui, embora tenha uma largura e uma altura de 100 pixels
, agora parece ter 47 pixels de largura em vez de 100, então, por padrão, os elementos flex encolherão
com base em seus elementos vizinhos, uma vez que seus elementos vizinhos têm uma largura de 100 e este
tem uma largura estática este elemento está tentando encolher para acomodar todo o outro espaço
que está sendo ocupado se você não quiser um elemento filho dentro de um pai que tenha uma exibição de flex
para encolher aqui está o que você precisa você precisa selecionar o elemento que você não deseja reduzir
e, em seguida, adicionar um estilo chamado flex shrink e você vai definir isso igual a zero, então se
você definir isso igual a zero, zero basicamente significa falso, diz que não reduza isso e salve isso
e atualize, você verá agora que está no tamanho correto, não está mais diminuindo simplesmente porque definimos a
redução de fluxo igual a zero, então agora vamos em frente e colocar nossas barras de saúde no meio
do nosso cronômetro para representar mais do que temos aqui dentro do nosso design inicial, então, para
centralizá-los, também adicionaremos uma propriedade flex adicional, esta será
exibida ao lado de exibir flex no pai, para que o estilo seja chamado align dash
itens então este estilo aqui só funciona se o ele ment tem um display de flex se nos
livrarmos do display flex aqui align items não funcionaria você precisa ter certeza de que ele tem
um display flex vizinho para que isso funcione o que é algo que podemos definir align
itens para o centro bem basicamente o que isso diz é que queremos pegar todos os itens dentro deste div
que serão esses três divs aqui e queremos alinhá-los verticalmente no centro
deste div pai aqui, adicionando um centro de item de linha vamos centralizar
todos os filhos verticalmente vamos em frente e salve isso e atualize e você verá que
esses elementos filhos estão centralizados verticalmente estamos começando a olhar ainda mais perto do nosso design
aqui, então agora é importante vermos o que isso parece sem o inspetor aberto então
vamos em frente e acertar o x aqui você vai ver bem que definitivamente parece
errado então vamos em frente e corrigir isso eu vou voltar para inspecionar o elemento mas vou mover
nosso inspetor para o inferior agora eu posso ver exatamente como isso se parece e posso descobrir o que está
acontecendo de errado, então se eu passar o mouse sobre este div aqui você verá que está ocupando toda a largura da
janela do nosso navegador se eu subir um mais alto isso também é ocupando toda a largura da janela do navegador,
queremos apenas que ocupe toda a largura de nossa tela e a razão pela qual isso está ocupando
toda a largura da janela do navegador em vez da tela dentro dela é porque um div por padrão
tem um display of block um elemento de bloco de exibição ocupa 100 do div pai que, neste
caso, será o corpo, que também é a largura total da tela agora, então não queremos
uma exibição bloqueada para este div o que queremos use em vez disso será display é igual ao
bloco inline um bloco inline significa que o elemento ainda pode ser empilhado em cima de outros elementos
, mas ele só ocupará a largura total de qualquer filho que esteja dentro dele,
então esse filho aqui div que contém nossa barra de saúde tem uma posição absoluto, na verdade, ele não
afeta a largura ou a altura desse div pai aqui, mas esse elemento de tela
tem uma exibição de bloco, portanto, afeta a largura e a altura do elemento pai como resultado quando
colocamos uma exibição de bloco em linha este elemento pai está dizendo que deve ser apenas a
largura e a altura completas da tela que está dentro dele, então tudo o que temos a fazer com
nosso código é encontrar nosso div pai que estará aqui em cima e adicionar um exibição
do bloco de traço embutido, então, se eu salvar isso e atualizar agora, você verá que isso está dentro de nossa
tela, mesmo quando eu sair do nosso inspetor, está no local correto, está começando a representar
nossa barra de saúde com ainda mais precisão agora antes de começarmos a subtrair de nossas barras de saúde, acho que
faz sentido adicionar um pouco de preenchimento em torno disso apenas para dar um pouco de espaço para respirar
nas bordas do nosso jogo, então queremos ir em frente e adicionar preenchimento em nossa barra de saúde enquanto pegamos
nosso pequeno contêiner vermelho div e aqui podemos adicionar uma propriedade de preenchimento e aqui vamos
definir isso como algo como 20 pixels, definir isso como 20 pixels, estamos colocando 20 pixels de
preenchimento em cada lado deste contêiner, então queremos ir em frente e certifique-se de salvar isso
volte aqui e atualize agora você verá que temos preenchimento ao redor disso, mas você notará
que adicionar o preenchimento aqui está empurrando nossa caixa para fora da tela, acabamos de adicionar cerca
de 40 pixels de preenchimento na largura geral do contêiner, o que significa que ele está sendo empurrado
para fora, algo que precisamos fazer para corrigir isso, precisamos adicionar um estilo personalizado que
diga que não queremos que nossa largura geral seja afetada pelo preenchimento, para faça isso, vamos criar uma
tag head acima da nossa tag body e é para onde todos os metadados do seu site normalmente vão, mas dentro
daqui vamos adicionar algumas tags de estilo e agora podemos prosseguir e começar a escrever um pouco mais
css tradicional o css que queremos escrever vai começar com um asteri sk e, em seguida, um
colchete de abertura e fechamento, este asterisco significa que queremos seguir em frente e aplicar o seguinte estilo
a cada elemento em nossa página da Web, qual estilo queremos aplicar a tudo
, bem, será o dimensionamento de traço de caixa e nós ' vou definir isso igual à caixa de traço de borda, então,
se eu salvar isso e atualizar aqui agora, você verá que isso está alinhado corretamente, por
que, adicionando esse preenchimento de propriedade de caixa de borda, não será mais aplicado
quando calculando a largura dos elementos você deve sempre ter isso em todos os sites que você
cria, eu não sei por que não está nos navegadores por padrão, mas você sempre quer
isso para garantir que seu preenchimento não esteja atrapalhando o geral largura de seus elementos
, então isso é tudo o que temos que fazer para garantir que tenhamos preenchimento no lugar para dar à nossa interface algum
espaço para respirar, para que possamos começar a subtrair a saúde de nosso jogador e de nosso inimigo
. o vá em frente e comece a subtrair da barra de saúde de nossos inimigos acima
para começar a subtrair desta barra de saúde, vamos querer ir em frente e adicionar um id a ela,
então aqui esta é a saúde de nosso inimigo, podemos adicionar um id a este div declarando que nosso id deve
ser igual a algum tipo de string, o que é um bom identificador para a saúde do nosso inimigo, além da saúde do
inimigo, então é assim que vamos referenciá-lo em nosso javascript
, então agora podemos ir para index. js e comece a rolar para baixo até onde nosso inimigo é
atingido, então aqui é onde nosso jogador está atacando, isso significa que nosso inimigo está sendo atingido
em vez de causar o logout, vamos em frente e selecionar nossa barra de saúde inimiga
. pode ir em frente e pegar essa barra de saúde com o seletor de consulta de ponto de documento e, em seguida, vamos
selecionar o id que acabamos de criar, ele será indicado pelo sinal de libra é assim que selecionamos um id
e, em seguida, o nome do id que é inimigo saúde e aqui queremos selecionar o estilo
neste especificamente a largura e agora quando nosso inimigo for atingido podemos definir isso igual a algo como
20 por cento e isso deve diminuir a barra de saúde de 100 para 20 apenas para ilustrar como isso está
funcionando, então eu salvei isso e atualizei o movimento e depois acertei nosso inimigo você verá enquanto a
largura disso definitivamente diminuiu para 20%, mas parece que nosso cronômetro foi movido
para a direita por causa dessa nova mudança, então queremos levar isso em consideração ao estilizar essa
saúde bars agora o posicionamento do nosso timer depende da largura dessas barras de saúde em
segundo plano vamos em frente e atualizar volte para sua posição original o que vamos
precisar fazer é adicionar uma nova div que não seja parte deste pequeno mini layout que temos aqui,
este novo div terá uma posição absoluta e essencialmente cobrirá
toda a largura e altura de uma dessas barras de saúde, pois esse novo div não faz mais parte do
layout quando nós mudarmos a largura deste div com uma posição absoluta bem, não
vai mais empurrar tudo ao redor, apenas este div vai encolher como resultado, então vamos em
frente e adicionar nessa posição o div absoluto, vamos voltar para index.html e para adicionar
em uma posição absoluta div logo abaixo da saúde do inimigo, adicionaremos uma nova div, daremos a ela um estilo
de posição absoluta, assim, diremos que o plano de fundo aqui
será igual a azul, então, já que nós estamos usando um div com posição absoluta, queremos seguir em frente
e envolver esses dois divs aqui dentro de um div pai para garantir que essa posição absoluta div
possa ser relativa ao pai, então, para o pai, vamos adicionar um estilo de posição relativa
e, como esse div pai agora será responsável por empurrar elementos ao redor, ele
será responsável por nosso layout, queremos ter certeza de que declaramos para o div pai
, onde a largura e a altura devem estar 100 então vou copiar esses dois estilos certo aqui
bem, pelo menos, corte-os, não copie e, em seguida, vou colá-los dentro da tag de estilo pai,
então, se eu salvar isso e atualizar, perderemos nossa barra de saúde aqui, mas tudo bem, é
realmente o que queremos para faça isso funcionar corretamente, você verá se eu clicar com o botão direito do mouse e clicar em
inspecionar e passar o mouse sobre o div que acabamos de criar, isso é o que parece que é perfeito,
representa nossa barra de saúde, mas se olharmos dentro de nossos elementos filhos aqui bem, eles não
ocupe toda a largura e altura deste div pai como queremos, então nosso atual
critério de saúde do inimigo tem uma largura de 442, o que é ótimo, mas não tem nenhuma altura associada a ele,
então, se quisermos ir em frente e certifique-se de que isso tenha uma altura associada a ele, podemos apenas torná-lo a
mesma altura que o pai adicionando 30 pixels de altura e isso deve mostrar esse div novamente, salvamos
e atualizamos e, de fato, está de volta, mas agora quando selecionamos nosso saúde do inimigo aqui embaixo que
tem uma coluna de fundo ou de amarelo esta div aqui se começarmos a afectar esta largura em vez
de definir para algo igual a 90 verá que diminui com o tempo então vamos em frente
e actualizar o nosso jogo e depois vamos atacar o nosso inimigo atingimos o espaço, você
verá que diminui para 20 imediatamente, o que é ótimo, mas uma coisa é que não sabemos a
extensão total da nossa barra de saúde porque não temos nenhum dave de fundo aqui dizendo bem quanta
saúde estava lá para começar, você verá muito isso nos jogos de luta tradicionais, deve haver
algum tipo de div de fundo aqui indicando quanta saúde havia originalmente; na verdade,
configuramos isso adicionando a segunda div aqui com posição absoluta e um fundo de azul
, então queremos ter certeza de que este div aqui ocupa toda a largura e altura deste
div pai com uma posição relativa e, para fazer isso, podemos ir em frente e dizer que o estilo superior é igual
a zero que o estilo certo é igual a zero t que o estilo inferior é igual a zero e, finalmente,
que o estilo esquerdo também é igual a zero, então eu salvei isso e atualizei bem, agora vemos que nosso
elemento azul é sobreposto em cima do amarelo, basicamente, o que o canto superior direito inferior e o esquerdo indicam são
como longe do div pai este retângulo deve ser colocado, então estamos dizendo que o topo deste
retângulo que estamos criando deve ser colocado zero pixels do topo do div pai zero pixels
à direita do div pai zero pixels do parte inferior do div pai e zero pixels da
esquerda no div pai e, ao fazer isso, estamos basicamente dizendo que para esta posição o
elemento absoluto retire toda a largura e altura do pai, então se esse elemento estiver no topo
isso é na verdade o que queremos subtrair para mostrar a diminuição da saúde do nosso jogador, então o que vamos
fazer é mover este id aqui deste primeiro div para o segundo div que tem
um fundo azul que estamos vai colar isso em salvar e ref resh e então, quando atingirmos nosso inimigo
, você verá o div azul diminuir, mas o amarelo permanecerá em segundo plano o amarelo será apenas
o indicador completo de quanta saúde estava lá, enquanto o azul ficará bem
quanto saúde que temos atualmente é exatamente o que queremos, mas não queremos diminuir
isso para que isso caia diretamente para 20%, queremos ter certeza de que isso diminua ao longo do tempo
com base em quantas vezes atingimos nosso inimigo, então de volta dentro do index.js, não queremos diminuir em 20,
mas sim pela saúde do ponto inimigo, então vamos usar uma propriedade chamada health, precisamos ter
certeza de que estamos adicionando isso à nossa classe sprite acima então vá em frente e diga que essa
saúde de ponto será igual a 100 para começar, então nosso inimigo e nosso jogador terão
100 pontos de vida para começar e depois voltar aqui sempre que acertarmos nosso inimigo, precisamos ter certeza
de que selecione nosso inimigo.saúde e subtraímos dele um valor de algo como,
digamos 20. Então, para cada vez que acertarmos nosso inimigo, vamos subtrair 20 pontos de vida do inimigo.saúde
e vamos definir nossa barra de saúde igual a essa nova porcentagem, mas se quisermos definir isso
igual à porcentagem, precisamos para garantir que adicionamos uma sequência de porcentagem e agora, quando salvarmos
e atualizarmos, se começarmos a acertar nosso inimigo, você verá que diminui gradualmente
ao longo do tempo, então agora vamos em frente e fazer a mesma coisa para que quando nosso inimigo atinge nosso jogador
a barra de saúde do jogador diminui também vamos seguir em frente e usar a mesma metodologia
que usamos antes para nosso inimigo tudo o que precisamos fazer aqui é simplesmente copiar nossos divs de saúde
do inimigo até aqui e nós vamos em frente e substituir a saúde do nosso jogador
por esses divs a única coisa que realmente precisamos mudar é o id vamos mudar isso
para a saúde do jogador, mas isso vai nos preparar para o sucesso de usar a mesma técnica que
tínhamos antes, agora que temos uma identificação da saúde do jogador aqui, podemos entrar em index.js
e agora queremos detectar a colisão quando nosso inimigo estiver atacando estará bem aqui,
podemos simplesmente copiar esta linha de código e colá-la quando nosso inimigo estiver atacando e dizer que
queremos selecionar não nossa saúde inimiga, mas a saúde do nosso jogador e, em seguida, defina a largura igual não
à saúde do inimigo, mas à saúde do nosso jogador à medida que são atingidos, então precisamos subtrair a saúde do nosso jogador
cada vez que nosso jogador é atingido, para fazer isso, podemos copiar isso linha aqui, cole-a abaixo
e diga que cada vez que nosso jogador for atingido, queremos subtrair a saúde do jogador por 20.
e com apenas isso vamos em frente e ver o que acontece, vamos atualizar
e vamos pegar nosso inimigo e acerte nosso jogador você verá que diminui com o
tempo, embora esteja na direção errada, queremos ter certeza de que isso diminui da esquerda para
a direita e não da direita para a esquerda, como fizemos com nosso inimigo para faça isso se mover
para a direita em vez de para à esquerda, vamos selecionar o div pai aqui
e definir sua exibição igual a flex, uma vez que fazemos isso, podemos dizer para todos os elementos filhos
que queremos alinhados à direita, então é isso que vamos fazer para obter esse efeito
é que vamos selecionar esse div pai em index.html que será esse div aqui
vamos adicionar um estilo de exibição flex, então eu adiciono isso em salvar e atualizar ainda parece o mesmo
e se eu seguir em frente e atacar nosso jogador ainda a mesma funcionalidade, embora nossa barra de saúde amarela
tenha desaparecido, tudo bem por enquanto, só queremos ter certeza de que isso está indo na
direção correta, então queremos alinhar isso à direita aqui desde temos uma exibição de flex nesta
div pai, podemos adicionar uma propriedade subflex chamada justificar o conteúdo do traço, isso só funciona se você tiver
um elemento com uma exibição de flex, então agora temos isso, podemos dizer que queremos que todos os elementos filhos
sejam até o final deste contêiner adicionando uma propriedade de flex dash end então quando dissermos que
queremos todos os nossos elementos filhos alinhados à direita tudo o que precisamos fazer agora é nos livrar da esquerda
igual a zero porque não queremos o lado esquerdo desta div sempre tocando o lado
esquerdo da div pai, queremos que isso diminua com o tempo, então vamos em frente e nos livrar
da esquerda e queremos definir nossa largura aqui igual a 100% por padrão, então se eu salvar isso
e atualizar aqui tudo ainda parece o mesmo, mas assim que eu clicar em nosso player,
veremos que começa a diminuir na direção correta porque o div pai tem uma exibição de
flex e seu conteúdo de justificação está definido como flex end, mas está faltando esse elemento de plano de fundo agora
tudo o que devemos fazer aqui é adicionar uma largura de 100 ao rígido com uma cor de fundo amarela
para salvar isso e depois acertar nosso player mais algumas vezes você verá que fica no lugar que
fica ótimo para nosso player quando nosso jogador revida isso parece ótimo para o inimigo, então com isso nós' vamos
poder verificar nossa interface da barra de saúde, então vamos cuidar dos cronômetros do jogo e da
funcionalidade de fim de jogo, então basicamente em nosso jogo aqui vamos colocar um cronômetro bem no
meio desta caixa vermelha que vai diminuir ao longo do tempo e, eventualmente, quando chegar a zero,
dependendo de quem tiver a menor quantidade de saúde, iremos em frente e determinaremos quem ganhou
e, em seguida, exibiremos algum texto no meio aqui que diz o jogador um ou o jogador dois
um para adicionar essa funcionalidade, a primeira coisa que precisamos fazer é entrar no index.html e
precisamos descobrir onde está nosso timer, ele estará aqui, conforme indicado por este comentário do timer e
dentro deste div podemos ir em frente e inserir um tempo, então vamos dizer que nosso jogo terá
10 segundos para começar, simplesmente porque queremos ir em frente e testar isso rapidamente, relativamente
rápido, pelo menos, com 10 segundos dentro daqui, vamos salvar, vamos de volta à nossa atualização do jogo, lá
está o nosso cronômetro, vamos lá ah ead e certifique-se de que isso esteja centralizado bem no meio deste
quadrado vermelho para centralizar isso, vamos em frente e adicionar uma exibição de flex nesta div
aqui e então queremos seguir em frente e usar algumas dessas propriedades estávamos usando anteriormente, incluindo
alinhar itens de traço, isso será igual ao centro, o que significa que vamos centralizar
o texto dentro disso verticalmente, podemos salvar isso e atualizar para ver como fica e
isso está realmente centralizado verticalmente agora só precisamos centralizar isso horizontalmente para centralizar
isso horizontalmente no mesmo local, tudo o que precisamos fazer é adicionar um estilo de conteúdo justificado e
vamos em frente e dizer que queremos justificar nosso conteúdo no centro, isso significa
que vamos alinhar nosso conteúdo no centro do nosso container no eixo x para que possamos salvá-
lo de volta ao nosso jogo e agora que está na posição correta tão perfeito então vamos começar a pegar esse
cronômetro em contagem regressiva até zero para fazer isso, queremos ter certeza de que podemos n selecione este div
dentro do javascript e para fazer isso faz sentido adicionar um id a este div, que será chamado de
timer simples o suficiente e agora que temos um id sobre isso, podemos ir para index.js
, estamos vamos criar uma função logo acima de animate que é responsável por diminuir
esse timer à medida que o tempo continua, então essa função será chamada de diminuir timer sempre
que chamarmos essa função, queremos ir em frente e diminuir esse número em um, então para fazer isso precisamos
para começar com uma variável vamos criar um let chamado timer vamos definir isso igual a 10 que
é o tempo que temos atualmente aqui então agora que temos timer igual a 10 cada vez que chamamos
timer diminuído o timer vai subtrair um de si mesmo, mas só devemos subtrair um
de si mesmo enquanto o temporizador for maior que zero, porque não queremos entrar em valores negativos,
então agora o que estamos dizendo é se o temporizador for maior que zero, vamos para subtrair um
dele, mas queremos ter certeza de t se isso está ocorrendo repetidamente e para receber essa chamada várias
vezes, podemos ir em frente e chamar set timeout dentro disso, certifique-se de ter um t maiúsculo para o
segundo t aqui e, em seguida, qual função queremos chamar de we' vamos chamar a mesma função
que está bem aqui é chamada de temporizador de diminuição então basicamente estamos criando um loop infinito
é basicamente a mesma coisa que temos aqui dentro de nosso loop de animação com nosso
quadro de animação de missão estamos apenas vivendo neste conjunto timeout será a mesma coisa, mas podemos ir em frente
e determinar qual intervalo queremos definir timeout para ser chamado como o segundo argumento, então o segundo
argumento aqui será em milissegundos, então isso basicamente cria um loop aqui
para nossa função e podemos ir em frente e testar isso simplesmente chamando diminuir o temporizador logo abaixo
dele, então chamamos isso de salvar e atualizar, não veremos nada na verdade porque
agora isso é apenas programático nosso temporizador está diminuindo, mas não podemos vê-lo, a menos que não
possamos desconectá-lo, precisamos associar isso ao rótulo que realmente temos dentro de nosso quadrado vermelho aqui
, para obter essa associação, também diremos se o temporizador é maior que zero, vamos adicionar alguns
colchetes aqui para que possamos escrever várias linhas de código, vamos subtrair uma do timer
e, em seguida, vamos em frente e selecionar nosso documento, obter nosso seletor de consulta
e, em seguida, o que fazemos quer selecionar bem, vamos olhar dentro de index.html
, acabamos de criar um id de timer, então vamos em frente e pegue-o com um sinal de sustenido e, em seguida,
selecionaremos timer e poderíamos dizer o enter html para este elemento, então o que estiver dentro disso
elemento agora é apenas um texto 10 queremos seguir em frente e definir este html interno igual ao
temporizador que estamos subtraindo no momento, desde que tenhamos esse código aqui
, salvamos e atualizamos vamos ver que isso diminui ao longo do tempo para cada segundo
até chegarmos a zero e uma vez que descemos para zero, devemos ver isso parar e não devemos
prosseguir em valores negativos que, de fato, paramos em zero, estamos prontos para ir, então, olhando para o
nosso código, realmente só faz sentido continuar chamando set timeout se o timer for maior que zero
, caso contrário, há realmente não faz sentido, então também vou adicionar isso aqui
e logo abaixo desta declaração if é onde vamos determinar quem ganhou,
será o jogador 1 ou o jogador 2 que realmente ganhou o jogo vai depender de quem
tem a maior quantidade de saúde então logo abaixo desta declaração if podemos escrever uma adicional
que diz se a saúde do nosso jogador é igual à saúde do nosso inimigo então o que acontece enquanto sabemos
que queremos ir em frente e dizer que há um empate se eles tiverem a mesma quantidade de saúde quando o jogo
terminar com base no cronômetro, teremos um jogo empatado, mas não faz sentido
desconectar isso porque alguém jogando nosso jogo não está terão suas ferramentas de desenvolvedor abertas em pelo menos
provavelmente não, então precisamos criar algum tipo de rótulo que possamos alterar e exibir em nosso
jogo, então dentro do index.html precisamos encontrar um bom local para colocar algum tipo de rótulo de exibição e
acho que um bom lugar para coloque-o logo acima da nossa tela, porque eu não quero isso associado à
nossa interface de usuário da barra de saúde, na verdade, quero isso aqui em seu próprio contêiner separado, então
vou criar um div logo acima da tela e, em seguida, dentro deste i vou seguir em frente e escrever
empate eu só quero ir em frente e ver onde está, então eu salvei isso e atualizei e ele será
colocado aqui por padrão, mas podemos colocar isso em cima de nossa tela fazendo isso tem uma posição
de absoluto então vamos em frente e fazer isso em seguida em todo esse div vamos adicionar uma tag de estilo e dizer que
a posição aqui deve ser absoluta e se formos em frente e fizermos isso absoluto se olharmos para
este texto atualmente é preto e nosso plano de fundo é preto para nossa tela, precisamos ter certeza de que
ha ve algum contraste aqui mudando a cor do nosso texto para branco então logo após uma posição
eu vou adicionar cor e definir isso igual a branco então eu quero ir em frente e salvar essa
atualização aqui e agora a gravata está sobreposta no topo para canvas, mas podemos querê-lo centralizado diretamente
no meio, então precisamos escrever um pouco de código extra aqui para fazer isso. O que vamos
fazer é adicionar uma exibição de flex neste elemento e podemos você me diz o que vem a seguir
, bem, queremos usar o centro de itens alinhados para centralizar verticalmente e, em seguida, justificar o
centro de conteúdo para centralizar horizontalmente, então você pode pensar que se eu salvar isso e atualizar, ele
será executado no centro, mas infelizmente é não vamos em frente e inspecionar isso eu vou seguir em
frente e clicar com o botão direito do mouse em inspecionar elemento e então eu quero inspecionar nossa etiqueta de gravata aqui
, então eu olho para este div com uma posição absoluta não está tirando a largura total ou
altura da tela agora está apenas ocupando o a monte de espaço do texto dentro dele
que é apenas empate, mas nossa tela tem largura e altura completas aqui, então precisamos ter certeza de
que essa div tire toda a largura e altura da tela também e para fazer isso
como temos uma posição de absoluto, podemos ir em frente e adicionar as
propriedades superior direita inferior e esquerda para dizer que queremos que a parte superior esquerda inferior e direita desta div expanda a largura
e a altura completas do contêiner pai, para fazer que vamos dizer que o topo é igual a zero a direita
é igual a zero o fundo é igual a zero e então finalmente a esquerda será igual a zero também
então vamos salvar isso e atualizar aqui e agora vamos veja que o empate está diretamente no
centro porque agora nosso div começa do zero do zero do topo da direita zero da parte inferior
e zero da esquerda da nossa tela real isso parece estar em um ótimo local agora
, então não não quero que isso seja mostrado por padrão, você verá aqui quando estou atualizando, vemos o t ext
tie vamos em frente e esconder isso eu vou dar a isso uma exibição de none e se dermos a isso
uma exibição de none, precisamos ter certeza de que excluímos display flex aqui porque não
queremos mostrar isso em tudo bem agora vamos manter todo o resto, mas enquanto isso não tiver uma exibição
de nenhum, veremos que está oculto e isso não atrapalha nada, então a próxima
coisa que queremos fazer é ir para index.js e quando a saúde do nosso jogador for igual à saúde do nosso inimigo,
quando nosso cronômetro acabar, queremos ir em frente e selecionar esse texto para selecionar esse texto,
vamos usar document.queryselector e, em seguida, precisamos de algum tipo de id para selecionar aquele div
então dentro de index.html nós precisamos adicionar um id aqui nós podemos ir em frente e chamar este id display
text isto é o que nós queremos ir em frente e mudar de volta dentro de index.js
para que possamos selecionar essa largura um sinal de libra obter o texto de exibição e queremos alterar o html interno
igual ao empate, não apenas queremos definir isso igual ao empate, mas também o quero selecioná-lo novamente, então eu vou
em frente e copiar esta linha aqui e definir seu estilo especificamente sua propriedade display de volta igual
a flex, então não vamos mais escondê-lo quando isso for verdade, vamos defini-lo igual para flexionar, ele deve
realmente ser exibido quando o tempo acabar, para tornar isso um pouco mais rápido, vamos em frente e diminuir nosso
cronômetro para cinco, salve nosso código e atualize aqui, estamos diminuindo para baixo e parece
que já estamos mostrando empate bem aqui isso não é exatamente o que queremos, precisamos ter certeza de que esta
instrução if só é acionada se o temporizador for menor que zero, então tecnicamente o que precisamos fazer precisamos ter
certeza de que este texto aqui mostra apenas se o temporizador for realmente igual a zero não para cada iteração
do temporizador diminuído para que possamos seguir em frente e envolver tudo isso em uma instrução if que diz se o temporizador
for realmente igual a zero, queremos chamar o seguinte código para salvar isso e vamos em frente
e testar isso i' na verdade vou seguir em frente e acertar o inimigo bem nela e você verá que diminui
e agora não estamos mais mostrando esse texto porque as barras de saúde não são mais iguais
, essa condicional aqui não é verdadeira, então não vamos disparar essas duas linhas de código, então
agora precisamos para ter em conta o que acontece se a saúde de um jogador for maior que a saúde do inimigo
podemos escrever um else se logo depois disso que diga se a saúde do nosso jogador é maior que a saúde do nosso inimigo dot
bem queremos mostrar algum texto diferente que vamos para selecionar essas duas linhas aqui
e colá-las abaixo e em vez de dizer que nosso html interno deve ser igual ao empate,
vamos dizer que o jogador um ganha agora este código aqui é duplicado do código acima quando estamos
configurando style display igual a flex se virmos algum código duplicado como este, o que podemos fazer é
simplesmente tirá-lo do local onde está sendo usado, vou recortar aqui e
colá-lo em um local onde está apenas vai ser chamado uma vez, então quando o temporizador é igual a zero i sei
que quero mostrar nosso texto de exibição, mas com base em se a saúde do nosso jogador é igual à saúde do inimigo
ou maior ou menor do que isso, é quando vamos alterar o texto que está realmente dentro deste div
para que também possamos excluir esse outro seletor de consulta com exibição de estilo igual flex aqui e agora
nós salvamos duas linhas de código tornando-o igual a um, então vamos testar o que acontece quando o
jogador 1 vencer, salvaremos essa atualização e agora precisamos acertar nosso inimigo e inimigos a saúde diminui
e agora estamos exibindo o texto que o jogador 1 vence simplesmente porque o jogador 1 tem mais saúde
do que nosso inimigo agora queremos fazer a mesma coisa para quando nosso inimigo vencer, então simplesmente adicionaremos
outra instrução elsa aqui e digamos quando a ajuda do nosso inimigo é maior do que a saúde do nosso jogador
aqui e é quando o jogador 2 vence, então salve e atualize e então eu vou acertar nosso jogador
com nosso inimigo agora nosso inimigo vai ganhar agora o jogador 2 ganha tão grande que é perfeito, então estamos
procurando estar em goo d forma com o cronômetro, mas o que acontece se nosso inimigo ou nosso jogador
diminuir a saúde de um dos outros a zero antes que o cronômetro se esgote, precisamos
escrever algum código para isso para dizer o que acontece, então vamos em frente e aumentar nosso cronômetro
para algo mais padrão como 60 segundos dessa forma, isso não chama antes de estarmos prontos
, então atualizamos com isso e você verá que isso começa a diminuir e agora temos 60 segundos
para encerrar nosso jogo com base na saúde em vez de o tempo acabar, então quando formos em frente e colocarmos nosso inimigo
em zero, queremos seguir em frente e exibir o mesmo texto que estávamos mostrando antes
quando nosso cronômetro acabou, para monitorar isso que vamos dentro do nosso loop de animação e
isso vai abaixo de onde estamos detectando uma colisão para nosso jogador e nosso inimigo
porque sabemos que esses são dois lugares em que estamos diminuindo a saúde de nosso inimigo e de nossos jogadores,
então abaixo deste segundo se declaração vamos seguir em frente e e nd o jogo baseado na saúde e
queremos dizer se a saúde do ponto inimigo for menor ou igual a zero ou se o ponto do jogador for menor
ou igual a zero, então sabemos que nosso jogo deve terminar e devemos mostrar alguma exibição certa
text aqui para determinar qual texto devemos exibir basicamente o que podemos fazer é
ir em frente e alterar essa condicional em sua própria função e depois chamar essa função abaixo,
então vamos em frente e refatorar isso um pouco, vamos para adicionar uma nova função acima de diminuir
o temporizador que diz determinar o vencedor isso vai levar bem um argumento vai ser um objeto
com duas propriedades dentro dele quais são as duas propriedades bem vai ser o seu jogador
e também o nosso inimigo e agora que temos esses dois no lugar, podemos ir em frente e chamar este código
aqui, então vou cortá-lo deste local, basta colá-lo em determinar o vencedor e agora podemos
seguir em frente e usar determinar o vencedor naquele local exato onde acabamos de cortar aquele bacalhau e por isso
aqui vamos chamar determinar o vencedor sabemos que isso leva um argumento que será um objeto
com um jogador e uma propriedade inimiga então vou adicionar jogador aqui um inimigo aqui e
agora com base em se a saúde do nosso jogador é ou não igual à saúde do nosso inimigo, vamos mostrar empate
ou o jogador 1 ou o jogador 2 vence é apenas uma pequena abstração para tornar nossa vida um pouco
mais fácil quando queremos fazer exatamente a mesma coisa abaixo dentro do nosso loop de animação, portanto, se a
saúde do inimigo for menor que zero ou a saúde do jogador for menor que zero, saberemos que devemos chamar
determine o vencedor aqui, isso também leva um argumento que será um objeto com um jogador
e um inimigo e baseado em tudo isso, vamos em frente e exibir o texto que estávamos
mostrando antes com nosso cronômetro agora, antes de prosseguirmos e salvarmos e atualizarmos, vamos
voltar para determinar o vencedor e só queremos ter certeza de que também colocamos este código dentro
dele aqui que define nosso estilo é exibido igual a flex, caso contrário, não será exibido,
então, dentro de determinar o vencedor, vamos colar isso e agora, quando salvarmos e
atualizarmos aqui, estaremos no jogador dois eventualmente quando os derrubarmos para zero você
vai ver agora o jogador um vence mostramos o texto correto então vamos em frente e espancar
o jogador um agora reduza-o a zero agora sabemos que o jogador dois vence antes que o tempo se esgote
ainda temos nosso tempo funcionalidade em vigor, embora eu suponha que quando o jogador um ou o
jogador dois vencer, precisamos ter certeza de que paramos esse cronômetro juntos, então vamos fazer isso em seguida
, para parar um cronômetro, precisamos obter o ID do cronômetro que é retornado do tempo limite definido. vamos
criar um lut logo abaixo do timer chamado timer id e na verdade não precisamos atribuir isso a
nada por padrão, mas quando estamos chamando set timeout vamos em frente e dizer que o timer
id é igual para o valor de retorno de set timeout, então para cada vez que chamamos set timeout isso
vai retornar um número que vai ser 0 1 2 3. vai continuar aumentando com o
tempo que vai ser o ID do timer e já que associamos isso com este let do ID do timer podemos
usar isso para cancelar nosso loop completamente para ter certeza de que não estamos mais chamando o temporizador diminuído
, então, dentro de determinar o vencedor, vamos adicionar um argumento adicional que será o ID do temporizador
e, em seguida, como a primeira coisa aqui, vamos chamar um função chamada cancel time out
e vai pegar o ID do timer pelo qual passamos, então apenas nos certificamos de que estamos passando
isso dentro de determinar o vencedor, aqui vamos passar pelo ID do timer e isso
impedirá que isso seja chamado quando nosso cronômetro se esgota, mas precisamos fazer a mesma coisa
abaixo dentro de nosso loop de animação, então, quando formos em frente e determinar um vencedor aqui, também
passaremos pelo ID do cronômetro, então iremos em frente e salvar e, em seguida, atualize aqui e, em seguida,
esteja no playe r dois reduza-os a zero e não parece que está parando, então vamos em frente
e sempre que isso acontecer, você sempre quer ir em frente e clicar com o botão direito do mouse em inspecionar o elemento e ver
o que está acontecendo no console parece que o tempo limite de cancelamento não está definido é um erro estúpido da minha
parte vamos em frente e descobrir onde estamos a chamar counts timeout vai estar dentro de determinar
o vencedor não é realmente cancelado o timeout não sei porque é que esta primeira coisa que me vem à mente
mas na verdade está a acontecer para ser claro o tempo limite, em vez disso, apenas um pouco de diferença de sintaxe
, então salvamos que tentamos novamente aqui, saia do console e, em seguida, suba no jogador dois mais uma
vez, você verá que para completamente porque chamamos de clear timeout corretamente também
mostramos as vitórias do jogador 1, o que é ótimo, podemos testar exatamente a mesma coisa para o jogador 2 quando eles vencem
, veremos que para completamente e ainda exibimos o
texto correto tão perfeito e acho que com isso nós pode continuar r para fazer e marcar cronômetros de jogo e
overs de jogo acabamos de criar a funcionalidade básica que precisávamos para
configurar um jogo de luta básico, então agora vamos seguir em frente e passar para sprites e animação, então vamos estar
inserindo imagens em nossa tela e também animações para nossos personagens nosso plano de fundo
e um pouco de nossa interface do usuário, então vamos em frente e começar com nosso sprite de plano de fundo
o que é um sprite de plano de fundo bem, será simplesmente uma imagem colocamos no fundo assim,
embora não seja assim que nosso jogo se parece atualmente, ele realmente se parece com isso com apenas um
fundo preto, então queremos ir em frente e colocar essa imagem em nosso jogo, como faríamos para obter
essa imagem no primeiro lugar bem no itch.io, este é um site especificamente para ativos de jogos
e muitos desses ativos são fornecidos gratuitamente por autores realmente talentosos, como brew love
, aqui eu fui para itch.io e entrei no carvalho pacote de ativos de ambiente de madeira, então isso é
totalmente gratuito para usar em projetos pessoais e comerciais se você quiser ir em frente e baixá-
lo você mesmo pode ir em frente e clicar em baixar agora e eu realmente recomendo deixar uma doação para
o autor porque eles definitivamente se esforçaram muito para criar esta obra de arte mas se você
quiser apenas baixar isso de graça, você pode clicar aqui mesmo, ele o levará aos downloads
, basta clicar em download e ele seguirá em frente e iniciará seu download, então eu já baixei
isso e todos os ativos que eu quero use em nosso jogo, na verdade, mudou-se para uma pasta dentro do finder
, ela será chamada de ativos de jogos de luta, então você vê que temos uma pasta para um personagem chamado
kenji uma pasta para um personagem chamado samurai mac e depois um plano de fundo e depois uma loja, então isso é
estará disponível para você no link do google drive na descrição do vídeo,
mas a principal coisa que queremos focar agora será background.png
, então você verá que eu tirei esta imagem do as set pack e eu o redimensionei para 1024x576 então ele
vai em frente e se encaixa perfeitamente na nossa tela ele vai cobrir todo o fundo preto
se quisermos ir em frente e usar isso em nosso jogo o que vamos fazer é nós vou simplesmente
selecionar todos os ativos dentro desta pasta vou selecionar shop hold shift e depois
vou clicar em kenji para ter certeza de que seleciono tudo e depois vou clicar no comando c para
copiar estes serão ctrl c se você for um usuário do Windows, mas depois de copiá-los
, você pode voltar para o seu diretório da web ou onde quer que você armazene este projeto
. vou criar uma nova pasta
chamada img para imagens e depois vou colá-la pressionando o comando v control v se você for
um usuário do Windows, então vá em frente e cole-as em nosso projeto e, em seguida, se olhamos
para o texto sublime você vai ver que temos uma pasta de imagens com todas essas imagens disponíveis
para nós th agora podemos usar dentro do nosso código, então queremos ir em frente e fazer uso de background.png
aqui como poderíamos inserir isso em nosso jogo bem eu fiz a classe sprite por uma
razão que eu quero usar esta classe não apenas para nossos lutadores, mas também para nossas imagens de fundo nossa
imagem de loja seja qual for, mas ao mesmo tempo esta classe atualmente tem muitas funcionalidades
relacionadas a um lutador ao invés de apenas renderizar uma imagem simples em nossa tela como resultado
, meio que faz sentido refatorar esta classe em uma cláusula separada vamos manter isso como é
chamado sprite mas também vamos criar uma classe chamada lutador que vai se assemelhar ao
nosso jogador e jogador 2. então o que queremos fazer aqui é basicamente duplicar nossa classe
até o final eu vou copiar isso e colar e então vou chamar essa classe de
lutador então essa será realmente a classe que usaremos para o jogador um e jogador dois,
mas essa classe aqui de sprite nós somos e vamos em frente e refatorar isso então isso
é apenas responsável por renderizar uma imagem então vamos em frente e olhamos para esta classe de sprite o
que precisamos e o que não precisamos bem sabemos que um sprite não terá nenhum método de ataque
associado a ele para que possamos ir em frente e excluir isso dentro de atualização bem o que um sprite precisa
fazer ao longo do tempo bem, ele precisará atualizar seus quadros se quisermos adicionar algum tipo de animação,
mas muito disso é relacionado ao ataque e gravidade do nosso jogador, não queremos nada disso
, apenas queremos ir em frente e ter certeza de que estamos desenhando isso e usaremos update um
pouco mais tarde para atualizar as variáveis ​​associadas a cada dos nossos sprites se rolarmos para cima temos
um desenho aqui agora como é um sprite bem eles não serão retângulos
porque na verdade estamos desenhando imagens em nossa tela não precisamos de nada relacionado a
desenhar retângulos vamos apenas deletar tudo isso vamos em frente e edite
isso nesta lição individual e então se eu rolar para cima o que mais não precisamos para um sprite
podemos nos livrar da saúde porque os sprites não terão saúde que estará relacionada
ao nosso lutador seu ataque também está relacionado para lutar não precisamos de uma cor porque vamos
usar imagens não precisamos de uma caixa de ataque podemos nos livrar disso não precisamos de uma última chave
mas precisamos de uma largura e uma altura associadas nossa imagem pelo menos mais tarde, então vamos
deixar isso agora e também não precisamos de uma velocidade porque eles não estarão se movendo
pela tela pelo menos ainda não, na maioria das vezes será apenas nosso lutador caído aqui, então, com tudo
isso no lugar, do que precisamos nos livrar do nosso argumento de construtor, nos livramos da
cor da velocidade e também do deslocamento, então temos apenas uma classe sprite muito básica no momento, então adicionamos
essa classe e agora temos uma classe de lutador e está meio que confundindo nosso código um pouco dentro do
index.js nós ha temos nosso design aqui, mas também temos código relacionado à implementação de nosso jogo
, então faz sentido neste momento se você estiver tendo problemas para encontrar certas coisas em seu
arquivo para refatorar isso em um arquivo separado e é exatamente isso que estamos vou fazer
para fins de manutenção de código, então o que eu quero fazer é ir em frente e ter certeza de que nossas
classes estão em seu próprio arquivo de classe separado para fazer isso, eu vou arquivar um
novo arquivo e então eu vou apenas clicar no comando s para salvar isso imediatamente
e, em seguida, quero salvar isso como classes.js, mas não vou salvar isso dentro de nossa raiz
, na verdade, vou em frente e crie uma pasta chamada js all dos nossos novos arquivos js vão para
dentro daqui então eu vou salvar isso e agora temos uma pasta de js com classes.js dentro
dela tão bom que agora podemos ir em frente e selecionar nossas classes ir com classe de sprite todo o caminho
para o lutador de classe eu vou cortar isso com o comando x e depois em classes.js eu sou colar isso
com o comando vi também pode clicar em salvar salvar em index.js, mas isso não
funcionará se salvarmos e atualizarmos tudo porque precisamos ter certeza de que estamos puxando classes.js para
index.html para que esse arquivo seja lido, queremos ter certeza de que puxemos isso antes de
index.js e queremos referenciar classes.js, então, para fazer isso, precisamos entrar na
pasta js e depois referenciar classes. js, então agora nossas classes dentro deste arquivo
estarão disponíveis para nós dentro do index.js, então salvamos isso, queremos voltar ao index.js e aqui você verá
que estamos criando nosso player e nosso inimigo de nossa classe de sprite sabemos que criamos
dentro de classes.js uma nova classe de lutador que é o que queremos referenciar para nosso jogador e nossos
inimigos, então aqui vamos mudar de novo sprite para novo lutador para nosso jogador e nosso inimigo
se salvamos tudo index.js index.html e classes.js de acordo se tudo correu bem e
atualizamos aqui bem, temos nosso jogador e nosso inimigo no lugar e tudo ainda funciona
como esperado, então agora que isso está um pouco limpo, definitivamente torna um pouco mais fácil
focar no que precisamos focar, então dentro de classes.js queremos para focar nesta classe de
sprite então sprite como eu disse vai ser apenas uma imagem e pode ser animada ao longo do tempo
mas vamos fazer o mais básico que vai ser apenas uma imagem estática para começar
assim para renderizar uma imagem na tela o que vamos fazer é sempre que criarmos
um novo sprite vamos passar por uma fonte de imagem então src e vamos usar essa
fonte de imagem para criar uma nova imagem sempre que criamos uma nova instância de sprite então vamos criar
uma propriedade de imagem chamada this.image e para criar uma imagem dentro de javascript podemos usar um
objeto de api nativo chamado new image então isso basicamente cria uma imagem html mas dentro de um javascript
propriedade como esta imagem de ponto e uma vez que temos isso disponível para nós, Precisamos definir
esta imagem de ponto fonte de ponto igual à fonte da imagem que queremos realmente mostrar, então
vamos em frente e armazenar a imagem dentro da propriedade desta imagem de ponto, mas se quisermos
seguir em frente e desenhá-la precisamos usar uma função de tela dentro do nosso método draw aqui
, então a função de tela que vamos usar será c dot draw image assim, então o primeiro
argumento aqui será um elemento de imagem html e isso já está criado para nós logo acima
com a nova imagem armazenada nesta imagem de ponto, então isso vai aqui como o primeiro argumento
esta imagem de ponto e, em seguida, para o nosso segundo argumento, queremos ir em frente e adicionar uma coordenada x,
felizmente, já configuramos isso quando estamos criando nossa classe de caça e duplicando isso
para que possamos obter a coordenada x com esta posição de ponto ponto x e então precisamos de uma coordenada
y que obtemos com esta posição de ponto ponto y isso é tudo o que precisamos fazer para criar uma imagem e desenhe
na tela usando canvas para que possamos salve isso agora dentro do index.js precisamos fazer a
implementação real para esta classe para que possamos fazer isso acima de nossos players abaixo de nossos players não
importa muito vou fazer isso acima deles vou criar um novo const chamado background eu
vou definir a sequela para um novo sprite então isso vai ter um argumento com algumas propriedades
dentro dele quais propriedades isso leva bem vai tomar uma posição então vamos colocar em
posição para uma posição de propriedade será igual a um objeto com uma propriedade x e ay então
qual é a coordenada x deste plano de fundo bem, eu quero começar no canto superior esquerdo da
nossa tela para que seja 0 para x e também 0 para y agora o que mais uma classe sprite faz
bem, podemos sempre olhar dentro de classes.js vemos que ela toma uma posição e uma fonte de imagem,
então agora só precisamos adicionar um atributo de fonte de imagem e isso é apenas vai referenciar
o local do arquivo em que queremos colocar na tela, então é goi ng para ser uma string e
de index.js como obtemos background.png aqui bem, precisamos entrar em img e esse
ponto barra aqui significa que estamos começando dentro do diretório de index.js, então vamos de
nesse diretório vamos dentro da imagem e então precisamos referenciar background.png então background.png
então queremos ter certeza de salvar isso e agora temos um sprite de fundo no qual devemos ser
capazes de renderizar na tela com draw ou update update agora faz exatamente a mesma
coisa que draw, mas tudo bem porque vamos usar update mais tarde, então dentro do index.js podemos
rolar para baixo até nosso loop de animação aqui e vamos colocar isso como a primeira
coisa antes da atualização do jogador e antes da atualização do inimigo, porque queremos que isso seja desenhado no plano de fundo
e não em cima deles, vamos referenciar nosso plano de fundo e, em seguida, vamos chamar
atualização em cima dele, o que, em troca, é vai chamar draw e o método draw image,
então salvamos isso de volta aqui e atualize, você verá que agora temos um plano de fundo
tão bom que é como você deseja renderizar um sprite ou pelo menos um sprite estático em
sua tela, então não há melhor momento do que agora para continuar refatorando nosso código e torná-lo o mais limpo
possível, como eu continuaria a refatorar isso enquanto rolava para baixo, notei que havia
muito código no meio que não estava realmente relacionado à implementação real do nosso jogo, mas
mais ainda, apenas tornando nosso código mais limpo especificamente esses funções aqui, como o temporizador diminuído,
determina a colisão retangular do vencedor, essas são mais funções de utilidade do que coisas que estão
diretamente relacionadas ao nosso jogo, como resultado, acho que faz sentido colocá-las em seus próprios
arquivos separados, então vou pegar todas essas funções e seus luts e const associados
e então eu vou salvá-lo vou manter o temporizador reduzido aqui porque isso faz parte da
implementação ajuda a fazer nosso jogo realmente funcionar, mas uma vez e eu corto essas funções,
quero ir em frente e criar um novo arquivo, então vou para o arquivo novo arquivo e vou
colá-las, então, depois de colar, posso clicar no comando s e, em seguida, vou salvá-los
dentro de nossa pasta js e vou chamar isso de utils.js para utilitários, então vou salvar isso
e, uma vez que salve isso, só preciso ter certeza de colocá-lo dentro de index. html para que todas essas
funções que criamos ainda estejam disponíveis para nós e sabemos que isso deve vir depois de js
classes.js, mas antes de index.js porque elas são realmente usadas apenas dentro de index.js em primeiro
lugar, não tanto dentro classes e na verdade vou colocar isso antes
de ambos porque, embora utils.js tenha apenas funções que são usadas dentro de index.js agora
, talvez as usemos mais tarde para classes.js, mas mesmo assim não é necessário no momento
, estamos apenas nos preparando para o futuro aqui, então só queremos ter certeza de que salvamos todos
esses arquivos e d, em seguida, atualize tudo ainda funciona e funciona da mesma forma, mas nosso
código é muito mais limpo dentro do index.js, com certeza, então temos nosso sprite de fundo no lugar, mas
o que mais queremos fazer aqui? aqui tem um terreno para nós
e nosso jogador e nosso inimigo estão atualmente no fundo de nossa tela vamos em frente e fazê-lo
ficar neste terreno real como iríamos em frente e fazer isso bem nós vamos em frente e fingimos
essencialmente, vamos apenas dizer que queremos que nosso jogador e nosso inimigo caiam desde
que estejam acima de 200 pixels da parte inferior de nossa tela, em vez da
parte inferior da tela diretamente, então queremos entrar em classes.js especificamente nossa classe de lutadores
porque sabemos aqui dentro da atualização que é onde nossos lutadores são afetados pela gravidade
, estamos dizendo que queremos que nossos lutadores continuem caindo desde que sua posição mais a velocidade
sejam maiores que a altura da nossa tela aqui, então isso aqui é determinado g quando
nosso lutador deve parar de se mover quando ele deve atingir o solo, será esse valor
aqui que determina isso, então estamos dizendo agora que eles devem atingir o solo quando atingirem um
valor de altura da tela que está bem aqui no muito inferior, mas e se formos em frente e subtrair
algo como 200 da nossa altura da tela, talvez possamos ir em frente e fazê-los parar
aqui, então vamos em frente e fazemos isso a partir deste local dentro de classes.js, salvamos canvas.height menos 200
e atualize aqui, você verá que são 200 pixels da parte inferior da tela
, então obviamente isso está muito alto, vamos em frente e diminua isso, faça algo como 100
, vamos apenas observar isso até obtermos isso perfeito e isso é definitivamente muito
mais próximo, mas se você olhar bem de perto, poderá ver que ainda há um pouco de espaço
ali, então podemos ir em frente e nos livrar disso subtraindo um valor menor como algo como 97
, vamos salvar isso e atualizar e eu acho que tha t está tocando diretamente no chão talvez mais um pixel
96 e sim eu acho que parece muito bom nós definitivamente estamos no chão ali parece
que estamos realmente viajando por esse fundo que criamos o que é muito legal na minha
opinião então isso vai em frente e nos permite verificar o sprite de fundo agora podemos ir em frente
e fazer o sprite da loja com animação, então o que isso significa bem se olharmos em nosso localizador
especificamente em nossa pasta de imagens, você verá que nós tenho um shop.png e isto é o que
parece se eu for em frente e trouxer isto você vai ver que ele contém várias instâncias
basicamente da mesma imagem a única diferença será se você olhar para as chaminés
você notará que é diferente para cada quadro que passamos e se formos em frente
e percorrer esses quadros continuamente, ele emitirá o efeito de animação que é
como o vídeo em geral funciona na verdade à medida que passamos uma monte de quadros e
como nós sobrepomos esses quadros uns sobre os outros nós criamos algum tipo de efeito de movimento
então vamos usar esta loja para criar uma animação e vamos colocar esta loja
aqui com esta área vazia i usei o pacote de recursos para criar este plano de fundo e
deixei este espaço aberto especificamente para que pudéssemos colocar a loja aqui e criar algum tipo
de animação de plano de fundo legal, então a primeira coisa que vamos querer fazer é simplesmente colocar a
loja aqui e vamos mostrar todos os quadros da imagem e então vamos em
frente e animá-la de lá, então vamos em frente e colocar nossa loja bem aqui
para obter nosso shop.png renderizado em nosso jogo podemos entrar no index.js e queremos
descobrir onde criamos nosso plano de fundo essencialmente vamos criar um novo sprite e o
que podemos fazer é simplesmente copiar esse plano de fundo constante com um novo sprite colá-lo abaixo,
diga isso será a sequência da nossa loja para um novo sprite que vamos para começar em uma posição
de zero zero, vamos apenas fazer isso para estrelar para renderizá-lo na tela e, em seguida, nossa
fonte de imagem será image shop.png, então agora que criamos isso, queremos ir para baixo
e onde queremos renderizar isso em relação a todo o resto, bem, faz sentido renderizar isso
após o plano de fundo, mas antes do jogador e dos inimigos, estamos apenas renderizando-os em camadas
umas sobre as outras, então vamos fazer referência shop dot update salve isso e então podemos voltar
ao nosso jogo e atualizar você notará que é onde nossa loja está na tela, então agora precisamos
fazer duas coisas: a loja é muito pequena no momento, então o que queremos fazer é dimensioná-la para que
caiba nesta grande área aqui e uma vez dimensionada, só queremos ter certeza de que a colocamos
no local exato, então como podemos ir em frente e dimensionar essa imagem bem, precisamos nos concentrar em
nossa classe sprite dentro de classes.js, então se formos em frente e adicionarmos alguns argumentos em ac dot draw im idade
vamos adicionar um quarto argumento aqui esta será a largura da imagem
então se eu for em frente e fizer algo como 300 eu vou adicionar um quinto argumento esta
será a altura da imagem, vou fazer algo como, digamos, 200. se eu
salvar isso aqui e atualizar, você notará que nossa imagem de fundo e nossa loja
aqui mudam para essa dimensão exata. não queremos adicionar um valor estático em nossa
classe sprite porque sabemos que nosso plano de fundo não terá as mesmas dimensões que nossa loja, queremos
ter certeza de que isso aqui é determinado pela imagem que estamos usando fonte de imagem
e este objeto de imagem html, para fazer isso, em vez de referenciar 300 aqui, vamos
referenciar esta imagem de ponto largura de ponto a alguém certo e, em seguida, para nossa altura, vamos
referenciar this.image dot height, então vamos adiante e salve isso e atualize e você verá
que cuida das coisas que eu n em relação à largura, mas agora que temos essa largura e altura listadas
aqui para a imagem c.draw, podemos ir em frente e multiplicar isso por algum valor para escalá-lo, então
dentro de nossa classe sprite vamos adicionar um novo propriedade chamada esta escala de ponto e isso vai
variar com base no sprite que estamos usando atualmente, então queremos ter certeza de que estamos passando
isso como um construtor, então, dentro de nossos argumentos de construtor, vou adicionar escala
e digamos que, por padrão, isso deve ser sempre igual a um, mas temos a chance de alterar isso mais tarde
, se quisermos, então agora que temos essa escala em vigor, queremos ir em frente e multiplicar
this.image.width por este ponto dimensionar para aumentar uma imagem a mesma coisa com a altura basta multiplicá-la por
essa escala para que isso não faça nada por padrão se atualizarmos tudo com a mesma aparência
, mas nos dá a capacidade de aumentar esse número aqui para algo como dois
e vai aumentar o tamanho das nossas imagens como você pode ver b mas queremos apenas aumentar o
tamanho da nossa loja, então queremos ter certeza de que a escala é sempre uma por padrão e, em index.js,
podemos encontrar onde criamos nossa loja, que será bem aqui, podemos dizer que nossa
loja vai ter uma escala separada do nosso plano de fundo atribuindo uma propriedade de escala
igual a algo como 1,5 vamos ver como é vamos salvar isso e atualizá-lo
agora você vê que nossa loja é um pouco maior talvez possamos torná-lo ainda maior vamos até 2
para nossa loja salve isso e depois atualize e você verá que parece muito bom, mas acho
que podemos torná-lo ainda maior, vamos até 2,75 salve isso e atualize para que você veja que isso definitivamente
perde um pouco de clareza mas acho que para o nosso jogo está tudo bem porque ele definitivamente tem um estilo de pixel art
mostrando que alguma pixelização está definitivamente bem, pelo menos no meu caso, então vamos seguir em frente e
dizer que este será o tamanho da nossa loja agora que queremos para ter certeza de que um quadro da loja
se encaixa bem aqui então vamos voltar para nossa loja ou pelo menos onde estamos criando
e onde queremos posicionar isso bem vamos começar a adivinhar que vamos colocar
300 para x salvar e atualizar movendo um pouco mais perto talvez queiramos dobrar isso para 600
salvar e atualizar que parece estar em um bom lugar vou seguir em frente e manter isso
por enquanto vamos em frente e focar no eixo y vamos colocar 300 para y então 300 pixels do topo
que parece ser muito, obviamente, então vamos para 100 chegando um pouco mais perto
, vamos em frente e adicione 20 a 100, então 120 e agora vamos começar a adicionar números menores, como cinco
, parece que acabamos de preciso de mais dois três pixels, então vou colocar 128 bem ali
e isso parece estar em um bom lugar para nossa loja, então agora que está relativamente no
lugar certo, queremos começar a animar isso e animar sprites pode ser um pouco complicado no começo,
mas uma vez que você tenha os conceitos básicos, será muito fácil, basicamente, conseguir isso animado o
que vamos fazer é ter toda a nossa imagem renderizada atualmente e tudo bem
, vamos manter isso renderizado, mas vamos fazer é cortar isso para
mostrar apenas um quadro de cada vez, então, quando recortamos, mostramos apenas esta primeira imagem e,
com o tempo, vamos animar isso, para que nosso local de corte comece a se mover
por essas imagens. vamos dizer mude isso em um quadro para a direita e depois renderize
esta versão e, eventualmente, vamos mudar para outro e depois outro
e depois outro até chegarmos ao final e vamos volte para o início
e ao longo do tempo, enquanto fazemos isso, vamos criar a ilusão como se a loja estivesse realmente animando
e quaisquer outros sprites que possamos usar em nosso jogo, mas essa é basicamente a essência que
queremos seguir em frente e recortar toda esta imagem até este pequeno quadrado aqui e então vamos
avançar um e empurre este corte por toda a coisa para criar a ilusão de animação
, então para criar este corte, vamos para nossa classe sprite, vamos nos concentrar na
imagem do c.draw, então queremos ir em frente e cortar isso enquanto precisamos mudar um pouco os argumentos
, é um pouco confuso com a tela, infelizmente, mas não é nada com o qual não possamos
lidar, então o local do corte será realmente esses quatro primeiros argumentos e
esses quatro argumentos que estão aqui atualmente são será empurrado para baixo por quatro argumentos
para que eles ainda permaneçam os mesmos, esta será a posição x e y da nossa imagem e também a
largura e a altura da imagem geral, mas se quisermos ir em frente e cortar isso, precisamos adicione
mais quatro argumentos antes desses eu não sei por que o canvas faz isso dessa maneira, mas o segundo
argumento agora será o local do corte, então onde queremos que essa marca de corte comece
queremos que comece em zero zero da nossa imagem porque isso vai estar certo sobre aqui e
então vamos determinar sua largura e altura para cobrir apenas uma dessas imagens da loja, então x
será zero y será zero, começará nossa marca de corte no canto superior esquerdo
o que se a nossa largura vai ficar bem podemos basear isto em this.image.width queremos ir em
frente e cole-o aqui sabemos que a nossa altura de corte deve ser esta
altura do ponto da imagem certifique-se de que adicionamos uma vírgula para o final disso, mas é assim que nosso código
de corte ficará agora quando estivermos cortando nossa imagem por sua largura e altura da imagem a
largura total da nossa imagem agora é essa coisa toda, então não queremos para cortá-la por tudo, queremos
apenas cortá-la por esta pequena seção aqui, então se obtivermos toda a largura da imagem que
será daqui até aqui e a dividirmos pela quantidade de quadros dentro da imagem, 1 2 3 4
5 6 vamos obter a largura exata de apenas um desses quadros, então vamos em frente e fazer isso
em sublime text vamos dividir nossa largura de imagem por 6 especificamente para nossa loja salve isso
e atualize e isso iniciará o corte mas você verá que tudo está completamente
esticado o que obviamente não é o que queremos por que está sendo esticado bem, se olharmos
para o nosso código aqui, esta linha aqui determinará a largura real da nossa imagem
, então estamos pegando isso obtendo this.image.width, estamos dizendo que a largura total da nossa imagem
ainda deve seja o tamanho disto, mesmo que tenhamos apenas cortado, então queremos ter certeza de que
isso também depende da quantidade de quadros na imagem real, então vou dividir
isso por seis também vou ter certeza que fazemos isso primeiro antes de multiplicá-lo por escala
e, se salvarmos e atualizarmos, você verá que agora nossa loja parece perfeita,
cortada perfeitamente, então você deseja ir em frente e cortar uma imagem necessária para garantir que você defina a
localização do recorte a largura do recorte e a altura do recorte também vai depender da quantidade
de fotogramas dentro da imagem real e então aqui em baixo você quer dizer bem qual largura e altura
a imagem deveria estar realmente bem vai ser a largura da imagem dividida pela quantidade de fotogramas
vezes a escala então é assim que você vai fazer, mas você notará que isso afeta
nossa imagem de fundo também, agora nossa imagem de fundo é 1 6 do tamanho de sua largura total, então se quisermos
que esses dois funcionem bem juntos, o que precisamos fazeréeditar isto para que os seis
aqui a quantidade de fotogramas dentro da nossa imagem seja variável em vez de ser sempre seis
por isso o que vou fazerécriar uma nova propriedade para os nossos sprites isto vai ser
chamado frames max, então qual é a quantidade máxima de frames que temos dentro de nossa imagem e isso
será variável, então queremos ter certeza de que o passamos como um argumento de construtor,
então aqui vou dizer frames max pode ser passado e, por padrão, isso
será igual a um que significa apenas que temos uma imagem como nossa imagem de fundo
para este sprite, então o máximo deste quadro de parada será igual ao máximo de quadros e agora quando formos em frente
e dividirmos por seis, vamos dividir isso por esse ponto frames max em ambos os locais
, então queremos ir em frente e salvar isso e, ao atualizar, você verá que nossa
imagem de fundo está de volta ao normal, mas nossa loja não é tão irritante, mas isso é muito fácil de corrigir agora
porque configuramos isso corretamente agora podemos passar por um novo max de quadros especificamente para nossa loja,
então em index.js queremos encontrar nossa loja, vamos definir o máximo de quadros igual a bem, qual é
a quantidade máxima de quadros em nossa loja, dissemos eram seis, então salvamos isso e atualizamos
agora tudo está organizado corretamente, estamos nos preparando para o sucesso quando queremos ir em frente
e animar a loja, então se formos em frente e compararmos isso com nossa planilha real no localizador
, estamos atualmente nesta posição aqui pegamos nossa imagem grande sh devido a coisa toda
e nós o dimensionamos até este local, este é o passo em que estamos atualmente; o próximo passo
será mover o quadrado por toda a nossa folha de sprite, então, para fazer isso, queremos
voltar para closets.js e basicamente o que queremos fazer é mover a coordenada x de nossa
marca de corte para que esta seja a nossa coordenada x se eu fosse em frente e mudasse isso para algo como 200
e atualizasse você vai veja, basicamente movemos essa marca de corte para a direita, mas queremos ir em
frente e mover isso perfeitamente para dar a ilusão como se a loja estivesse realmente animando
em vez de apenas deslocá-la para o lado lentamente, então quantos pixels teríamos que mover esta marca de corte
para chegar ao local exato aqui, podemos fazer um pouco de matemática dentro do
nosso código para obter esse resultado exato, então vamos em frente e obter essa largura do ponto da imagem do ponto
e, se dividirmos que por nossos frames max vamos obter a quantidade exata de largura que
precisamos mova-se por então dividiremos isso por este ponto frames max e se salvarmos isso e atualizarmos você
verá que nossa loja parece a mesma, mas eu prometo a você que a chaminé é um pouco diferente
, apenas movemos a colheita por um quadro e está no local perfeito para onde estamos
mostrando apenas uma parte da imagem mais uma vez nossa imagem de fundo se foi, precisamos levar isso em
consideração com base neste novo código que adicionamos para uma marca de corte, então o motivo nosso plano de fundo não está
aparecendo agora porque nossa imagem de plano de fundo tem uma largura de 10 24. e se dividirmos isso por um
poço, isso será igual a 10 24. então estamos dizendo que queremos mover toda a nossa marca de corte para nossa
imagem de fundo à direita por 10 24 pixels obviamente não há nada lá para nossa primeira
imagem porque bem, há apenas um quadro específico para essa imagem de fundo, então tudo o que precisamos
fazer aqui para garantir que isso funcione tanto para nossa imagem de fundo quanto para nossa loja real
é que precisamos multiplicar isso por um quadro atual então vou adicionar aqui esta
corrente de quadro de pontos e quero ter certeza de que essas duas equações aqui
são executadas antes de prosseguirmos e multiplicar isso pela corrente de quadro e então precisamos
criar a corrente de quadro acima, então aqui eu direi que a corrente de quadros é igual a zero, então eu
só quero ter certeza de que realmente chamo esse quadro de corrente, desculpe por isso, então isso será
igual a zero, o que significa que agora, por padrão, estamos multiplicando essa equação aqui por zero, então
não estamos mais movendo a marca de corte para uma imagem de plano de fundo, vamos salvar e atualizar a
imagem de plano de fundo está de volta, também está de volta ao local original, mas ainda continuamos
nos preparando para o sucesso, estamos fazendo um classe sprite completamente reutilizável para o futuro, então
agora, com o tempo, se aumentarmos esse valor aqui de zero para algo como um e usarmos isso em
nossa classe de loja, estaremos efetivamente movendo nossa marca de corte em um quadro se aumentarmos isso em
dois nós vamos ser movendo-o em dois quadros e podemos continuar até atingirmos o máximo do quadro
e é aí que vamos voltar ao início e mostrar novamente essa animação, mas se
nunca aumentarmos os quadros atuais em primeiro lugar, bem o a imagem será estática, o que é para
imagens como nossa imagem de fundo, então, se formos em frente e nos concentrarmos em nossa loja, diremos apenas que, por padrão,
cada quadro é igual a 200 pixels e esse é o resultado disso bem aqui será
igual a 200, mas se multiplicarmos isso pelos quadros atuais e o padrão for zero, obteremos
zero, então não haverá corte, mas se formos em frente e alterarmos o zero aqui
para um, bem, agora estamos vamos mover esse local de corte em 200, então vamos
continuar movendo isso até que os frames dot current sejam iguais ao frame's max, que será seis ou cinco,
não consigo lembrar qual, mas quando chegar, estamos vai voltar a zero e repetir o processo
para que nossa marca de corte volte bem para zero s o para obter esse efeito, queremos ter certeza de que estamos
aumentando os quadros atuais ao longo do tempo, o que faremos dentro da atualização; portanto, depois de chamarmos o draw
, adicionaremos a esses quadros de pontos atuais um quadro, mas só queremos faça isso desde que
os quadros atuais sejam menores que os quadros max, então aqui escreveremos se este ponto frames atual for menor
que esse ponto frames max, então queremos seguir em frente e chamar o seguinte, mas queremos adicionar uma
instrução else aqui que diz se isso não for verdade, o que queremos fazer, queremos definir isso como
o atual do quadro para que o quadro atual volte a zero e isso repita o processo de animação,
então vamos salvar isso e atualizar e você está indo para ver bem, definitivamente temos algum
tipo de animação maluca acontecendo aqui, então um problema é que nosso plano de fundo está animando por
algum motivo, parece estar piscando entre a imagem de fundo em preto, por que isso está acontecendo
, a corrente do quadro começa em zero para que possamos realmente renderize nossa ima de fundo ge e
defina nossa posição crop x igual a zero, mas agora o máximo de nosso quadro para nossa imagem é um porque
ainda queremos ter certeza de que estamos mostrando essa imagem de fundo em primeiro lugar, então quando formos
executar esta instrução if aqui embaixo a corrente do quadro é igual a zero e então os quadros no máximo é
igual a um, portanto, isso ainda é verdade para a nossa imagem de fundo, o que significa que estamos adicionando um na
corrente do nosso quadro, portanto, estamos empurrando essa marca de corte para fora da nossa imagem de fundo então estamos
mostrando preto e então voltamos para a imagem de fundo que está criando esse
efeito de cintilação, para corrigir isso, apenas nos certifiquemos de que estamos subtraindo um do máximo de quadros aqui, salve e
atualize que corrige a imagem de fundo e agora temos nossa animação pronta para a loja, embora
seja realmente muito rápido, queremos ter certeza de diminuir a velocidade para criar algo que pareça
um pouco mais realista e um pouco menos estranho, então como vamos desacelerar essa animação
bem para se fizer isto vamos em frente e adicionar mais duas propriedades eles vão ser estes
fotogramas de pontos o ponto decorrido e depois estes fotogramas de pontos mantêm-se então esta coisa enquadra o lapso
será quantos fotogramas já decorremos ao longo de toda a nossa animação isso só vai
aumentar ao longo do tempo à medida que o nosso jogo continua a correr e então os nossos fotogramas são para quantos fotogramas
devemos passar antes de alterarmos os fotogramas actuais da animação real, por isso por omissão
isto é igual a 1 com nossa animação atual porque estamos apenas percorrendo cada quadro,
mas se definirmos isso para algo como 10, o que estamos dizendo é para cada 10 quadros, vamos
percorrer essa animação em vez de para cada quadro, então como podemos vamos usar isso aqui
bem, sabemos que os quadros decorridos devem aumentar ao longo do tempo, portanto, nesta atualização de ponto, vamos
adicionar esse quadro de ponto decorrido terá um adicionado a cada iteração de atualização
e agora que isso tem um valor sendo adicionado a ele em todos os momentos, diríamos que se esses quadros de pontos decorridos
módulo esses quadros de pontos são iguais a zero, então queremos seguir em frente e chamar
a seguinte instrução if, então o que isso significa aqui bem basicamente o que isso significa é pegue
os quadros decorridos divida-o pela espera do quadro e se o resto for zero, queremos chamar o
código a seguir que é a diferença entre o operador de módulo e o operador de divisão assim,
mas só queremos ter certeza de obter o restante, então estamos vamos seguir em frente e usar o
operador módulo, então vamos salvar isso e atualizar, você verá apenas adicionando que
em nossa animação é muito mais lento e isso parece muito mais realista em relação a uma animação de loja
e você pode altere sempre a velocidade disto alterando o valor de retenção do seu fotograma aqui quanto
mais baixo for mais rápido irá então se eu mudar os fotogramas mantenha a actualização de cinco segundos poderáver
que parece ainda melhor do que antes mas se quiser fazer isto super sl ow você só aumenta
este número pode ser 50. agora para cada 50 quadros isso vai mas eu acho que parecia bom em
cinco então eu vou continuar e mantê-lo agora mais tarde vamos ter diferentes frame
é válido para diferentes sprites, então vamos mudar isso e adicioná-lo em um construtor
em algum momento, mas não precisamos dele agora, então vamos deixar como está e vamos voltar para fazer
e nós vamos marcar o sprite da loja com animação, então agora vamos em frente e adicionar um sprite
para o nosso jogador, especificamente um chamado samurai mac, então vamos começar com a animação ociosa
para isso e isso significa apenas que estamos vou ficar de pé, mas movendo para cima e para baixo para mostrar que
nosso personagem tem algum movimento, então onde eu consegui esses sprites bem no itch.io eu procuro
alguns sprites de lutador e isso é o que eu consegui encontrar foi marshall hero por lewis mello
ele forneceu este sprite e o outro spray que vou usar neste tutorial de forma totalmente gratuita
, mas se você quiser g o adiante e doe para ele, certifique-se de clicar em download agora e, em seguida, envie-lhe uma
doação, então se você quiser ir em frente e obter os sprites para isso, você pode baixá-lo aqui
ou estará dentro de um link do google drive. veja que já colocamos isso em nosso
projeto dentro da pasta samurai mac então temos vários sprites diferentes associados a
animações relacionadas ao nosso player aqui temos sprites de ataque temos um sprite de morte um sprite falso
um sprite de ídolo jump sprite run sprite pegue o sprite e assim por diante você meio que entende que
essas são todas as animações associadas ao movimento do nosso personagem
, então o que queremos focar é ocioso e se olharmos bem de perto aqui
, você verá que é isso que um a animação ociosa parece que estamos apenas balançando para cima
e para baixo, na verdade é meio difícil de ver, mas você verá quando realmente conseguirmos essa animação
que nosso player estará balançando para cima e para baixo, então vamos em frente e pegue isso em nosso jogo
para que saibamos nós já puxamos o samurai mac para a nossa pasta de imagens anteriormente e agora temos algumas
animações nas quais podemos usar então para começar a usar isso queremos ir em frente e estender nossa
classe sprite porque agora nossa classe fighter não usa nenhuma imagem precisamos ter certeza de que
a classe de lutador é capaz de usar o mesmo código que temos acima para nosso sprite, mas a
classe de lutador será um pouco diferente e é por isso que a temos em primeiro lugar
, para que possamos prosseguir e chamar coisas como ataques e diferentes funções de atualização, então queremos ir em frente
e ter certeza de que nossa cláusula fighter pode usar o método draw associado à nossa classe sprite
, apenas vamos em frente e estendemos a classe fighter adicionando extends bem aqui e então declaramos que estamos
estendendo a classe sprite, então, estendendo isso, vamos pegar todos os métodos dentro do sprite
e colocá-los dentro de nossa classe fighter se eles não estiverem disponíveis se estiverem disponíveis em
nossa classe fighter então nossos métodos serão superados rescreva os mesmos que estão dentro do sprite então
precisamos determinar o que queremos sobrescrito e o que queremos manter diretamente do sprite
bem sabemos que nossos lutadores não serão mais retângulos infelizmente tão tristes como resultado
podemos seguir em frente e se livrar desse método draw aqui e se nos livrarmos disso dentro de nossa
classe de lutador isso significa que já que estamos estendendo o sprite, vamos usar o método draw
acima, mas para usar esse método draw diretamente dentro nossa classe de lutador, precisamos dessas
diferentes propriedades disponíveis para nós, acabamos de adicionar uma tonelada de propriedades em nossa classe de sprite acima
, como scale frames max, precisamos ter certeza de que elas também estão disponíveis em nossa classe de lutador,
então vamos vá em frente e herde-os, mas antes de herdá-los, precisamos ter certeza de
que podemos passá-los dentro de nosso construtor de lutador, então vamos pegar as propriedades
que não estão disponíveis no momento no lutador. urce scale e frames max
vamos em frente e copiá-los vamos adicioná-los ao final do nosso construtor
para lutador apenas cole-os assim que você os adicionar podemos prosseguir e chamar uma função
chamada super o que super faz bem ele simplesmente chama o construtor do pai, então já que
sabemos que o pai do lutador é o sprite, vamos em frente e chamar esse construtor aqui
que define algumas propriedades para nós, como dimensionar quadros de imagem max quadros current você tem a ideia
, mas temos que declarar quais propriedades queremos definir dentro desse construtor pai, então as
listamos dentro de super e para chamar o construtor pai, sabemos que é necessário um argumento que
será um objeto e aqui nós' vamos listar as propriedades que queremos definir dentro do
pai, então quais são as propriedades que queremos definir bem, vamos começar com a imagem que queremos seguir em frente e
definir o que mais queremos definir escala de quadros max e quadros atuais vamos adicionar
aqueles em escala es max e então frames atuais e então o que mais nós também temos frames decorridos e frames mantidos
então vamos adicionar aqueles em dois frames decorridos e então finalmente frames hold então nós sabemos que eles
serão definidos com nosso construtor pai existe alguma coisa senão dentro de nossas propriedades
aqui que podem ser definidas pelo pai, há uma que será posicionada porque sabemos que nosso
sprite pai tem uma propriedade de posição sendo definida aqui, então o que podemos fazer é não precisar mais
dessa linha de código podemos simplesmente colocar position dentro de super para dizer que vamos herdar
essa propriedade diretamente de nosso sprite pai, então queremos ir em frente e salvar isso e atualizar
aqui para ver como as coisas se parecem com a atualização nosso jogo está quebrado, este é
um ótimo momento para inspecionar nossos elementos, vá para o console e veja o que está acontecendo, então aqui temos apenas
o problema de imagens não definidas on-line 55 dentro de classes.js, então queremos ter certeza dentro do super
we' nao esta referenciando image estamos referenciando a fonte da imagem porque essa é a propriedade real pela
qual estamos passando aqui e, portanto, só queremos ter certeza de que definimos corretamente, salvamos
voltar novamente e temos mais um problema, apenas diz que os quadros atuais não são definido, então, se
voltarmos ao nosso código, você verá que esse é o problema aqui, os frames atuais não estão definidos
porque estamos tentando passá-lo pelo nosso construtor pais aqui, mas
na verdade não temos nada definido para isso por padrão agora os quadros atuais estão sendo configurados para um
valor estático e se você quiser chamar super e fazê-lo funcionar bem, precisamos ter certeza de
que zero aqui está realmente definido como 2 quadros atuais passados ​​como um argumento aqui
para que possamos alterar isso aqui e adicionar um argumento à nossa classe pai, acho que é
um pouco exagerado, embora o que podemos fazer é seguir em frente e copiar em qualquer lugar onde
haja um valor estático, então essas três linhas aqui nós ' vai seguir em frente d copiá-los e
então podemos nos livrar deles dentro do nosso super método, então esses três aqui, então podemos
colá-los diretamente em nossa classe de lutador, depende de você como você deseja fazer isso, é
mais uma preferência em minha opinião, em vez de um padrão estrito, então vamos salvar isso e atualizar e
as coisas estão de volta ao normal, temos erros aqui, mas tudo bem, porque nunca
passamos uma imagem para nossos objetos de caça, então essa será a próxima coisa que nós queremos fazer
isso no index.js, sabemos que acabamos de refatorar nossos lutadores para obter uma fonte de imagem,
então vou pegar nossa fonte de imagem da loja e colocá-la onde nosso player
será criado agora eu não quero que a fonte da imagem para o nosso player seja nítida, é claro que
não faria sentido ter uma loja como um lutador, então eu quero ir em frente e fazer referência ao samurai
mac especificamente à imagem idle.png para obter que vou entrar na nossa pasta de imagens
vou dizer que quero para entrar no samurai mac e então eu quero ir em frente e ficar idle.png
então se olharmos para idle.png quantos quadros tem essa imagem bem vamos em frente e contar um dois três
quatro cinco seis sete oito então vai ser uma imagem de 8 quadros, como resultado, queremos ter certeza de que
configuramos nosso máximo de quadros igual a 8 para nosso lutador, um samurai mac, então vamos em frente e salve isso,
volte aqui e atualize, você verá que temos um o sprite de lutador na tela foi cortado
quase perfeitamente porque não estamos mostrando os oito quadros diferentes estamos mostrando apenas um
só precisamos ir em frente e torná-lo maior faça ele animar e então eu vou mostrar como
cortar isso perfeitamente para que ele toque o chão para torná-lo maior, isso
será muito fácil, tudo o que precisamos fazer é passar por uma propriedade de escala, vamos definir a escala máxima do sailrite para 2,5
, salve e atualize isso e definitivamente maior, mas ainda estamos caindo um pouco
e a razão pela qual estamos caindo é se formos em frente e olharmos t esta imagem real
, você verá que há muito espaço em torno de cada instância do samurai mac
cada quadro é imagem agora é realmente deste tamanho, isso significa que temos preenchimento no canto superior
esquerdo inferior e direito de nossa imagem e precisamos desta forma porque mais tarde quando entrarmos num dos
nossos sprites de ataque esse ataque irá estender-se quase por toda a largura restante do quadrado
aqui por isso precisamos deste espaço extra mas quando tivermos todo este espaço extra à volta do nosso sprite
enquanto os cálculos estiverem errados quando estivermos tentando executar a detecção de colisão entre
a parte inferior do nosso sprite aqui e o chão real do nosso jogo, então o que precisamos fazer
é compensar nosso sprite aqui, então vamos mova nosso sprite deste local
para o canto superior esquerdo de onde o estamos cortando e precisamos definir qual é a
largura e a altura de uma dessas imagens para obter a detecção de colisão correta, então vamos começar
traduzindo nossa imagem real em direção ao topo canto esquerdo da nossa cultura para fazer isso,
vamos para classes.js e isso vai estar realmente dentro de nossa classe de sprite, queremos
fazer isso aqui porque podemos estar usando isso não apenas para nossos lutadores, mas para outras folhas de sprite
no futuro, então eu quero adicionar uma propriedade de deslocamento e aqui vou definir esse deslocamento de ponto
igual ao deslocamento e agora que tenho esse deslocamento no lugar, quero ir em frente e usar isso dentro de c ponto
desenhar imagem então tudo o que vou fazer aqui é da posição em que estamos realmente colocando nossa imagem
vou subtrair disso este ponto deslocado ponto x e vou fazer a mesma coisa para
este ponto offset dot y agora agora este offset.x e y é igual a undefined porque
nós nunca passamos nada através do nosso construtor sprite como resultado se você quiser isso
igual a um valor padrão e você não quiser ir em frente e subtrair algo indefinido de
algo que realmente existe, podemos ir em frente e definir o deslocamento igual a um objeto t com um x
a 0 e ay de 0 porque, por padrão, as imagens não devem ser compensadas por nenhum valor e,
finalmente, se quisermos usar isso dentro de nossa classe fighter, precisamos seguir em frente e pegar esse argumento
, colocá-lo dentro de nosso construtor de cláusula fighter coloque-o dentro de super para ter certeza de que configuramos essa
propriedade acima e devemos ser bons para ir com apenas isso, então agora em index.js podemos definir
o deslocamento em que queremos que nosso player seja movido para que possamos movê-lo para o canto superior esquerdo de
todo esse preenchimento, então aqui vou dizer que nosso deslocamento será igual a um objeto com um x
e também qual será nosso x eu já fiz os cálculos sobre isso para ser
215 pixels e então y estava em torno de 180, vamos ajustar isso conforme necessário, então agora temos
o deslocamento sendo passado se olharmos dentro de classes.js ele está sendo passado aqui
indo para super sendo chamado acima e você ' Na verdade, perceberemos que o deslocamento está sendo definido duas vezes
aqui dentro do nosso construtor que queremos para ter certeza de que não é o caso vamos nos livrar
deste primeiro deslocamento certifique-se de que temos apenas um que está definido como padrão aqui e então
vamos salvar e atualizar você verá que isso está muito melhor então, essencialmente, nos livramos
do preenchimento no lado esquerdo, tudo bem para começar, vamos em frente e nos certifiquemos de nos
livrar de mais preenchimento no canto inferior direito aqui, para nos livrarmos desse preenchimento, queremos diminuir nosso
valor de deslocamento à direita aqui vamos para 170 que deve nos reduzir em 10 pixels na parte inferior
parece que estamos chegando um pouco mais perto vamos descer para 160 salvar e depois atualizar
e então vamos subtrair cerca de 3 pixels disso então 1 57 salve e atualize isso e agora
estamos tocando o chão tão perfeito agora vamos em frente e fazer nosso sprite se mover para cima e para baixo por que
isso não está se movendo para cima e para baixo atualmente bem dentro de classes.js se formos em frente e olharmos com uma atualização
, não temos nenhum código responsável por mover quadros decorridos ou quadros atuais através de seu
i precisamos ter certeza de que isso está acontecendo para que nosso método draw aqui passe
por nossas folhas de sprite corretamente, então como podemos ir em frente e adicionar este código acima com uma atualização
na função de atualização abaixo bem, o que poderíamos fazer é podemos simplesmente copiar todo esse código
aqui e colá-lo na atualização, assim, salve e atualize, você verá agora que temos
aquela animação perfeita no lugar que está totalmente bem, bem, o único problema é repetir nosso código
se ' está tentando seguir não repita os princípios bem, faz sentido colocar isso em seu
próprio método em vez de apenas duplicá-lo em dois lugares, então, em vez de duplicá-lo aqui
, vou excluir isso e depois acima em sprite i' vou adicionar um novo método
chamado animate frames porque é exatamente isso que essa função faz se eu seguir em frente e colar esse
código lá bem, agora em atualização eu nem preciso chamar todo esse código, posso simplesmente chamar o método
quadro animado deve ser realmente um imate frames miss s ali mesmo vamos chamar anime
frames aqui que chama isso em retorno e agora que isso está dentro da classe pai do
sprite eu posso ir em frente e usar este método dentro da classe filho aqui eu não mesmo preciso
defini-lo eu posso apenas chamar dentro da função de atualização este ponto para animar quadros e ele
ainda deve funcionar de acordo então vamos salvar isso e atualizar e isso ainda funciona temos código limpo
porque estamos usando os princípios não se repita agora um problema é bom se tentarmos
mover esse personagem com wasd, não podemos mover e se inspecionarmos o elemento e entrarmos
no console enquanto estamos recebendo um monte de erros vermelhos em relação a classes.js e line23, não
podemos para desenhar algum tipo de imagem você sabe qual é a imagem que será o nosso jogador
2 aqui nós nunca definimos uma imagem para o jogador 2 e tudo bem porque não estamos prontos
para fazer isso mas queremos fazer certeza de que não estamos recebendo esse erro para que possamos ter certeza de que o seu
jogo funciona de acordo com o que temos agora, então para ter certeza de que nosso jogador não está sendo
renderizado na tela, vamos descer para animar e simplesmente comentar a
atualização do ponto inimigo, então fazemos isso salve e atualize e comece a se mover bem agora podemos mover novamente
e se clicarmos com o botão direito e inspecionarmos o elemento, não teremos mais erros em nosso console porque
acabamos de comentar nosso inimigo e como nosso inimigo não tinha uma fonte de imagem associada a
ele ele estava apenas tentando dar erro continuamente para que isso nos permitisse verificar a
animação ociosa para nosso sprite de jogador, então, em seguida, vamos avançar e implementar nosso sprite de execução,
queremos poder alternar entre estar ocioso e em seguida, correndo para frente e para trás, então como vamos
implementar esse sprite bem aqui, onde usaremos uma animação em execução, bem,
vamos querer começar em classes.js e queremos encontrar nossa classe de lutador, então vamos
adicionar um adequado ty dentro de nosso construtor aqui e isso será chamado de sprites
essencialmente este será um objeto que contém todos os sprites para nosso lutador específico,
então já que estamos colocando sprites aqui agora podemos ir em frente e usá-lo como um propriedade dentro do
construtor dizendo que esses sprites de ponto são iguais aos sprites pelos quais passamos,
então vamos salvar isso e depois ir para index.js para que possamos realmente começar a passar esses
sprites para nossa classe de lutador, então vamos para se concentrar em passar isso para o nosso
player logo abaixo do offset, iremos em frente e adicionaremos uma propriedade de sprites e isso
será igual a um objeto, então que tipo de sprites nosso player terá bem agora temos
um ocioso sprite e também queremos ter um sprite de execução, então vamos listá-los aqui
, vamos começar com ocioso, este será um objeto eagle 2 e terá uma fonte de imagem
e será igual a a mesma fonte de imagem que usamos antes, então este aqui e
este também terá um máximo de quadros associado a ele, isso tem 8 quadros associados a esse
sprite idle.png e então queremos ir em frente e fazer a mesma coisa não apenas para ocioso, mas para executar
como bem, então eu vou copiar essa propriedade, cole-a abaixo e altere ocioso para executar
agora qual é a fonte da imagem de execução aqui bem, será samurai mac e executará, então
vamos em frente e mudar ocioso aqui para executar para referenciar a imagem correta e quantos
quadros são executados png vai ficar bem, podemos ir em frente e abrir isso e contar um dois três quatro cinco
seis 7 8. sorte para nós esta é a mesma quantidade de quadros como nosso sprite de png ocioso, então não
precisamos alterar nada para o máximo de quadros aqui, então como isso vai funcionar é que
vamos alternar entre esses sprites definindo esta imagem de ponto para qualquer sprite para o qual queremos ir
então onde está this.image uma vez dentro de nossa classe pai acima, você verá que estamos configurando um ima ge
igual a uma nova imagem baseada na fonte da imagem para alternar entre esses sprites precisamos
ter certeza de que criamos uma nova imagem javascript com base nesses sprites e depois mudar essa
imagem para a nova imagem que acabamos de criar soa um pouco confuso, mas vamos em frente e fazer isso
dentro da classe de lutador, então acabamos de passar nossos sprites por eles agora são iguais a esse
sprite de ponto, bem, precisamos ir em frente e criar esse objeto javascript para cada objeto dentro deste
objeto sprites principal, então nós ' vamos seguir em frente e percorrer nosso objeto sprites dizendo para sprite
em sprites, então o que isso vai fazer bem se olharmos dentro do index.js, é assim que os sprites se parecem
e basicamente vamos fazer um loop através de cada objeto dentro do objeto de sprites
, então primeiro vamos percorrer ocioso e, em seguida, vamos percorrer executar, isso é tudo
isso significa dentro de classes.js quando usamos sintaxe como esta agora nosso objetivo aqui é essencialmente
criar uma imagem dinamismo da propriedade icamente, isso será igual a um novo objeto de imagem, vamos
seguir em frente e fazer isso enquanto percorremos os sprites aqui dentro de classes.js, para adicionar
uma propriedade a esse objeto que estamos fazendo um loop, podemos vá em frente e selecione nosso
objeto principal de sprites e então vamos referenciar qual objeto queremos pegar com o sprite bem aqui
, então o sprite aqui será na verdade a chave do objeto, então quando referenciarmos o sprite
estamos realmente referenciando o ocioso ou execute que é a chave do objeto, então quando formos em frente e
usarmos essa sintaxe aqui, estamos basicamente dizendo que este é o objeto sobre o qual estamos fazendo o loop
e se quisermos adicionar uma propriedade a isso, podemos simplesmente digitar dot e então diga qual propriedade
queremos adicionar bem, temos que adicionar uma propriedade de imagem e isso será igual a um novo
objeto de imagem javascript, então agora que temos isso, queremos seguir em frente e definir a fonte disso aqui então
vamos colar isso abaixo e dizer que a fonte deste i mage será igual ao que
podemos ir em frente e pegar o sprite de suporte do sprite e depois dizer que a fonte disso deve
ser image src e certifique-se de que s é maiúsculo, então vamos em frente e salve isso e no final
i quer ir em frente e copiar esses sprites de ponto e olhando para isso bem, vamos em frente e certifique-se de
que estamos referenciando isso. sprites aqui dentro do nosso loop for, então vamos percorrer este
ponto sprites obter o sprite individual e, em seguida, definir tudo o que precisamos aqui e, finalmente
, vamos deslogar isso e antes de salvar e atualizar isso apenas faça certifique-se de declarar
um sprite aqui como um custo porque o sprite nunca vai realmente mudar, você precisa ter
certeza de declarar isso como um custo distante ou esquerdo quando estiver procurando por isso para que a sintaxe
funcione, então estamos vá em frente e salve isso vá aqui e atualize e depois abra nosso console
para ver exatamente o que estamos fazendo o logout, então agora parece que estamos fazendo logout do console
para este objeto, vamos abri-lo e agora temos um objeto ocioso e um objeto de execução que você verá
agora, temos uma imagem definida como uma imagem javascript para ocioso e para execução, portanto, tecnicamente
, devemos ser capazes de usar isso e alternar entre essas duas ações diferentes
em nosso sprite de lutador agora vamos deletar este console.log e pensar para nós mesmos o que vai
determinar quando alternamos entre nosso sprite em execução ou nosso sprite ocioso, bem, vamos
determinar isso dentro de index.js especificamente dentro de nosso loop de animação porque sabemos que sempre
que pressionamos a ou sempre que pressionamos d queremos para ir em frente e executar em vez de ficar inativo, então, como acabamos
de configurar tudo dentro de classes.js, sempre que formos para a esquerda, o que queremos fazer,
podemos selecionar nossa imagem de ponto do player e definiremos nossa imagem de player igual para nossos sprites de player
especificamente o sprite de execução e queremos ir em frente e pegar essa imagem javascript exata, então,
além disso, precisamos de uma imagem de ponto de referência e com isso, quando pressionamos a, devemos alternar para o
sprite em execução, vamos salvar isso certifique-se de ter as classes js salvas, bem como atualizar e, em seguida, quando
avançarmos e clicarmos em um, você verá agora que temos um sprite em execução e eu posso ir em frente e
avançar e retroceder porque não estamos voltando para ocioso quando deixamos de lado tão técnico y
isso funciona sempre que seguramos d ou a podemos ver que é assim que o sprite se parece e como
são oito quadros ele simplesmente funciona imediatamente não muito extra temos que fazer ali, mas
sabemos que queremos para voltar a um estado ocioso quando nenhuma tecla está sendo pressionada, então o que podemos
fazer é logo acima do movimento do jogador, podemos pegar esta linha de código onde estamos configurando nossa imagem de jogador
e o que vamos fazer é dizer que nosso a imagem padrão do jogador será igual a
player.sprites.idle.image em vez de run.image, então agora se salvarmos e atualizarmos, ficaremos
ociosos e, se eu mover para a esquerda, entraremos em execução animação assim que eu soltar
, vamos voltar ao modo inativo porque estamos configurando isso para cada quadro em que entrarmos, mas agora,
se eu segurar a esquerda, só estaremos correndo se eu voltar aqui, você verá veja, voltamos ao
inativo, então é assim que vamos alternar entre eles para começar, mas
queremos ter certeza de que estamos correndo para a direita t sempre que pressionamos d também, então vamos em
frente e certifique-se de mudar nossa imagem de jogador sempre que pressionarmos d2, então vou em
frente e colá-lo lá e podemos salvá-lo e atualizar e, em seguida, segure para baixo d e
agora estamos correndo para a direita sempre que seguramos d correndo para a esquerda quando seguramos a
e então quando paramos vamos voltar para aquela animação ociosa então agora podemos ir em frente
e marcar run então agora vamos em frente e mudar para uma animação de salto como vamos
fazer isso bem queremos ir em frente e dentro do nosso player const queremos adicionar um novo sprite
ao nosso objeto sprites então para fazer isso muito rápido, vou em frente e copie run
e adicione uma vírgula no final de run cole isso e então eu posso chamar isso de nosso
sprite de salto aqui, então eu só preciso ter certeza de que estou referenciando nosso salto imagem ali mesmo, então, em vez
de executar, vou chamar o salto e preciso ver em quantos quadros essa imagem de salto realmente consiste
, então se eu olhar w ithin jump.png que na verdade serão dois quadros, será nosso primeiro
switch de quadro dentro do nosso sprite switching aqui, então vou alterar os frames max igual a 2
e agora o que preciso fazer é determinar onde queremos para mudar para uma animação de salto então acho que
faz sentido mudar para animação de salto com nosso loop de animação quando nossa velocidade é menor que zero
porque isso significa que estamos subindo no ar e quando estamos subindo no ar
enquanto faz sentido mudar para uma animação de salto, então para onde vamos no ar com nosso
loop de animação, mas não temos nada diretamente em nosso loop de animação, então precisamos
adicionar isso logo abaixo do movimento do jogador. vou adicionar uma instrução if que diz que a
velocidade do ponto do jogador no eixo y é menor que zero, isso significa que estamos no ar, então, se for esse
o caso, podemos ir em frente e selecionar nossa imagem do jogador e definir isso igual à nossa imagem de salto de sprite do jogador
e isso vai g o adiante e ligue-nos por lá, mas se salvarmos e depois atualizarmos
e tentarmos pular, você notará bem que parece muito estranho não muito bom porque sempre
que formos em frente e pularmos, precisamos ter certeza de que também estamos mudando nosso player dot frames max
igual ao nosso player sprites jump frames max basicamente estamos apenas enviando esta águia para dois
quadros porque se tentarmos usar nossa lógica de animação de folha de sprite com uma taxa de quadros maior
que a folha de sprite real bem, simplesmente não é vai funcionar vamos conseguir este efeito estamos a
chegar aqui onde não vemos a imagem no lugar por isso queremos ter a certeza de que
ligamos isso para 2 mas ainda não terminamos você notará se eu salvar esta atualização
tente pular bem temos uma animação de salto no lugar quando subimos mas então temos algum tipo de
efeito estranho onde obtemos uma duplicata do nosso jogador e parece que honestamente eles estão mexendo
no chão não é muito bom para o que estamos indo, então uma das razões isso está ocorrendo porque
o máximo do nosso quadro aqui agora é igual a dois, estamos tentando definir a imagem do nosso player igual
ao nosso ocioso e uma imagem de execução quando eles têm oito quadros associados a eles, mas agora estamos
dizendo que nosso o frame's max é igual a dois, então estamos executando a animação muito rapidamente
e elimina todo o cálculo de largura que realmente mantém nossa marca de corte no lugar correto,
então queremos ter certeza de que, quando formos em frente e definirmos a imagem do jogador igual algo como ocioso
ou executar que também definimos o máximo do quadro de volta para esses valores originais, também queremos fazer
isso uma vez porque é meio ineficiente definir isso para cada quadro quando estamos no ar
quando realmente apenas precisa definir essas coisas uma vez para essa ação, então com tudo isso em mente, se
olharmos para isso, este código está ficando difícil de ler e entender apenas à primeira vista, então
este é um caso em que queremos ir em frente e abstrair isso para abstrair isso eu vou
entrar de classes.js e vou adicionar em nossa classe de lutador o que vou adicionar vou
adicionar um método chamado switch sprite este método será responsável por alternar entre nossos
diferentes sprites vai levar um argumento para quais sprites queremos mudar e então
eu vou adicionar uma instrução switch case que muda para o sprite que estamos passando
e, em seguida, encontra um case como algo ao longo das linhas de idle e uma instrução break para isso
vamos adicionar um caso de run break lá e depois adicionar um caso de jump também queremos
quebrar no final disso também, então agora quando chamamos switch sprite queremos fazer todo o código de configuração
que nós atualmente temos dentro de nosso loop de animação e vamos detectar aqui para ter certeza de
que fazemos isso exatamente uma vez para cada ação que tomamos, então vamos começar com nosso caso de inatividade
dentro de index.js, sabemos que vamos mudar para nosso estado ocioso com esta linha aqui onde definimos a
imagem do jogador igual a pontos sprites.i dle.image vamos em frente e cortar isso daqui e
vamos selecionar player dot switch sprite para qual sprite queremos mudar
bem queremos mudar para um sprite de idle então agora estamos chamando isso dentro das classes. js essencialmente
vamos executar qualquer código que esteja dentro desta instrução case aqui eu quero colar naquela
linha que acabamos de cortar e não podemos realmente fazer referência ao player porque essa é uma instância da classe
, em vez disso, precisamos ter certeza estamos referenciando essa imagem e esses sprites de ponto, então isso
é exatamente a mesma coisa que tínhamos antes, exceto que vamos chamar esse sprite de switch faz um
pouco mais de sentido, é um pouco mais fácil de ler, mas dentro de classes.js o que nós pode fazer é dentro
de um caso de ocioso podemos adicionar uma declaração if que diz que se esta imagem de ponto não for igual a
essa imagem de ponto ocioso ponto imagem então queremos mudar nossa imagem para ocioso, vamos fazer
isso apenas uma vez com esta declaração if assim que estiver definida, isso não será mais chamado, mas estamos e ainda
estaremos executando uma instrução case com nosso loop de animação, mas estamos apenas alternando para
essa folha de sprite apenas uma vez, então vamos em frente e refatorar a execução, vamos entrar em index.js
e onde estamos definindo nosso imagem do jogador igual ao nosso sprite de execução vai estar bem aqui
, então eu vou cortar isso e então eu vou chamar o sprite dot switch do jogador igual para executar em vez disso
, vamos salvar isso, volte para classes.js e depois dentro do nosso caso de run eu posso escrever uma declaração if
que diz que se esta imagem de ponto não for igual a este sprites de ponto dot run dot image então eu quero ir em
frente e definir this.image igual ao nosso sprite de execução para que possamos salvá-lo de volta ao index.js e, em seguida
, queremos ir em frente e chamá-lo aqui também, porque isso é basicamente código duplicado,
vamos colar isso lá e agora, finalmente, queremos fazer a mesma coisa quando estivermos pulando
o ar para o nosso sprite de salto vamos em frente e cortar essas duas linhas aqui
selecione nosso pla yer dot switch sprite método e, em seguida, chamar jump nele, então agora que estamos chamando
switch sprite jump em classes.js, vamos executar o que estiver dentro deste caso de salto aqui
, vamos colar esse código e dizer em vez de player para essas quatro instâncias, vamos fazer
referência a isso, então estamos mudando nossa imagem para nossa imagem de salto e, em seguida, configurando nosso
máximo de quadros igual ao máximo de quadros de salto, que será 2. então vamos seguir em frente
e ter certeza de que estamos definindo o máximo de quadros dentro de cada instrução if aqui para executar e
ocioso, portanto, se formos usar mais de uma linha em uma instrução if, precisamos ter certeza tem
colchetes e então podemos ir em frente e definir o máximo deste quadro de pontos igual à ação de sprites que
será executada, então queremos alternar o salto aqui para executar a propriedade max dos quadros, então vamos
voltar para 8. então vamos em frente e fazer a mesma coisa para ocioso, vamos em frente e pegue esta
linha de código aqui, adicione alguns curl y entre parênteses nesta declaração if e logo abaixo
de onde estamos definindo nossa imagem, diremos que o máximo de nosso quadro será igual ao nosso sprite
de propriedade máxima de quadros de pontos ociosos agora é importante observar dentro deste caso de salto que queremos para ter certeza de
que temos essa condicional exata aqui também, então adicionaremos se dot this dot image não for igual a
esse dot sprites dot dot então queremos seguir em frente e chamar o código a seguir para definir nossa imagem e
nossos frames max apenas uma vez antes de prosseguirmos e salvarmos isso e verificarmos, vamos em frente e
certifique-se de que estamos configurando tudo para a ação correta para que pareça aqui para ocioso estamos de
fato referenciando todas as instâncias ociosas para execução que estamos referenciando run run queremos ter certeza de que
definitivamente mudamos o jump aqui para executar, caso contrário teremos a quantidade errada de quadros
sendo renderizados e, para o jump, estamos referenciando o jump, precisamos alterar o run aqui para pular
também e pule com isso, devemos ser bons para g o, então certifique-se de que todos estão corretos,
salve isso e, em seguida, salve index.js e vamos testá-lo para que, na atualização, comecemos a mover,
parece que a execução e a inatividade são boas para ir tão perfeitas agora se pularmos se eu clicar em w, fazemos tem uma
animação de salto muito boa, mas você pode notar que há um pouco de piscar acontecendo bem
ali o que é esse piscar por que está acontecendo bem o que está acontecendo aqui é que durante nossa
animação de execução vamos passar de um para dois e depois para dois para três depois para três para quatro e vamos
continuar até chegarmos a oito e então vamos voltar ao início, mas a
coisa é que podemos parar em nosso quarto quadro se tentarmos mudar imediatamente para o quarto quadro
de nossa animação de salto abaixo, enquanto não há um quarto quadro, portanto, vamos renderizar
apenas um espaço em branco, que é o que está causando esse efeito de flash, precisamos ter certeza de
que sempre que alternarmos entre executar e salto ou algum outro sprite que redefinimos nossa fra atual me
igual a nada além de zero, o que significa que vamos começar no início de nossa animação
, então sempre que chamamos switch sprite em classes.js e realmente passamos pelo
processo de alternar o sprite dentro dessas instruções if que queremos para ir em frente e dizer que
este dot frames dot current então o frame atual é igual a zero quando mudamos para um
sprite diferente então vamos em frente e copie isso e cole-o dentro de cada case cole-o dentro do jump também
salve essa cabeça aqui atualizar e agora quando eu pulo não estamos mais colocando o flash no lugar
quando começamos a correr para a direita você vai notar que perdemos uma animação em execução
aqui porque estamos furiosamente tentando alternar entre nosso modo inativo e executar a animação
, sempre vamos voltar para ocioso porque essa é a primeira coisa que chamamos, mas se continuarmos
e pressionar a ou d, vamos alternar para executar, o que significa que ainda estamos voltando
e adiante entre esses diferentes sprite shee ts queremos ter certeza de que só voltaremos para
ocioso se não estivermos pressionando a ou d para fazer isso queremos ter certeza de que isso está dentro de uma
instrução l próxima diz se e senão se sim, vamos colar no player que muda o sprite para ocioso se
não estivermos nos movendo no eixo x, então agora, se salvarmos isso e atualizarmos, ficamos bem em nossa posição ociosa
, começamos a correr e a animação em execução está de volta, podemos até pular, ainda conseguimos isso animação de salto
ali mesmo, então para terminar nossa animação de salto, queremos também adicionar uma animação de queda
para quando estivermos voltando para baixo agora, assim que nossa velocidade y ficar positiva, voltamos
para nossa animação ociosa, queremos mudar isso para uma animação de queda para dar um efeito realista
para fazer isto vamos descobrir onde estamos a criar o nosso jogador especificamente os sprites do jogador
vão estar aqui e quero adicionar a isto uma categoria de queda também
por isso eu sei eu preciso de uma fonte de imagem e um frame's max para isso vou copiar essas duas linhas
e colá-lo em fall e, em seguida, determinar qual imagem eu quero referenciar para nosso sprite
de
outono . o mesmo aqui, mas agora que acabamos
de adicionar um sprite, também precisamos determinar o que acontece quando mudamos para um sprite dentro do closet.js
, então precisamos adicionar uma instrução case, cole isso abaixo e diga quando tivermos um caso
de queda, queremos mudar tudo para o sprite de queda, então tudo o que precisamos mudar aqui
são essas três instâncias de salto, vou fazê-lo ao mesmo tempo com texto sublime,
selecionando uma instância e mantendo pressionado o comando d para selecione esses três e eu mudarei o salto para
cair, que agora está disponível para nós porque adicionamos isso quando estávamos criando nosso
lutador de jogador em primeiro lugar, então agora só precisamos determinar quando chamamos switch sprite
fall que vai estar dentro de index.js quando nossa velocidade y for p ositivo então aqui
quando estivermos pulando vamos querer adicionar um else f que coloca a velocidade do nosso jogador no
eixo y e dizer se isso é maior que zero então sabemos que estamos caindo no momento, então isso é
um o momento perfeito para mudar para não um sprite de salto, mas sim um sprite de queda, então vamos salvar
essa atualização e então pulamos agora quando caímos, temos um sprite de outono no lugar, então isso é muito legal
, mas você pode notar quando formos em frente e acertar o ground enquanto alternamos entre ele parece ocioso
e nosso sprite de queda muito rapidamente, então por que é bom, se olharmos dentro de classes.js,
vamos querer nos concentrar na classe de atualização do nosso lutador, então isso aqui é nossa função de gravidade
e isso é na verdade o que está causando esse erro, então quando olhamos para esta posição y mais esta
altura do ponto estamos obtendo o fundo do nosso jogador aqui e quando estamos caindo em direção ao
chão também estamos adicionando essa velocidade máxima que está aumentando ao longo do tempo, então, eventualmente, isso
pode ser tão algo bem grande como 21 para a nossa velocidade, então se o fundo do nosso jogador mais 21
, que vai estar aqui embaixo, for maior que o nosso chão, o que realmente é, então vamos em
frente e definir nossa velocidade igual a zero, o que significa da próxima vez que passarmos por esta função de atualização
, vamos em frente e executar esta instrução if novamente, o que significa que o fundo do nosso player
estará por aqui mais this.velocity y e como definimos nossa velocidade y igual a zero bem
, toda essa afirmação aqui pode não ser mais verdadeira porque estamos adicionando um
valor tão minúsculo, embora possamos estar um pouco mais no ar, então, como isso não é verdade
, adicionamos gravidade de volta a isso. velocidade.y o que acontece quando adicionamos gravidade à nossa velocidade y
enquanto ligamos para a animação de queda, então vamos da animação ociosa para a
animação de queda e, eventualmente, isso será verdade novamente, mas nossa posição será ser baixo o suficiente
para o ponto em que não estamos trocando b etween if e else if e voltamos para a animação ociosa
completamente, então eu sei que é um pouco confuso, mas aqui está como vamos corrigi-lo quando isso for
verdade, vamos definir nossa velocidade y, mas também vamos para definir a posição do jogador para
estar no local exacto em que já não se pode mover por isso o que vou fazer é por baixo disto
vou fazer sair desta posição ponto ponto y vou guardar isso e, em seguida, abrir nosso console
e então eu quero atualizar apenas para ver o que é isso, então queremos que nossa posição y seja definida para cerca
de 3 30 para que isso não caia mais sem nenhum problema de velocidade estranho acontecendo, não
apenas vamos definir nossa velocidade y para zero, também vamos definir essa posição do ponto dot y igual
a esse valor exato aqui, no qual não estamos mais movendo para cima ou para baixo, será 3 30, então
vamos em frente e defina isso igual a 330 e agora podemos ir em frente e excluir este console.log, salvar
e atualizar, sai disso e agora quando pulamos e pressionamos t No chão, você verá que
não temos mais aquele estranho efeito de flash quando você está alternando entre nosso sprite de inatividade e nosso sprite de outono
, porque cuidamos daquele pequeno espaço que estava aparecendo devido ao nosso código de velocidade e gravidade,
então agora nós podemos correr também podemos pular e cair e então voltamos para uma posição ociosa não importa
o que deixamos então agora podemos ir em frente e marcar o pulo então agora vamos adicionar nossa animação de ataque
para fazer isso vamos para ir para index.js e encontrar nosso player e, em seguida, nossos objetos sprites, então
no canto inferior direito queremos adicionar uma nova propriedade e isso fará referência ao
ponto de ataque um para que possamos ver aqui este é um dois três quatro cinco seis quadros agora com um index.js podemos
referenciar nossa fonte de imagem que será o ataque um alterar nosso máximo de quadros igual
à quantidade máxima de quadros dentro dessa folha de sprite que é seis sempre queremos ter certeza
de que alteramos o nome da propriedade para o mesmo nome que temos aqui, vai b e ataque
um, então agora que temos um ataque no lugar, sempre queremos ir para classes.js e, em seguida, adicionar
a instrução case correspondente, então na parte inferior eu vou copiar este caso aqui
colar em um novo e digamos para o caso do ataque um, então eu quero ter certeza de que eu mude nossa
imagem para não cair, mas sim atacar uma para essas quatro linhas de código e agora quando eu quero
ativar o ataque um bem se entrarmos em index.js queremos procurar nosso ouvinte de eventos onde pressionamos
a barra de espaço, então, se eu rolar para baixo, veremos quando pressionamos o espaço aqui, estamos
chamando o ataque do jogador que é perfeito, o que significa que dentro de classes.js, onde na verdade, definimos o ataque
aqui, também podemos chamar esse sprite de troca de ponto igual ao ataque um, então estamos apenas chamando isso em
um local diferente, mas isso ativará esse código aqui, então, se salvarmos isso
e atualizaremos e então aperte a barra de espaço bem, parece que estamos tentando atacar, mas não somos
capazes totalmente isso porque dentro do nosso loop de animação estamos dizendo que assim que ativarmos a
animação de ataque voltaremos diretamente para o modo inativo porque não estamos nos movendo para a esquerda ou para a direita e não estamos
pulando atualmente, não deveria realmente importa se estamos nos movendo, se estamos pulando ou parados
quando pressionamos a barra de espaço, queremos apenas mostrar essa animação de ataque e nada mais, então, basicamente
, quando ativamos um ataque, queremos ter certeza de que o código do switch case não pode mais ser chamado
então vamos fazer isso com uma declaração if vamos dizer se esta imagem de ponto é atualmente
igual a esta imagem de ponto sprites ataque de ponto 1 imagem de ponto então vamos prosseguir e retornar não
vamos para chamar qualquer um dos códigos a seguir que podem nos mudar para uma folha de sprite diferente
se salvarmos essa atualização, tudo ainda funcionará, mas assim que ativarmos nosso ataque com espaço
, obteremos essa animação de ataque e isso é muito legal, mas você vou ver
que minhas mãos estão para cima e isso continua acontecendo ao longo do tempo o que queremos fazer é dizer que quando essa
animação de ataque for concluída apenas uma vez, vamos reativar nosso código de comutação de sprite para que possamos fazer
isso estendendo essa condicional aqui adicionando uma instrução e dizendo se esta
corrente de quadros de pontos é menor que esses sprites de ponto atacam 1 ponto frames max e queremos subtrair 1
disso porque os frames atuais começam em zero enquanto nossos frames max é a quantidade real de frames
começando em 1 e agora em tudo o que estamos dizendo é se nossa imagem é a imagem de ataque e nosso
quadro atual é menor que o máximo do quadro da folha de sprite real, então só queremos retornar, não
queremos chamar nenhum dos seguintes códigos, mas assim que a corrente do quadro for acima do máximo do quadro
aqui, então vamos continuar nos permitindo voltar para o salto de execução ociosa ou queda
ou até mesmo atacar um se decidirmos pressionar a barra de espaço novamente, salvando isso voltando aqui e
atualizando todo o nosso código de salto o código ocioso parece trabalhar se oi t space
agora estamos atacando apenas uma vez porque adicionamos essa condicional aqui
, então é assim que vamos adicionar nossa animação para nosso ataque, vamos implementar diminuindo
nossa barra de saúde com esta nova animação assim que obtivermos nossa segundo jogador lá e se olharmos para fazer
veremos o que vem a seguir, então temos nossos sprites para nosso jogador, mas agora é hora de
trazer nosso inimigo de volta ao jogo e substituir nosso retângulo por uma folha de sprite real para
faça isso queremos ir para onde estamos criando nosso inimigo vai estar aqui embaixo na linha
73 para mim precisamos adicionar todas as propriedades responsáveis ​​por adicionar sprites em nosso lutador
para que essas propriedades de sprites comecem na fonte da imagem dentro de nossa instância de jogador aqui
para que possamos pegar tudo, desde a fonte da imagem até onde nosso objeto sprites termina
e vamos copiar isso e colá-lo em nossa instância de lutador, então agora queremos ir em frente
e fazer referência a um imagem não samurai mac porque bem, eles devem ser diferentes um do
outro, esses são lutadores diferentes, então, em vez de fazer referência ao samurai mac, vamos entrar em um
diretório de kenji e, em seguida, referenciar a imagem ociosa de lá, então se olharmos para a imagem ociosa do
kenji, ela está indo para ficar assim, estamos voltados para a esquerda e temos apenas quatro quadros dentro
da folha de sprite, então agora dentro do index.js podemos dizer que o máximo do nosso quadro padrão será 4 e para
o nosso inimigo não estamos mais referenciando samurai mac vamos referenciar kenji em vez disso, então vamos
para dentro desta pasta, queremos ter certeza de que alteramos cada instância para samurai mac
para kenji para ter certeza de que estamos referenciando o nome correto da imagem, então agora só precisamos para entrar em
cada imagem e certificar-se de que os quadros correspondam à imagem real, então sabemos que, para ocioso, apenas
alteramos isso aqui para ter um máximo de quatro quadros, se formos verificar a execução de kenji também
temos um dois três quatro cinco seis sete oito então isso vai permaneça o mesmo se verificarmos o
salto que são dois permanecem os mesmos e se cairmos também temos dois que permanecerão os
mesmos e finalmente temos o ataque um que será uma animação de quatro quadros
então no índice .js, só queremos ter certeza de que alteramos o ataque um para ter 4 quadros no máximo em vez
de 6. então, com tudo isso no lugar de volta ao nosso loop de animação, você pode ver que comentamos
o arquivo inimigo.atualização porque estávamos recebendo alguns erros antes apenas renderizando um retângulo mas
agora que temos todas as coisas de animação de sprite no lugar podemos ir em frente e descomentar isso
salve e então vamos atualizar só para ver o que acontece bem parece que nosso sprite já está no
jogo em que não estamos realmente o local correto porque parece que o sprite deveria ser um
pouco mais alto que o samurai mac aqui, então vamos em frente e corrigi-lo agora para ter certeza de
que eles são colocados diretamente em cima do chão, podemos ir em frente e mudar o valor de compensação para
o nosso lutador, então estamos g indo em frente e alterando este valor de y igual a 167 em vez de 157 e
isso deve nos elevar um pouco se atualizarmos estamos definitivamente mais em cima do chão agora
mas se eu tentar mover nosso inimigo com nossas setas você' vamos ver que estamos presos nessa
posição ociosa, não importa o que eu faça, se corrermos, se pularmos, mesmo se eu atacar, não estamos realmente fazendo nada
, então precisamos ir em frente e adicionar a implementação para nosso inimigo real e será
muito fácil, já que já fizemos isso para o samurai mac, se rolarmos para baixo em nosso loop de animação
, podemos ver que esse código aqui está relacionado ao samurai max sprite alternar esse código
aqui está relacionado ao movimento do inimigo, mas nós ' não estamos fazendo nenhuma troca de sprite para nosso
inimigo tudo o que precisamos fazer é pegar uma dessas linhas aqui onde chamamos player.switch sprite
e depois colá-la em uma dessas estimativas onde estamos segurando nossa seta para a esquerda
ou seta certo, a única diferença será que não somos lon ger trocando nosso sprite de jogador,
mas sim nosso sprite inimigo, queremos ter certeza de fazer isso em ambos os locais aqui e estamos
basicamente apenas replicando o código acima, mas para nosso jogador inimigo, então, se olharmos para o samurai
mac, temos uma declaração l bem aqui para ocioso, vamos adicionar a instrução l aqui
para o nosso inimigo, este será o kenji, então nosso inimigo deve mudar o sprite para ocioso quando
não estivermos nos movendo no eixo x e, em seguida, precisamos leve em consideração o salto também vou
copiar essas cinco a seis linhas aqui mesmo colá-las abaixo do movimento do nosso inimigo e depois dizer quando
a velocidade do nosso inimigo for menor que zero o que significa que estamos movendo para cima queremos mudar o
sprite do inimigo para pular e, finalmente, para nossa animação de queda, só queremos ter certeza de que quando
a velocidade do nosso inimigo for maior que zero, o que significa que nosso inimigo está caindo, vamos
mudar nosso sprite inimigo para cair, então agora é tudo o que temos fazer se salvarmos isso volte
aqui e atualize começamos a correr mudamos para nosso sprite de corrida para kenji se eu pular
temos um sprite de salto e quando caímos temos um sprite de queda tudo o que está implementado tudo o que temos
que fazer agora é ter certeza de que quando pressionamos a tecla de seta que realmente lançamos o
ataque, então vamos verificar onde estamos atacando atualmente com o kenji, será dentro de nossos
ouvintes do evento na tecla para baixo, é onde o jogador 1 está atacando, este será o samurai mac, mas
quando baixamos bem, não estamos mais usando este método aqui onde estamos configurando o ataque
igual a verdadeiro, estamos apenas chamando o ataque de ponto na instância do lutador, então aqui vamos chamar
nosso inimigo e depois chamar ataque em cima disso e isso vai ativar automaticamente o ataque um
, então ele vai salvar esta atualização e então quando nós apertarmos o nosso teclado agora
você verá agora os ataques kenji tão perfeitos e podemos mover esses dois
ataques independentes um do outro ao mesmo tempo, então nós realmente tem uma boa física com animações em spray também
para garantir que nosso jogo de luta esteja preparado para o sucesso, então com isso eu vou em frente
e verificar o sprite inimigo, então agora vamos em frente e reagir para nossos ataques de sprite
, felizmente configuramos isso um pouco quando estamos lidando apenas com retângulos, mas você
notará aqui quando tentarmos atacar bem, realmente só funciona às vezes, então precisamos ir em frente
e editar essa funcionalidade para obter nossa caixa de ataque no local correto para que seja sobreposta
diretamente em cima do ataque de espada do nosso jogador, então a primeira coisa que faremos aqui é entrar em
classes.js, então queremos que esse retângulo seja sobreposto em cima de nossa espada. queremos
ir em frente e mostrar esse retângulo novamente para fazer isso, podemos entrar em nossa cláusula de lutador e vamos
entrar em nossa função de atualização bem aqui, isso é o que gerencia nossa posição de caixa de ataque nos
eixos x e y atualmente, então é o local perfeito para realmente desenhar esse ataque b ox de volta então logo
abaixo de onde definimos nossa posição da caixa de aderência podemos chamar c dot fill rect para trazer de volta aquele retângulo
que foi sobreposto em cima de nossos retângulos anteriormente, então queremos criar um
retângulo de caixa de ataque e podemos fazer isso com isso dot attack box dot position dot x para a coordenada x
a coordenada y será esta dot attack box dot position dot y nosso terceiro argumento
será este dot attack box dot width e então nosso quarto argumento será este ponto attack box
dot então vamos salvar isso e depois atualizar vamos ver que nossa caixa de ataque é desenhada de volta
então agora está bem aqui ao invés de em cima do nosso jogador porque isso é afetado pelo nosso
offset da caixa de ataque lembre-se de que adicionamos isso quando ainda estamos lidando com retângulos, mas fomos
em frente e criamos uma nova propriedade de deslocamento que na verdade determina o deslocamento de nosso
sprite em relação à imagem real, como resultado, precisamos adicionar uma nova propriedade que realmente
faz referência os offs et desta caixa de ataque aqui em vez do deslocamento de nosso sprite
, então vamos voltar para nossa classe de lutador e adicionar uma nova propriedade
chamada caixa de ataque, então isso será apenas um objeto e podemos seguir em frente e definir um
padrão aqui para ver como isso se parece e dentro desse objeto queremos adicionar uma
propriedade de deslocamento que será igual a um objeto e também queremos adicionar uma largura que
pode definir como indefinido por omissão para iniciar e também uma altura que também será igual a indefinida
estamos a usar isto apenas para fins visuais sabemos exactamente em que consiste uma caixa de ataque
por isso sabemos que queremos passar por uma propriedade da caixa de ataque sempre que criamos um lutador, mas se
formos adiante e passarmos isso, aqui embaixo, onde realmente definimos nossa propriedade de caixa de ataque
, queremos usar o que estamos passando para que nosso deslocamento para nossa caixa de ataque seja realmente
igual para o deslocamento de pontos da nossa caixa de ataque, que será isso objeto aqui, então para a nossa
largura, isso não será mais igual a 100 para começar, será igual à
largura do ponto da nossa caixa de ataque e, em seguida, aqui para a altura, vamos dizer que a altura da nossa caixa de ataque
deve ser igual a a altura que passamos pelo nosso objeto de caixa de ataque, então agora que
acabamos de configurar isso, precisamos ter certeza de que estamos realmente passando dados relacionados à
nossa caixa de ataque para cada lutador, então faremos isso dentro do index.js encontre nosso lutador de jogador
e na parte inferior bem aqui abaixo de nossa propriedade de sprites, podemos entrar e adicionar
uma propriedade de caixa de ataque.
x e também ay eu vou definir isso igual a zero para começar
vamos ter uma largura vamos em frente e dizer que isso é igual a 100
e então uma altura nós diremos que isso é igual a 50. então agora podemos ir em frente e definir uma
caixa de ataque diferente para um inimigo e vamos fazer isso agora vamos apenas copiar esta propriedade aqui que
contém todos os dados da nossa caixa de ataque copie isso e, em seguida, dentro do nosso lutador abaixo do nosso
objeto sprites, vamos em frente e cole em uma caixa de tags, então se salvarmos isso e atualizarmos bem, agora
isso será colocado a localização correcta porque o nosso deslocamento da caixa de ataque é baseado no que
acabamos de passar para cada lutador individual e isto ainda funcionará da mesma forma você verá
se eu for em frente e acertar o espaço para atacar bem só vamos em frente e subtrair da
saúde do nosso inimigo quando esta caixa de ataque está realmente tocando nosso inimigo então eu vou em frente e passo para a direita
agora quando eu atacar ele vai diminuir, mas apenas quando isso estiver tocando, então queremos definir o deslocamento
para isso certeza de que ele cobre toda a largura do nosso ataque, então vamos em frente
movê-lo na frente do nosso jogador e então vamos estender a largura da nossa caixa de ataque
para que ela se estenda até onde nossa espada termina então para ir em frente e definir que vamos
ir u p para onde nosso jogador ataca e vamos nos concentrar na propriedade da caixa de ataque,
então sabemos que nosso deslocamento deve ser em torno de 100 pixels, acredito que seja a largura do nosso jogador, podemos
apenas ir em frente e estimar isso se salve e atualize que isso está definitivamente na frente
do nosso jogador e eu diria que é um bom local na frente do nosso jogador em que esse ataque deve
realmente ativar, não é muito perto do jogador onde ele não seria realmente atingido por um espada
, mas está longe o suficiente, onde realmente vemos a animação no lugar onde alguém é atingido
, então acho que este é um local bom, mas queremos ir em frente e mover esta caixa de ataque para baixo no
meio do nosso jogador, para que você possa estar pensando que não podemos simplesmente ir em frente e adicionar 50 a y
aqui mesmo, salve e atualize bem, você notará que isso não se moveu, porque se
olharmos dentro de classes.js, nunca levaremos em conta como nosso ataque box deve ser afetado pelo
deslocamento de nossa caixa de ataque no eixo y e você pode ver isso diretamente na atualização, especificamente onde
estamos lidando com nossas caixas de ataque aqui, então para a posição da caixa de ataque y estamos dizendo que queremos
ir em frente e compensar a posição pelo deslocamento da nossa caixa de ataque no eixo x, mas nós nunca
fizemos isso para a posição y aqui, então vamos adicionar a isso este deslocamento de caixa de ataque de ponto y
e isso seguirá em frente e garantirá que nosso deslocamento realmente afete a posição da caixa de ataque
no eixo y. salve isso e atualize agora que foi movido para baixo em 50 pixels, parece estar
em um local mais correto, então agora só queremos ter certeza de que isso estende a largura total deste
ataque, então vamos estender a largura no índice .js dizendo que a largura da nossa
caixa de ataque deve ser igual a vamos em frente e digamos 200 para iniciar a atualização e parece ser um pouco
grande demais, vamos subtrair 40 ou 50 disso vamos em frente e começar com 40 dizendo nossa largura deve
ser igual a 160 salve e atualize e isso parece ser quase perfeito ct então, agora, quando avançamos e
atacamos nosso inimigo com nossa caixa de ataque sobre eles, você verá que a saúde é subtraída e quando
voltamos e isso não está tocando, nada acontece, então vamos em frente e editamos nosso
ataque box para trabalhar com esta animação, mas você notará que esta barra de saúde desce
no início de nossa animação, na verdade não desce quando a espada atinge o inimigo
, assista novamente quando eu a acertei, imediatamente desce em vez de quando a espada atinge o inimigo
, então queremos ir em frente e corrigir isso, queremos dizer que só queremos que isso desapareça quando estivermos
no quarto ou quinto quadro de nossa animação de ataque real, então onde estamos detectando uma colisão
vai estar aqui em baixo dentro do nosso loop de animação aqui é onde estamos a detectar
a colisão com o nosso jogador queremos executar estas condicionais mas também queremos adicionar
outra condição agora esta condição vai dar ao nosso jogador ponto quadros atuais para que o
quadro atual estamos nessa animação, queremos dizer que só queremos ir em frente e subtrair da
saúde do nosso jogador se isso atingir o inimigo quando os quadros do jogador forem iguais a cerca de quatro, porque esse
será o quadro exato em que a espada realmente sai e podemos sempre verificar isso
olhando no simran max attack one você verá que este será nosso quadro zero, este
será seu primeiro segundo terceiro e quarto, então nosso quarto quadro é o que queremos monitor
para dizer que é quando devemos realmente subtrair a saúde do inimigo, então com o index.js
queremos ter certeza de que o jogador que os quadros atuais é igual a quatro quando realmente subtraímos nossa saúde
e se salvarmos isso e atualizaremos e tentaremos atacando bem, você notará que isso realmente não
funciona, infelizmente, por que isso não deveria ser verdade tecnicamente, mas se observarmos quando o jogador
está atacando em classes.js, definiremos isso sempre que chame esse método de ataque
aqui, então w estamos definindo isso como true assim que pressionamos a barra de espaço e
, depois de cerca de 0,1 segundo, estamos definindo isso como false, então estamos definindo isso de volta igual
a false antes mesmo de chegarmos ao quadro 4 dentro do nosso animação e, como resultado, está fazendo com que essa
condicional não seja acionada, para garantir que isso não seja definido como falso imediatamente, podemos ir em frente e
aumentar o tempo aqui para algo como um segundo, mas isso não será tão preciso
dizer quando a nossa animação terminar queremos ter a certeza de que definimos o seu ataque maléfico
cai quando a nossa animação realmente termina quer atingimos ou não o nosso inimigo por isso vamos
em frente e removemos este tempo limite definido agora por isso agora se eu continuar e acertar o nosso inimigo você
vai ver que só ativa quando a espada realmente o toca mas agora veja o que acontece
se eu voltar aqui e atacar nada acontece mas se eu esbarrar no nosso inimigo sem atacar
nós diminuímos sua saúde porque está atacando é igual a verdade ainda queremos ter certeza de que
definimos isso de volta igual a false quando erramos nosso inimigo com o ataque, então vamos fazer isso
dentro do index.js, então isso aqui diz quando detectamos uma colisão, mas abaixo disso podemos dizer se
jogador erra, então queremos chamar a seguinte condicional, podemos dizer que se nosso jogador está atacando
e nosso jogador ponto frames ponto atual é igual a 4, o que significa que estamos no final de nosso ataque
, então vamos em frente e definir jogador que está atacando de volta igual a falso
, então vamos em frente e fazer isso de qualquer maneira, mas isso é apenas se estivermos realmente tocando nosso
inimigo com nossa espada, mas aqui no caso de errarmos, queremos definir de volta igual a false
para não subtrair acidentalmente da saúde do inimigo, ele salvará isso
e, em seguida, atualizará e testará, então devemos perder primeiro o que fazemos e, quando nos deparamos com
o inimigo, não estamos mais atacando, então não t subtrair de sua saúde agora se formos em frente
e cobrir esta caixa de ataque com nosso inimigo r aqui ataque você verá que as subtrações
voltam aqui atacam e se deparam com eles não há mais problemas em relação a isso então agora vamos em frente
e adicionamos o ataque para o jogador 2 aqui queremos ter certeza de que esta caixa de ataque acabou
nosso swing de espada, então vamos voltar ao nosso código e descobrir onde estamos criando o
jogador 2, que é nosso inimigo, queremos focar nessa propriedade da caixa de ataque, então nosso deslocamento para x
será em torno de 100 negativos, porque isso é vamos nos certificar de que mudamos isso pela largura,
salve isso e isso parece estar em um bom lugar em relação à sua posição x,
mas também queremos movê-lo um pouco para baixo, então vamos em frente e digamos que y vai
diminuir 50 pixels salve e atualize e agora eu gosto da aparência disso vamos em frente e estendê-lo
para que ele realmente atinja o final desta pequena barra branca vamos dizer que a largura
para isso deve ser a águia 2 150 salve e atualize isso e agora, já que estamos aumentando a largura
aqui, o de fset também precisa ser levado em consideração porque os objetos na tela são desenhados
no canto superior esquerdo e estamos tentando fazer isso ao contrário para esta caixa de ataque,
então vamos subtrair 150 aqui para nosso deslocamento e agora quase lá, precisamos adicionar cerca de 10 a 15
pixels a essa largura, o que significa que precisamos fazer isso aqui e largura, diremos isso,
mas também precisamos subtrair 165, então vamos em frente e salve isso e depois ataque você
verá quase lá vamos em frente e adicionar mais cinco pixels e eu acho que isso deve ser feito
para que nossa largura seja 170 e nosso deslocamento x também seja 170. então agora quando
salvarmos que isso praticamente chega ao fim e acho que é um bom local para dizer que é quando
devemos realmente acertar o jogador 1. Então, agora, se eu for em frente e passar por cima e passar por cima, nosso jogador
começará a atacar, você verá isso diminui com o tempo mas temos o mesmo problema que tivemos
com o jogador 1 você vai ver se eu atacar e o n basta encontrar o jogador 1 com esta caixa de ataque
sua saúde diminui de qualquer maneira, queremos ter certeza de evitar que faremos isso
dentro de nosso loop de animação da mesma maneira que fizemos para o jogador um, então queremos copiar este código
aqui, vá abaixo de nossa condicional, pois se realmente acertarmos o jogador um que está bem aqui e
colarmos nele, mas agora sabemos que estamos lidando com nosso inimigo e não com nosso jogador, então vamos
em frente e alternar todas as instâncias de jogador com inimigo que está atacando
, queremos ter certeza de que selecionamos o quadro correto no qual esse ataque deve atingir, para que possamos
sempre olhar dentro do kenji que ataca 1 e aqui vamos dizer bem, isso deve ser o
quadro dois, então kenji tem um pouco de vantagem porque seus ataques são muito mais rápidos
, basicamente, podemos dizer que o samurai mac será mais lento, mas o kenji mais poderoso
será mais rápido, mas mais fraco em relação ao dano, então queremos ter certeza dentro do índice. js que a
corrente do quadro é igual para 2 que é quando o ataque da espada inimiga está basicamente terminado, queremos
fazer isso aqui e também queremos adicionar isso e declaração nesta condicional para que
não subtraiamos a saúde do nosso jogador imediatamente, precisamos esperar no menos um quadro
adicionando isso e uma declaração que diz que a corrente do inimigo.frame deve ser igual a 2
antes de irmos em frente e subtrairmos da saúde do nosso jogador, então salvamos isso e atualizamos agora
se eu seguir em frente e atacar aqui e encontrar o jogador 1 nós não subtraímos da saúde deles, mas
se eu seguir em frente e mover esta caixa de ataque sobre eles, atacar isso é tudo que eu vou seguir em
frente e subtrair no quadro 2, então agora a última coisa que precisamos fazer é simplesmente
remova essas caixas para remover essas caixas, podemos ir para classes.js e tudo o que precisamos fazer aqui
é descobrir onde realmente as desenhamos, será this.c dot philrect podemos ir em frente
e dizer que é onde desenhe a caixa de ataque e então não precisamos desse código certo agora para
que possamos ir em frente e comentar salve a atualização e agora nossos ataques devem funcionar e subtrair conforme
necessário, mas sem mostrar essa caixa de ataque, então eu ataco com o jogador 1 aqui você
verá que subtrai e então quando eu atacar com jogador 2 que subtrai também, então estamos começando
a terminar este jogo de luta, mas usando ataques com sprites reais, então agora vamos em frente
e adicionar animações de recebimento de acertos como esses dois em vocês dois recebem animação de morte por acerto
mas queremos ir em frente e reagir sempre que nosso jogador ou o inimigo for atingido, então quando formos em frente
e atacarmos, deve haver algum tipo de reação aqui para o nosso inimigo, como vamos
implementar isso bem? comece por ir para onde estamos a criar o nosso inimigo
de modo que vai estar bem aqui na linha 81 para mim e eu sei que quero adicionar um novo sprite
para esta animação por isso vou para o fundo dos sprites à direita aqui e eu vou
chamar isso de take hit, então isso está acontecendo g para ser igual a um objeto e este objeto tem duas propriedades
image source e onde eu quero ir em frente e pegar essa imagem bem simplesmente dentro
do nosso diretório de imagem então img e então eu quero ir em frente e dizer que isso está referenciando kenji
e i se quiser acertar aqui vai ser slash take space hit com um png minúsculo h dot
então olhamos para dentro pegue hit aqui você vai ver que esta é uma animação de três quadros e é
apenas kenji reagindo a ser atingido indo para trás então, de volta ao index.js, queremos dizer que nosso
máximo de quadros, a quantidade máxima de quadros que teremos aqui será igual a 3, porque é
quantos quadros estamos dentro que são atingidos aqui. temos isso aqui dentro do nosso construtor inimigo
, precisamos entrar em classes.js e definir um caso para levar um golpe, então vou em
frente e copie este caso aqui, bem abaixo, cole em um caso de golpe com h maiúsculo e
então eu quero dizer se nossa imagem não é atualmente igual ao sprite de take hit e eu quero ter
certeza de que eu altero o ataque um em cada local onde ele está atualmente troque isso por take hit
, então vamos em frente e trocar essa imagem, altere seus quadros no máximo e defina a corrente do quadro
igual a zero então isso vai realmente nos dar uma opção para receber um hit e ativar essa
animação, mas onde realmente chamaríamos switch sprite para ativar take hit bem dentro do index.js
, queremos rolar para baixo até nosso loop de animação e exatamente onde estamos detectando a colisão
, sabemos que este é atualmente o local onde nosso inimigo é atingido, então podemos adicionar um comentário aqui que diz
e o inimigo é atingido, portanto, nesta declaração if, também queremos ir em frente e selecionar nosso inimigo,
vamos chamar um novo além disso, porque embora possamos escrever o código diretamente aqui
, às vezes é bom abstrair as coisas para tornar nosso código mais legível, então vamos dizer que o
ponto inimigo é atingido, então pegue-o aqui quando avançarmos e colidirmos a caixa de ataque com nosso inimigo
n ow para os inimigos irem em frente e levarem um golpe bem, vamos em frente e subtrair da
saúde do inimigo que já está acontecendo aqui, mas se quisermos ir em frente e simplificar
isso, podemos ir em frente e tirar a saúde do inimigo menos 20 cortar isso, vamos em
frente e colá-lo em um método take hit diretamente dentro de nossa classe de lutador, então vamos
para classes.js se estivermos rolando para cima logo abaixo da tag, vamos adicionar em um
agora podemos ir em frente e colar no ponto saúde menos igual a 20, mas não podemos mais referenciar o inimigo porque
isso realmente referenciou o objeto direto, em vez disso, precisamos referenciar a saúde deste lutador
para que funcione exatamente da mesma forma que nós temos agora quando vamos em frente e lançamos um ataque,
mas o que mais queremos fazer quando levamos um golpe, queremos ir em frente e mudar nosso sprite para
ser atingido, então você notará se formos em frente e salvarmos isso e atualizar e depois clicamos em kenji
aqui, mas na verdade não vamos volte para aquela animação de take it mesmo que definitivamente estejamos
chamando switch sprite para levar hit, por que
não estamos mostrando essa animação ?
animação ativa basicamente vamos fazer a mesma coisa que fizemos para criar ataques
, você notará quando eu pular no ar e dar crédito ao ataque quando avançar e criar um ataque
bem essa animação de ataque sempre vai porque estamos substituindo todas as outras animações
disponíveis para nós quando sofremos um golpe, também queremos substituir essas animações, então é exatamente isso
que vamos fazer, então, onde estamos substituindo essas animações, estará aqui dentro do
switch sprite, você verá esta estimativa aqui é na verdade representativa de substituir todas as
outras animações com a animação de ataque, então queremos fazer exatamente a mesma coisa não para quando
atacarmos, mas substituir quando o lutador for atingido, então se não estivermos atualmente atacando com
isto aqui podemos prosseguir para esta declaração if onde vamos dizer se a
imagem actual que está a ser apresentada é igual a esta imagem de sprites dot take it dot image e o que mais se este dot frames
actual for inferior aos frames associados com os sprites de take hit vamos conseguir que
com sprites dot dot take hit frames max -1 é basicamente a mesma coisa que temos aqui em cima estamos
apenas usando take hit em vez de ataque um vamos em frente e adicionamos isso if podemos ir em frente
e retornar basicamente o que isso significa é que se não estivermos atacando, mas estivermos sendo atingidos, não queremos
executar nenhuma das seguintes instruções switch case vamos seguir em frente e nos forçar
a retornar se estivermos atualmente na animação do kit de captura e só vamos nos permitir
seguir em frente se o quadro atual for maior que a quantidade máxima de quadros associados ao nosso
sprite de captura, se for esse o caso, podemos voltar para mudar para um sprite diferente, incluindo
voltar para uma animação como ocioso, então isso deve ser bom se vamos salvar isso e
atualizar aqui e tentarmos mover enquanto não podemos realmente mover nenhuma de nossas teclas
parece estar ouvindo, então vamos vá em frente e inspecione nosso elemento e vamos para o nosso console
e você verá que temos um erro bem ali que diz que não é possível ler as propriedades da
imagem de leitura indefinida, vamos clicar neste poço basicamente no código que acabamos de adicionar para a instrução if
não está sendo lida por que é que, embora tenhamos um sprite de take hit associado a kenji aqui
, não temos um sprite de take hit associado ao samurai mac aqui à esquerda, então
precisamos ter certeza de que adicionamos take hit e dois sprites especificamente para samurai mac então para fazer isso
vamos até index.js e descobrimos onde estamos criando nosso player que é basicamente samurai mac
ele vai estar bem aqui na linha 29 para mim e queremos ir em nosso objeto sprites vamos
adicionar um novo spri te para que possamos ir em frente e copiar uma dessas propriedades e, em seguida
, vamos colar em uma duplicata, mas não queremos criar um spray de ataque 1, mas
certifique-se de que isso seja escrito exatamente da mesma forma que estava dentro do nosso inimigo aqui embaixo
, então vamos rolar de volta para cima e dizer que nossa fonte de imagem para levar hit para samurai mac
vai estar em nossa pasta samurai mac que é ótima e queremos ir em frente e selecione ou
pegue a silhueta branca ou apenas pegue, vamos em frente e olhe para estes, se olharmos para o golpe,
você notará que o samurai mac retrocede um pouco quando é atingido, mas a
silhueta branca temos o samurai mac recebendo isso silhueta branca colocada em cima dele e eu realmente
preferiria esta versão simplesmente porque mostra melhor que ele foi atingido é como uma
animação oculta onde o jogador pisca uma vez que foi atingido apenas indica melhor que ele foi
atingido hit, então queremos ir em frente e usar esta versão de apenas um png normal,
então, para nossa fonte de imagem, vamos dizer que queremos fazer referência dentro de nossa pasta samurai mac
pegue espaço, aperte h maiúsculo neste, vamos adicionar um espaço e um traço e depois outro espaço
e depois silhueta branca e eu tenho problemas para soletrar isso, então eu vou precisar olhar para ele
silhueta ponto png então apenas certifique-se de que isso corresponda ao que você tem aqui e então precisamos
determinar quantos quadros temos aqui, então vimos que não tinha seis fotogramas mas sim quatro por isso
vamos em frente e guardá-lo e depois actualizar e agora se tentarmos mover podemos mover mais uma vez
se eu continuar e usar a nossa barra de espaço verá que agora temos essa
animação de reação no lugar para kenji vamos em frente e atacar o samurai mac com kenji em vez disso
você verá que temos um problema aqui com o samurai mac não reagindo
por que ele não está reagindo bem porque quando o samurai mac é atingido precisamos ativar esse
método take hit agora que não está acontecendo, então vamos g o adiante e faça isso acontecer,
vamos rolar para baixo de volta ao nosso loop de animação e continuaremos até encontrarmos nossa
detecção de colisão. É aqui que nosso inimigo é atingido, mas aqui acima desta instrução if é aqui
que nosso jogador é atingido, então sabemos que aqui dentro queremos chamar o jogador dot take hit que
irá subtrair automaticamente da saúde do nosso jogador, então não precisamos mais disso aqui
agora se salvarmos isso e atualizarmos com o kit take no lugar e atacamos o samurai mac você vai
ver agora temos aquela animação de hit no lugar mova-os um pouco para que possamos ver melhor
e isso parece muito legal por ser atacado tão bom que temos animações de reação para quando ambos
dos nossos personagens são atacados, então agora podemos marcar a animação de receber hit,
então agora vamos em frente e cuidar da animação de morte que deve ocorrer quando nossa
barra de saúde chegar a zero, então a primeira coisa que vamos fazer fazer para adicionar qualquer novo sprite é encontrar w aqui temos os
nossos construtores tanto para o nosso jogador como para o nosso inimigo vamos fazer isto em ambos os pontos logo no início
para não termos quaisquer erros à medida que avançamos então aqui em cima estou no 29 é aqui que estamos re-criando nosso
sprite de jogador eu quero entrar em nosso objeto de sprites e vou adicionar uma nova propriedade e isso
será chamado de morte, então isso será igual a uma fonte de imagem
qualquer quadro max eu vou pegar isso de pegar e colar na morte e eu quero dizer que
a fonte da imagem da nossa morte vai ser para o samurai mack simplesmente morrer com um d maiúsculo
então ao invés de pegar a silhueta branca vamos em frente e nos livrar disso
e dizer que estamos referenciando death dot png quantos quadros é a nossa morte vamos selecionar ele
vai ser um dois três quatro cinco seis quadros então vamos voltar ao índice. js
e mudar nossos frames max para seis agora podemos ir em frente e pegar este objeto de morte copiá-lo do
nosso player ir para dentro do kenji's s prites aqui e no final do hit adicione uma
vírgula e depois este novo objeto de morte, mas sabemos que não queremos a mesma morte para samurai mag,
queremos um que seja referenciado em nossa pasta kenji que será capital da morte d ponto png também
quantos quadros é isso vai ser um dois três quatro cinco seis sete parece tão de volta
no index.js podemos dizer que o máximo do nosso quadro é igual a sete para quando o kenji morrer agora sempre
que adicionarmos um novo sprite aqui, precisamos ir para classes.js e focar em nosso
método switch sprite, precisamos adicionar um novo caso, então vou copiar o caso de hit, colá-lo abaixo e
o caso da morte está acontecendo ir em frente e mudar nossa imagem para o sprite da morte em todos esses
locais e isso mudará o máximo do nosso quadro igual à quantidade máxima de quadros associados a
esta animação da morte, então quando devemos realmente mudar para um sprite da morte pode realmente
fazer isso sempre que formos em frente e levarmos um golpe depois de subtrair 20 da nossa saúde, podemos
ir em frente e dizer se esta saúde do ponto é menor ou igual a zero, o que significa que sabemos que estamos mortos
, bem, podemos ir em frente e chamar esse sprite de troca de ponto especificamente para o sprite da morte
, caso contrário, podemos vá em frente e troque nosso sprite para ser atingido, então vamos em frente e cole
isso dentro de nossa imagem else aqui agora semelhante a ser atingido e quando realmente lançarmos um ataque
, precisamos ter certeza de que nossa animação de morte não permitir que qualquer coisa o substitua, como resultado
, vamos entrar no sprite do switch e nenhuma dessas animações deve ser executada enquanto nossa
animação de morte estiver ativada, nunca poderemos voltar à vida a menos que atualizemos o jogo
, então aqui vamos dizer que se esta imagem de ponto é atualmente igual a esta
imagem de ponto morto de ponto morto, então vamos em frente e apenas retornar, não temos permissão para executar nenhum outro código, então
vamos salvar isso e atualizar vamos começar a bater em kenji aqui eventualmente quando h e
vai em frente e atinge um zero para sua saúde, você verá que ativamos essa animação de morte
agora está apenas funcionando repetidamente, porque mesmo quando atingimos o chão, nosso quadro é redefinido
de volta a zero quando ele é redefinido de volta a zero bem, ele apenas executa a animação, mesmo que a folha de sprite
esteja atualmente substituindo tudo, então realmente tudo o que precisamos agora é uma propriedade que declara nosso jogador
morto e se eles estiverem mortos bem, não vamos mais chamar o que animar quadros porque
é isso que é responsável para criar este tipo de movimento não queremos mais movimento
assim que eles atingirem o chão, então para nossos lutadores vamos adicionar uma nova propriedade chamada this
dot dead por padrão será igual a false e então o que podemos dizer é se este ponto
morto não for verdade, então não estamos mortos, então queremos continuar animando nossos quadros, então agora só
precisamos determinar o local em que definimos esse ponto morto igual a verdadeiro e isso
ficará inativo aqui dentro deste if declaração que acabamos de escrever, então vamos colocar isso em colchetes assim,
para que possamos escrever várias linhas de código dentro disso e queremos dizer se esse ponto frames atual é
igual a esse ponto sprites ponto morte ponto frames max -1 então nós 'll set this dot dead é igual a
true nosso lutador morreu oficialmente que triste, então vamos atualizar e então vamos em frente
e bater em kenji um pouco mais e quando você chegar a zero você verá que a animação da morte é ativada
ainda podemos nos mover um pouco, tudo bem por enquanto, mas vamos em frente e
testar se a animação de morte máxima do samurai está correta ou não, então vamos em frente
e bater nele e, eventualmente, quando ele atingir zero hit parece estar no local correto também, embora
ele possa se mover também, então a última coisa que faremos aqui para nossa animação de morte é garantir que
não possamos nos mover ou pular assim, mesmo que um de nossos lutadores esteja morto e podemos fazer isso dentro do
index.js especificamente na parte inferior do nosso r onde escrevemos nossos ouvintes de eventos para que, com a
tecla pressionada, possamos escrever uma instrução if que diga se nosso player não está morto, então precisamos prefaciar
isso com um ponto de exclamação, então queremos ser capazes de executar as seguintes instruções switch case
que ativam saltos e ataques de movimento do jogador, mas se nosso jogador estiver bem morto, o inimigo
ainda poderá pular e comemorar um pouco, então basicamente precisamos dividir
a instrução switch case aqui para que nossos casos para nosso inimigo estejam em um caso de switch separado,
então vou em frente e pegar essas últimas quatro instruções de caso e, em seguida, abaixo do switch,
adicionarei um novo e direi quando a tecla ponto do evento tiver os seguintes casos nos quais vou colar
então queremos que o inimigo seja capaz de atacar e se mover, então se nosso jogador não estiver morto, vamos
em frente e ativar esta opção aqui, mas se nosso inimigo não estiver morto prefácio por
um ponto de exclamação, então queremos ser capazes para chamar o seguinte switch case certo ele re também
vamos adicionar que em salvar volte para o nosso jogo e atualize e agora vamos em frente e espancar o kenji
trazê-lo de volta a zero não podemos mais mover o kenji quando estou pressionando qualquer uma das teclas de seta
e podemos testar isso com samurai mag também quando eu for em frente e trazê-lo de volta para zero
agora ele cai e eu realmente não posso me mover pressionando qualquer uma das teclas de seta mas eu ainda posso
me mover com kenji então com isso podemos ir em frente e marcar nossa animação de morte, então vamos seguir em
frente e trabalhar no design de interface e animação em seguida, então basicamente o que isso significa é que queremos
ir em frente e fazer isso aqui nossa barra de saúde e nosso cronômetro parecerem muito melhor fazer isso em nosso
jogo para fazer parecer que é parte disso, em vez de algo que é jogado lá, então a
primeira coisa que eu quero fazer é mudar este amarelo para vermelho porque isso vai representar a quantidade
de saúde que nós deixou meio que representa sangue, eu suponho, mas você normalmente
vê isso dentro da luta g games é quanto mais a barra de saúde desce mais vermelha fica,
então vamos em frente e fazer isso primeiro para fazer isso, vamos entrar em index.html e vamos
descobrir onde temos nosso jogador e nossa saúde inimiga, vamos em frente e comecemos com a
saúde do jogador primeiro, então sabemos que aqui temos uma cor de fundo amarela, esta é a nossa
barra de fundo, vamos em frente e mudamos isso para algo como atualização vermelha e então começamos a acertar o samurai
mac você' vamos ver que agora que é vermelho que é mais representativo da saúde que resta
, precisamos fazer a mesma coisa para a saúde de kenji também, então vamos rolar para baixo até
encontrarmos a saúde do inimigo e onde quer que tenhamos amarelo, ele está indo para estar bem aqui vamos mudar isso
para vermelho salve e atualize isso e agora quando chegarmos ao kenji que também é vermelho então está ótimo
mas agora eu meio que quero mudar essa cor azul para algo mais roxo só assim combina com
o roxo que temos dentro do nosso jogo, então se eu preciso de um bom lugar para escolher uma certa cor o que
eu gosto de fazer é abrir uma nova aba e procurar pela paleta de cores do tailwind então o tailwind
é um framework css mas com ele vem muitas paletas de cores ótimas que podemos usar dentro do nosso
jogo então este primeiro resultado aqui será tailwindcolor.com e se clicarmos
nele você verá que temos todas essas cores diferentes que podemos usar em nosso jogo
então eu meio que quero algo que seja arroxeado eu sou vamos para o índigo e vamos em frente
e escolha cerca de 400 eu vou clicar nele e o que isso faz é armazenar um código hexadecimal
na nossa área de transferência para onde temos um plano de fundo em azul para a saúde do inimigo vamos nos livrar disso
, cole-o e o código hexadecimal será 818 cf8, esta é apenas uma representação de código hexadecimal
dessa cor índigo, então se salvarmos isso, volte ao nosso jogo e atualize, você verá que agora
temos índigo barra de cores, acho que combina muito melhor com o nosso plano de fundo, batemos em kenji
, ainda tenho esse vermelho, então eu realmente gosto de onde isso está indo, vai tornar nosso azul
aqui nessa cor índigo também vamos copiar este código hexadecimal para ter certeza de que ainda o temos em nossa
área de transferência e depois encontrar onde temos um plano de fundo em azul especificamente para a saúde do nosso jogador e
estará bem aqui, podemos substituí-lo pelo código hexadecimal salvar e atualizar e isso
já está muito melhor agora o quadrado aqui ocupa muito espaço e eu não realmente
acho que faz sentido mantê-lo vermelho porque isso está realmente direcionando nossos olhos para que o cronômetro
seja importante, mas não é tão importante, não é a principal coisa que deveríamos estar olhando, então queremos
ir em frente e desviar a atenção do usuário disso, pode ir em frente e escurecer isso para algo como
preto ou cinza, vamos em frente e usar preto aqui, então vamos em frente e encontrar nosso cronômetro
e onde temos uma cor de fundo vermelha, vamos mudar isso para preto, então fazemos isso
salvar e atualizar e não w nossos olhos definitivamente não são atraídos por isso, vamos em frente e
reduzi-lo para não enfatizar ainda mais este local, vamos diminuir a altura
disso, vamos torná-lo em torno de 50 pixels e agora isso é ainda menos aparente, o que é ótimo, mas não
podemos ver nosso timer dentro dele porque o timer tem uma cor de texto preta também, então, em cima do
mesmo div, adicionaremos um estilo de cor, digamos que nossa cor deve ser igual a branco, então eu vou
atualizar que agora podemos ver nosso cronômetro e isso já está muito melhor do que tínhamos antes
, mas ainda podemos dar um passo adiante para realmente dar uma boa aparência, então acho que nossas barras de saúde
ficariam bem com alguns tipo de borda em torno deles a mesma coisa com nosso temporizador no meio, então se
quiséssemos ir em frente e adicionar uma borda, iríamos para a barra de saúde do jogador e encontraríamos este
div pai aqui, então vamos adicionar um estilo da borda e isso vai levar a largura da
borda que queremos dizer em torno de 4 pixels será que tipo de borda queremos usar
será sólida será tracejada nós quase sempre queremos usar uma borda sólida então
queremos ir em frente e escolher a cor da borda i' vou seguir em frente e fazer com que isto fique branco
para que salvemos e atualizemos temos uma borda branca ao redor desta barra mas você verá que meio que
jogou as coisas um pouco agora nossa barra vermelha está abaixo da nossa barra índigo aqui em cima nós queremos para garantir que
a barra índigo esteja sempre em cima dessa barra vermelha, então o que podemos fazer é que esse pai faça, estamos
atribuindo a ela uma altura de 30 pixels, mas não faz sentido fazer isso,
pois nosso div filho aqui já tem uma altura de 30 pixels este div pai sempre
será a altura de tudo o que estiver dentro dele, desde que não tenha uma posição absoluta
, então estamos dizendo que o div pai aqui deve seja a altura desta div porque
é a única div que não contém a posição absoluta, então vamos nos livrar da altura 30 aqui
salve e atualize e isso corrige automaticamente esse problema eu vou em frente e acertei o samurai mac ainda temos
o mesmo efeito tudo está ótimo então agora vamos em frente e adicionar uma borda ao nosso timer
também se quisermos adicionar o mesmo border podemos simplesmente copiar esse estilo, encontre nosso contêiner
para o nosso cronômetro, ele estará bem aqui, cole no mesmo estilo de borda, salve e atualize e
agora que também tem uma borda, vamos em frente e adicione uma borda para a barra de saúde do inimigo aqui
nosso a saúde do inimigo está bem aqui e queremos adicionar isso no div pai, então vamos adicioná-lo
aqui no final do nosso div pai de saúde do inimigo, vamos salvar e atualizar isso
e temos o mesmo problema aqui porque nosso div pai atualmente tem uma altura de 30 pixels
, vamos tornar nossa altura de divs pai dependente deste div aqui para que possamos nos livrar
da altura igual a 30 pixels salvando uma atualização e isso corrige isso também agora com nossas
bordas parece um pouco bobo para nós ter uma fronteira no lado direito aqui da nossa barra de saúde
quando já temos uma borda no lado esquerdo aqui do nosso timer em vez de ter duas
bordas se tocando vamos em frente e certifique-se de que temos apenas uma borda lá
então para fazer isso nós vamos seguir em frente e encontrar playerhealth exatamente onde adicionamos essa borda
, agora não queremos apenas dizer que queremos uma borda nos quatro lados e é isso que a
propriedade border faz, diz adicionar uma borda no canto superior esquerdo e lados direito deste recipiente em vez disso
o que vamos fazer é dizer que queremos uma borda no topo vou duplicar este estilo
digamos que também quero uma borda à esquerda vou duplicar isso cole-o e então diga que eu quero uma
borda na parte inferior também, então agora não temos uma propriedade border right aqui e isso é perfeito
porque se atualizarmos agora temos apenas uma borda aqui no lado esquerdo do nosso temporizador,
parece um muito melhor, vamos querer fazer a mesma coisa para a barra de saúde do inimigo aqui
, então vamos encontrar nossa barra de saúde inimiga ficará aqui embaixo e atualmente temos uma borda definida
para todos os quatro lados para ser quatro pixels sólidos e brancos digamos que queremos que isso seja aplicado apenas na
borda superior vou copiar isso aqui adicionar em um ponto e vírgula, cole-o novamente, diga
agora que eu quero isso na borda inferior também e, finalmente, quero adicionar mais uma borda no
lado direito, então, quando eu adicionar a borda direita, salve e atualize e agora isso corrige esse problema aqui
então isso já está ficando ótimo mais uma coisa que eu gostaria de mudar aqui é
a fonte deste texto esta é apenas a fonte padrão que vem com seu computador no momento
mas eu acho que ficaria muito melhor se nós realmente usássemos alguns tipo de texto de 8 bits, então como podemos
realmente ir em frente e mudar isso para algum tipo de fonte de 8 bits, bem, se eu quiser algum tipo de
fonte gratuita para usar em projetos pessoais ou comerciais, gosto de pesquisar a fonte do google
, vamos seguir em frente e clicar no primeiro resultado aqui mesmo em fo nts.google.com
então isso vai nos dar uma lista de fontes gratuitas que podemos usar em nosso projeto
e a fonte que vamos querer usar é chamada de pressione start então se eu digitar isso aqui vai
filtrar as fontes e esta é a que queremos você verá que esta é uma boa fonte de 8 bits que
seria perfeita para o nosso jogo então vamos em frente e clicar nisso isso
nos levará para dentro dessa fonte direta o que queremos fazer é clicar em selecionar este estilo aqui isso vai
abrir uma guia no lado direito e o que queremos fazer é copiar essas tags de link aqui
se eu prosseguir e copiar tudo isso com o comando c head de volta ao nosso projeto e, em seguida, dentro de
index.html, role até o canto superior direito acima da nossa tag head. Eu quero ir em frente e colá-los
e você verá que isso consiste em três tags de link que fazem referência às fontes do Google e, especificamente
, à nossa fonte press start então agora de volta às fontes do google, se rolarmos um pouco mais para baixo nesta
barra lateral direita, eles nos darão alguns cs s em relação a como podemos usar essa fonte, então, para usar
isso, podemos copiar esta linha aqui, volte para index.html e diga quais elementos queremos
usar como fonte em nosso css, bem sabemos que estamos aqui selecionar todos os elementos com este asterisco
para que possamos seguir em frente e colar na família de fontes é igual a pressionar start 2p e agora isso
funcionará porque estamos realmente puxando a fonte antes de chamarmos esse estilo,
então se salvarmos isso e então volte para o nosso jogo e atualize agora temos aquela fonte muito legal
no lugar onde temos aquele estilo de 8 bits que você pode ver mesmo quando nos livramos do kenji ou samurai mac
temos essa fonte no lugar tão bom agora acho que a última coisa que eu faria
para terminar este jogo seria adicionar um pouco de contraste entre nossos jogadores no fundo
porque mesmo que tenhamos uma boa quantidade de contraste, ainda podemos ver kenji na frente da
loja. não seria mais fácil vê-lo se adicionarmos uma sobreposição branca atrás de kenji e samurai
mac e no topo de nossa camada de plano de fundo para que possamos realmente ver nossos jogadores e não ter nenhum
problema em relação a onde o kenji ou samurai mac está em qualquer momento, então para adicionar essa camada,
não precisamos adicionar nenhuma image podemos fazer isso diretamente no index.js vamos
rolar até o nosso loop de animação vamos encontrar onde estamos atualmente desenhando nossos
jogadores vai estar bem aqui para nosso inimigo para nosso jogador para nossa loja e para o nosso plano de fundo
, portanto, se dissermos logo após atualizar nossa loja, queremos chamar c dot fill rect especifique que queremos isso
na coordenada x de zero a coordenada y é zero e queremos que isso preencha toda a nossa tela
com uma largura de tela e uma altura de tela como nosso último argumento e logo antes disso declaramos ac dot
fill style igual a rgba e especificamos que nosso vermelho será 255, nosso verde será 255
e que nosso azul será 255. este último valor aqui será o valor alfa,
então se usarmos 255 para todas as três colunas ous aqui vermelho verde e azul que vai nos dar uma cor
branca é assim que as cores funcionam se misturarmos essas três com força total vai
nos dar uma cor branca mas para este último valor de alfa isso vai determinar a opacidade
deste branco, então, se reduzirmos isso para algo como o ponto 1, salve e atualize, você
verá que nosso plano de fundo desapareceu um pouco com essa sobreposição branca em cima, fica ainda
mais aparente se aumentarmos este valor alfa para algo como 0,7 salve e atualize agora nós realmente
temos essa opacidade branca no lugar e realmente vemos nossos jogadores, mas parece meio bobo
neste momento ser tão drástico, então acho que um bom meio para este jogo está indo para ser o ponto 15,
salve e atualize isso, então agora temos uma sobreposição branca, mas ajuda nosso jogador a contrastar com
coisas como a loja um pouco melhor do que era antes, então acho que isso é uma boa adição ao
nosso jogo para realmente garantir que podemos ver nossos jogadores sobrepostos no topo deste fundo
com cores que podem não contrastar tão bem juntas agora a última coisa que quero fazer aqui
para adicionar um pouco mais de toque ao jogo é que quando o samurai mac ou kenji atacam um ao outro quero que
esta barra de saúde seja animada para baixo em vez de ser tão drástico e repentino, então para fazer
isso animar, vamos fazer mais uma pesquisa no google e esta será uma pesquisa no google por
dsap cdn, então gsap é uma biblioteca de animação, é praticamente o ideal para qualquer projeto na web
e queremos ir em frente e clicar em cdnjs.com isso está praticamente sempre disponível para nós e um cdn é
apenas um link que podemos pegar da internet e inserir diretamente essa biblioteca em nosso jogo
é super fácil de fazer e é por isso que estamos fazendo isso, então queremos ter certeza de que nossa versão
aqui é a 3.9.1, vamos pegar este primeiro link clicando na tag de cópia de script aqui
, então clicaremos nela e, se queremos importar isso, vamos para index.html
não queremos inserir rt isso dentro de nossa tag head porque normalmente os scripts vão na parte inferior
do seu arquivo para que possamos dizer logo acima de nossos scripts personalizados que queremos colar naquele script que copiamos
e, ao fazer isso, vamos importar gsap em nosso projeto para faça uso do gsap, queremos descobrir
onde estamos realmente diminuindo essa barra de integridade aqui e será dentro do index.js
, onde estamos selecionando um elemento específico, então você verá que é aqui que estamos selecionando isso com
document. seletor de consulta para a saúde do nosso inimigo, não vamos diminuir a saúde do nosso inimigo dessa maneira,
mas sim da maneira gsap, portanto, certifique-se de ter index.html salvo com esse novo arquivo gsat inserido
e, uma vez salvo e puxado, você pode agora referencie-o com gsap e use um método como dois
para que o primeiro argumento para dois seja o elemento que você deseja animar qual é o elemento
que queremos animar o que será a saúde do inimigo a mesma coisa que temos aqui
o segundo argumento em usap.2 vai ser o que fazer você realmente quer animar bem, queremos
animar a largura, então vamos adicionar uma propriedade de largura aqui e para que valor queremos
animar isso para melhorar a saúde do nosso novo inimigo com um sinal de porcentagem para que possamos copiar isso cole
-o em gsab.2 e agora podemos nos livrar deste document.queryselector que define nossa largura vamos
deletar esse save e depois atualizar e então quando clicarmos em kenji devemos ver essa animação para baixo
agora que definitivamente anima para baixo é muito mais suave do que aquela animação de desenho que
tínhamos antes, mas tudo o que precisamos fazer agora é garantir que ela ocorra sempre que atingirmos o samurai mac também
, podemos simplesmente copiar gsap.2 e descobrir onde estamos selecionando a saúde do jogador
. aqui vamos colar o que acabamos de copiar e depois trocar a saúde do inimigo
aqui pela saúde do jogador e agora podemos ir em frente e nos livrar deste document.queryselector
a última coisa que queremos fazer é ter certeza de que não está referenciando nosso inimigo saúde,
mas sim repetir nossa saúde, salve e atualize isso e agora quando atingimos o samurai mac
que anima para baixo também é realmente tão simples o que usamos algo como gsap
, então acho que com isso temos um jogo completo no qual temos dois personagens que podem pular,
atacar uns aos outros e depois reduzir suas barras de saúde a zero e, eventualmente, quando um chegar a zero
, temos um vencedor, o primeiro jogador não pode vencer, ainda podemos nos mover e então podemos iniciar
um novo jogo atualizando para levar isso para o no próximo nível, você provavelmente gostaria de ter mais personagens,
você provavelmente deseja um botão de reinício, mas acho que esta é uma versão base muito boa deste jogo
para mostrar exatamente como um lutador trabalharia com animações e colisões de caixas de ataque, então
com isso nós ' vamos poder verificar o design da interface e a animação, então a última
coisa que vamos fazer é enviar nosso projeto ao vivo para a web para que você e seus amigos possam
reproduzi-lo ao vivo, então como eu faria isso enquanto nós 'ré vamos seguir em frente e usar uma plataforma
chamada nutlify simplesmente porque podemos empurrá-la para a web gratuitamente em um de seus
URLs exclusivos, então para começar a fazer isso, precisamos saber um pouco sobre o github, então eu recomendo assistir
algum tipo de vídeo básico do github, mas eu ainda vou orientá-lo por todo o processo
, então precisamos ir em frente e criar um repositório git para fazer isso, vamos para o github.com
e quando você estiver aqui, quiser ter certeza que você tem uma conta e que você está logado
assim que você logar você será redirecionado para um painel como este você pode
ir em frente e clicar em novo para criar um novo repositório que é basicamente um novo pasta na qual o seu
jogo existe, ele será armazenado no github na web, então quando você estiver aqui, você deseja
criar um nome de repositório, sabemos que nosso jogo é chamado de Fighting Bash Game, não precisamos
fazer mais nada em relação à descrição, podemos tornar este um repositório privado, o que significa que ninguém
pode ver nosso código s o vai fazer isso e então se rolarmos para baixo queremos ter certeza de que podemos
criar um repositório e às vezes só precisamos ter certeza de que selecionamos novamente isso que o github sabe
sim, isso está disponível claro que está e então podemos vá em frente e clique em criar repositório para que
vá em frente e crie o local em que queremos armazenar nosso jogo online e agora o que
precisamos fazer é ativar alguns comandos dentro do nosso terminal, então vou copiar essas linhas corretamente
aqui e então eu quero abrir meu terminal no mac, então se você é um usuário do Windows, você vai
abrir o powershell e você deve ser apresentado a algo semelhante ao que temos agora
, agora temos um rabisco que apenas significa que estamos dentro do nosso directório pessoal no nosso computador
e estaéapenas uma representação de um para um do nosso localizador que iráver aqui se eu listar
o conteúdo do directório squiggly ou home o conteúdo deste directório é exactamente o mesmo como
o conteúdo dentro do meu diretório inicial com hin finder essas pastas aqui combinam com as pastas
listadas dentro deste diretório, então queremos alterar nosso diretório no terminal para onde temos
nosso jogo e podemos fazer isso facilmente, queremos procurar nosso jogo dentro do
finder ir para a web e encontrar o jogo de luta aqui, então, quando encontrarmos esse diretório
, queremos digitar cd em nosso terminal, o que significa alterar o diretório e, em seguida, o que podemos fazer é arrastar
essa pasta em cima desse cd em nosso terminal e isso é onde nosso jogo está localizado atualmente
, então, se entrarmos nisso agora, estamos atualmente em nosso jogo de luta, então agora o que você gostaria de
fazer é colar todo esse código e pressionar enter e ele poderá pedir alguns prompts, como o que
é o seu nome de usuário do github e qual é a sua senha, se você acabou de configurar isso, vá em frente e digite
-os, eu prometo que é seguro e vai em frente e empurrar isso para o seu repositório git, a razão pela qual
eu não estou inserindo isso é porque eu já tinha um git rodando dentro nosso jogo para fins de tutorial,
então se você já teve que rodar dentro do seu jogo, você só quer selecionar esses outros comandos
, então eu vou em frente e pegue-os e cole-os e isso vá em frente e envie
tudo para o github assim que terminar de rodar, posso voltar ao github e atualizar
e você verá que nosso jogo foi oficialmente carregado no github e isso é tudo
o que precisamos fazer para começar a colocar nosso jogo ao vivo na web, então, uma vez que esteja pronto lugar queremos
abrir uma nova aba e então vamos para netlify.com então nullify vai hospedar nosso jogo
e se você é novo você vai querer se inscrever é totalmente grátis eu já tenho uma conta então
eu vou entrar vou logar com minha conta github então isso vai me levar para
minha equipe que é reserva e essa é praticamente minha empresa na qual eu gerencio clientes eu vou para
ir em frente e empurrar este site para isso também, vou para a guia de sites e, quando
estiver aqui, quero ir para adicionar um novo site e vou importar de um projeto existente,
portanto, se você já tem ou não uma equipe, você deve eventualmente chegar a esta tela
e desejar ir em frente e se conectar ao seu git provedor nosso provedor git
será o github, então selecionaremos isso e agora, se ele pedir autorização
, se você não for redirecionado automaticamente de volta, poderá simplesmente sair desta guia e verá que agora
estamos atualmente autorizado, então autorizei todos os meus repositórios a estarem disponíveis no netlify, então vou
em frente e procurar meus repositórios especificamente para o jogo de luta, você verá lá
, queremos ir em frente e clicar nisso e então isso vai nos pedir algumas configurações para
configurar e implantar isso, então o proprietário será o nome da nossa equipe que está reservado, tudo
bem qual branch queremos implantar bem, temos apenas um branch associado ao nosso projeto que
é o principal, você não precisa se preocupar com isso também vá em frente e selecione main aqui
e então ele pedirá as configurações de compilação, então se você estiver usando um gerador de sites como veet ou
webpack ou algo para construir seu projeto, então você irá em frente e especificará onde está o
diretório de saída aqui não estamos realmente usando isso então não precisamos fazer nada aqui
não precisamos de um diretório base não precisamos de um comando de compilação não precisamos de um diretório de publicação
estamos apenas indo para acessar o site deploy com tudo o que vai começar a implantar nosso site a
partir do github, então sempre que você enviar as alterações para o github, o nullify irá anotar essas
alterações e atualizar automaticamente seu site em sua plataforma, portanto, após cerca de um minuto ou dois,
se isso não é atualizado automaticamente você sempre pode atualizar com o comando r você vai
ver assim que eu atualizar enquanto nosso site já foi implantado e você pode ver uma prévia
dele aqui tão perfeito então este é o url que eles nos deram vamos seguir em frente e clicar no em
e agora nosso site está ativo na web nesse url exato e nosso jogo funciona exatamente como
antes, porque fizemos tudo com o github mantendo nosso código exatamente o mesmo
, então isso é praticamente tudo o que precisamos fazer para obter isso ao vivo na web, mais uma coisa que você pode fazer
para melhorar um pouco isso é alterar este domínio aqui, então, se formos para as configurações de domínio,
teremos a capacidade de adicionar um domínio personalizado e um domínio personalizado é algo como chriscourses.com,
que é o domínio raiz, se você não quiser usar nullify.app, vá aqui e adicione um
domínio personalizado, mas para manter isso o mais simples possível, vamos seguir em frente e alterar o
nome do subdomínio aqui estou indo para opções e depois editar o nome do site, agora podemos
editar isso para algo que faça mais sentido, como o jogo de luta do chris course, obviamente, isso é
muito mais fácil de ler do que qualquer bobagem que eles colocam lá por padrão, então agora posso salvar isso
e agora quando eu visito o jogo de luta de chris corso no netlify.app eu tenho um jogo no qual posso
jogar ao vivo na web de graça, então finalmente isso nos permitirá marcar a
transmissão ao vivo, então será isso para este pessoal e espero vê-lo no próximo um
você