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

[@hudyoinvocador940]

00:00 Apresentando a proposta do jogo 00:32 Estrutura basica do Html 00:45 Programando a "Tela do Jogo" 01:43 Animando a imagem do tubo em movimento na tela do jogo 00:15 Diretorios do projeto 06:48 Animando a imagem do "mario" pulando 14:45 Programando a hitbox do tubo

[@hudyoinvocador940]

@manual se puder deixar meu comentario fixado eu to montando uma aulinha com seu video pra um amigo

[@hudyoinvocador940]

não consegui editar essa mensagem então deixei outra com o resto da lista até o final do jogo

[@hudysonsilva907]

00:00 Apresentando a proposta do jogo 00:32 Estrutura basica do Html 00:45 Programando a "Tela do Jogo" 01:43 Animando a imagem do tubo em movimento na tela do jogo 00:15 Diretorios do projeto 06:48 Adicionanco a imagem do "mario" andando 07:10 ajustando e explicando as propriedades do "mario" 07:55 Animando mario Pulando 08:25 Explicando as propriedados do Keyframe de "Pulo" do mario 11:30 Fazendo um Script em "JS" para associar a propriedade de pulo ao mario 14:45 Programando a hitbox do "tubo" 17:30 Explicando a logica de HitBox do "Tubo" 20:05 Explicando a logica de hitbox do "mario" 21:00 Adicionando a logica "evento" de end game no jogo quando o mario colide com tubo 26:30 Adicionando ao "Evento" uma logica que o "mario" "pausa" a animação no momento da colisão com o tubo 27:55 fazendo uma tranzição da imagem do "mario correndo" pro mario "morrendo" quando colide 29:20 Fazendo uma logica que encerra o "loop' do jogo quando o evento endgame acama 30:10 Modelando o cenario do jogo "background" e elemento do background "nuvens" e "grama"

[@brunoguedes307]

Obrigado amigo 😅 vc é um amigo 🙏

[@hudysonsilva907]

@@brunoguedes307 tmj

[@gabrielmachado2019]

Para quem tiver com problema do mario pular é Só colocar a tag script logo abaixo da tag de fechamento do body no html, divulguem para mais gente saber desse problema, e deixa o like para alcançar mais pessoas para ajuda-las

[@hiyor1]

vlww :)

[@cafunga3976]

Vlww

[@dimittrisouza3704]

salvouuu

[@lokiman8593]

Como deveria ficar ? Tentei com a TAG de fechamento tbm e não funcionou

[@lokiman8593]

@Projeto Social eu só consegui depois que coloquei todo o código no HTML

[@Douglinhas__24]

Mano esse video e muito bom cara vou fazer e mostra para o meu professor de programação. Quem tá vendo esse video em 2024.

[@sagittarius18_oficial]

Eu

[@dlsantos1979]

eu....vou fazer no feriado do dia 15/10

[@felipejr.2021]

Primeiro eu preciso dizer que isso aqui é simplesmente FANTÁSTICO. Como iniciante, me senti contemplado pelo tipo de linguagem e explicações que você deu. Muito obrigado. Tem umas coisas aqui que eu não tinha visto, mas que eu entendi como estão funcionando pela forma como você colocou tudo. Muito obrigado. Eu gostaria de contribuir sugerindo uma variável para verificar se o Mário já está no ar quando ele pula. Quando eu tava fazendo aqui, eu percebi que apertar pra pular quando já se está no ar pode acabar matando a animação do próximo pulo. Aqui eu botei uma variável "onAir" e botei o evento de pulo pra só rodar se ela estiver como falsa. Daí quando o evento de pulo é ativado ele muda a "onAir" para true e o setTimeout que tira a classe "jump" também redefine "onAir" para false

[@REINICIARJOGO_]

Muito bom. Agora me diz , como especificar em código qual tecla o Mário vai pular . Ou seja , no lugar de qualquer tecla, especificar a tecla . No caso "espaço"

[@kennedyedmilson7874]

document.addEventListener('keydown', event =>{ if(onAir && event.key !== 'ArrowUp' && event.key !== 'w') return; jump(); });@@REINICIARJOGO_

[@yurihenriqueribeiroichitan1618]

Uma outra ideia seria verificar se o Mario já está com a class jump antes de executar o pulo, assim não haveria necessário de criar uma variável específica pra isso

[@isaacveras1438]

Depois desse vídeo eu fiquei mais animado para aprender HTML, CSS E JS. Criar coisas legais assim faz a gente lembrar de se divertir um pouco de vez enquando.

[@luizs.f.c2379]

que didatica excelente, sem enrolação, palavras simples, explicação simples. pqp eu estou aplaudindo de pé esse vídeo !

[@chicosepultura2]

30 minutos que ensinam mais que um semestre na faculdade

[@thiagosilveira2005]

é verdade kkkkkkkkkkkkk

[@malicinhanoob]

Faculdade é foda. Deveriam ser o ápice do conteúdo, educação,mas deixam a desejar demais

[@Nicolas-eo8he]

Cara, sem brincadeira, tava só curioso pra saber como faz o joguinho e compreendi muitas coisas que eu não sabia como fazer em css, ou não sabia como poderia utilizar

[@hstecnologia]

VDD rssrr o cara é fera demais

[@wedsonjlourenco]

Mas do que todos os semestres kkkkk

[@hudyoinvocador940]

00:00 Apresentando a proposta do jogo 00:32 Estrutura basica do Html 00:45 Programando a "Tela do Jogo" 01:43 Animando a imagem do tubo em movimento na tela do jogo 00:15 Diretorios do projeto 06:48 Adicionanco a imagem do "mario" andando 07:10 ajustando e explicando as propriedades do "mario" 07:55 Animando mario Pulando 08:25 Explicando as propriedados do Keyframe de "Pulo" do mario 11:30 Fazendo um Script em "JS" para associar a propriedade de pulo ao mario 14:45 Programando a hitbox do "tubo" 17:30 Explicando a logica de HitBox do "Tubo" 20:05 Explicando a logica de hitbox do "mario" 21:00 Adicionando a logica "evento" de end game no jogo quando o mario colide com tubo 26:30 Adicionando ao "Evento" uma logica que o "mario" "pausa" a animação no momento da colisão com o tubo 27:55 fazendo uma tranzição da imagem do "mario correndo" pro mario "morrendo" quando colide 29:20 Fazendo uma logica que encerra o "loop' do jogo quando o evento endgame acama 30:10 Modelando o cenario do jogo "background" e elemento do background "nuvens" e "grama"

[@carolinecoelho2393]

voce pode me mandar as imagens? não estou achando :(

[@PedroPenha-d4q]

@@carolinecoelho2393 conseguiu? Também estou precisando

[@cainapadilha6570]

Obrigado amigo você é um amigo

[@codecraftcomeric]

Cara, o vídeo é de 7 meses e tô comentando agora por que todos os vídeos que achei no KZbin, este, é o melhor! Parabéns brother, seu canal é um incentivo para mim e meu filho que estamos estudando Tech. Ganhou dois inscrito um de 40 anos e outro de 8 anos💪

[@amigo8872]

Vão fazer um jogo juntos ?

[@woohoo3-w3j]

Cara, excelente didática! PArabéns, vejo poucos devs brasileiros ensinando tão bem no KZbin, aliás, nem sabia que seria tão simples de fazer um joguinho com puro html, css e javascript.

[@RUBEMDESB]

Um video de 30 min. me fez produzir mais que 3 meses de aula. Parabéns pro.

[@felipevalli]

Que aula espetacular! Parabéns! Não conhecia o canal. Acabei de me inscrever!

[@ManualdoDev]

Valeu demais, Felipe! Fico feliz que tenha gostado! Tamo junto!

[@LeandroSilva-mw5yl]

@@ManualdoDev digo o mesmo que ele sou iniciante me inscrevi agora por causa desse vídeo vc explica muito bem

[@Lobo_Carioca]

@@ManualdoDev Eu nem assisti o vídeo e acabei de me inscrever, vou assistir hoje por volta das 23:00h quando eu chegar do serviço.

[@marlonberaldo5609]

Simplesmente incrível a aula, melhor que as da faculdade kkkkk

[@tiocripto2889]

Pensei o mesmo! kkk

[@darlansilva2905]

Quando eu me formar meu agradecimento na hora de pegar o diploma vai ser ao professor KZbin

[@oreiasccp]

praticamente todo bom conteúdo de programação na internet é melhor que qualquer aula de faculdade na prática kkk

[@sharkgames5230]

Mano na minha de dedenvolvimento web o prof só falava de Html5 e um pouco de Json,ai ele mandava nós ficar olhando o W3schols e saia da aula.

[@sitiobomsuim6296]

Eu pensando: “mas vai ficar assim e agora como corrige?” Ele: “Então, quando acontecer isso aqui é por causa disso, aí a gente faz isso”

[@BernardoSa01]

Quase dois anos depois de ter lançado o video, vim aqui para agradecer. Parabéns pela didática, é fantástica! Acabei de me inscrever no canal. Aprendi coisas que nunca havia visto na faculdade. Já vou iniciar os próximos vídeos!

[@eldirfreitas6789]

Quem estiver com problemas para o Mario pular, ele usou o "defer" na tag do script js. coloquei aqui e resolveu, valeu professor que aula top.

[@adrianomenezesdemiranda924]

Aos amigos que não estão conseguindo fazer o Mario pular, também estava com este problema, no index coloquei o script entre o body e html e adicionei onclick manualmente no html com a propriedade jump do javascript....parabens pelo video!!!sucesso!!!!

[@vinicett]

Não entendi amigo, poderia me da um help ai Pfff

[@josephh4unter798]

@@vinicett Por exemplo no inicio quando ele colocou o src do script no head, ao invés de colocar no head coloca depois da div game-board

[@natantoigo1671]

@@josephh4unter798 Obrigado pela ajuda

[@RapGod.]

@@josephh4unter798 Vlw

[@brackacn]

Vlw meu camarada ajudou muito

[@wesleydossantosgonsalves8016]

Que vídeo sensacional! Para quem tem o básico do conhecimento nessas linguagens, isso tem um valor imensurável, parabéns pelo trabalho.

[@andreadami7478]

Estou fazendo um curso pela b7web, estou em módulo de HTML e CSS e nossa, olhando esses vídeos junto com o curso da pra entender tudoooo! Tentei estudar por conta, mas precisei de um curso bom e barato pra poder saber por onde começar. Conteúdo impecável o seu, parabéns, vou chegar lá logo logo!!

[@liomaraleite8741]

Gustavo Guanabara no KZbin de graça amigo

[@FernandoSantos-us3kk]

Aula excelente! Consegui ajustar pro jogo reiniciar ao clicar em qualquer botão e também em touch ne tela, pra meus filhos testarem no celular kkkk.. Valeuu pela aula...

[@m.e.c.kmuzik5117]

Muitos parabéns, mano. Acho que Projectos do gênero ajudam muito os iniciantes a perceber o que é realmente a Lógica de Programação. E a explicação então…show de bola. Continue sempre com essa dinâmica de estar a fazer e explicar o que casa comando ou instrução fará exactamente. Mais um inscrito!!!

[@Diego-Garcia]

Eu achei esse tutorial muito interessante pelo motivo de fazer um jogo de uma maneira bem incomum dos dias de hoje: utilizando HTML e CSS, ao invés de algum framework JS voltado a games 2D. Alguns desenvolvedores de cara provavelmente diriam "não, mas não é assim que se faz um jogo em JS", sendo que, se pararmos para pensar, não existe uma forma correta de fazer um jogo. Não só bem feito, mas também uma boa quebra de paradigma.

[@stargame6757]

Muito bom. Agora mesmo sendo um joguinho simples é muito comando, muito detalhe. Fico imaginando esses jogos atuais a complexidade pra fazer...

[@crodoardo34]

Meia hora de ensinamento e já foi possível aprender tantas coisas. Nem sabia que css tinham essas funcionalidades de animação. Show...

[@renansantos009]

video muito rico de informações, aprendi muita coisa que nem sabia que podia, rs

[@Ninezin9]

@@renansantos009 mano vc pode me ajudar ? estou iniciando na area da programação e não sei ao certo como ele abriu aquele site em que ele via tudo que ele estava colocando dentro dele. Voce pode me ajudar dizendo como acho ou abro aquele site para que eu possa estar prosseguindo com a aula?

[@sabrinasantos3453]

@@Ninezin9 é uma extensão do VS code, chamada Live server você instala ela e inicia, que ela abre automaticamente uma página no navegador e vai mostrando as alterações. As vezes não atualiza na hora então precisa ver a configuração ou só reiniciar

[@Umgolbege]

​@@Ninezin9 eai como esta hoje?

[@Onic-x8s]

​@@Ninezin9EAI Man conseguiu continuar na programação???

[@ryanalves5290]

vendo esse video em 2023, de longe o melhor video e mais explicativo que eu vi dentre vários outros parabên cara, vou continuar vendo os video, pretendo aprender mais sobre programação e acho que encontrei o lugar certo.

[@ANSARAJC]

Muito boa a explicação, não dificultou e conseguiu explicar facilmente a lógica, o que é difícil pra muitos. Parabéns, gostei bastante. Vou treinar e assistir bastante.

[@Itz_IslahAlves]

tenho 13 anos, estou aprendendo programação desde aos 11. O meu pai tá me ensinando, os cursos eu to aprendendo, até videos no youtube. Só que eu queria aprender como criar jogos. Nesse videos eu aprendi muita coisa! Muito Obg

[@wes3184]

aproveita, estuda, vc vai ganhar 7 mil reais aos 20 anos

[@Itz_IslahAlves]

@@wes3184 blz :D

[@roguerodrigo]

mano, que video incrível! aprendi tanta coisa em particular, com essa aula. E eu como amante dos games, fiquei encantado com o resultado! Estou estudando essa tríade e pretendo fazer muitas coisas legais quando eu estiver mais fera! Mas pelo conhecimento que já possuo, consegui entender perfeitamente o que cada coisa quis dizer! Obrigado pela didática maravilhosa!

[@ManualdoDev]

Eu que agradeço o apoio, meu amigo! Tamo junto! Abraço!

[@lucasdamasceno2546]

Quem disse que aprender a programar precisa ser assustador ou dificil ?! Está aqui a prova, apredi em 30 minutos o que não conseguia aprender em longas horas de curso! Melhor video de programação que já vi na vida

[@ShowTime-if1zy]

Muito boa a video aula e parabéns pela forma que ensina, de fácil entendimento. Até me empolguei pra fazer um😄😄, mas estou cursando o inicio de html, depois eu volto aqui.

[@fredoliveiraplaybr1186]

show demais, o desafio de todo programador é o aprendizado, no inicio tudo parece difícil, mas quando você pega a prática parece que você está no inicio.

[@No_one12351]

Cara, você é top! HTML, CSS e JS parecem um kit de mágica

[@brayanoliveira2743]

seria muito bacana se vc tivesse um curso para ensinar mais sobre javascript, sua forma de ensinar é muito boa ! parabéns mano !

[@ManualdoDev]

É uma boa, Brayan! Valeu demais! Vou preparar algo melhor pra ensinar javascript. Vai ser bem legal! Valeu!

[@marcelocalsing]

@@ManualdoDev Na expectativa desse novo projeto!

[@PauloHenrique-eh1db]

@@ManualdoDev Pode fazer, você ensina muito bem!

[@deniserinaldi5895]

@@ManualdoDev que video sensacional, melhor do que na teoria , pq é vendo que se aprende parabéns!!

[@studioplixx4890]

@@ManualdoDev dar criar no celular tenho app mto bom quem não tem Pc sabe só coloca um teclado no celular e Mouse já era ou até no tablet tela maior spck editor

[@pedroh9overdadeiroph60]

Assisti 30m sem saber nem o que é html ou Java. Mas foi satisfatório e de "fácil" compreensão

[@anatanaelsilva8559]

Vendo depois de 1 ano.... e mesmo assim Parabéns! Didática muito boa, explicação detalhada do código em tão pouco tempo... TOP DEMAIS!!!

[@petersonsouza907]

nss vei nada faz o pipe parar ajuda a tropa mn

[@sircmcon]

Uauuuuuuuuuu!! Sensacional!! É incrível como vc conseguiu explicar de forma simples e didática um assunto complexo como desenvolvimento de jogos usando apenas CSS e JavaScript... Parabéns!!!

[@FRNathan13]

Simplesmente o tutorial mais feito que ja vi de programação. Além de vc ensinar ainda foi explicando cada classe do css (e tinha algumas que eu usava da forma errada tipo overflow kkkk) parabéns mano! Gostei muito

[@ManualdoDev]

Muito obrigado, Nathan! Fico feliz que tenha ajudado! Valeu demais! :D

[@ikr233]

@@ManualdoDev Opa irmão, desculpa o incômodo depois de 1 ano, mas no minuto 19:00 eu não consegui resolver o problema. Fiz tudo igual a você, mas o "cano" continuava teleportando pra trás do Mario quando eles se encostavam... é problema com as ligatures? tou tendo uma dificuldade em colocar a fonte kkkkkkk

[@BrunoSilva-ns4tn]

Parabéns pela sua forma de ensaiar!! Por favor, faça mais vídeos como este. Ou trás mais idéias pra esse projeto 🙏🙏👏🏻👏🏻👏🏻

[@ManualdoDev]

Muito obrigado, Bruno! Pode deixar que vai vir mais conteúdos assim sim! Valeu!

[@pretinhoilustra1625]

Cara Muito top essa aula, explicação boa para entender principalmente para quem esta iniciando... Parabéns e faz mais vídeos assim que nós gostamos kkkkkkk abraço.

[@Medusacururu]

Que vídeo sensacional! Você explica muito bem e deixa super claro o que está fazendo e isso facilita muito a compreensão.

[@hermessantos181]

Cara, é um jogo extremamente simples mas aprendi coisas extremamente úteis não só pra desenvolver jogos, mas para o desenvolvimento web por completo, parabéns pela didática

[@rodrigomartins8243]

Topzera Total!! Grato por dedicar esse tempo disponibilizando esse conteúdo de forma gratuita. Parabéns.

[@giovanni-_-6654]

Aprendi mais com um único vídeo seu, do que 1 semestre inteiro na faculdade em que estou matriculado. Parabéns!!! 😅

[@MayconSouzaAdm-Cont-Psicopedg]

Qual curso vc faz ?

[@Lucas_1919]

Poxa, muito obrigado, foi meu primeiro projeto, to bem no inicio com JS e me fez lembrar algumas coisas do CSS, com certeza vou subir esse projeto pro github como recordação

[@chrody]

Assisti no passado, e assisti hoje de novo. A reação é a mesma: UAU!!! Parabéns amigo.

Que aula maravilhosa, mesmo sendo iniciante eu consegui entender através da sua lógica de pensamento e os comandos utilizados. Parabéns!

[@anders0n82]

Cara eu também sou iniciante, mas só com os conceitos básicos que eu sei eu já entendi tudo o que ele fez mesmo antes de explicar, eu acho que isso é bom kkkk

[@patriciodiniz5322]

Uns dos vídeos mais satisfatórios que assisti sobre programação. Muito foda, mano!! Muito irado entender tudo o que tá acontecendo.

[@ManualdoDev]

Valeu demais, mano! Tamo junto!

[@LimaLima284]

Fantástico.agora imagina jogos iguais o God of war? incrível.

[@cleitonsns5]

Rapaz, esse vídeo me ajudou MUITO! Pois estava com um problema de iniciante em JS que não conseguia resolver no meu jogo (que não tem nada a ver com este do vídeo), e uma simples linha de código eliminou umas 16 linhas no meu. Muito obrigado! E parabéns pelo vídeo! Ultimamente to tendo problemas com CSS e sinto que preciso me dedicar mais a isso. HTML e JS estou caminhando melhor...

[@thallysgildivanaraujocorde6605]

Opa têm como mandar o jogo pra nois ver

[@talyssonsilva7520]

Eu amo video assim, o cara explicando o que cada parâmetro faz, nos passa confiança e pensamento critico das soluções, minha única dificuldade é das sintaxes pq tem coisas que nem sabia que existia exemplo desse "+" na frente KKKK vlw, muito fera !!!

[@ManualdoDev]

Muito obrigado, Talysson! Fico feliz que tenha gostado! E não se preocupa, esses detalhes de sintax a gente pega com o tempo. O importante é sempre praticar! Valeu!

[@andresoares2007]

@@ManualdoDev em 19:10 voce digitou o $ e mais o que pra ele mudar a cor e reconhecer o comando?, no meu ficou vermelho mesmo e nao reconheceu o comando

[@PedroHenrique-go9fe]

@@andresoares2007 amigo, verifica se você colocou entre crases `` e não entre aspas simples ou duplas. o que ele digitou foi o cifrão e o vscode completa com as chaves { }. Isso se chama template strings. Ex: `texto qualquer ${expressão}`

[@jonatasvalesi2443]

​@@PedroHenrique-go9fe salvou kkkkk

[@haristydes1166]

​@@PedroHenrique-go9fe Ai quimoleza, vscode digitando o template que eu deveria ter escrito

[@Kelvin_jfn]

CARA VOCÊ É INCRÍVEL ONTEM EU FIZ A POKEDEX HOJE EU ACABEI DE TERMINAR ESSE PROJETO COM VOCÊ. Você tem um time ótimo de explicação e movimentação do código. Sério é muito fluído de ir codando e observando bem sua explicação e mesmo assim você conseguiu fazer isso em um vídeo muito curto. Amanhã eu já volto aqui no canal para procurar outro projeto para brincar. Rodou 100% aqui

[@gabrielpell]

Que explicação maravilhosa, meus parabéns meu amigo, muito didático!!!

[@thiagofjau]

Sensacional! Nem vi o tempo passar! Iniciando na programação e foi muito esclarecedor seu vídeo. Ganhou mais um seguidor

[@luragamespro6]

como vc ta hoje em dia meu mano, ja ta profissa na programação ???

[@Fall78075]

Fiz e ficou massa, gostei tanto que refiz novamente utilizando o framework Angular

[@adrianop.araujo9714]

eu também kkkk

[@BrunoMultGameplays]

Muito bom o vídeo irmão, se puder seria uma boa disponibilizar as imagens q tu usou

[@ManualdoDev]

Aqui o link: drive.google.com/drive/folders/1CYQ2CtPyiXcONexGfpQ1RnaPa30c7PNy?usp=share_link Também atualizei lá na descrição :)

[@jonathanaparecidomorais588]

Cara muito obrigado fenomenal sua explicação foi detalhada consegui entender, e funcionou corretamente, poucos canais respondem questionamentos ou dúvidas Nunca perca está qualidade parabéns.

[@ManualdoDev]

Eu que agradeço o apoio, Jonathan! Fico feliz que tenha te ajudado um pouco. Tamo junto! Abraço!

[@antoniopereira2721]

A didática realmente é simples, direta e objetiva, ótimo trabalho, parabéns!

[@SCFanny]

Amei fazer! Consegui parar as nuvens que, no meu, são duas separadas... Consegui criar uma animação pra quando o jogo acaba com o Mario caindo e sumindo na tela Amanhã vou tentar colocar o placar e o botão de reiniciar :) Parabéns pela aula, tá incrível

[@ManualdoDev]

Show demais, Estefany! Obrigado pelo elogio! :D

[@SamuelGomes-qg1uo]

@@johncfer eu consegui fazer essa aula se quiser ajuda eu te mando o meu .

[@loss_3346]

Você conseguiu fazer o placar, e o botão de start, tentei fazer e não consegui, se possível compartilhar seu código ?

[@SCFanny]

@@loss_3346 ainda não consegui fazer o contador rodar como tem que ser. Tá funcionando, mas ele não conta como tem que contar. Posso compartilhar sim, deixei meu número num comentário aqui. Chama lá que a gente troca uma ideia

[@loss_3346]

@@SCFanny poderia colocar o número nesse comentário?

[@ItaloSaager]

muito maneiro, fiz a adaptação para react native e adicionei alguns detalhes como pontuação, reiniciar o game e mudar o background quando o jogo acaba.

[@luizotavioqueirozpires4856]

manda para mim esse codigo github deste seu projeto

[@macroxp3484]

Simplesmente Incrível 🔥 Eu peguei algumas dicas pra melhorar um joguinho q eu estava fazendo, vlw pelas dicas brow 💪🏻❤️

[@ARTSeARTS]

Muito bom, nem precisei ver o vídeo inteiro para dar um super like e inscrição. Muito bom exercício.

[@EuJogueiGoat]

Não sabia dessas técnicas de animação, muito bom vídeo, por favor faça mais!!!

[@nicolasbueno3522]

top demais simples e objetivo, parabéns 👏🏻

[@ManualdoDev]

Fico feliz com seu comentário, Nicolas! Valeu demais!

[@gustavolorenz4883]

Muito bom mesmo, se puder trazer outro tutorial de jogos 2d seria ótimo!

[@PIXELDEPT]

MANO, A FACULDADE TA ME RECOMENDANDO SEU VIDEO KKKKK

[@niaoliveira3173]

amei a forma simples que você explica as funcionalidades !

[@jonescsarMk007]

Aula simplesmente espetacular, PARABENS e OBRIGADO por dedica tempo pra ajuda outras pessoas.

[@pedrodespessel]

sugestão de vídeo: faz uma parte 2, dando uma tunnada e umas melhorias neste game. Inserindo efeitos sonoros, outros obstáculos, moedas, aumentando velocidade, etc. Ficaria top!

[@NeoAAnderson]

concordo, daria um bom portfólio

[@pedroelton7040]

Excelente ideia!

[@MasterMan194]

Celoko! Aí vem a Nintendo e processa geral.

[@xhiguhx2384]

25:35 aqui o game ja ta funcionando perfeitamente. Se voces tiverem problemas com os caracteres como as setas e so colocar => e

[@Teusz7x]

Mano poderia me ajudar o meu mario so ta pulando uma vez apaguei refis mas não ta indo tem como me ajudar

[@neiatitton3409]

Obrigada 🙏

[@fernandoHRO]

Quem está assistindo isso e nunca programou em Java?

[@davifirmino-nm3vm]

Nunca

[@Toxic_xz]

N sei nem oq eh java mn 😂😂

[@Canal_java]

Olaa dev Java aqui ❤

[@Gustavinho966]

​@@Toxic_xzaí complica Java e uma linguagem de programação que faz tudo consegue criar jogo dando que o Google usa o KZbin a Netflix e muitas outras.

[@tio_nika]

Java ou Java script?

[@marinhonecodelima]

Cara esse vídeo é um imã de neodímio pra atrair pessoas para programação, faz mais conteúdos assim, ensinando fazer jogos "simples" que fazem a gente QUERER fazer, parabéns, muito bom, não é chato aprender com conteúdos agradáveis.

[@jenniffersantossilva8583]

Incrivel, eu amo o Mario e amei essa lembrança e consegui fazer isso. Perfeito

[@lssanvi3582]

Para quem está com problema com o pulo do mario, isso acontece por que o script está carregando antes da pagina carregar por inteiro para evitar isso você pode colocar a tag script no fim do body ou usar o marcador "defer" no script isso fara com que o script apenas começe a carregar depois da pagina. Ex do uso do defer:

[@WezyX04]

Man, eu fiz essa desse jeito mesmo, mas mesmo assim o pulo não acontece, sabe oq pode ser ?

[@lssanvi3582]

@@WezyX04 seu codigo está no github?

[@WezyX04]

@@lssanvi3582 Nn

[@lssanvi3582]

@@WezyX04 Coloca ele la e me manda seu usuario para dar uma olhada

[@WezyX04]

@@lssanvi3582 Deixa quieto man, to com um problema a cota no git, na hora do comando push fica dando erro, vou ver se alguém no DC tem a solução pro pulo, mas mesmo assim vlw

[@OnitoanJR]

Muito incrível !!! Mais um dúvida, você pode compartilhar a sua configuração de Json sou novo em na área de DEV e achei muito legal na hora de codar essa sua config que aparece uma linha colorida ligando as "{", vai me ajudar bastante :)

[@raphaelferraz9516]

Mano tem uma extensão do VS Code que coloca cores nas "{ }", o nome é "Bracket Pair Colorization Toggler"

[@CarlosCorreia26]

Muito boa a aula, obg! fiquei triste apenas pq o meu funcionou apenas com o script em baixo do body, tentei na importação colocando o defer na tag script mas mesmo assim não foi.

[@AlcinoMartins777]

voce tem que colocar a importacção abaixo da tag de fechamendo do body

[@ronyteodoro]

Melhor canal que ja vi ensinando programaçao, pode dar a mao pro Guanabara

[@brunocunha5916]

Pintava esse projeto na minha mente como um bicho de 7 cabeças, mas agora vejo que é bem simples. Pensava que era 90% JS e os outros 10% html e css, mas ficou bem equilibrado. Vou tentar replicar ele

[@lucasdesouza2804]

Alguém conseguiu implementar o score? Eu tava pensando na seguinte lógica: se o pipe passar pelo mario e o jogo não parar então um contador soma mais um a variável score. Outra coisa que eu tava pensando era implementar um reload na página quando o jogo parasse e algum botão fosse pressionado a página daria um refresh e o jogo recomeçava e o score zerava (na verdade a variável sempre começa em zero). Vou tentar implementar.

[@ManualdoDev]

Boa, Lucas!

[@jessicamartins2180]

Adorei! Se conseguir ensina aqui no coment? Obrigada!

[@pabloalves]

Eu implementaria o score da mesma forma que você sugeriu

[@NaitroExtrime]

Conseguiu implementar? se sim pode me ajudar?

[@RaulStengerIF]

Conseguiu? kkk

[@marianymoraes974]

Que vídeo incrível! Você poderia disponibilizar o código ? Segui todos os passos mas tem algo que não tá rodando, queria dar uma conferida.

[@r0mul01]

se quiser eu te arrumo o meu

[@r0mul01]

index.html Mario Jump

[@r0mul01]

script.js const mario = document.querySelector('.mario'); const pipe = document.querySelector('.pipe'); const jump = () => { mario.classList.add('jump'); setTimeout(() => { mario.classList.remove('jump'); }, 500); } const loop = setInterval(() => { console.log('loop'); const pipePosition = pipe.offsetLeft; const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', ''); console.log(marioPosition); if(pipePosition 0 && marioPosition < 90) { pipe.style.animation = 'none'; pipe.style.left = `${pipePosition}px`; mario.style.animation = 'none'; mario.style.bottom = `${marioPosition}px`; mario.src = './images/game-over.png'; mario.style.width = '40px'; mario.style.marginLeft = '20px' clearInterval(loop); } }, 10); document.addEventListener('keydown', jump);

[@r0mul01]

style.css * { margin: 0; padding: 0; box-sizing: border-box; } .game-board { width: 100%; height: 800px; border-bottom: 15px solid rgb(52, 200, 57); margin: 0 auto; position: relative; overflow: hidden; background: linear-gradient(#87CEEB, #e0f6ff); } .pipe{ position: absolute; bottom: 0; width: 60px; animation: pipe-animation 2s infinite linear; } .mario{ width: 80px; position: absolute; bottom: 0; } .jump{ animation: jump 500ms ease-out; } .clouds { position: absolute; width: 600px; animation: clouds-animation 20s infinite linear; } @keyframes pipe-animation { from { right: -80px; } to { right: 100%; } } @keyframes jump { 0% { bottom: 0; } 40% { bottom: 190px; } 50% { bottom: 190px; } 60% { bottom: 190px; } 100% { bottom: 0; } } @keyframes clouds-animation { from{ right: -600px; } to { right: 100%; } }

[@r0mul01]

ficou diferente pq fiz como se fosse um desafio para mim, mas acho que os comandos estão iguais.

[@ManualdoDev]

Link do Google Drive com as imagens usadas: drive.google.com/drive/folders/1CYQ2CtPyiXcONexGfpQ1RnaPa30c7PNy?usp=sharing Aprenda também a criar o jogo da cobrinha com javascript: kzbin.info/www/bejne/gqq6hKaQoNmJhck

[@adryanmaikel9585]

Mano, que aula fod#@ tu é o cara, vou fazer até uns pixel art pra fazer um joguinho desse jeito kkkk

[@micheldouglasonline]

Onde stá o script? está disponível?

[@Cookieukw]

@@micheldouglasonline qria tbm. aprendo mt mais rápido na prática doq na teoria

[@henriquejunior118]

@@Cookieukw vc conseguiu o script ? tem algum erro no meu e eu queria comparar os códigos

[@Cookieukw]

@@henriquejunior118 nop. eu desisti e decidi aprender um framework voltado pra jogos, chamado phaser

[@MiguelzinhoOo08]

Cara, incrível demais, consegui replicar, mas vou ficar estudando esse game, tentando acrescentar mais elementos, pra treinar. Parabéns mesmo!

[@marcosant8969]

Muito criativo e muito bem explicado. Parabéns!

[@sidneycassiano5155]

Olá devs! Sou iniciante e estou com uma dúvida, na parte do código em que ele utiliza o 'offsetLeft' no video sai ok, porém, no meu código fica como se fosse texto e não como um elemento. Se alguém souber como resolver eu agradeço

[@wandsgui]

Conseguiu resolver amigo estou com mesmo problema

[@tiagolucas4704]

Galera eu conseguir resolver o problema que esta dando na hora do jump, sem colocar o código no Html E so colocar o link do script para dentro do body, e assim consegue resolver, Assim você garante que todo o HTML terá sido devidamente carregado (e pronto para manipulação) antes do script ser executado. ... Ok e so um informação toda vez que seu scritp não pega, aperte F12 e inspecione ele ao rodar na tela Ok !!!

[@rolveira]

deu certo aqui pra mim tb!! Valeuuuu!

[@higor0112]

Mano ideai do jogo é daora, mas to tentando fazer aqui, mas o meu mario não pula de jeito nenhum, e olha que eu coloquei igualzinho o javascript do video, por favor alguem me ajuda ?

[@adrianomenezesdemiranda924]

Mesmo problema :(

[@DriMirian98]

to com o mesmo problema, e as soluções que li aqui, nenhuma ajudou

[@keilamarquessobreiramarque5464]

Que vídeo perfeito!😍 Muito obrigada ! Aprendendo o que não entendi em 2 anos de curso.

[@guira1320]

O básico funciona. Eu te dou meus parabéns por conseguir mostrar na prática funções primárias de JS. Eu aprendi um pouco de JS, mas não conseguia colocar em prática pois achava meio "inútil". Você mudou meu jeito de pensar depois dessa grande aula.

[@emanuel2482]

Consegue me ajudar ? Ksksk

[@matheusvictorhenrique]

Nossa mano conteúdo muito bom porém o meu deu problema, independente do botão q eu aperte ele não pula, já usei a função keydown e segui a risca e msm assim não funciona

[@matheusvictorhenrique]

Nada do Javascritp está funcionando por algum motivo já revisei tudo até a referência dele no html

[@weslleyramonvasconcelos3934]

@@matheusvictorhenrique to no mesmo problema que vc

[@matheusvictorhenrique]

@@weslleyramonvasconcelos3934 agora é torcer q ele responda

[@ManualdoDev]

É complicado saber qual o problema assim, mas você pode tentar verificar se a importação do arquivo JS foi feita corretamente. Tenta, ao invés de importar no head, importar no final do body.. Tenta criar outra função de click em algum elemento por exemplo pra ver se funciona. Depois tenta dá uma olhada e qualquer dúvida pode mandar aqui mesmo!

Muito bom! Como sempre, bem explicado, sem "mimimi"...excelente, Parabéns! Aprendi MUITO!

[@ManualdoDev]

Valeu demais, Paulo! :D

[@edsonpaixaousa6962]

Muito bom o vídeo, vou aplicar mais este conhecimento em meu currículo.

[@kashgar0fc]

Mano, adorei a aula. Vai agregar muito. Vou fuçar o canal pra vê se tem mais kkk

[@kauanlopz8630]

caraca, que video bom man, assisti almoçando e foi bem melhor que botar qlqr futilidade kkkkkkkk, conhecimento de forma didatica e que te prende, parabéns!

[@call.shooter]

vlw mano me ajudou muito ainda tou no inicio aprendendo e um simples forma de mostrar come se faz um jogo esse video foi foda

[@leandromelo8305]

muito bacana, ficou sensacional o game... ótimo passatempo e várias dicas no seu vídeo são de ouro... parabéns!!!!

[@ManualdoDev]

Valeu demais, Leandro! :D

[@spsouzah]

ótima didática... o único ponto negativo é a falta das imagens para download hahaha, tirando isso, melhor vídeo aula que já vi!!!!!!

[@dancasemiroc]

SABE MUITO, explica muito bem parabéns

[@duclao14]

Eu não nada de programação e não sei como esse vídeo caiu aqui pra mim... mas foi muito satisfatório assistir.. kkkk O conteúdo é muito bem feito! já tenho noção é a lógica do Java kkkk Top, parabéns!!!

[@gabrielmagevski8362]

Primeiramente, obrigado por ensina de graça, segundamente, tu explica bem demais irmão, mandou muito!!!

[@WellingtonSilva-nw6wp]

Olá boa noite! Parabéns muito bom

[@Arttturslv]

Que video incrivel! Vi ontem a noite e fiquei super animado, não imaginava que daria pra fazer um jogo assim kkkkkkkk já implementei uma animação quando o mario morre, mas to pensando em fazer muito mais! Quero testar muito mais coisas e depois disso vou tentar fazer um street fighter ou algo do tipo.

[@raylander1189]

Caracas show de bola, como eu queria ter cabeça para aprender programar.

[@bonus630]

A umas semanas atrás fiz um bem parecido para começar a estudar typescript, porém só com typescript, hoje o youtube me recomendou esse seu video, muito bom. Esse tipo de projeto é muito bom para quem está iniciando, pois já oferece uma recompensa visual imediata