Jogo com JavaScript #04: Cenário infinito e animando o passarinho com frames 

Perdão pelo atraso, tivemos algumas tretas na edição mas ta ai!!! 🔸 Esse é o vídeo #04, mas o resto da playlist tá aqui também: ru-vid.com/group/PLTcmLKdIkOWmeNferJ292VYKBXydGeDej

Essa playlist ta muito delicinha, aguardando pelos próximos vídeos 😍

muito boa as aulas, a logica matematica que é o mais dificil de assimilar kkk mas como toda programação a repetição que fará você entender mt bem com o tempo! mt bom professor

Pra quem nao entendeu o esquema do "resto da divisão" , sempre que tiver um numero X % Y , o resultado sempre sera X, menos quando os dois valores forem o mesmo, ai o resultado sera 0. No caso do jogo, sempre que X dele (o chao) chega na pos -112, ele bate com o o Y (112) retornando o valor Zero.

Que delicia de série hein

Que da hora esses videos!! Parabéns, prende a atenção da gente!!

Show... demorou mais saiu !! ✌️👏

Boa! Dei uma incrementada no meu código já, mas estou no aguardo do próximo vídeo! :)

Fica mais fácil de entender quando vc n corta a construção do código, minha opinião só 👊🏻

Video muito bom!!!

obrigada pela aula!!!

Sei que faz tempo que o vídeo foi lançado mas me surgiu uma dúvida sobre jogos no geral: Para ficar mais fácil de entender vou pegar como exemplo a velocidade do chão. Nós alteramos a velocidade do chão a cada iteração do loop, mas em computadores mais modernos, a iteração é feita mais rápida, isso deixaria a velocidade do nosso chão diferente para diferentes computadores… mas não é o que eu costumo perceber… por exemplo ao jogar em computadores mais antigos e depois em computadores mais novos, não consigo notar alguma diferença na jogabilidade nem na velocidade que o jogo ocorre(a não ser que o jogo esteja rodando menos que 30fps haha) Não sei se deu pra entender mas a ideia é que em computadores mais potentes, os loops serão feitos mais rápidos e isso tornaria a fluidez do jogo mais rápida e impactaria na jogabilidade: o passarinho iria cair mais rapido, o chão e os túneis se moveriam mais rapido, etc… minha dúvida é: como o computador/browser/app resolve essa questão?

D4.2 - maratona do canal

Show!!!😁

muito agradecido pelo seu canal que é fantástico, estou adorando, eu gosto de mexer nos códigos criar ostras formas a título de desafio mesmo, bom javascript pra mim é novidade, estou estuando não tem um mês... bom as com esses professores fica fácilll srsrsrsrsrs na parte de bater asas eu fiz o seguinte adicionei ao objeto do pássaro 3 elementos ( xframe ) - conta de 0 a 4 para selecionar que passo desenhar ( xfreio ) - determina de quanto e quanto vou liberar um novo desenho ( xbaterdeasa ) - é um contador que vai servir para comparar com o xfreio quando esse xbaterdeasa for igual a xfreio libera um desenho novo movimentos: [ { spriteX: 0, spriteY: 0}, // asa pra cima { spriteX: 0, spriteY: 26}, // asa no meio { spriteX: 0, spriteY: 52}, // asa pra baixo { spriteX: 0, spriteY: 26}, // asa no meio ], atualizaOFrameAtual(){ if (flappyBird.xbaterdeasa == flappyBird.xfreio){ flappyBird.frameAtual = flappyBird.xframe; flappyBird.xframe++; if (flappyBird.xframe > flappyBird.movimentos.length-1 ){ flappyBird.xframe = 0; // reseta o indice para o desenho } flappyBird.xbaterdeasa=0; // reseta o contador }else { flappyBird.xbaterdeasa++; // incrementa o contador de tempo para bater asa } no objeto do flappyBird ficou assim: gravidade: 0.25, velocidade: 0, xframe:0, //

Muito bom! Mas só um pedido, se conseguires evitar de dar essas aceleradas no vídeo (1:51). Mesmo sendo algo que já tinhas feito antes, têm gente meio burra que se perdeu nessa parte (eu) ksksksksk.

opa. vlw d+. curti d+. estou no aguardo dos proximos e do 3d. hauhahua qdo for falar de colisao, fiquei sabendo q um dos mais aconselhados algoritmos eh o quadtree, pode falar dele e usá-lo de repente? parabens.

Opa, só vendo essa série agora! Que massa! Tô com algumas frustrações enquanto às colisões, os sprites as vezes ultrapassam as colisões dependendo da velocidade da queda (por exemplo) ou do ângulo em que ele colide. Vou tentar implementar o Collide 2D pra ver se consigo resolver esses "problemas" visuais e atualizo aqui caso consiga!

Na parte de fazer o chão voltar, por que não fazer simplesmente um if? Tipo: if (chao.x

Finalmente, achei que só meus netos assistiram esse vídeo..

Manda salve meu consagrado!!!

Segundooo hahaha

Estou gostando demais desta sua playList, mas tenho uma duvida... na verdade um problema... meu código fica executando o loop muito mas muito rápido. alguém tem alguma ideia doque pode ser ?

Acha uma boa aprender javascript para criar jogos 2d? Quando pesquiso ou converso com alguém sobre isso, todos dizem para eu estudar C# e uma Unity da vida, mas queria muito aprender web dev e criar jogos 2d, acha que estou viajando?

Tá perdoado! Ficou muito bom! Tem alguma dica de como entender essa lógica da repetição aí? Não ficou muito claro pra mim não...

Oi Mario!! Beleza?? Mano, queria te pedir um negócio... Tu poderia fazer uma série ensinando a programação básica e os seus conceitos?? Logicamente não explicando e ensinando tudo de programação, até porque para isso nós temos a Alura (hehe).

quem nasce com o dom de ensino é outros 500 ... se n tem noção das raivas q eu passo com alguns professores da udemy com suas didaticas horríveis e vem vc com aulas free em níveis premiums

Estou parado nessa parte após você criar a função criaChao fiz a alteração globais mas, o código está dando mensagem de erro, tela azul

faz um video organizando esses códigos , para eu poder ficar treinando ?

Primeirooo

mario souto o meu flappy bird ele cai e não reinicia

Eu fiz de outra maneira na lógica assim: chao.x = chao.x - 1 If(chao.x < -120){ chao.x = -10 }

Depois da parte do globais meu código parou de funcionar... oq posso fazer?

Meu pássaro ao invés de estar animado esta piscando a mesma posição do array, e no console log os números estão todos embaralhados, ele não cresce de 1 em 1

Você usa o Vscode como instala? E como usa ele?

o resto da divisão nunca vai ficar maior que o 112 ?

tô aprendendo mas não intendi esse código da animação

Essas acelerações no vídeo poderiam ser evitadas e em vez disso dividir o vídeo em capítulos.

cara eu to curtindo mas toda hora o video é acelerado, fica ruim de acompanhar !!

Com todo respeito, não era mais simples um mero if(chao.x == chao.largura / 2) { chao.x = 0}; ???

Cara eu não entendi essa aula, você fez algumas coisas rápida de mais. na hora da Function CriarChao Você copiou o chão que já tinha e refez ??

// [Chao] function criaChao() { const chao = { spriteX: 0, spriteY: 610, largura: 224, altura: 112, x: 0, y: canvas.height - 112, atualiza() { const movimentoDoChao = 1; const movimentoDoChao = chao.x - movimentoDoChao; }, desenha() { contexto.drawImage( sprites, chao.spriteX, chao.spriteY, chao.largura, chao.altura, chao.x, chao.y, chao.largura, chao.altura, ); contexto.drawImage( sprites, chao.spriteX, chao.spriteY, chao.largura, chao.altura, (chao.x + chao.largura), chao.y, chao.largura, chao.altura, ); }, }; return chao; } meu chão n se mexe, alguem sabe me ajudar pff ??