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

Download das imagens: drive.google.com/drive/folder...
Aprenda a criar o jogo da cobrinha com javascript:
• Como criar o jogo da c...
Nesse vídeo tutorial você vai aprender a programar um jogo simples usando apenas html, css e JavaScript.
Ao final, você terá feito um jogo onde é possível pular obstáculos. O jogo termina quando você colide com algum obstáculo.
#javascript #html #css #tutorial #programação #game #jogo #desenvolvimentoweb

[@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.

[@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?

[@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.

[@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

[@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

[@luizs.f.c2379]

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

[@marcosilva3041]

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.

[@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”

[@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 :(

[@user-fl7dx1os6x]

@@carolinecoelho2393 conseguiu? Também estou precisando

[@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.

[@beto5387]

Estou acompanhando o projeto aqui não terminei ainda mas já me atrevo a comentar, parabéns pela didática, consegue transmitir o conteúdo de uma maneira bem detalhada e prende a atenção de quem está acompanhando!! show de bola, ganhou mais um inscrito!

[@rodrigomartins8243]

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

[@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!!!

[@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!!!

[@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

[@marcelocampos_developer]

​@@Ninezin9 eai como esta hoje?

[@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!

[@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.

[@jonescsarMk007]

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

[@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

[@Dominic_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.

[@macroxp3484]

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

[@Medusacururu]

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

[@Calmison]

Que video, que aula, que didática! Parabéns!!! Estou começando no mundo dos dev's e certeza que JavaScript é o que quero.

[@No_one12351]

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

[@higorlokk]

Caramba velho que dahora, feliz em contar seus conteúdos, realmente muito top

[@jonnathan73]

Mano, parabéns pela didática! Mandou mto bem! Tá tos conceitos em apenas 30mnts de vídeo, direto ao ponto e sem enrolação. Ganhou um inscrito e vou espalhar a palavra.

[@paideliz]

Mano, tooooop demais! Sua didática, seu conhecimento, espetacular. Por favor, não pare de fazer vídeos, nem que seja pago, mas não pare!

[@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!

[@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 ???

[@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.

[@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 ?

[@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.

[@lucasfarias2432]

Obrigado pelo conhecimento compartilhado. É legal quando a sintaxe da linguagem é posta num contexto significativo, e as coisas ficam mais claras de se notar. As vezes o conhecimento está diante dos nossos olhos e não consegue ver, mas basta usar um contexto apropriado, que a mente vai destravando.

[@victorescandiel8167]

Conteúdo simplesmente sensacional, tua didática é muito boa, de verdade. Conheci hoje o canal e já vou maratonar todos os vídeos hahahhauh, valeu camarada!

[@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

[@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.

[@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!

[@antoniopereira2721]

A didática realmente é simples, direta e objetiva, ótimo trabalho, 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

[@RUBEMDESB]

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

[@tecnerd_ofc]

ainda não tive tempo para criar esse projeto, mas assisti o vídeo, e vi que sua didática é mt boa, meus parabéns por postar conteúdo de qualidade, e ensinar de maneira clara e objetiva, sucesso mano.

[@mavick.]

cara, eu estou simplesmente apaixonada por essa aula. está incrível! muito obrigada por esse conteúdo maravilhoso. aprendi demaais e me deu muitas ideias. obrigadaa!

[@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.

[@nicolasbueno3522]

top demais simples e objetivo, parabéns 👏🏻

[@ManualdoDev]

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

[@alexandrevictorvazdemello6493]

que didática incrível!!! Parabéns pelo trabalho e muito obrigado por compartilhar conhecimento

[@keilamarquessobreiramarque5464]

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

[@stargame6757]

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

[@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

[@renatoalves3008]

Que vídeo incrível, para quem está iniciando no ramo esse vídeo é sensacional, falando de cada detalhe, já está anotado aqui no caderno agora só aplicar

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

[@ManualdoDev]

Valeu demais, Paulo! :D

[@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

[@gustavolorenz4883]

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

[@ARTSeARTS]

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

[@brunoeufrasio]

Do jeito que vc explica, torna tudo mais simples. Obrigado

[@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

[@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

[@micheldouglasonline9046]

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

[@Cookieukw]

@@micheldouglasonline9046 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

[@EuBrasileiro]

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

[@bela9-tx4iy]

Esse vídeo é perfeito! Obrigada por compartilhar o seu conhecimento!

[@smartcashclub]

Ótimo vídeo e bem didática suas explicações, parabéns. Gostaria de aprender como criar eventos de collision no javascript.

[@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

[@viniciusribeiro2221]

Ganhou mais um inscrito. Excelente a explicação. Didática, simples e bem objetiva. Valeu mano.

[@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!

[@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

[@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 ?

[@mateorlandi]

Muito bom, didática fantastica. Em poucos minutos aprendendo muuuita coisa. Parabéns

[@isabellesousa9852]

Que vídeo incrivel, por favor continue. Amei demais.

[@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

[@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

[@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

[@igorcorreia2199]

QUE CARA BOM VELHO PQP! didática maravilhosa, quebrei o like aqui!

[@pedroh9overdadeiroph60]

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

[@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

[@joaovictormotta627]

Aula sensacional! Conteúdo bem editado, bem explicado e sem margem pra erro de abstração do aluno. E eu achando que não tinha conteúdo nacional assim. Parabéns! Já me inscrevi e tô doido pra ver mais.

[@ManualdoDev]

Muito obrigado pelo apoio, João Victor! Tamo junto! Abraço!

[@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.

[@DanielSantos-vq2fz]

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 :)

[@augustorego1]

Top mano, primeiro projeto prático que faço de algo que envolva html, css e js muito obrigado mano, vou acompanhar seus videos e estudá-los direto

[@tonysilvamoura]

Sensacional, aula muito top, continue assim. Grande abraço!!!

[@PIXELDEPT]

MANO, A FACULDADE TA ME RECOMENDANDO SEU VIDEO KKKKK

[@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?

[@RaphaellosDev]

que didática incrível, aprendi muitos conceitos nesse vídeo, muito obrigado!!!

[@NatTecnologiaEFinancas]

Sensacional, muito bom. Uma das melhores aulas que já assisti.

[@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.

[@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"

[@marcosant8969]

Muito criativo e muito bem explicado. Parabéns!

[@FredericoAmaral]

Muito bacana o tutorial. Uma coisa top é que você explica o porque das coisas e como funcionam pra que o dev possa saber porque usar aquele recurso. Parabéns pelo conteúdo e pela didática!!

[@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

[@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 🙏

[@taynarabicalho]

Projetinho muito legal de se fazer!!!! Obrigada por compartilhar

[@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

[@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

[@teodorokids]

Conseguiu resolver amigo estou com mesmo problema

[@ruanlopes2687]

Sua aula foi muito top! Obrigado aí pelas dicas e didática! Vou me inscrever aqui para acompanhar mais projetos assim.. ensina bastante quem ta começando e aumenta o portfólio!

[@ManualdoDev]

Muito obrigado pelo apoio, Ruan! Tamo junto!

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

[@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

[@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

[@chrody]

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

[@stillpickinganame5350]

Muito obrigada! Foi super fácil de acompanhar e perceber, continua assim!❤

[@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.