Como criar um jogo SIMPLES usando JavaScript e HTML | JavaScript para iniciantes - Tutorial
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- Download das imagens: drive.google.c...
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
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
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
@manual se puder deixar meu comentario fixado eu to montando uma aulinha com seu video pra um amigo
não consegui editar essa mensagem então deixei outra com o resto da lista até o final do jogo
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"
Obrigado amigo 😅 vc é um amigo 🙏
@@brunoguedes307 tmj
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
vlww :)
Vlww
salvouuu
Como deveria ficar ? Tentei com a TAG de fechamento tbm e não funcionou
@Projeto Social eu só consegui depois que coloquei todo o código no HTML
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.
Eu
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.
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
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"
document.addEventListener('keydown', event =>{
if(onAir && event.key !== 'ArrowUp' && event.key !== 'w') return;
jump();
});@@REINICIARJOGO_
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
que didatica excelente, sem enrolação, palavras simples, explicação simples.
pqp
eu estou aplaudindo de pé esse vídeo !
30 minutos que ensinam mais que um semestre na faculdade
é verdade kkkkkkkkkkkkk
Faculdade é foda. Deveriam ser o ápice do conteúdo, educação,mas deixam a desejar demais
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
VDD rssrr o cara é fera demais
Mas do que todos os semestres kkkkk
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"
voce pode me mandar as imagens? não estou achando :(
@@carolinecoelho2393 conseguiu? Também estou precisando
Meia hora de ensinamento e já foi possível aprender tantas coisas. Nem sabia que css tinham essas funcionalidades de animação.
Show...
video muito rico de informações, aprendi muita coisa que nem sabia que podia, rs
@@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?
@@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
@@Ninezin9 eai como esta hoje?
@@Ninezin9EAI Man conseguiu continuar na programação???
Cara, o vídeo é de 7 meses e tô comentando agora por que todos os vídeos que achei no TH-cam, 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💪
Vão fazer um jogo juntos ?
Simplesmente incrível a aula, melhor que as da faculdade kkkkk
Pensei o mesmo! kkk
Quando eu me formar meu agradecimento na hora de pegar o diploma vai ser ao professor TH-cam
praticamente todo bom conteúdo de programação na internet é melhor que qualquer aula de faculdade na prática kkk
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.
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”
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!!!!
Não entendi amigo, poderia me da um help ai Pfff
@@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
@@josephh4unter798 Obrigado pela ajuda
@@josephh4unter798 Vlw
Vlw meu camarada ajudou muito
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: th-cam.com/video/LyWSsZktVOg/w-d-xo.html
Mano, que aula fod#@ tu é o cara, vou fazer até uns pixel art pra fazer um joguinho desse jeito kkkk
Onde stá o script? está disponível?
@@micheldouglasonline9046 qria tbm. aprendo mt mais rápido na prática doq na teoria
@@Cookieukw vc conseguiu o script ? tem algum erro no meu e eu queria comparar os códigos
@@henriquejunior118 nop. eu desisti e decidi aprender um framework voltado pra jogos, chamado phaser
Cara, excelente didática! PArabéns, vejo poucos devs brasileiros ensinando tão bem no TH-cam, aliás, nem sabia que seria tão simples de fazer um joguinho com puro html, css e javascript.
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!
Eu que agradeço o apoio, meu amigo!
Tamo junto!
Abraço!
seria muito bacana se vc tivesse um curso para ensinar mais sobre javascript, sua forma de ensinar é muito boa ! parabéns mano !
É uma boa, Brayan!
Valeu demais! Vou preparar algo melhor pra ensinar javascript. Vai ser bem legal!
Valeu!
@@ManualdoDev Na expectativa desse novo projeto!
@@ManualdoDev Pode fazer, você ensina muito bem!
@@ManualdoDev que video sensacional, melhor do que na teoria , pq é vendo que se aprende parabéns!!
@@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
Que aula espetacular! Parabéns! Não conhecia o canal. Acabei de me inscrever!
Valeu demais, Felipe! Fico feliz que tenha gostado! Tamo junto!
@@ManualdoDev digo o mesmo que ele sou iniciante me inscrevi agora por causa desse vídeo vc explica muito bem
@@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.
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.
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!!
Gustavo Guanabara no TH-cam de graça amigo
Que vídeo sensacional!
Para quem tem o básico do conhecimento nessas linguagens, isso tem um valor imensurável, parabéns pelo trabalho.
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 🙏🙏👏🏻👏🏻👏🏻
Muito obrigado, Bruno! Pode deixar que vai vir mais conteúdos assim sim!
Valeu!
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
Muito obrigado, Nathan!
Fico feliz que tenha ajudado! Valeu demais! :D
@@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
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
aproveita, estuda, vc vai ganhar 7 mil reais aos 20 anos
@@wes3184 blz :D
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.
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
Aprendi mais com um único vídeo seu, do que 1 semestre inteiro na faculdade em que estou matriculado. Parabéns!!! 😅
Qual curso vc faz ?
Um video de 30 min. me fez produzir mais que 3 meses de aula. Parabéns pro.
Uns dos vídeos mais satisfatórios que assisti sobre programação. Muito foda, mano!! Muito irado entender tudo o que tá acontecendo.
Valeu demais, mano! Tamo junto!
Fantástico.agora imagina jogos iguais o God of war? incrível.
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!!!
nss vei nada faz o pipe parar ajuda a tropa mn
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!
Muito bom. Agora mesmo sendo um joguinho simples é muito comando, muito detalhe. Fico imaginando esses jogos atuais a complexidade pra fazer...
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 !!!
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!
@@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
@@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}`
@@PedroHenrique-go9fe salvou kkkkk
@@PedroHenrique-go9fe
Ai quimoleza, vscode digitando o template que eu deveria ter escrito
Cara, você é top!
HTML, CSS e JS parecem um kit de mágica
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!!!
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.
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...
Opa têm como mandar o jogo pra nois ver
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.
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
Que aula maravilhosa, mesmo sendo iniciante eu consegui entender através da sua lógica de pensamento e os comandos utilizados. Parabéns!
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
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.
Eu que agradeço o apoio, Jonathan!
Fico feliz que tenha te ajudado um pouco.
Tamo junto!
Abraço!
Sensacional! Nem vi o tempo passar! Iniciando na programação e foi muito esclarecedor seu vídeo. Ganhou mais um seguidor
como vc ta hoje em dia meu mano, ja ta profissa na programação ???
Topzera Total!! Grato por dedicar esse tempo disponibilizando esse conteúdo de forma gratuita. Parabéns.
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
Show demais, Estefany!
Obrigado pelo elogio! :D
@@johncfer eu consegui fazer essa aula se quiser ajuda eu te mando o meu .
Você conseguiu fazer o placar, e o botão de start, tentei fazer e não consegui, se possível compartilhar seu código ?
@@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
@@SCFanny poderia colocar o número nesse comentário?
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.
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!!!
Simplesmente Incrível 🔥 Eu peguei algumas dicas pra melhorar um joguinho q eu estava fazendo, vlw pelas dicas brow 💪🏻❤️
Quem está assistindo isso e nunca programou em Java?
Nunca
N sei nem oq eh java mn 😂😂
Olaa dev Java aqui ❤
@@Toxic_xzaí complica Java e uma linguagem de programação que faz tudo consegue criar jogo dando que o Google usa o TH-cam a Netflix e muitas outras.
Java ou Java script?
Assisti 30m sem saber nem o que é html ou Java. Mas foi satisfatório e de "fácil" compreensão
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.
Aula simplesmente espetacular, PARABENS e OBRIGADO por dedica tempo pra ajuda outras pessoas.
Fiz e ficou massa, gostei tanto que refiz novamente utilizando o framework Angular
eu também kkkk
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.
manda para mim esse codigo github deste seu projeto
Muito bom o vídeo irmão, se puder seria uma boa disponibilizar as imagens q tu usou
Aqui o link: drive.google.com/drive/folders/1CYQ2CtPyiXcONexGfpQ1RnaPa30c7PNy?usp=share_link
Também atualizei lá na descrição :)
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
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.
Consegue me ajudar ? Ksksk
top demais simples e objetivo, parabéns 👏🏻
Fico feliz com seu comentário, Nicolas! Valeu demais!
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 !!!
deu certo aqui pra mim tb!! Valeuuuu!
Muito bom mesmo, se puder trazer outro tutorial de jogos 2d seria ótimo!
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
Que vídeo sensacional! Você explica muito bem e deixa super claro o que está fazendo e isso facilita muito a compreensão.
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!
concordo, daria um bom portfólio
Excelente ideia!
Celoko! Aí vem a Nintendo e processa geral.
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:
Man, eu fiz essa desse jeito mesmo, mas mesmo assim o pulo não acontece, sabe oq pode ser ?
@@WezyX04 seu codigo está no github?
@@lssanvi3582 Nn
@@WezyX04 Coloca ele la e me manda seu usuario para dar uma olhada
@@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
MANO, A FACULDADE TA ME RECOMENDANDO SEU VIDEO KKKKK
Muito bom! Como sempre, bem explicado, sem "mimimi"...excelente, Parabéns! Aprendi MUITO!
Valeu demais, Paulo! :D
Estou iniciando e este tutorial me animou demais. Ficar apenas vendo aulas extensas de logica sem brincar um pouco estava muito entediante. Muito obrigado por este video!!!
Eu que agradeço o apoio, meu amigo!
Tamo junto!
25:35 aqui o game ja ta funcionando perfeitamente. Se voces tiverem problemas com os caracteres como as setas e so colocar => e
Mano poderia me ajudar o meu mario so ta pulando uma vez apaguei refis mas não ta indo tem como me ajudar
Obrigada 🙏
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.
Boa, Lucas!
Adorei! Se conseguir ensina aqui no coment? Obrigada!
Eu implementaria o score da mesma forma que você sugeriu
Conseguiu implementar? se sim pode me ajudar?
Conseguiu? kkk
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 :)
Mano tem uma extensão do VS Code que coloca cores nas "{ }", o nome é "Bracket Pair Colorization Toggler"
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.
Que vídeo perfeito!😍 Muito obrigada ! Aprendendo o que não entendi em 2 anos de curso.
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.
voce tem que colocar a importacção abaixo da tag de fechamendo do body
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.
se quiser eu te arrumo o meu
index.html
Mario Jump
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);
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%;
}
}
ficou diferente pq fiz como se fosse um desafio para mim, mas acho que os comandos estão iguais.
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 ?
Mesmo problema :(
to com o mesmo problema, e as soluções que li aqui, nenhuma ajudou
A didática realmente é simples, direta e objetiva, ótimo trabalho, parabéns!
amei a forma simples que você explica as funcionalidades !
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
Nada do Javascritp está funcionando por algum motivo já revisei tudo até a referência dele no html
@@matheusvictorhenrique to no mesmo problema que vc
@@weslleyramonvasconcelos3934 agora é torcer q ele responda
É 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!
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
Conseguiu resolver amigo estou com mesmo problema
Muito educativo o seu video!
Achei interessante o assunto e vim verificar como é programado em HTML | JavaScript, e achei o conceito muito parecido com as outras linguagens, nunca tinha visto como era programado.
Eu sou um entusiasta no C++ com a Unreal Engine, e cada linguagem tem o seu diferencial, mas a lógica ainda continua!
Parabéns, curti demais o teu video.
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
Assisti no passado, e assisti hoje de novo. A reação é a mesma: UAU!!! Parabéns amigo.
Que explicação maravilhosa, meus parabéns meu amigo, muito didático!!!
18:48 - Pra fazer isso só precisa utilizar a propriedade animation-play-state, definindo seu valor para paused.
Incrivel, eu amo o Mario e amei essa lembrança e consegui fazer isso. Perfeito
NOSTALGIA. 👍 Me lembrando da época que estudei na Escola RED ZERO do Rio de Janeiro. Parabéns pela vídeo aula e desejo muito sucesso para seu canal. 🤜🤛 INSCRITO
Muito bom, nem precisei ver o vídeo inteiro para dar um super like e inscrição. Muito bom exercício.
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.
Não sabia dessas técnicas de animação, muito bom vídeo, por favor faça mais!!!
Cara, incrível demais, consegui replicar, mas vou ficar estudando esse game, tentando acrescentar mais elementos, pra treinar. Parabéns mesmo!
Do jeito que vc explica, torna tudo mais simples. Obrigado
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.
Muito obrigado pelo apoio, João Victor!
Tamo junto!
Abraço!
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!
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!
Olá! Quem está com dificuldade aparecer imagem no código (na hora do ) tenta colocar pasta de image dentro do JS (e que no vídeo ele não fala para colocar)
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!!
seu video está sendo bem útil em um projeto que eu estou fazendo. Muito obrigada! Vc é fera 🖤🖤
Olá, nunca pensei que poderia achar uma explicação tão esclarecedora assim, vc está de 👏👏👏👏👏
Muito obrigado, amigo!
Ganhou mais um inscrito. Excelente a explicação. Didática, simples e bem objetiva. Valeu mano.
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!
muito bacana, ficou sensacional o game... ótimo passatempo e várias dicas no seu vídeo são de ouro... parabéns!!!!
Valeu demais, Leandro! :D
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.