Тёмный

Programamos um Mini-Game do Among Us com JavaScript Puro! // Mão no Código #44 

Código Fonte TV
Подписаться 675 тыс.
Просмотров 60 тыс.
50% 1

Uma das melhores formas de praticar lógica e abstração na computação é desenvolvendo jogos. Trabalhar com estrutura de dados mais complexas e controle de estados é determinante para fazer um jogo funcionar bem, por isso recomendamos de vez em quando testar suas habilidades de programador criando games.
Já que o hype do Among Us está alto, decidimos programar o "Start Reactor", um dos mini-games que existem dentro do jogo. Utilizamos 100% de tecnologias web como HTML 5, CSS 3 e Vanilla JS (JavaScript Puro).
O resultado ficou bem legal pois reproduzimos as animações (em CSS) e também os sons do jogo.
Se você quer ver mais jogos sendo desenvolvidos aqui no canal, deixa sua sugestão nos comentários. 🎮
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ VPS: codft.me/HGC3WZrP0zlUk
→ Jogue Online: startreactor.codigofonte.com.br
→ GitHub: github.com/gabrielfroes/among...
🤝 Desenvolvido em Colaboração com Erik Santana
→ github.com/imerik1
→ / imerik1
📡 𝗦𝗶𝗴𝗮 𝗮𝘀 𝗿𝗲𝗱𝗲𝘀 𝗱𝗼 𝗖𝗗𝗙𝗧𝗩
→ linktr.ee/codigofontetv
📸𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺
→ / codigofontetv
☕ 𝗖𝗹𝘂𝗯𝗲 𝗱𝗼𝘀 𝗖𝗗𝗙𝘀 𝗻𝗼 𝗬𝗼𝘂𝘁𝘂𝗯𝗲
→ codft.me/clubecdfs
#JavaScript #AmongUs #Game

Наука

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

 

16 дек 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 187   
@returndaniels
@returndaniels 3 года назад
Se vocês vendessem um curso aprofundado de JavaScript eu, com certeza, compraria.
@codigofontetv
@codigofontetv 3 года назад
Que legal saber disso Daniel. Logo, logo a gente vai começar a desenvolver cursos próprios. 🤓
@lucasbueno3694
@lucasbueno3694 3 года назад
@@codigofontetv estou no aguardo
@LuizHenrique-rd8kf
@LuizHenrique-rd8kf 3 года назад
Apoio a ideia. Com certeza, eu compraria também
@heitoreleuterio4826
@heitoreleuterio4826 3 года назад
Eu também compraria sem dúvida nenhuma
@GuilhermeMoreira480
@GuilhermeMoreira480 3 года назад
@@codigofontetv isso vai ser otimo vcs tem uma otima didatica
@thiagomiranda7987
@thiagomiranda7987 3 года назад
Caraca que legal, de verdade é muito bom ver os erros saltando no console, mostra que é algo mão na massa. Excelente!
@randerins
@randerins 3 года назад
Respeito total a esses canais que botam o conhecimento na prática!
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado! 🤓
@hiagobriano568
@hiagobriano568 2 года назад
Vocês são incríveis como sempre, parabéns pelo excelente conteúdo! =)) Sugestão: Mesmo que o vídeo fique muito mais longo, eu acho que seria bom se vocês fizessem o próximo vídeo sem cortes, explicando o que vocês estão fazendo, não digo nos detalhes como se fosse uma aula, mas sim a logica por trás, eu to começando com JS agora e fiquei um pouco confuso, ainda mais nas partes que você estava escrevendo e do nada aparecia varias linhas feitas (os cortes).
@NicollasFeitosa
@NicollasFeitosa 3 года назад
Playlist de todos os mini-games?
@codigofontetv
@codigofontetv 3 года назад
Boa ideia! 😉
@Samuel-dd3kk
@Samuel-dd3kk 3 года назад
ia ser daora
@markfazolin
@markfazolin 3 года назад
Vídeo muito bom, ótimo conteúdo! (Como sempre!) O que mais gostei é que esta usabilidade pode ser usada em muitos projetos!
@jair-araujo
@jair-araujo 3 года назад
Muito bom essa parte de programar games, poderiam trazer mais vídeos nesse estilo, para os apaixonados por game como eu... 😍😜🖖
@joaoguilhermedesouza5420
@joaoguilhermedesouza5420 3 года назад
Muito bom, deve ter dado um trabalhinho kkkkkkkkkk parabéns a todos os desenvolvedores
@carlos80524
@carlos80524 3 года назад
Top video ! Parabens pela iniciativa ficou muito legal, quero ver mais videos assim! uma sugestao seria dividir o video em 2 partes por exemplo uma a Vanessa ensinando fazer todo pre-requistos do jogo ( para o pessoal menos avancado ) e esta parte final com Gabriel ensinando a montar a logica do jogo . Daria um pouco mais de trabalho pra vcs mas ficaria um projeto perfeito e completo pra varios niveis de programadores e logico geraria mais auduencia pra vcs 👀
@cristianomoreira3305
@cristianomoreira3305 3 года назад
Sugestão: As vezes deem um zoom no codigo por que fica meio longe as letras, video top!
@gustavog9866
@gustavog9866 3 года назад
Up!
@luisfernando3405
@luisfernando3405 3 года назад
Estou aprendendo DevOps, e com vídeos assim fica show aprender; Lógico que não é de primeira pra entender, mas vendo o contexto será só uma questão de repetir, repetir e repetir mais algumas vezes, que consegue aprender! :) Parabéns e com certeza, esse modelo de mão-na-massa está incrível :)
@AnthonHax
@AnthonHax 3 года назад
Muito bom, me interesso muito em lógica em JS, parabéns pelo vídeo!
@alexandregonzalez2781
@alexandregonzalez2781 3 года назад
Vídeo top, mas o melhor foi o foguinho ao digitar!!kkkkk
@casedesucessoYT
@casedesucessoYT 3 года назад
extensão power mode do vscode, baixe e seja feliz!!!
@FRC260484
@FRC260484 3 года назад
Conteúdo sensacional, vocês estão de parabéns!
@ceuazul8807
@ceuazul8807 2 года назад
Muito obrigado a toda equipe do codigo fonte tv, excelente video! : ) se nao fosse pedir muito poderia por mãos no codigos fazendo algum programa simples para pc com o electron js? Seria muito bacana ver essa interação.
@Guilherme-jz6qx
@Guilherme-jz6qx 3 года назад
Vídeo incrível, façam mais do tipo, por favor!
@codetechannel
@codetechannel Год назад
Muito bom. Continuem com esse tipo de vídeos.
@lebersa
@lebersa 3 года назад
Façam um curso de javascript, algo que dê base antes de irmos para algum framework. Vcs são demais!!!
@TheNerdRR
@TheNerdRR 3 года назад
um vídeo de meia hora codando nunca foi tão cativante, Adorei!
@tiagolopes2679
@tiagolopes2679 2 года назад
Show, isso nos inspira em muito a fazer mais projetos
@umglitch
@umglitch 3 года назад
Código Fonte sendo incrível como sempre, parabéns pelo excelente conteúdo! =))
@codigofontetv
@codigofontetv 3 года назад
Muuuuuito obrigado Vic! 🤓
@fabinhotonyhalk4941
@fabinhotonyhalk4941 3 года назад
Esse canal tá me ajudando muito a me interessar cada vez mais por programação, sério ótimo vídeo, ótimo conteúdo🤝
@ricardosilvapimentel2810
@ricardosilvapimentel2810 3 года назад
Conhece o Fábio Akita (acho q o canal dele é o Alugando, não lembro) e ele dá uns conselhos ótimos também.
@danilopontes3871
@danilopontes3871 2 года назад
29:02 aquele momento em que você pensa: (Não é possível 😑) 😂😂😂
2 года назад
VCS SÃO DEMAIS, vcs poderiam abrir um playlist só para esse conteudo de criação desde Jogos/BOT/Programs funcionais. Em todas as linguagens. Seria fantástico.
@fabianodesouza9930
@fabianodesouza9930 3 года назад
Que top! Dá pra aprender e exercitar muita coisa com esse projetinho hein.
@codigofontetv
@codigofontetv 3 года назад
Exatamente!!! 😉
@milianor8194
@milianor8194 3 года назад
bem massa, eu fiz um jogo (simon game) parecido com esse e acabei conseguindo uma vaga estágio. Seria legal vocês tentarem Tetris esse jogo ta bem popular hoje em dia.
@eduardophilip7231
@eduardophilip7231 3 года назад
Ótimo vídeo! Eu digitei todo o código do html e do css e senti algumas dúvidas, seria muito bom se vocês fizessem um vídeo falando um pouco do css e do html desse jogo. obrigado vcs são top aprendi muito!
@andredearaujorodrigues7725
@andredearaujorodrigues7725 3 года назад
Show de bola
@rafaelcostamoura
@rafaelcostamoura 3 года назад
Isso sim foi um video Maaaravilhooooso...
@ekerdev1014
@ekerdev1014 3 года назад
Foi muito bom ter participado desse Mini game com vcs!
@codigofontetv
@codigofontetv 3 года назад
Foi muito legal desenvolvermos esse projeto juntos!
@sevensevenn8729
@sevensevenn8729 3 года назад
Por mais vídeos assim 👏🏼👏🏼👏🏼👏🏼
@feliz9276
@feliz9276 3 года назад
Ultilizo muito esse programa para criar codigos. Top
@jeancarlomoraes8644
@jeancarlomoraes8644 3 года назад
Irado demais.... uma explicação muito boa!!
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado Jean! 🤓
@gustavobrunobarbosa4467
@gustavobrunobarbosa4467 3 года назад
Nossa, gostei muito!!!!! Faz sempre
@lucasbueno3694
@lucasbueno3694 3 года назад
Super legal amei faz sim
@joaoovitort
@joaoovitort 3 года назад
Jogos... A paixão da minha vida..., Quero muito aprender a programar jogos.
@williamjog93
@williamjog93 3 года назад
Show de bola!
@TheMatthewizee
@TheMatthewizee 3 года назад
Boooa gente ficou mt daooora kkkkkkkkkkkkkkk
@Im_KingJo
@Im_KingJo 3 года назад
Que legal, nunca vi algo assim, like e mais um inscrito :)
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado! Seja bem vindo ao CDFTV. 🤓
@profericksmendes
@profericksmendes 3 года назад
Top de mais 😃 obrigado
@JorgeValero
@JorgeValero 3 года назад
Muito bom 👏🏼👏🏼👏🏼
@codigodesenior3995
@codigodesenior3995 3 года назад
finalmente algo sem node kkkk
@G69G71
@G69G71 2 года назад
Proposta bem interesante Adorei o conteudo
@andrewscasas
@andrewscasas 3 года назад
Mais jogos! PLS! \o/
@willianmello10
@willianmello10 2 года назад
nossa que legal 👏😃
@nelson.costa.dev2536
@nelson.costa.dev2536 3 года назад
Façam um curso, vamos todos pedir façam um curso.
@arnoldcainan5832
@arnoldcainan5832 3 года назад
Muito 10!!!!
@mateusbarbosa5040
@mateusbarbosa5040 3 года назад
Parabens video muito bom
@francislei
@francislei 3 года назад
Bora comentar, canal top
@biamiotto
@biamiotto 3 года назад
Amei, vcs são incríveis
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado Bia. 😍
@henriquebaraldi281
@henriquebaraldi281 3 года назад
Que legal
@davilucasmarques7921
@davilucasmarques7921 3 года назад
Massa demais!!!
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado Davi! 🤓
@VictorSilvaDev
@VictorSilvaDev 3 года назад
Top demais
@diogocorreia344
@diogocorreia344 3 года назад
Dahora
@josafa8019
@josafa8019 3 года назад
MDS que conteúdo incrível. Codei junto ao vídeo. A quantidade dos meus erros à do vídeo é impressionante 😢, mas consegui resolvê-los e ver o projeto rodando 😁. Obrigado pelo vídeo!
@codigofontetv
@codigofontetv 3 года назад
Josafá os erros fazem parte, o importante é conseguir passar por eles! Nós que agradecemos!
@josafa8019
@josafa8019 3 года назад
@@codigofontetv Isso aí 😄
@youtubersona
@youtubersona 3 года назад
Por favor faça a parte das animações 😁
@mateus_andriola
@mateus_andriola 3 года назад
Muito legal o vídeo
@codigofontetv
@codigofontetv 3 года назад
Muito obrigado Mateus. 🤓
@themeltz
@themeltz 3 года назад
Na hora que eu vi a notificação já fui fechando tudo que eu tava aberto(até mesmo um projeto que eu tava fazendo) kkk(e vcs fizeram logo um dos minigames mais odiados kkk)
@codigofontetv
@codigofontetv 3 года назад
Depois diz pra gente o que achou do vídeo! :D
@themeltz
@themeltz 3 года назад
Simplesmente, adorável! Parabéns!
@william84787
@william84787 3 года назад
OLA!! uma sugestao , falar sobre Web2py ...Amo o canal de vcs:)
@nykaell.ecardial8208
@nykaell.ecardial8208 3 года назад
Gostei bastante do desafio. Aprendi bastante! Porém há um pequeno erro: Quando o jogador erra a sequência é necessário resetar a variável `computerCombinationPosition = 1`, do contrário a nova combinação será gerada considerando a posição do jogo. Abraços :)
@codigofontetv
@codigofontetv 3 года назад
Oi Nykael, obrigado pelo aviso. Essa variável é "resetada" no método start do jogo. Quando o jogador falha o método endGame é invocado e depois é feita a chamada ao start novamente. ;)
@naoseioquecriar
@naoseioquecriar 3 года назад
"programamos ao vivo..." 100% verdadeiro, final de ano eu mando um presente do papai noel também, o qual eu acredito piamente que existe.
@pedro.henrique7
@pedro.henrique7 3 года назад
Uau!
@andreyamamoto1709
@andreyamamoto1709 3 года назад
Ja se tornaram meu casal favorito!
@yurimarinho9381
@yurimarinho9381 3 года назад
Eu adoraria um vídeo falando sobre as animações
@lucasneves7669
@lucasneves7669 3 года назад
Achei o vídeo sensacional! Vocês são top demais! Se me permitem, gostaria de sugerir que façam mais uso de boas práticas, como por exemplo, não usar loop for, comando var (para variaveis), adotar mais o uso de HOF, organizar melhor a área de trabalho de uma maneira geral. Eu sei que as intenções de vocês são as melhores, mas todos nós reproduzimos como aprendemos. Se aprendemos desde o começo a não utilizar boas práticas, dificilmente em um futuro próximo começaríamos a usá-las de bom grado ... Enfim, é só uma sugestão. Continuem com o ótimo trabalho, gosto bastante do conteúdo de vocês!
@saimongospel
@saimongospel 3 года назад
Não é atoa que to aprendendo javascript kkk
@jogoprogramado
@jogoprogramado 3 года назад
Show.
@RTheodorus
@RTheodorus 3 года назад
muito bom.
@mikaelpavaospm
@mikaelpavaospm 2 года назад
Ótima explicação , gostaria de ver a parte do html achei bem interessante.
@henriquewoww
@henriquewoww 3 года назад
Video excelente como sempre!! Estou iniciando minha jornada no desenvolvimento web e tenho uma dúvida. Estou fazendo um curso de JavaScript, ainda não estudei a fundo html e css, porém consigo compreende-los. Após terminar esse curso de Js posso estudar react/node ou é recomendado estudar um pouco mais a fundo html e css??
@beatrizfonseca7961
@beatrizfonseca7961 3 года назад
falou jogo e javascript tou dentro XD
@Matheus_lima22
@Matheus_lima22 3 месяца назад
Por favor Trás um vídeo fazendo Doom em JS?; Vídeo incrível como sempre!
@helliandrosoutohenrique8931
@helliandrosoutohenrique8931 3 года назад
Eu gostaria de mais programacões de mini games.
@MixtliTurboDriver
@MixtliTurboDriver 3 года назад
Deveriam mostrar tbm o css
@MrRodmetal
@MrRodmetal 3 года назад
Muito massa esse jogo do AmonGóes kkkk
@MarcosPmkt
@MarcosPmkt 3 года назад
Jogo é muito bom pra entender e exercitar vários recursos da linguagem. Será que dá pra desenvolver uma fase simples de jogo de plataforma em JS? S2 melhor casal!
@isaacbaruccruzdasilva2463
@isaacbaruccruzdasilva2463 3 года назад
@Arthur Silva eeeee godot
@isaacbaruccruzdasilva2463
@isaacbaruccruzdasilva2463 3 года назад
@Arthur Silva kkkkkkk
@alexfreitas4428
@alexfreitas4428 3 года назад
O que seria um método de injeção de audio que ele explica no vídeo? Quero tentar reproduzir da melhor forma possivel. SIMPLESMENTE AMEI ESSE VÍDEO
@maiconlondon2019
@maiconlondon2019 2 года назад
No próximo mão de código, colocar Vanessa para programar!
@matheusnet4316
@matheusnet4316 3 года назад
Fiquei na dúvida sobre o react-Starter estás no escopo global, ela não deveria estar dentro de uma constante? Gostei do vídeo!
@brunomarkman2107
@brunomarkman2107 3 года назад
Que tal programar o jogo lunar rescue 2???? Isso será a universidade para programmers :) Um abraço.
@TalesCembraneliDantas
@TalesCembraneliDantas 3 года назад
Eu acho que se usar o P5 fica bem mais fácil de fazer, tbm é Javascript puro
@nathanbahia6456
@nathanbahia6456 3 года назад
Ficou muito legal! Gostaria apenas que a fonte fosse um pouquinho maior para que eu pudesse ler melhor.
@alanpoveda1646
@alanpoveda1646 3 года назад
Caraca um jogo simples, olha a quantidade de coisas que tem que fazer kkkkkk
@codigofontetv
@codigofontetv 3 года назад
A complexidade acaba sendo mais por conta da interface do jogo. A estrutura de dados, estados e regras de negócio são mais simples de codificar.
@christianlin4684
@christianlin4684 3 года назад
Javasclipt é bom! Obligado.
@ramonidemorais1898
@ramonidemorais1898 3 года назад
Boa noite, vcs poderiam fazer um vídeo sobre SALESFORCE ??
@helder1496
@helder1496 3 года назад
👍
@Jonathan_Abilio
@Jonathan_Abilio 2 года назад
Que tal Candy Crush?
Год назад
Eu gostei do foguinho isso e tema se for mostra como colocar comecei a seguir o canal esses dias
2 года назад
Eu consigo colocar esses mini games dentro do fivem ? Por exemplo pegar esses mini games onlines e colocar dentro do fivem
@gabrielcancio1443
@gabrielcancio1443 3 года назад
Faz um video sobre animações usadasssssssssssss
@FRNathan13
@FRNathan13 3 года назад
Ensina como desenvolver estilo agar.io e diep.io usando o canvas pra renderizar em tempo real, seria interresante.
@Diego_oliverira_dev
@Diego_oliverira_dev 2 года назад
Qual tema tá usando no vs
@kbrunot13
@kbrunot13 3 года назад
Gostaria de ver a explicaçao sobre o css e o html do codigo =)
@Ulusamay
@Ulusamay 3 года назад
quero bolo café, e refrigerante e umas torradas
@paulinovagner
@paulinovagner 3 года назад
Top! Que tal tabuleiro de resta um?! :)
@codigofontetv
@codigofontetv 3 года назад
Interessante essa ideia. :)
@lindoelgomes5015
@lindoelgomes5015 3 года назад
Faz alguma coisa com python, por favor :)
@emersondelimasilva
@emersondelimasilva 3 года назад
Que extensão é essa de pegar fogo ao digitar?
@murilorerisondesousapaz5065
@murilorerisondesousapaz5065 2 года назад
O que voces acham do html Canvas?
@lucascarlos2501
@lucascarlos2501 2 года назад
Eu aprende programar em um dia
@aristotelesbrasil
@aristotelesbrasil Год назад
opa, gostaria de saber se da pra usar javascript no game maker 2, pra programar
@oileroua0002
@oileroua0002 3 года назад
Um dia eu chego lá k k k k k k k
Далее
ТРОЛЛИНГ СКАМЕРА СТАНДОФФ 2
00:59
Esse é o "Novo Mercado de Tecnologia"?
17:59
Просмотров 125 тыс.
É a Hora de Falar de JavaScript!
18:49
Просмотров 79 тыс.
JOGOS QUE EU JOGO QUANDO ESTOU SEM INTERNET!
17:31
Просмотров 4,6 млн
I CREATED MY GAME IN 24 HOURS
6:39
Просмотров 112 тыс.
8 DICAS DE PIXEL ART PARA INICIANTES | CRIE SEUS JOGOS
8:23
O futuro do JavaScript é programar dessa forma aqui!
14:11
#engineering #diy #amazing #electronic #fyp
0:59
Просмотров 2,3 млн