Programamos um Mini-Game do Among Us com JavaScript Puro!

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. 🎮
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ Jogue Online: startreactor.c...
→ GitHub: github.com/gab...
📌 COMPILADO PODCAST
→ / @compiladopodcast
→ Newsletter:
compilado.codi...
📌 LINKS DO CÓDIGO FONTE TV
→ codigofonte.tv
📌 USAMOS CADEIRAS HERMAN MILLER
→ codigofonte.cl...
🤝 Desenvolvido em Colaboração com Erik Santana
→ github.com/ime...
#JavaScript #AmongUs #Game

[@returndaniels]

Se vocês vendessem um curso aprofundado de JavaScript eu, com certeza, compraria.

[@codigofontetv]

Que legal saber disso Daniel. Logo, logo a gente vai começar a desenvolver cursos próprios. 🤓

[@lucasbueno3694]

@@codigofontetv estou no aguardo

[@LuizHenrique-rd8kf]

Apoio a ideia. Com certeza, eu compraria também

[@heitoreleuterio4826]

Eu também compraria sem dúvida nenhuma

[@GuilhermeMoreira480]

@@codigofontetv isso vai ser otimo vcs tem uma otima didatica

[@hiagobriano568]

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).

[@randerins]

Respeito total a esses canais que botam o conhecimento na prática!

[@codigofontetv]

Muito obrigado! 🤓

[@thiagomiranda7987]

Caraca que legal, de verdade é muito bom ver os erros saltando no console, mostra que é algo mão na massa. Excelente!

[@NicollasFeitosa]

Playlist de todos os mini-games?

[@codigofontetv]

Boa ideia! 😉

[@Samuel-dd3kk]

ia ser daora

[@cristianomoreira3305]

Sugestão: As vezes deem um zoom no codigo por que fica meio longe as letras, video top!

[@gustavog_silva]

Up!

[@luisfernando3405]

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 :)

[@carlos80524]

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 👀

[@jair-araujo]

Muito bom essa parte de programar games, poderiam trazer mais vídeos nesse estilo, para os apaixonados por game como eu... 😍😜🖖

[@ceuazul8807]

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.

[@fabianodesouza9930]

Que top! Dá pra aprender e exercitar muita coisa com esse projetinho hein.

[@codigofontetv]

Exatamente!!! 😉

[@joaoguilhermedesouza5420]

Muito bom, deve ter dado um trabalhinho kkkkkkkkkk parabéns a todos os desenvolvedores

[@umglitch]

Código Fonte sendo incrível como sempre, parabéns pelo excelente conteúdo! =))

[@codigofontetv]

Muuuuuito obrigado Vic! 🤓

[@ekerdev]

Foi muito bom ter participado desse Mini game com vcs!

[@codigofontetv]

Foi muito legal desenvolvermos esse projeto juntos!

[@josafa8019]

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]

Josafá os erros fazem parte, o importante é conseguir passar por eles! Nós que agradecemos!

[@josafa8019]

@@codigofontetv Isso aí 😄

[@Matheus_lima22]

Por favor Trás um vídeo fazendo Doom em JS?; Vídeo incrível como sempre!

[@themeltz]

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]

Depois diz pra gente o que achou do vídeo! :D

[@themeltz]

Simplesmente, adorável! Parabéns!

[@markfazolin]

Vídeo muito bom, ótimo conteúdo! (Como sempre!) O que mais gostei é que esta usabilidade pode ser usada em muitos projetos!

[@danilopontes3871]

29:02 aquele momento em que você pensa: (Não é possível 😑) 😂😂😂

[@lebersa]

Façam um curso de javascript, algo que dê base antes de irmos para algum framework. Vcs são demais!!!

[@alexandregonzalez2781]

Vídeo top, mas o melhor foi o foguinho ao digitar!!kkkkk

[@casedesucessoYT]

extensão power mode do vscode, baixe e seja feliz!!!

[@jeancarlomoraes8644]

Irado demais.... uma explicação muito boa!!

[@codigofontetv]

Muito obrigado Jean! 🤓

[@joaoovitort]

Jogos... A paixão da minha vida..., Quero muito aprender a programar jogos.

[@codetechannel]

Muito bom. Continuem com esse tipo de vídeos.

[@eduardophilip7231]

Ó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!

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.

[@AnthonHax]

Muito bom, me interesso muito em lógica em JS, parabéns pelo vídeo!

[@tiagolopes2679]

Show, isso nos inspira em muito a fazer mais projetos

[@milianor8194]

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.

[@G69G71]

Proposta bem interesante Adorei o conteudo

[@TheNerdRR]

um vídeo de meia hora codando nunca foi tão cativante, Adorei!

[@fabinhotonyhalk4941]

Esse canal tá me ajudando muito a me interessar cada vez mais por programação, sério ótimo vídeo, ótimo conteúdo🤝

[@ricardosilvapimentel2810]

Conhece o Fábio Akita (acho q o canal dele é o Alugando, não lembro) e ele dá uns conselhos ótimos também.

[@FRC260484]

Conteúdo sensacional, vocês estão de parabéns!

[@naoseioquecriar]

"programamos ao vivo..." 100% verdadeiro, final de ano eu mando um presente do papai noel também, o qual eu acredito piamente que existe.

[@lucasneves7669]

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!

[@Im_KingJo]

Que legal, nunca vi algo assim, like e mais um inscrito :)

[@codigofontetv]

Muito obrigado! Seja bem vindo ao CDFTV. 🤓

[@codigodesenior3995]

finalmente algo sem node kkkk

[@nelson.costa.dev2536]

Façam um curso, vamos todos pedir façam um curso.

[@feliz9276]

Ultilizo muito esse programa para criar codigos. Top

[@andrewscasas]

Mais jogos! PLS! \o/

[@Guilherme-jz6qx]

Vídeo incrível, façam mais do tipo, por favor!

[@francislei]

Bora comentar, canal top

[@kbrunot13]

Gostaria de ver a explicaçao sobre o css e o html do codigo =)

[@Ulusamay]

quero bolo café, e refrigerante e umas torradas

[@TheMatthewizee]

Boooa gente ficou mt daooora kkkkkkkkkkkkkkk

[@rafaelcostamoura]

Isso sim foi um video Maaaravilhooooso...

[@nykaell.ecardial8208]

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]

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. ;)

[@Diego_oliverira_dev]

Qual tema tá usando no vs

[@lucasbueno3694]

Super legal amei faz sim

[@biamiotto]

Amei, vcs são incríveis

[@codigofontetv]

Muito obrigado Bia. 😍

[@gustavobrunobarbosa4467]

Nossa, gostei muito!!!!! Faz sempre

[@willianmello10]

nossa que legal 👏😃

[@emersondelimasilva]

Que extensão é essa de pegar fogo ao digitar?

[@MarcosPmkt]

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]

@Arthur Silva eeeee godot

[@isaacbaruccruzdasilva2463]

@Arthur Silva kkkkkkk

[@vitorgabriel8832]

Muito booom! Alguém sabe dizer qual o tema do vscode utilizado nesse vídeo? Achei muito bonito!

[@railsonr.nascimento7308]

dracula

Eu consigo colocar esses mini games dentro do fivem ? Por exemplo pegar esses mini games onlines e colocar dentro do fivem

[@andreyamamoto1709]

Ja se tornaram meu casal favorito!

[@andredearaujorodrigues7725]

Show de bola

[@sevensevenn8729]

Por mais vídeos assim 👏🏼👏🏼👏🏼👏🏼

[@mateus_andriola]

Muito legal o vídeo

[@codigofontetv]

Muito obrigado Mateus. 🤓

[@oVitorznn]

Olá, voces sabem como coloca o unityexplorer dentro da pasta do jogo para programar ele?

[@Mixtli_0]

Deveriam mostrar tbm o css

[@murilorerisondesousapaz5065]

O que voces acham do html Canvas?

[@youtubersona]

Por favor faça a parte das animações 😁

[@davilucasmarques7921]

Massa demais!!!

[@codigofontetv]

Muito obrigado Davi! 🤓

[@profericksmendes]

Top de mais 😃 obrigado

[@matheusnet4316]

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!

[@aristotelesbrasil]

opa, gostaria de saber se da pra usar javascript no game maker 2, pra programar

[@JorgeValero]

Muito bom 👏🏼👏🏼👏🏼

[@mikaelpavaospm]

Ótima explicação , gostaria de ver a parte do html achei bem interessante.

[@henriquewoww]

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??

[@musashiironin36632]

Eu fiz passo a passo do GITHUB e fiz tbm assistindo o vídeo, o botão ainda ficou bloqueado, alguma dica pra desbloquear ??. Não foi erro de código porque quando peguei lá do GITHUB (quando eu vi que ele estava com botão bloqueado) só coloquei e colei e continuo do mesmo jeito. Obg ótimo vídeo.

[@henriquebaraldi281]

Que legal

[@ewertonlins7488]

bom dia amigos. como eu crio uma frot end para abrir games antigos, por exemplo, nitendo 64, nitendinho, sega, e outros. podem me ajudar.

[@helliandrosoutohenrique8931]

Eu gostaria de mais programacões de mini games.

[@igormito4770]

Qual o nome da extensão que solta fogo na escrita? Obg!

[@codigofontetv]

Se chama Power Mode

[@euvoluindodev2395]

como faz para acender esse fogo quando digita no vscode?

[@saimongospel]

Não é atoa que to aprendendo javascript kkk

[@ALLANOSAN]

Eu gostei do foguinho isso e tema se for mostra como colocar comecei a seguir o canal esses dias

[@ramonidemorais1898]

Boa noite, vcs poderiam fazer um vídeo sobre SALESFORCE ??

[@maiconlondon2019]

No próximo mão de código, colocar Vanessa para programar!

[@arnoldcainan5832]

Muito 10!!!!

[@christianlin4684]

Javasclipt é bom! Obligado.

[@alexfreitas4428]

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

[@beatrizfonseca7961]

falou jogo e javascript tou dentro XD

[@alanpoveda1646]

Caraca um jogo simples, olha a quantidade de coisas que tem que fazer kkkkkk

[@codigofontetv]

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.

[@william84787]

OLA!! uma sugestao , falar sobre Web2py ...Amo o canal de vcs:)

[@matheus3526]

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?

[@filhodadeise6567]

Qual Linguagem usada nas indústrias para programar os processos automatizados ?

[@cigarroapagado1423]

python e js são bastante usados

[@mateusbarbosa5040]

Parabens video muito bom

[@vrct07]

Poxa queria ver a parte de HTML.

[@yurimarinho9381]

Eu adoraria um vídeo falando sobre as animações

[@libertaçãoph]

Uau!

[@MrRodmetal]

Muito massa esse jogo do AmonGóes kkkk

[@brunomarkman2107]

Que tal programar o jogo lunar rescue 2???? Isso será a universidade para programmers :) Um abraço.

[@williamjog93]

Show de bola!

[@chocol4tt]

Caso fosse multiplayer online seria usado WebSockets?

[@codigofontetv]

Seria uma boa possibilidade!

[@VictorSilvaDev]

Top demais

[@nathanbahia6456]

Ficou muito legal! Gostaria apenas que a fonte fosse um pouquinho maior para que eu pudesse ler melhor.

[@diogocorreia344]

Dahora

[@paulinovagner]

Top! Que tal tabuleiro de resta um?! :)

[@codigofontetv]

Interessante essa ideia. :)