Como criar um jogo SIMPLES usando JavaScript e HTML | JavaScript para iniciantes - Tutorial
HTML-код
- Опубликовано: 12 сен 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
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
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
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
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???
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
que didatica excelente, sem enrolação, palavras simples, explicação simples.
pqp
eu estou aplaudindo de pé esse vídeo !
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
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 RUclips
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”
Cara, o vídeo é de 7 meses e tô comentando agora por que todos os vídeos que achei no RUclips, 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 ?
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
Cara, excelente didática! PArabéns, vejo poucos devs brasileiros ensinando tão bem no RUclips, aliás, nem sabia que seria tão simples de fazer um joguinho com puro html, css e javascript.
Que vídeo sensacional!
Para quem tem o básico do conhecimento nessas linguagens, isso tem um valor imensurável, parabéns pelo trabalho.
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.
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!
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.
Muito bom. Agora mesmo sendo um joguinho simples é muito comando, muito detalhe. Fico imaginando esses jogos atuais a complexidade pra fazer...
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
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
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!
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
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
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.
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
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.
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 RUclips de graça amigo
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!
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.
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 RUclips a Netflix e muitas outras.
Java ou Java script?
Cara, você é top!
HTML, CSS e JS parecem um kit de mágica
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
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
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?
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
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 ???
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
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!!!
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.
Assisti 30m sem saber nem o que é html ou Java. Mas foi satisfatório e de "fácil" compreensão
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
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.
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.
Simplesmente Incrível 🔥 Eu peguei algumas dicas pra melhorar um joguinho q eu estava fazendo, vlw pelas dicas brow 💪🏻❤️
Topzera Total!! Grato por dedicar esse tempo disponibilizando esse conteúdo de forma gratuita. Parabéns.
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 :)
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!
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!
Fiz e ficou massa, gostei tanto que refiz novamente utilizando o framework Angular
eu também kkkk
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.
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: ruclips.net/video/LyWSsZktVOg/видео.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
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!!!
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
Muito bom mesmo, se puder trazer outro tutorial de jogos 2d seria ótimo!
top demais simples e objetivo, parabéns 👏🏻
Fico feliz com seu comentário, Nicolas! Valeu demais!
MANO, A FACULDADE TA ME RECOMENDANDO SEU VIDEO KKKKK
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
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.
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
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"
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
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.
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.
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 🙏
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.
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
Incrivel, eu amo o Mario e amei essa lembrança e consegui fazer isso. Perfeito
Muito bom! Como sempre, bem explicado, sem "mimimi"...excelente, Parabéns! Aprendi MUITO!
Valeu demais, Paulo! :D
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
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
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.
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!
estou estudando programação, me deu um frio na barriga pra criar todo esse jogo do mario em 2D pq minha vontade em programação era a ideia
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
Que vídeo perfeito!😍 Muito obrigada ! Aprendendo o que não entendi em 2 anos de curso.
Aula simplesmente espetacular, PARABENS e OBRIGADO por dedica tempo pra ajuda outras pessoas.
Que vídeo sensacional! Você explica muito bem e deixa super claro o que está fazendo e isso facilita muito a compreensão.
A didática realmente é simples, direta e objetiva, ótimo trabalho, parabéns!
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.
Do jeito que vc explica, torna tudo mais simples. Obrigado
fui obrigado a me inscrever, com um conteúdo desse n tem como ignorar simplesmente fantastico.
Valeu demais, Bruno! Tamo junto!
Cara, incrível demais, consegui replicar, mas vou ficar estudando esse game, tentando acrescentar mais elementos, pra treinar. Parabéns mesmo!
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
Carambaaaa!! Se pra fazer um joguinho desse é mo trampo! Fico imaginando os jogos grandes. Que trabalha não deve ser ehn?!!
Mas esse video foi perfeito. Conheci o canal hj, porwue estou aprendendo programação a pouco tempo. Ta difícil, mas nao vou desistir😅
amei a forma simples que você explica as funcionalidades !
Muito bom, nem precisei ver o vídeo inteiro para dar um super like e inscrição. Muito bom exercício.
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!!
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!!!
O legal é que você se diverte e quando menos percebe, já está sabendo programar um pouco
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.
Não sabia dessas técnicas de animação, muito bom vídeo, por favor faça mais!!!
Mó daora cara! Parabéns pela didática! Tu tem ou pretender criar algum curso?
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!
pense num cara feliz!!! consegui fazer, apanhei em alguns momentos... o offsetLeft dava diferença entre maiuscula e minuscula, sei la!! hein, agora só falta adicionar os mp3 do mario!!! comofas? kkkk
ah, apanhei tbm pra colocar a cor do background.... uma hora ficava rgb e ai vc clicava e mudava pra hsl e nao exibia no browser. Aí eu tinha que voltar a linha inteira e reescrever... consegui quando escrevi letra por letra lightblue virgula white.
parabens, ja to inscrito para os proximos projetos que porventura existam no canal.
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!
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!