Como criar um jogo SIMPLES usando JavaScript e HTML | JavaScript para iniciantes - Tutorial

e fala pessoal no vídeo a gente vai criar esse joguinho aqui utilizando apenas HTML CSS e JavaScript tá um joguinho bem interessante bem simples Até a gente tem um Mário aqui a gente vai pulando esse a gente ir junto lá ele bate aqui e perde Beleza espero que vocês gostem e vamos pro vídeo eu já tô aqui com meu vs coisa aberto e aqui na parte do projeto a gente tem um pasto SSS com arquivo estará acesse uma parte de imagens com algumas imagens que a gente vai utilizar uma parte TJS com arquivo script.js que

por enquanto ainda tá vazio deve confiar gente tem aqui onde é que se ponto HTML apenas com a estrutura básica do HTML eu já importei aqui o nosso CSS que o nosso script pronto JS para a gente começar vamos criar aqui uma div com a classe game board vai ser basicamente dentro dessa dívida que o nosso jogo vai rodar beleza e agora vamos lá no nosso Stephanie sucesso que mexer um pouco nosso dia antes de tudo aqui vamos colocar um reset básico no nosso CSS então margem Zé Eu perdi 10 e Box size border-box agora

a gente vai acessar aqui a nossa dívida e definir algumas propriedades para ela beleza então game God só pra gente poder visualizar melhor que vai acontecer aqui mais para frente Vamos definir ela com o wi-fi de oitenta por cento da tela vezes e aproveitar que já colocar um Raid de 500 fixo para que a gente consegue ver aqui na nossa tela o espaço que ela tava Vamos colocar um bordo de um pixel Solid 2 3 a mesa tá aqui eu vou centralizar e se devia colocar 10 alto e beleza tá aqui agora a gente vai

voltar lá na nossa HTML e coloca dentro do nosso game bojo Vamos colocar a imagem do tubo então vocês aqui é a minha parte de imagens e vou pegar aqui o pai vai ser só uma imagem mesmo então eu vou colocar aqui uma classe Parque para a gente poder mexer lá no CSS Beleza então vamos voltar lá nossos essa que mexer um pouco aqui no grupo Tá eu vou Acesso aqui a classe pai vi primeiro de tudo a gente precisa que ele fique aqui embaixo né que não na base do nosso quadro e como a

gente vai trabalhar com várias imagens Independentes né aí eu vou colocar todas composition Absolut para que nenhuma interferir a né no comportamento da outra beleza como eu vou usar um position Absolute aqui nas imagens eu quero que elas respeitem a delimitação aqui do nosso quadro eu vou aqui no meu game Borges e colocava composition relativo tá agora a gente pode ver aqui no parque e colocar um boto 10 que ele vai ficar fixo aqui embaixo Mas ele ainda tá muito grande então vamos colocar um índice de 80 fixas e beleza o que a gente precisa

fazer agora é com que o nosso tubo fique andando aqui na tela ele vem entre nas entre no nosso quadro pela direita atravessa aqui e saia pela esquerda e fique nisso infinitamente Beleza então tem algumas maneiras da gente conseguir fazer isso mas a gente vai fazer aqui mexendo na propriedade White o que que acontece o coloca a propriedade height 0 ele fica ali na direita quando eu coloco 50 Picos ele desloca 50 pixels da direita e à medida que eu vou aumentando aqui a propriedade rite ele vai se deslocando para a esquerda Beleza então vai

ser basicamente isso que a gente vai animar a gente vai começar a nossa animação com Arte 0 até o final do nosso game board né no caso a gente vai colocar sem por cento e aí ele vai ocupar tudo e percebam que ele até saiu aqui do nosso quadro né e é justamente isso que a gente precisa na gente precisa que ele vai dizaro e aqui do começo da tela e vai até 100 porcento até sair da tela né mas quando ele sair da tela a gente não quer que ele continue aparecendo aqui né então

a gente pode vir aqui no nosso game bojo e colocar um lugar flor Líder para tudo que sair aqui das delimitações do quadro não apareceu mais na tela então beleza vou colocar que um valor para gente poder ver eu vou deixar a zero ele vai ficar aqui agora a gente precisa criar nossa animação mesmo tudo nome definir aqui nosso keyframes então que frames e aqui a gente coloca o nome para nossa animação gosta mais do pai vai-me mexa a gente precisa definir Aonde a animação vai começar E aonde ela vai terminar o que é aquilo

que a gente já tinha definido aqui que ela vai começar com o Haiti zero e vai terminar com arte de 100 porcento que ele vai começar aqui vai terminar aqui né então é só colocar aquele vai começar com um raid0 e vai terminar com o leite de 100 porcento Beleza agora a gente só precisa usar e essa animação aqui a gente não vai precisar definir um like aqui então como tirar aqui por enquanto e agora a gente precisou usar essa animação aqui que a gente definiu né então vou colocar aqui a propriedade Animation agora a

gente coloca o nome da nossa animação no caso Type any' mexa e a gente precisa colocar aqui também uma duração para essa animação vou colocar de dois segundos Então vamos ver que que vai acontecer eu vou salvar percebo que já aconteceu ele vem aqui Oi Sara tela e acaba animação a gente não quer que acontecer gente como é que fica infinitamente né então eu vou colocar aqui e Infinity e quando salvo lá ele vai sai e comece de novo é mas ainda mais exatamente isso que a gente quer perceber que ele vem aqui ele dá

uma acelerada depois vai desacelerando né a gente não quer se a gente quer que ele vinha constante aqui o time dessa animação seja linear da gente vem aqui e coloca linear O Mover agora beleza tá aquele passando Vai começa de novo ele sai da tela mas percebe que aqui ele tipo aparece do nada ele não vem aqui da tela ele suja que do nada então para consertar isso a gente pode definir aqui ó eu vou parar aqui um pouco essa animação por exemplo se a gente coloca um Light zero ele começa da que Mas é

interessante que ele não comece já daqui não suja aqui é interessante que ele esteja fora do nosso quadro e venha entrando na está a gente pode definir um rite negativo aqui com o mesmo tamanho da largura dele então se a gente coloca aqui por exemplo menos 20 fixos ele vai saindo um pouco aqui na tela Então se a gente colocar exatamente o tamanho da largura dele ele é completamente da tela então ele vai começar fora da tela vai entrar e vai sair da tela Então a nossa animação ficaria melhor se ele ao invés de começar

do zero ele começasse de - 80 PSI então eu vou colocar aqui - 80 PSI vou tirar essa daqui e vou rodar em uma ação de novo vamos ver o que que vai acontecer Oi tá lá Ele entrou na tela e saiu da tela agora ficou bem legal e agora vamos voltar lá no nosso HTML e colocar a imagem do Mario que gosta essa minha pasta de imagens e pega aqui a imagem do mar quer um GIF animado a gente vai colocar uma classe Mário beleza seus salvo aqui em cima e agora a gente vai

lá no nosso sucesso de novo e vamos dar uma estilizada aqui no meio então acessar que a classe Mário tá primeiro ele tá muito grande então eu vou colocar uma disso aqui e 150 pixels Olá beleza já ficou melhor e agora claro ele precisa ficar lá embaixo né E como a gente havia conversado vou a gente vai usar todas as imagens que se composição Absolut para que nenhuma interfiram no comportamento da Hospital Vou colocar aqui position Absolute também no mar e a gente pode usar também o botão 0 o mar fica aqui embaixo Beleza já

ficou bem legal agora a gente vai criar uma animação para fazer o Mário pular Beleza o que que vai acontecer aqui do mesmo jeito que a gente já animou a propriedade rite do tubo para ele vim deslocando a gente pode animar propriedade botam do mar o que que acontece a gente colocou a propriedade bota 10 e ele ficou colado aqui em baixo mas por exemplo se a gente coloca sem fixos ele sobe Então a nossa animação vai ser basicamente isso vai ser uma animação que vai começar do bota 10 ela vai subir há mais ou

menos uns 180 pixels depois ele vai cair de novo para 0 Ah beleza então Vamos definir essa animação aqui vou colocar aqui embaixo Vamos definir o que frames vou colocar o nome de Mário na verdade Jump animação de pulo e aqui a gente vai escrever um pouco diferente né porque a gente tem três passos intermediários ele vai começar ele vai ter um meio que vai ter o fim o fim da animação no início o botão vai cesaro no meio bota um vai ser o bico do Pulo Então vai ser um 180 pixels E no fim

ele vai voltar para 0 Beleza então a gente vai ter que escrever essa estrutura aqui na nossa animação como é que a gente pode fazer isso diferente aqui da animação do pai porque a gente definiu apenas onde começa e onde termina a que a gente pode escrever de outra forma também que é usando porcentagem tá então quando tiver em zero por cento animação não seja no começo tu vai fazer alguma coisa no nosso caso o batom vai ser zero né Agora quando ele tiver no meio da animação Ou seja quando tivesse cinquenta por cento da

animação o botão vai ser 180 pixels e quando ele terminar animação ou seja sem por cento da animação quando ela concluir o botão vai voltar para zero agora vamos usar essa animação aqui no mar para ver o que que acontece ali mexa e vai ser Jump animação de Puro para definir um tempo aqui vamos colocar quentes MS 500 milissegundos enquanto a isso vamos ver o que aconteceu ou salvar o Mário pulou quando eu salvo o recarga a página que animação acontece mesmo a gente pode melhorar isso um pouco que que a gente pode fazer eu

quero que quando eu disse para essa animação ele pule demora um pouquinho no ar depois cai né que faça uma sensação de desaceleração e cinco pulo demora um pouquinho em cima e depois cai que a gente pode fazer a gente pode colocar o que mais alguns pontos intermediários por exemplo quarenta por cento da animação ele vai permanecer com 180 pixels lá não boto e depois mais um pouco terminar dinheiro aqui sessenta por cento da animação ele vai ficar também com 180 Picos então ele vai de 0 a 40 aí de 40 50 ele fica igual

de 50/60 ele fica igual e depois de 60 a 100 ele vai caindo Então vamos ver aqui seu sal ele e ele demora mais um pouquinho aqui em cima e depois ele cai Beleza agora a gente pode definir também vamos colocar aqui Infinity para gente ver pulando aqui a gente pode mudar um pouco time das animações de pode colocar easy out naquele ele vai pular se eternamente e depois vai cair pouco mais suave beleza Só que essa animação Primeiro ela não vai ser infinita a gente tira aqui mas ela só vai acontecer quando a gente

quiser que o Mário pula Então a gente vai criar um novo Cola essa aqui para ela cresce diante e a gente vai colocar essa animação as vez de ficar na classe do mar vai ficar nessa classe tempo e quando a gente quiser fazer com que o Mário fully a gente vai na imagem do Mário e coloca que a classe que te amo ah E aí ele pula vai ser basicamente essa lógica que a gente vai usar quando a gente quiser que o Mário pule a gente adiciona a classe Beleza então vamos lá no nosso inscrito

JS criar que a lógica para fazer o Marco lá no caso aqui eu vou colocar para ele pular quando a gente pressionar qualquer tecla do teclado eu posso acessar que o meu document e adicionar um evento delícia né um escutador de eventos que a gente vai colocar o evento de que dão Ou seja quando pressionar a tecla né quando a tecla baixar no teclado a gente vai executar uma função EA função vai se a função de ama né Beleza então a gente volta aqui e agora a gente vai escrever essa função então com o shampoo

e como havia comentado quando a gente quiser Camaro pule a gente vai adicionar essa classe aqui na imagem do Mário né então antes de tudo a gente precisa pegar aqui o elemento né da imagem do mato eu vou criar uma fonte Mário a gente vai acessar o documento e acessar que o método queres selector e aqui a gente passa uns o processo né então como a gente quer a classe Mário ele exatamente como tá aqui a gente passa exatamente como tá lá no CSS a conhece. Mário Beleza então a gente já tem aqui a imagem

do Mario então a gente só precisa adicionar a classe nessa imagem O que que a gente vai fazer para pegar aqui uma área acessar que eu classlist e acessar um método AD para adicionar uma nova classe que a gente vai adicionar a classe de um quê que foi aquela classe que a gente colocou animação lá no CSS Beleza então o que é que vai acontecer aqui quando eu peço não qualquer tecla do teclado ele vai Executar a função de ap e a função de água para adicionar classe de Alpino mar vamos ver o que que

vai acontecer impressiona quer um tecla ele pulou perfeito mas eu vou apertar de novo Oi e ele não falou mais porque porque a classe já tá aqui né ele já tem a classe de pular e Animação já aconteceu então acabou então o que que eu preciso fazer eu preciso remover essa classe que me puder adicionar ela de novo a nossa animação de pulo ela tem 500 milissegundos e tal preciso dar esse tempo para ela acontecer e depois eu removo essa classe o que a gente vai fazer aqui eu vou criar um set time-out o set

time-out função que recebe aqui dois paramos A primeira é uma função e vai fazer alguma coisa e aqui é um tempo ele vai esperar esse tempo e depois vai executar essa função aqui o tempo é o tempo da nossa animação aqui de 500 milissegundos então passa aqui 500 ele vai fazer alguma coisa eu posso passar aqui uma função anônimo Oi beleza e o que ele vai fazer aqui é remover essa classe da imagem do Mario tá gente pode só copiar aqui ao invés de usar o método a gente usar um método remold então que é

que vai acontecer a gente vai pressionar a tecla ele vai disparar função de Amparo vai adicionar a classe D Amp animação vai acontecer e quando a animação terminar a gente vai remover a classe para gente poder acionar novamente sempre que a gente quiser então vou salvar aqui vamos ver o que é que vai acontecer vou por lá funcionou de novo e Fechou tá funcionando agora a gente já consegue ficar pulando aqui sempre que a gente quiser a beleza pessoal então a gente precisa criar aqui agora uma lógica para quando a gente não pular e bater

aqui no tubo perder né acabar o jogo como é que a gente pode fazer isso vamos lá Primeiro vou pausar que a animação do parque e a gente vai ver aqui a gente vai definir Primeiro qual a distância que o pai tem tem que percorrer até chegar aqui no meio às vezes o que que vai acontecer por exemplo seu aumenta que o meu left do PPI para sem fios por exemplo Eu percebo que ele já tá aqui se eu coloco um 120 ele encostou aqui no mar Então vai ser exatamente isso que a gente vai

usar eu quero que quando o deslocamento esquerdo aqui do pai foi de 120 Picos essa distância que foi o 120 Picos eu quero que o jogo acabe-se O Mário não tiver pro lado Beleza então o que é que tá acontecendo aqui à medida que o deslocamento da direita aumenta o da esquerda vai diminuindo certo então eu posso usar o tamanho do deslocamento da esquerda aqui para fazer uma verificação para ver se o tubo já chegou nesse ponto aqui o que a gente viu que a 120 Pixel e agora a gente vai implementar essa lógico beleza

primeiro de tudo a gente precisa ter um loop rodando aqui que vai ser o look do nosso jogo que vai estar todo momento verificamos a gente perdeu ou se ainda não perdeu Beleza então a gente vai criar um loop eu vou salvar esse look uma referência desse look dentro de uma constante ele vai ser um intervalo então com sete intervalos e a fórmula do Set time-out a gente passa aqui uma função fazer alguma coisa e um tempo que vai ser um intervalo de tempo que essa função vai ficar sendo executado eu vou passar aqui de

10 mil e segundos beleza vamos lá passar uma função posso passar também uma função anônima aqui direto e a gente vai fazer essa verificação deslocamento aqui esquerdo né deslocamento esquerdo do tubo for menor ou igual a 120 quer dizer que o tubo já chegou aqui então a gente perde primeiramente a isso depois a gente vai planeta mais ainda lógico primeiro a gente precisa pegar esse valor aqui na esquerda como é que a gente pode fazer eu vou criar uma conste chamada five position que vai ser a posição aqui do nosso tubo mas para a gente

as as informações que preciso pegar esse elemento aqui no nosso lado scripts da mesma forma que a gente fez com Mário a gente pode pegar aqui uma const o parque e os hackers electon parte aqui para pegar para pegar a imagem do Tour Então a gente vai acessar essa imagem aqui a propriedade que a gente vai acessar é justamente o deslocamento esquerdo né então off-set left Beleza então deslocamento do esquerdo aqui da nossa imagem pai então eu vou dar um console log aqui para gente ver o que é que tá acontecendo vou abrir aqui eu

me console e tá lá ele tá aprontando 120 várias e várias e várias vezes aqui porque 120 porque a gente definiu aqui como 120 se eu coloco o 150 ele vai ficar perguntando 150 então se eu tiro isso daqui a ti uma animação de novo salvo ele vai ficar perguntando aqui o deslocamento esquerdo então quando o tubo tá bem aqui o deslocamento da esquerda é maior então ele vai diminuindo esse tamanho do deslocamento da esquerda né então quando chegar aqui no 120 como a gente já havia visto a gente para o jogo beleza agora a

gente vai fazer essa verificação aí você pode fazer colocar aqui wi-fi e o pai position que a nosso deslocamento para esquerda for menor ou igual a 120 quer dizer que ele já chegou aqui então a gente para o jogo e como que a gente pode fazer isso primeiro a gente para a animação do tubo então a gente já tem aqui outubro então a gente pega aqui Style mas essa propriedade de Style lá e a animação Animation Quem te disse que não vai ter mais nem animação então ele mexe o nome o que que vai acontecer

quando ele encostou aqui no meio acabou a animação ele voltou para propriedade lá ele voltou lá para a posição original dele que é aqui no cantinho beleza mas quando ele bater aqui eu não quero que ele volte para cá eu quero que ele fique aonde ele bateu né então é que a gente pode fazer que tipos de acessar aqui paif Style e definir que o leste dele lembra que a gente definiu aqui como 120 o neolift 120 a gente pode colocar aqui dinamicamente então eu quero que a propriedade left do tubo seja exatamente o valor

de quando ele encostou aqui no mar para a gente pode passar aqui depois litros a gente pode passar aqui a própria posição do deslocamento esquerdo me passa em pixels tão que o que vai acontecer agora quando ele bater ele vai parar exatamente aqui nessa posição né por eles então vamos ver como isso aqui tá acontecendo no jogo ou recarregar até a página e quando eu pulo e para né porque a única condição que a gente deu para ele acabar o jogo foi quando o pai pai chegasse nesse ponto aqui então é isso que tá acontecendo

independente do mar o tempo lado não quando tu chega aqui nessa posição o jogo acaba né mas a gente precisa acabar o jogo só se o Mário não tiver para o lado nessa altura do mar aqui do povo do mar foi menor do que o tubo né então quer dizer que ele bateu da mesma forma que a gente usou o deslocamento aqui da esquerda do tubo para verificar a posição dele a gente pode utilizar por a propriedade botton da imagem do Mário que para verificar se ele altura que ele tá né altura do Pulo naquele

momento Então o que a gente pode fazer aqui no mar ver se a gente aumenta por exemplo para 120 e ele Sobe aqui né a justamente isso que a gente fez na animação né gente mexer na propriedade boto Então a gente vai verificar se em quando o pai por chegou aqui o Mário ou se ele pulou então um parque vai continuar o jogo não vai acabar Beleza então vamos fazer isso lá no a chave escrito não deixa aqui porta 10 mesmo primeiro a gente precisa pegar a propriedade bota no meio porém a gente vai ter

que pagar de uma maneira um pouco diferente porque você por exemplo se eu pegar aqui Mário position e vai ser igual ao Mário sente fizer exatamente como a gente fez aqui né off-set bottom o Edão console log in o do Mário position tá vendo de um definir a gente não pensa propriedade off-set voltam a gente vai ter que conseguir que valor dessa propriedade de outro forma como é que a gente pode fazer isso a gente pode acessar ruim do getcomputedstyle que vai ser a gente vai pegar o estilo que foi computado aqui na imagem do

Mário então a gente acessa que o método grande conflito de tarot e passa que o elemento que a gente quer pegar no caso é uma imagem do lado e agora se a gente consegue pegar qualquer propriedade CSS que esteja aplicada que não ali por exemplo a propriedade de boto não que é o que a gente quer então se eu salvo aqui e dou um console logo perceba que ele tá brincando para me zero pixels porque o Mário tá aqui embaixo Mas quando eu aperto a tecla papo lá ele traz para mim aqui todo esse intervalo

de tudo então vai aumentando de acordo com o povo chegar ou 180 pixels que é o máximo do fundo do mar e ele vai dar centro Ah beleza então a gente já consegue pegar aqui altura do Pulo do mar mas detalhe perceba que ele está retornando aqui para gente muito estranho né mas pra gente fazer algum cálculo é interessante que a gente tem apenas o número e não astremg com pixels também essa linha de código está retornando o valor esse valor que planeta esses 30 a gente pode usar que concatena um método replace a gente

vai substituir o trecho aqui da string de Picos para nada né Ou seja a gente vai apagar a palavra PX aqui da nossa stream então o seu salvar vão ver que que acontece tá lá agora ele tá perguntando para gente apenas o valor né mas percebo que ainda um strong certo a gente poderia até utilizar um método Number aqui não mas para converter uma string em número mas tem um jeito bem mais interessante de se fazer basta a gente colocar um mais uma aqui na frente da do meu stringhi que ele conversa ele tenta converter

para número né se for no spring de um número por exemplo ele converte facilmente no seu salvo aqui ele vai conversar a apresentar para gente aqui números percebi que até mudou a cor aqui porque agora a gente realmente tem valores numéricos aqui que a gente pode fazer cálculos Beleza vou fechar que eu console por enquanto agora a gente só precisa descobrir qual a altura mínima que o Mário tem que estar acima do tubo para ele não bater no tubo né a gente pode vir aqui na nossa estilo e Vamos aumentar aqui um pouco Bota no

do mar então se eu colocar aqui por exemplo assento fixos o Mário ainda encosta neoservice outubro chegou aqui e a altura do Mario esteja em 60 a gente ainda tem que perder tem que acabar o jogo aqui porque eu moro encostou 80 já arrumou valor né se o tubo tiver abaixo do mar mas o mar tiver com altura de 80 Picos então o Tube consegue passar tranquilamente não é isso que a gente vai verificar lá no nosso lado escrito outro aqui para 0 e volta aqui nosso scrip a gente vai adicionar uma nova condição aqui

que é o que o tu chegou até aqui mais a gente precisa Verificar também se o pulo do Mário é menor do que os 80 pixels né E se for menor que 80 pixels que a gente viu lá o mar encostou no tubo então a gente pode vir aqui e os armário position for menor que 80 né a gente precisa colocar um e aqui ou seja se a posição do pai que já chegou aqui e a altura do Mário é menor que 80 então o Mário bateu no tudo então acaba o jogo vamos a voz

que vamos ver como que acontece funcionou tudo passou do Mar agora né então não tá mais batendo aqui no 120 e acabou quando a gente pula tá funcionando mas só que quando o Mário cai Independente de onde ele esteja e o que não vai parar mas isso não é para acontecer né o Mário passou do tubo quando Mário passou tudo tem que continuar como é que a gente pode resolver isso se deslocamento esquerda aqui do nosso tudo é menor que zero quer dizer que o tubo já passou do Mário então não tem como mais o

mar eu encostar no tubo depois que tu já passou então a gente precisa adicionar mais essa condição aqui no nosso isso que que vai acontecer vou colocar mais um aqui então nosso isso vai ficar o seguinte se a posição do pai que já chegou aqui e o deslocamento né a posição do pai pai maior que 0 quer dizer que o tubo ainda tá em baixo do mar e se o mar estiver com a altura do tudo mais ou menor que 80 então acaba o jogo né ou seja o tubo já chegou aqui e a posição

do tubo é maior que zero ainda o deslocamento da esquerda maior que zero o que significa que o tomada tá embaixo do Mário e o pulo do mar tá menor que 80 Então quer dizer que encostou quem sabe o jogo vamos ver o comportamento disse que então vou pular na o Mário caiu em cima do tudo tá funcionando né Aí eu esse mundo tudo é para parar mesmo beleza beijo só Vamos aumentar um pouco a velocidade do tu para gente ver o que que acontece eu vejo de dois segundos aqui vou colocar um ponto 15

segundos Tá quanto que vai ficar um pouco mais rápido quando a gente pula ao Bate aqui as cores Pula agora sem tá funcionando né o Mário Não encosta no tubo Então tudo continua passando certinho e seu pular aqui em cima acabou se eu por aqui cá em cima também acaba então só não acaba se eu for lá certinho o show demais agora outra coisa que a gente pode fazer pra ficar mais legal ainda é parar a posição do Mario aonde ele encostou no tubo Como assim por exemplo quando eu pulo aqui eu encostei no tubo

em cima né mas o mar continua caindo e cai aqui eu queria que ele ficasse parado aqui em cima aonde ele encostou como que a gente pode fazer isso da mesma forma que a gente fez aqui da mesma forma que a gente fez aqui que o pai PE né a gente definiu o left a gente pode fazer a mesma coisa para o mar então eu vou inclusive com a peça as duas linhas aqui eu vou parar a animação do mar porque o Mário tem animação de cair até o bota 10 né eu vou parar animação

dele e Vou definir aqui que a propriedade botão do Mario vai ser exatamente a propriedade aqui no momento que ele encostou no tubo tão como colocar aqui posição do mar o seu Pulo agora ele para exatamente a 1 no momento que ele encostou no tubo então socorro aqui ele para que eu pulo aqui ele encosta aqui Ah então tá funcionando tá bem legal outra coisa que a gente pode fazer para ficar mais legal ainda é o seguinte eu tenho uma imagem aqui do game over que é uma imagem do mar que quando quando perde né

a gente pode substituir essa imagem aqui quando o jogo acaba e beleza a gente já tem wi-fi que a condição de que o jogo acaba Você já entrou no isso é porque o jogo acabou que a gente pode vir aqui pegar o Mário como é lamento queimar dessa constante é uma imagem A gente tem acesso ao atributo src quer que é o link da imagem né que é esse link aqui então eu vou mudar esse link eu vou mudar esses esse aqui ao invés de ser a imagem do Mário vai ser a imagem veio over

ou png Vamos ver que vai acontecer agora e quando Mário perde mudou aqui a imagem viu Oi tá funcionando só que tem um detalhe tá um pouco grande né a gente pode mudar isso aqui aqui mesmo diretamente Então vou pegar a imagem do mar que agora essa daqui vou mudar o Style dele e vou mudar o eles ele vai ter agora um e-book de 75 Picos Agora sim já tá o tamanho mais coerente Porém quando ele encosta aqui a imagem tem uma margem muito grande aqui né pra gente pode diminuir essa margem aqui também então

Mário. Style ponto margem left e a gente vai colocar o margem de 50 pixels ele vai ficar mais próximo agora então agora ficou conselho né a gente pula e perde ele troca a imagem e fica bem legal E aí E aí é um detalhe importante é que quando a gente perde a gente precisa usar esse look aqui para não ficar rodando aqui em finitamente o que que acontece eu vou colocar com console log Oi Lu por exemplo para a gente ver aqui eu vou abrir o console é que ele tá perguntando o lucro infinitamente pra

gente né Mesmo depois de perder aqui ele continua rodando esse look mas não precisa ficar rodando lupa depois que o jogo acaba né então a gente pode vir aqui ó entrou no wi-fi acabou o jogo a gente pode usar um Clear e Inter vão e passar o nome aqui da Constante look que faz referência a esse look Então se salvo isso Oi tá lá quando acaba o jogo o loop para de rodar beleza com isso a gente já tem um principal né já tá funcionando a gente consegue pular que a gente não fizer certo a

gente pede a gente consegue deixar isso bem mais bonito mesmo que a gente pode fazer aqui primeiro vamos deixar aqui nosso Guime bonde com muito filho sem por cento né você que o centro da tela beleza vamo tirar essa borda aqui colocar uma borda Bottom a gente pode passar aqui uns 15 Picos e passar um verde é aí a gente vai conseguir fazer ali como se tivesse uma grama a gente pode agora fazer aqui um céu o nosso game boa a gente pode definir aqui um background o linear-gradient que vai dar seu corpo para essa

coco então vai ficar sem ela ficar como se fosse um céu me legal e para ficar mais interessante ainda a gente consegue adicionar algumas nuvens né eu tenho uma imagem aqui a gente pode fazer as nuvens passando aqui no céu também para ficar mais interessante ainda então vou colocar aqui a imagem eu vou pegar aqui as nuvens e vou criar uma classe A Oi Cláudia aqui também beleza tá aqui aí lá no nosso SS a gente pode utilizar aqui um pouco né então vou pegar aqui Cloud e elas são um pouco grande pra gente pode

diminuir um pouquinho aqui o indefinido de 550 beleza 550 pixels ficou legal mas ele que aconteceu a imagem que das nuvens muda aqui a posição do mar então a gente precisa lembrar de colocar ela também como position Absolute aqui beleza agora sim tá funcionando agora a gente pode criar nenhuma sonzinho para as nuvens também então vamos lá vamos criar aqui que Friends ou chamar aqui de Cláudio e ali mexam e vai ser parecido com animação que a gente fez aqui no tubo né que a gente vai colocar from the rite vou colocar zero aqui por

enquanto e show Light de 100 porcento né ele vai começar aqui e vai vir para cá vamos ver o que que vai acontecer se eu colocar aqui animation o cloud Animation um coloca aqui um tempo maior porque as nuvens se mexe um pouco mais lento não 10 segundos infinito e o tempo linear também vamos ver o que que vai acontecer Oi tá lá tão passando aqui mas quando ela sai na tela e elas aparecem aqui né do mesmo jeito que a gente tinha um problema aqui com o pai porque a gente pode definir animação como

sempre começando de menos o tamanho dela aqui na largura né que a gente pode colocar - 550 Picos que elas vão passar vim aqui entrando na tela e saindo da tela e vão ficar assim para sempre mas elas ainda estão meio rápidos né então vamos colocar aqui 20 segundos para ficar um pouco mais lento Então a gente vai passando aqui a calar as nuvens milagres a beleza pessoal vou parar esse vídeo por aqui mas tem várias coisas que a gente poderia implementar que ainda né colocar um score para a animação aqui das nuvens colocar uma

telinha aqui the game houve um botão de reiniciar mas aí fica como desafio aí para vocês Beleza espero que vocês tenham gostado qualquer coisa deixar nos comentários que eu quero feedback qualquer sugestão que vocês tiverem e eu espero vocês nas próximas beleza