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

@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

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

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

é 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

Pensei o mesmo! kkk

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

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”

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?

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 RU-vid a Netflix e muitas outras.

Java ou Java script?

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

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

@@carolinecoelho2393 conseguiu? Também estou precisando

Vão fazer um jogo juntos ?

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.

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

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

Valeu demais, mano! Tamo junto!

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

Opa têm como mandar o jogo pra nois ver

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

@@wes3184 blz :D

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

Qual curso vc faz ?

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

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

manda para mim esse codigo github deste seu projeto

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?

Gustavo Guanabara no RU-vid de graça amigo

É 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

eu também kkkk

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

concordo, daria um bom portfólio

Excelente ideia!

Celoko! Aí vem a Nintendo e processa geral.

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

@@salles8172 seu codigo está no github?

@@lssanvi3582 Nn

@@salles8172 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 tem uma extensão do VS Code que coloca cores nas "{ }", o nome é "Bracket Pair Colorization Toggler"

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?

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

Obrigada 🙏

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

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.