Тёмный

Jogo com JavaScript #03: Colisão, Pulo, Web Audio API feat. Soco do Ryu 

Mario Souto - Dev Soutinho
Подписаться 89 тыс.
Просмотров 19 тыс.
50% 1

É hoje que a gente faz o passarinho pular, bater no chão e tomar um SOCO DO RYU!!!! 😱
No terceiro vídeo da série vamos aprender a adicionar efeitos sonoros em um jogo via Web Audio API e aprender a como fazer colisões junto com o aperfeiçoamento da nossa troca de telas.
🔸 Código do Jogo: #DevSoutinho #JogoComJavaScript
■ github.com/omariosouto/flappy...
🔸 Documentação
■ developer.mozilla.org/en-US/d...
🔸Quer ver mais conteúdos meus? Segue ai!
■ / omariosouto
■ t.me/hipstersfrontend
🔸Sabia que eu tenho séries na Alura também?
■ www.alura.com.br/webseries/fr...
■ www.alura.com.br/webseries/gi...

Наука

Опубликовано:

 

28 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 111   
@erosborba6910
@erosborba6910 4 года назад
Pra quem estiver criando junto, como eu. Aos 09:56 na linha 150 fica " telaAtiva.inicializa(); " ele deve ter corrigido depois, porém, não ficou claro. Perdi um bom tempo sem entender pq meu código bugou hahahaha. Vlw!!
@DevSoutinho
@DevSoutinho 4 года назад
Caraca, que vacilo! Mil desculpas!
@mzzff
@mzzff 3 года назад
Caramba salvou muito kkkk muito obrigado, buguei pakas
@jonasramo2439
@jonasramo2439 3 года назад
Nossa, passei um bom tempo nisso, depois que observei os comentários me deparei com o seu e vou te dizer que você foi de valiosíssima ajuda de verdade, valeu mesmo, é por meio de pessoas como você que ainda tenho fé de que o Brasil ainda tem esperança de ir pra frente que gosta de ajudar sem esperar grande coisa em troca, então, mais uma vez muitíssimo obrigado.
@eirenefireman6017
@eirenefireman6017 3 года назад
salvou demais!!!
@larissasoares8421
@larissasoares8421 3 года назад
Cara...vc é um santo...muito obrigada mil assim HDAUDHSAUDHUASDH tava me achando lesada ja
@JoaoPauloDBZ
@JoaoPauloDBZ 4 года назад
Nossa man, tu explica muito bem... Sei pouca coisa de javascript mas estou entendendo tudo kk... Aguardando o próximo videos!!
@DevSoutinho
@DevSoutinho 4 года назад
Fico muuuuuuito feliz de ler isso, nos vemos no próximo video! 😁
@carlosalexandredev21121
@carlosalexandredev21121 Год назад
Ele fica tão empolgado ensinando, isso é muito bom, traz uma energia muito boa e natural. Espero que traga mais séries dessa forma!!
@devHB
@devHB 2 года назад
D3.2 - maratona do canal
@mateuslayber7742
@mateuslayber7742 4 года назад
Gosto da sua linha de raciocínio vc vai tendo as ideias e vai aplicando, tipo como fazem os Devs na dinâmica de urgência, e depois estrutura o código pra talvez melhorar e aplicar a metodologia do Clean Code que meus mentores sempre insistem em dizer para utilizar, depois talvez você queira e seria legal fazer algumas linhas de comentários no código para uma interpretação rápido da sua lógica e ajudar o colaborador que precisar futuramente dar manutenção nesse código.
@DevSoutinho
@DevSoutinho 4 года назад
Boooa!!! Cara eu tento nos vídeos sempre focar em como pensar no problema e depois converter isso pra código e ir melhorando em cima, feliz que tenha curtido e em breve vão ter vídeos onde eu vou falar sobre técnicas mais refletindo sobre elas do que aplicando. Fica de olho \o/
@dantrunks20
@dantrunks20 3 года назад
Só tomar cuidado com o min: 9:58 uma parte do código na linha 150 está assim num momento: inicializa(); Mas o correto é: telaAtiva.inicializa(); Numa parte do vídeo está inicializa();, mas de repente está telaAtiva.inicializa(); que é o correto, mas acredito que no corte da edição tenha sem querer tirado essa parte. Levei uma hora pra entender o que estava havendo kkkk, mas ai notei isso depois de apanhar um pouco.
@henriq031
@henriq031 3 года назад
valeu irmão kkkkk
@JuanElorriagaYT
@JuanElorriagaYT 3 года назад
Sinceramente gostei demais da série. Nunca tinha lidado com desenvolvimento de jogos, apesar de ter isso como sonho (bizarro né kkk). Pretendo criar um jogo de luta com o conhecimento adiquirido. Tipo, literalmente tudo como colisão e etc está aqui. Só usar a cabeça e adaptar. Obrigado demais!
@programadoriniciante404
@programadoriniciante404 3 года назад
Aqui depois que teve que fazer a parte da da variaǘel globais, colocar o flappy na função criaFlappyBird() mesmo com o return diz que "annot read property 'desenha' of undefined"
@guh0493
@guh0493 3 года назад
12:35 tapega ryu mando a passarin pra Nárnia
@williamlopeslima4136
@williamlopeslima4136 4 года назад
A animação do ryu batendo no passarinho foi a melhor kk
@DevSoutinho
@DevSoutinho 4 года назад
Creditos pro Lukinhaz husahuasu
@alexdossantosbrito6810
@alexdossantosbrito6810 4 года назад
eu acho muito fascinante a programação, eu sei que é difícil aprender vários códigos, tem que ter muita dedicação, mas vou conseguir, e com suas explicações fica mais fácil compreender, um dia eu chego lá kkkk.
@DevSoutinho
@DevSoutinho 4 года назад
Caaara fico muuuuuuito feliz de ler isso, espero que nos próximos vídeos do canal eu consiga ti ajudar a continuar entendendo e pegando mais gosto pela área :)
@thiagosantana1485
@thiagosantana1485 Год назад
Quero criar um mini jogo de plataforma, como js puro, já consigo fazer o "personagem" caminhar para frente e para trás, mas quero criar essa mecânica de pulo para ele, não sei se o conceito que vc usa é o mesmo mais vou tentar aplicar e analisar. Ótima aula
@Leo-jn3xz
@Leo-jn3xz 2 года назад
nunca pensei que fosse tão fácil colocar áudio kkkkkkkkkkkkkkkk
@gustavolopesdasilva9012
@gustavolopesdasilva9012 3 года назад
Seus vídeos são tão bons que tem um total de 0 dislikes! Parabéns mano!
@DevSoutinho
@DevSoutinho 3 года назад
uhassahusahushua vdd!!! tem uma métrica chamada NPS, se for aplicara aqui no canal ta melhor que o Nubank hahaha
@mateuslayber7742
@mateuslayber7742 4 года назад
Fala Man, legal mais um mão no código Gamer, topzera. @CDFTV esse cara é do nosso Co-working. Tá ajudando dmais no #QuarentenaDev 👍
@DevSoutinho
@DevSoutinho 4 года назад
Opa, qual coworking? /o Fiquei curioso
@mateuslayber7742
@mateuslayber7742 4 года назад
@@DevSoutinho Cara para mim Co-Working pode ser informal, e profissional, exemplo de como estamos na #QuarentenaDev, não deixa de ser um espaço de colaboração de idéias entre devs para construir trabalhos, analogias e estratégias, como também na Facul nos Labs com interação de varias pessoas de diversas áreas, como em pequenos espaços alugados na região da Paulista, aqui em SP tem bastante. E agora com o Home Office isso se fortalece muito o espírito colaborativo .
@mateuslayber7742
@mateuslayber7742 4 года назад
@@DevSoutinho Ahh e desculpa a demora em responder estou enrolado ultimo ano de Ciência da Computação, estou com prazos desafiadores.
@brufloriano2028
@brufloriano2028 Год назад
Eu te vi no Canal MW e me encantei com seu jeito, você me despertou ainda mais interesse em programação. Sucesso! #Aumentameulimitenonubank
@DevSoutinho
@DevSoutinho Год назад
AHSHAHSHAHHA não consigo aumentar limite 🥲 e sucesso na sua jornada no mundo Dev /o
@gui18327
@gui18327 4 года назад
Muito bom!
@DevSoutinho
@DevSoutinho 4 года назад
Valeu! 😁
@danielcorreia313
@danielcorreia313 4 года назад
Vim pela #QuarentenaDev ! Muito boa a série! Quando vem os próximos vídeos? Ah, por favor, não deixe de fazer um vídeo organizando o cógido!
@DevSoutinho
@DevSoutinho 4 года назад
Opa saiu episódio novo agora! E vai rolar sim um organizando tudo :) tá chegando a hora já hahaha ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9BZspL5MRvQ.html
@nycolexavier7844
@nycolexavier7844 2 года назад
que aulão!!!
@lizianefelix3178
@lizianefelix3178 4 года назад
Massa!
@DevSoutinho
@DevSoutinho 4 года назад
😁😁😁
@tavernadragonyt
@tavernadragonyt 3 года назад
Boa tarde, acredito que vc não respondera hoje, mas estou fazendo um modelo de jogo 2D de plataforma, e eu personagem se movimenta com o teclado, e estou usado a gravidade que usou no vídeo, porem não consigo aplicar o pulo que você usou, poderia me ajudar?
@DevSoutinho
@DevSoutinho 3 года назад
Eita, seu código ta hospedado em algum lugar? qual erro aparece? Na descrição do vídeo tem o meu código até esse momento, talvez de pra usar de referencia
@lucasmotta5085
@lucasmotta5085 4 года назад
Primeiro like 👊🏾
@DevSoutinho
@DevSoutinho 4 года назад
O mago por trás do ryu socando tudo hahahaa
@daviresende5481
@daviresende5481 3 года назад
Como coloco para o pássaro pular ao apertar a tecla de espaços?
@camaradaLucas
@camaradaLucas 2 года назад
Tudo bem ir fazendo o projeto junto com vc e upar no git? Sou novo em programação, então não sei como funciona as coisas
@DevSoutinho
@DevSoutinho 2 года назад
Tranquilo! Só vai fazendo e me manda o link /o
@gabrieleduardowagener743
@gabrieleduardowagener743 2 года назад
Tentei ajustar todos os códigos, porém quando clico, meu passarinho não cai, alguém sabe me dizer aonde que pode estar o erro?
@matheus3526
@matheus3526 2 года назад
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?
@marcosallan4246
@marcosallan4246 2 года назад
Nossa eu tava tentando reproduzir uma música assim que entrar no site com o evento onload mas simplesmente não reproduz a música e não sei aonde estou errando se alguém puder me ajudar ficarei muito agradecido
@olivierndeye2216
@olivierndeye2216 Год назад
Depois de corrigir o trecho do codigo " telaAtiva.inicializa(), eu salvo e ao executar no navegador, o flappybird não atualiza, fica parado no ar. no devTools, aparece a mensagem "flappybird is not defined". mais alguém encontrou esse erro ?
@DevSoutinho
@DevSoutinho Год назад
da uma checada no nome das variáveis pra ver se tá certinho 🤔 se não, sobe o código no GitHub e me manda por aqui. Tem vídeo no canal ensinando a colocar código lá 😁
@olivierndeye2216
@olivierndeye2216 Год назад
Encontrei o erro. Foi na função fazColisao. Não tinha atribuído flappyBird e chao. Refiz o código todo pra achar o erro kkkkk. Obrigado
@magnilsonmoreira8131
@magnilsonmoreira8131 2 года назад
Se ainda houver alguem estudando isso como eu aos 7:19 ± qunado ele faz a function colisao eu nao estou entendo pq o return vazio faz a tela parar.
@DevSoutinho
@DevSoutinho 2 года назад
Opa’ tudo bom? A ideia é que vc interrompe a função o processamento dela como um todo :D
@DevSoutinho
@DevSoutinho 2 года назад
Com isso tu não roda as lógicas que tem depois
@PinheiroPaulo
@PinheiroPaulo 4 года назад
Qual configuração vc usa no terminal. Além do Zsh ?? Abraço.
@DevSoutinho
@DevSoutinho 4 года назад
Opa em cima do zsh eu uso o ohmyzsh ohmyz.sh/
@programadoriniciante404
@programadoriniciante404 3 года назад
Eu saquei que no escopo lá da Telas. o globais.flappyBird não herda nada, pra resolver, eu logo abaixo do const globais = {}; coloquei o globais.flappyBird = criaFlappyBird(); e funciionou, o problema agora é que quando o passaro vai pro show, não reinicia começando lá no topo
@fernandochemin9785
@fernandochemin9785 3 года назад
Olá amigo, eu estou com o mesmo problema se consegui solucionar peço que compartilhe a solução
@programadoriniciante404
@programadoriniciante404 3 года назад
@@fernandochemin9785 maninho, faz uns tempinhos que to sem programar. Fala comigo no what's pra a gnt fazer um debug junto. 81979028685
@usuariodoyoutube6452
@usuariodoyoutube6452 4 года назад
Vindo pelo maravilhoso vídeo no canal da Male2020 demais ,tem perfil no Instagram ?achei o assunto top demais e não tenho Twitter
@DevSoutinho
@DevSoutinho 4 года назад
Opa tenho Instagram! É @omariosouto também :) vou começar a colocar nas descrições
@glessacavalieri6965
@glessacavalieri6965 4 года назад
Não estou conseguindo baixar os efeitos sonoros, tem em outro lugar disponível alem do github?
@DevSoutinho
@DevSoutinho 4 года назад
Tenta por esse link: github.com/omariosouto/flappy-bird-devsoutinho/archive/master.zip Você vai baixar o projeto todo, mas aí já vem todos os efeitos sonoros :) realmente não consegui baixar aqui também. Vou até atualizar a descrição do vídeo muito obrigado /o
@glessacavalieri6965
@glessacavalieri6965 4 года назад
@@DevSoutinho Deu certo, obrigada!
@breqbs
@breqbs Год назад
vc provavelmente nao vai ver esse comentario por causa da data do video, mas quando qualquer objeto no meu codigo move, ele deixa um monte de "clones" dele por onde ele andou como se fosse um rastro. sabe como resolver?
@DevSoutinho
@DevSoutinho Год назад
Da uma olhada na ordem que tu faz a parte de desenhar a tela lá onde eu chamo as funções do primeiro vídeo
@breqbs
@breqbs Год назад
@@DevSoutinho obrigado
@danielalmeida32
@danielalmeida32 2 года назад
ALGUEM ME AJUDE NA PARTE DE COLISÃO TOU A TER UM ERRO ELE COLIDE MUITO EM CIMA DO QUE É SUPOSTO E TENHO O CODIGO IGUALZINHO
@DevSoutinho
@DevSoutinho 2 года назад
Compara o código com o que tá no Github
@danielalmeida32
@danielalmeida32 2 года назад
@@DevSoutinho o problema é que estou a criar o meu próprio jogo a partir do seu código . As minhas medidas de canvas e etc estão diferentes mas até agr o código deu todo só fiz os ajustes para as minhas coisas
@danielalmeida32
@danielalmeida32 2 года назад
@@DevSoutinho no meu caso que tem medidas diferentes o código que fez pra a colisão do flappy y chão y funciona devia funcionar na mesma né ? Porque ele vai buscar as medidas do y de cada um que eu tenho nas const flappy e chão
@danielalmeida32
@danielalmeida32 2 года назад
@@DevSoutinho me ajuda pf preciso de boa nota para acabar a licenciatura na faculdade 😭💀
@DevSoutinho
@DevSoutinho 2 года назад
@@danielalmeida32 em teoria deveria funcionar pq o código que eu fiz é “agnóstico”
@thiagoscomparin1114
@thiagoscomparin1114 4 года назад
Cade o resto dos vídeos?
@DevSoutinho
@DevSoutinho 4 года назад
Opaaa a série tá em andamento ainda /o
@thiagoscomparin1114
@thiagoscomparin1114 4 года назад
@@DevSoutinho aguardando!!
@halanfernandesoliveira3676
@halanfernandesoliveira3676 4 года назад
Vim pela malena
@DevSoutinho
@DevSoutinho 4 года назад
Shooow 😁
@miaunoite3821
@miaunoite3821 4 года назад
Vim Pela MALENA
@DevSoutinho
@DevSoutinho 4 года назад
Opa! Seja muito bem vindo \o
@miaunoite3821
@miaunoite3821 4 года назад
@@DevSoutinho :>
@oblivonrock-br1610
@oblivonrock-br1610 4 года назад
Meu jogo crashou mn kkkkkkkkkkkkkkkkkkkkkkkk dps da parte globais
@oblivonrock-br1610
@oblivonrock-br1610 4 года назад
esqueci de mandar a function criaFlappyBird returnar FlappyBird
@DevSoutinho
@DevSoutinho 4 года назад
asuhsahuasuh que bom que resolveu! Ta aberto o código?
@larissasoares8421
@larissasoares8421 3 года назад
Obs: caramba veio, q q ta dando no yt? tive q me inscrever no canal 3x em 2 dias... Toda hr cancelando minha inscrição...Só aqui?
@Calbac-Senbreak
@Calbac-Senbreak 3 года назад
Uma coisa, cara, você é um excelente professor, mas não entendo porque essa quantidade absurda de trejeitos, brincadeirinhas fofinhas, etc. A maior parte do público é infantil? E aqui não é ironia, é uma dúvida mesmo. Enfim, obrigado pelo conteúdo disponível
@CanalAnestesiaOficial
@CanalAnestesiaOficial 3 года назад
Você já parou pra pensar que é o jeito dele?
@acid2108
@acid2108 3 года назад
Se ele explica bem e você tá entendendo o conteúdo, qual a necessidade de um comentário infeliz desses? Te afeta pessoas falando de um jeito fofo?
@Calbac-Senbreak
@Calbac-Senbreak 3 года назад
@@acid2108 Sim, me irrita profundamente, a ponto de ficar difícil de assistir o video. Sou só um inscrito no canal, falando sobre a minha impressão (ainda controlo as minhas próprias impressões, correto?). Da mesma forma que me incomoda, pode incomodar a outros, então pode ser que ele leve em consideração, caso lhe pareça uma crítica útil. Se não for, ele descartará, simples assim. Ademais, acredito que seja do interesse dele mesmo produzir o conteúdo de uma forma que agrade à maioria dos seus espectadores. Obs: se você prestar atenção no que eu escrevi, vai ver que eu elogiei o trabalho do cara e agradeci pela disponibilidade do vídeo, que é excelente. Então não sei exatamente o que está transtornando vocês, porque tenho direito a ter uma opinião e a expressá-la de forma civilizada, de modo que nenhuma de vocês, por mais que o achem fofinho, irão conseguir me dissuadir.
@acid2108
@acid2108 3 года назад
@@Calbac-Senbreak se te irrita desse tanto, precisa ver isso aí em terapia, amado...
@Calbac-Senbreak
@Calbac-Senbreak 3 года назад
@@acid2108 Preciso ver nada em lugar nenhum não, filha. Todos os seres humanos se irritam com diferentes coisas, eu me irrito com isso e vc se irrita com a minha irritação...
Далее
Jogo com JavaScript #02: Troca de Telas e Gravidade
14:54
СЛУЧАЙ В ЧЕРНОБЫЛЕ😰#shorts
00:19
Просмотров 327 тыс.
ТРОЛЛИНГ СКАМЕРА СТАНДОФФ 2
00:59
Collision Detection Between Rectangles in JavaScript
5:53
Why JavaScript Devs are Switching to Rust in 2024
10:35
Sprite Animation in JavaScript
46:05
Просмотров 159 тыс.