Um dos conceitos mais importantes na Programação!
HTML-код
- Опубликовано: 29 окт 2019
- ✅ 𝗔𝗚𝗢𝗥𝗔 𝗘𝗨 𝗧𝗘𝗡𝗛𝗢 𝗨𝗠 𝗖𝗨𝗥𝗦𝗢 😍
▸ Olha que massa que ficou: curso.dev/
Separation of Concerns é um dos conceitos mais importantes que você programador deve aprender. Nesse vídeo nós vamos passar juntos por 2 exercícios práticos para forçar o seu cérebro a pensar de uma forma abstrata. Com isso, vamos conseguir separar a Estrutura de Dados da Apresentação dos Dados e isso não chega a ser um design pattern, mas é um conceito, um princípio para evitar acoplamento no seu software.
Quando você destravar esse conceito no seu cérebro, você vai começar a programar sistemas que conseguem evoluir melhor e serem mais facilmente compreendidos e modificados.
A Estrutura de Dados vamos escrever em um objeto JavaScript e iremos renderizar esses dados em um Canvas no HTML (no frontend) do nosso jogo multiplayer. Então neste vídeo além de você ter uma aula sobre arquitetura de software (sobre um "design principle" na verdade), você vai contar com um tutorial de Canvas bastante interativo.
✅ 𝗚𝗢𝗦𝗧𝗔 𝗗𝗘 𝗡𝗢𝗧𝗜𝗖𝗜𝗔𝗦 𝗦𝗢𝗕𝗥𝗘 𝗧𝗘𝗖𝗡𝗢𝗟𝗢𝗚𝗜𝗔?
▸ Então você vai pirar nisso: filipedeschamps.com.br/newsle...
✅ 𝗢𝗟𝗛𝗔 𝗤𝗨𝗘 𝗠𝗔𝗦𝗦𝗔!
▸ Se essas conversas aqui estão fazendo você perceber coisas diferentes no seu código, ou na sua profissão de desenvolvedor, considera se tornar um Membro da Turma. É muito massa porque dá pra ter uma conversa muito mais próxima e discutir coisas bem diferentes e super importantes do nosso dia a dia: ruclips.net/user/FilipeDescham...
✅ 𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟
▸ Preguiça: Descobri Como Consertar o Meu Maior Problema
• Descobri Como Conserta...
▸ 3 Técnicas Que Eu Uso Para Aprender a Programar Qualquer Coisa
• 3 Técnicas Que Eu Uso ...
▸ SOLID fica FÁCIL com Essas Ilustrações
• SOLID fica FÁCIL com E...
▸ Eu fiz um dos melhores cursos de Programação do Mundo!
• Eu fiz um dos melhores...
▸ Desafio: 10 projetos rápidos para treinar Programação e conseguir um Emprego
• Desafio: 10 projetos r...
✅ 𝗟𝗜𝗡𝗞𝗦 𝗖𝗜𝗧𝗔𝗗𝗢𝗦 𝗡𝗢 𝗩Í𝗗𝗘𝗢
▸ Repositório Jogo Multiplayer: github.com/filipedeschamps/me...
▸ Vídeo sobre o Gitpod: • Editor de Código sensa...
▸ Playlist do Jogo Multiplayer: • Primeiro Jogo Multiplayer 
Наука
*PERA!!!!!* - Antes de ler os comentários, olha que *massinha* que ficou meu *Curso de Programação* curso.dev To muito orgulhoso, sério 🔥 🔥 🔥
o dia que o Michel Teló do JS tiver um curso na udemy eu compro na hora, 36 horas de dopamina, "olha que delicinha isso", "e pimba", "turma" kkkkkkk
hahahahahahahahahahahahahahahaha
Compro na hora!
Eu também, sem pestanejar
Didática sensacional! O cara consegue se emocionar com os resultados kkkk. Obrigado pelo material excelente!
Poxa, acabei de procurar na Udemy. Ajuda ai Filipe kkkkk.
Que delicinha esse vídeo!
Também achei mesmo
hahahahhh dááá-le mestre patooooooo!!! 😍
O Gabriel ja deve pensar, vou desenvolver um cheat para as coordenadas do meu player serem iguais as coordenadas das frutinhas, pegando todas e ganhando izi kkkkkk brincadeira sei nem oque to falando
@@paulorubens1444 ja viu o video burlando o joguinho da kabum ?, sabe de nada inocente
Olha se não é o Pabriel Gato
"Olha essa cidade, que DELICINHA!" - DESCHAMPS, Filipe
kkkkkkk
hahaha parece a abertura do seriado
sillicon valley
Quando finalmente saber o funcionamento do plano cartesiano se torna útil kkk
professora!!! nunca duvidei da senhora! kkkk
hahahahahahahahah Gleycon, exato!!!!!
So tem que se atentar para a posição em que o y se desloca que na programação e no sentido negativo do plano geométrico y plano cartesiano ⬆(geométrico), na programação ⬇
A primeira vez q assisti esse video, eu tava começando meus estudos de programação e assistir a playlist inteira me atacou com tantos conhecimentos q eu ficava perdido. Eu não conseguia entender as coisas que estavam acontecendo. Agora depois de 1 ano e meio estudando, voltei nesse video porque o youtube me recomendou e é simplesmente impressionante o quanto eu evolui a ponto de saber de cabeça exatamente como o Filipe poderia implementar cada coisa especifica do jogo, e aonde ele estava fazendo errado de propósito pra mostrar outros conceitos depois, como desacoplamento.
Realmente, só tenho a agradecer a você Filipe, por ter sido minha porta de entrada na programação e hoje, eu conseguir fazer coisas que na época que comecei a assistir seus video, nunca se quer imaginaria conseguir.
Inclusive, comprei seu curso no lançamento e não me arrependo nenhum pouco.
Parabéns pelo conteúdo e pelo carinho que você tem pelos vídeos até hoje.
10:38 "Frutinha representada pelo pixel VERMELHO" o Filipe é daltonico?
AHAHAHAH FERROU
O cenário que ele grava pra ele é roxo
vim justamente pra comentar isso
@@carlosalexandrelopes4575 eu também. Caí na risada quando ele falou pixel vermelho.
eu fiquei assustado eu pensei que EU que tava ficando daltonico kkkkkkkkkkkkk
Filipe meu, só tenho que te agradecer por todo o conhecimento e a experiência que você nos tem passado... Obrigado pelo carisma, pela paciência, pelo amor pelo oq faz. Isso com certeza difere sua pessoa e sua personalidade em relação ao mercado de hoje em dia. Da para perceber nitidamente que você está totalmente disposto em ensinar e somente passar a oportunidade que você tem para as outras pessoas falando de um jeito especial e com muito amor!! Obrigado man por ser você e ser incrível no que faz, espero que nós possamos estar cada vez mais juntos aprendendo, ensinado e trocando idéias sobre coisas novas e o mais importante de tudo... Levar amor para as pessoas através da programação. Valeu por tudo cara!! Você é de ouro.
Que comentário sensacional Pedrin!!! Puts, muito obrigado MESMO!!!! 😍
Não costumo comentar em vídeos a não ser que sejam de alto valor iguais a estes! Tá maluco aprendi muito aqui! Obrigado, cara!
o é uma mão na roda, mas eu ainda sinto falta de um sintetizador sonoro no html5 para efeitos sonoros sem uso de wav/mp3.
Total!!!!
Pode usar um pacote chamado Howler.js ;)
howlerjs.com/
Inclusive... tou para escrever um artigo sobre ele & Three.js :)
@@GlauciaLemos e aí, escreveu???
@@ffccardoso não. Fiquei doente e de licença e depois tive uma entrega grande pra fazer aqui na MS q nem tive tempo. Mas devo fazer uma série. Assim q sair comunico no twitter a todos. 🙃
@@GlauciaLemos Já na espera! ^^ Estudo música e irá contribuir mto para muitos projetos por aqui...
Show....Muito obrigado!!! Mesmo não sabendo programar ainda, entendi toda a lógica e consegui perceber através dos funções utilizadas como os jogos funcionam! Obrigado.
Olá Dechamps. Maravilhoso esse esse recurso do canvas do html. Esse vídeo me fez recordar o meu segundo ano de escola técnica aqui na Itália, onde desenhávamos um círculo e fazianos ele bater na borda do canvas de um lado pra o outro. Mesmo estudo PHP, foi muito instrutivo e muito legal esse vídeo. Valeu!
Um canal dessa qualidade deveria ter mais inscritos e reconhecimento, obrigado Felipe, por compartilhar conosco e nos ajudar a sermos programadores melhores, sempre acompanho e aplico muito dos conhecimentos aprendidos em seu canal no meu dia a dia, como programador.
Sensacional Gustavo, obrigado pelo apoio meu caro!!!
Ame alguém que lhe ame como o Deschamps ama nos ensinar!
Opa, Filipe! Nunca me interessei em ser um desenvolvedor de jogos, mas assistindo a esta playlist me recordei de um jogo de infância que jogava com meu irmão no PolyStation, TANKS! Está me motivando bastante a fazer um remake dele (com uns toques pessoais, kskskssk), obrigado! 😁
Aeeeeeeehhhh saiuuu, tava querendo a continuação há um tempão
Se liga, tu é o cara!
hahahahah massaaa Diogo :D
Que vídeo sensacional, nem parecia que tinha 24 minutos. Sua didática é excelente, cara !
Valeuuuu Leo!!! 😍
Didática é uma coisa linda de se ver e você tem muita hahaha, explicar conceitos complexos em um contexto simples mas que não deixa de ser legal, show!
Showww Jean :) sou apaixonado por didática!
Você leciona com um entusiasmo contagiante. Parabéns pelo canal e pelo ótimo conteúdo.
Showww Mr Acalf, e obrigado pelo comentário :)
Incrível a sua capacidade de sintetizar de uma forma simples conceitos que se forem explicados de uma maneira genérica (e abstrata) podem ser bastante complexos. Show demais Filipe!
Show Mayra!! E sempre muito obrigado sua presença aqui no canal, vamo que vamo!!!!
Muito massa saber que um vídeo pode ter tanto conteúdo 😃 parabéns! pela didática e pelo conhecimento passado
Shoooowww!! E vem mais :)
Top, gostei muito do canvas. Nunca tinha utilizado, sou meio leigo no front mas to começando a entender.
É muito massa ver a explicação do Filipe, é uma didática excelente. Eu não programo mas consigo entender perfeitamente.
hahaha que massa Ícaro :)
Fico feliz de entender tudo sabendo muito pouco de JS, acho que é o primeiro video de JS que entendo tudo kk, adoro seu canal.
Ahhhh que massaaaa Darko!!!! 😍
Aeeeehooooo! Finalmente o formato de vídeo mais incrível está de volta :D obrigado por isso, Filipe.
Deixo aqui um desabafo, me deu uma leve urticária em ver o loop duplicado que podia ser reduzido em uma função, ainda mais quando o pensamento do vídeo é abstrair o máximo. Mas de qualquer forma, eu confio em ti e nas suas habilidades de dev hehe principalmente considerando o que foi dito sobre isso ser algo mutável... Vídeo top, parabéns pelo trabalho!
hahaha showww Állan!!! Entendo perfeitamente seu comentário, por isso comento sobre isso no vídeo, a decisão no momento foi deixar desacoplada as responsabilidades de renderização de cada elemento. Mas puts, sabe o que seria legal, você enviar aqui nos comentários uma sugestão de como acredita ser melhor... seria fantástico 😍 só peço que faça num novo comentário, porque o RUclips não me avisa mais das respostas nos comentários que eu faço :(
@@FilipeDeschamps comentei novamente, mas fica aqui também o código pra quem cair aqui e quiser a resposta de imediato
function renderGame() {
const allPixels = game.canvasWidth * game.canvasHeight
context.globalAlpha = 1
context.fillStyle = 'white'
context.fillRect(0, 0, game.canvasWidth, game.canvasHeight)
drawDot(game.players, '#000000', 0.1)
//desenha os oponentes
drawDot(game.fruits, '#08a331', 1)
//desenha as frutas
const currentPlayer = game.players[socket.id]
context.fillStyle = '#F0DB4F'
context.globalAlpha = 1
context.fillRect(currentPlayer.x, currentPlayer.y, 1, 1)
requestAnimationFrame(renderGame)
}
function drawDot(dots, color, globalAlpha){
//funçãozinha pra reduzir a redundância
for (const dotId in dots) {
const dot = dots[dotId]
context.fillStyle = color
context.globalAlpha = globalAlpha
context.fillRect(dot.x, dot.y, 1, 1)
}
}
baaah Felipe, tu demorou pra lançar esse vídeo e por isso quando vi sua ideia corri implementar, e é muito legal ver que cheguei em soluções semelhantes as tuas, sucessoo
Ahhh que massa Fabricio!!! Depois do projeto finalizado manda um PR lá pro repositório :)
Excelente vídeo! Adoraria ver mais deste tipo de conteúdo. Algo legal de falar seria sobre Design Patterns, imagina que máximo.
Showww Marcelão, que legal ter ver aqui!!
Grande Felipe. Estou resignificando meu futuro profissional e por isso aprendendo novas tecnologias na área de programação. Comecei uma nova faculdade, ADS, e estou apaixonado pela área. Disseminadores de conhecimento como vc são fundamentais no processo de aprendizagem, por isso, obrigado. Continue com o excelente trabalho.
Valeuuu Rodrigo!
19:10 "QUE BOM QUE NÃO RENDERIZOU" KKKK AMO ESSE CARA
kkkkkkkkkkkk 😍 se tivesse renderizado eu ia ta preocupado kkkkkk
@@FilipeDeschamps kkkkkkkkkkk lenda! Bora trabalhar esse jogo!
kkkkkkkkkkkkkkkkkk
Parabéns pelo conteúdo Filipe, ansioso para os próximos eps haha!
Abraço meu caro!
Massa Diego, valeu pelo retorno meu caro :)
Passei a semana tentando aprender canvas.. Agora sei que vou aprender 🏆💻
Show Filipe, ótima didática, oque mais gostei foi as pausas para explicar cada parte do código. Nunca tinha trabalhado com canvas antes.
Shooww Pedro :)
Cara. Aprender programação desse jeito descontraído é muito foda.
#1 inscrito
#JS
Valeuuuu meu caro, seja muito bem vindo!!!!
Caaara animal esse conceito!! Tô me desbravando nos projetinhos pessoais e isso vai ajudar bastante. Pensar dessa forma antes de simplesmente sair programando com certeza faz a diferença. Vaaaalewww!!!!
Showwww Moacir, massa :)
Caraca, assistir aos videos do Canal do Filipe é quase uma faculdade!
Toda vez que paro pra ver alguns videos saiu lotado de coisas pra estudar e coisas novas que me interessaram! Muito foda seu trabalho!
Que massaaa Rodolfo, tamo junto meu caro 👍
✅ *GOSTA DE NOTÍCIAS SOBRE PROGRAMAÇÃO E TECNOLOGIA?* Então você vai pirar nisso: filipedeschamps.com.br/newsletter
Manoooooo que top ! Excelente trabalho Felipe :)
Sou programador front-end Jr, comecei a carreira a pouco tempo, e não sabia de como era simples e legarl trabalhar com canvas, amei S2 hahaa, ta de parabéns!
hahaha massaa Ademar 😍
Que dahora! Ótimo vídeo, explicação impecável. Grato...
Massaaaa Davi, to apaixonado por didática :)
Valorizo muito o cuidado que você tem com a didática. Sinceramente, a ideia que você passou sobre a construção dessa parte do jogo é que é muito simples, e realmente é. Acredito que isso quebra muitas barreiras (principalmente) na mente de quem está começando.
Sensacional xará! Obrigado pelo retorno :)
15:25 Nossa, essa informação mudou minha visão, de verdade!
Como sempre, mais um vídeo INCRÍVEL
Lucca que massaaaa, valeuuuu :)
Show Filipe! Fiz algumas alterações para deixar o exemplo do react fiber( de nave ) juntando com as ideias do jogo multiplayer que vc fez e ficou muito legal. Se quiser posso postar aqui. Abraços!
Opaaaa Valdir, que massa!!! Posta sim! Mas posta num novo comentário, porque o RUclips não me notifica quando alguém responde o meu comentário mais :(
adorei a forma detalhada que você explicou o código, já tô na espera da continuação!
Showww Thiago :)
Eu adoro fazer jogos e é sempre bom ver alguém fazendo pra pegar idéias diferentes pros mesmos problemas, show!
Uma sugestão: acho que esses vídeos se beneficiariam de uma lista de tarefas como os robôs tinham
Totaaal xará! Como a playlist comecou sem isso, meio que eu to seguindo as camadas como checklist, mas faltou mesmo :)
"-Aqui nos temos um quadrado branco sem nada dentro MARAVILHOSO!" (DESCHAMPS, Filipe)
kkkkkkkkkkkkkk
Esse mlk é um absurdo. Vídeo incrível!!!
Tamo junto Marcelão!!! 💪
Delicinha de conteúdo!!! Esse e o tipo que eu gosto de assistir. Já estou fazendo o meu tmb.
Masssaaa Gilmar, seja bem vindo!!!!!
É o tipo de coisa simples, que quando você aprende ( ainda mais com uma didática assim ), sua mente para por um segundo e depois exploooooode de ideias :) haha tu é o cara!
hahhahahahahahah que shoooowww Gui, fico muito feliz em ler isso, sério :)
Eu tava me programando pra aprender a usar o canvas e o youtube me surgere seu vídeo, show demais :)
hahhhaha que timing massa Jardel :)
Separation of concerns permite a implementação de microservices, o que por sua vez habilita criar um mecanismo de inversão de controle e injeção de dependências. 1000x SIM USEM ISSO
Mathews, ai sim, curti!!! Pelo seu comentário deu pra entender que você entende, matou a pau :)
@@FilipeDeschamps Hehehe E olha que nem comecei a falar de testes unitários! 8 anos de curso capitão!
Lembro quando comecei a assistir esse canal há uns 2 anos, não entendia 1% do vídeo, agora já esttoi entendendo uns 20-30% do vídeo
Muito bom, as pessoas precisam ver seus vídeos. ❤👏
Showwww Rosi!! Please me ajuda a compartilhar o vídeo :)
Excelente video, como sempre... Só um comentário: Usar recursividade para loop infinito numa função não costuma ser uma boa prática, pois pode levar a estouro de pilha (stack overflow). A cada nova chamada é necessário guardar o endereço da função que a chamou, para depois poder retornar a ela depois de executada a chamada. Como isso nunca acontecerá, ocorre esse estouro do limite de memória da pilha. O ideal é fazer um loop mesmo, chamando a função de refresh da tela a cada iteração e testando por uma condição de saída do loop, como fim do jogo, por exemplo.
Vídeo incrível Filipe! Eu tava procurando esse assunto essa semana, queria aprender Canvas mas tua explicação foi a melhor do que as que encontrei.
Para os FOR... Eu usaria uma função chamada pintarTela que receberia coordenadas e cor (só pra evitar repetir código, pra quando for usado muitas vezes facilitar a manutenção do recurso sem ter que modificar todo o código)
Sensacional meu caro!! Valeu pelo comentário e sugestão!!!
Estava programando um jogo pra faculdade usando exatamente o canvas antes de clicar no video. Pelo titulo não esperava ver o mesmo assunto aqui.
hahahahah show Lucas!! Que bom esse timing :)
Esse menino e MT bom!
Um dos motivos de gostar de programação não é as diversas coisas que podem ser feitas mas os profissionais que atuam nela!! A galera não demonstra malícia e sempre procura te ajudar. No caso, professor deixou a nossa escolha copiar o programa dele e depois editarmos. Duvido que em outro ambiente tenha pessoas generosas assim!!
Assisti esse video achando que não iria entender nada, mas aprendi muita coisa do que vc disse nos cursos da Alura. Muito legal!!
Ahhhh que massa Leandro :)
Gostei muito da forma didatica esplicando o que cada comando faz eu sou iniciante e estou entrando nesse mundo da programação agora e estou achando um máximo
Show de bola Natan :) seja bem vindo meu caro!
Parabéns pelo conteudo fodástico! E não da bola pros haters, 1 comentário ruim pode ser muito pesado para alguém dedicado e perfeccionista. Então deixo aqui meu sincero respeito mais uma vez registrado. Que você se sinta tranquilo pra continuar fazendo o que ama, seja produzir conteudos ou qualquer outra coisa, abração.
Sensacional TR, muito obrigado pelo apoio!!! 💪
Caraca Filipe, didática impressionante, inspirador em meu jovem...
Massaaa Rogerio, valeu meu caro!
Esses vídeos estão mt chamativos, socorroo!!! chamei até meu irmão pra ver.
haahhahahah sensacional!!!!! Dááá-le Khaled e seu irmão 💪
Filipe, conheci teu canal na semana passada, meio que por acaso. Fiquei interessado neste projeto e estou aprendendo muito, uma vez que sou iniciante. Obrigado.
Massaaa Rui, seja bem vindo meu caro 👍
você é um cara inspirador
eu tentei resolver o inputEntry por mim mesmo :D
usei adventEventListener para pegar os inputs das setas e adicionar as cordenas x e x no player1 e fiz uma logica para limitar o player para não sair da area de render.
possivelmente a minha implementação está pode não atender os requisitos mas é reconfortante conseguir fazer.
Total!! É isso ai, e agora você vai ter o benefício de comparar com o restante da implementação nos vídeos. Parabéns e vamo que vamo!
Esse vídeo é full dopamina. Sensacional!!
hahahahah show de bola Andersonnnn!!! Tamo junto 💪 fico feliz que gostou!
Show, parabéns, o assunto é muito interessante e mandou mto bem no vídeo!
Showw Eduardo, valeu meu caro :)
Legal show de bola!
*Estou apaixonado por essa a IDE Online que estou usando no vídeo, fiz um rápido review dela aqui:* ruclips.net/video/Q7YfzbJRzm0/видео.html
Coloca esses dois vídeos na playlist. Parabéns pelo conteúdo de qualidade! :)
Apenas 100 horas por mês de uso, são suficientes para acompanhar os tutoriais?
Cara assistir um video seu que até foi tirado do ar, uma conversa sua com o Gabriel Pato, e uma coisa que percebi que os buscadores do google estam utilizando inteligente artificial nos buscadores, se vc menciona o nome de um livro por exemplo e eu abro outra abra pra pesquisar o google auto completa o nome mostrando no buscador automaticamente, muito louco isso. o google vai se transformar na skynet =)
Olá Filipe, ainda vou no inicio do video mas já estou a comentar... MUITO BOM :D
hahhahahah show!
Voltou as origens. Vou voltar a acompanhar seu canal. Parabéns.
Massaaaa Edward, valeu por essa segunda chance!
Esse vídeo aí tá full dopamina!
Gostei muito de você mostrar um design pattern! Nos trabalhos que eu passei se fala muito em saber programar, mas o design pattern fica sempre de lado e me parece que o mais importante, além de saber programar, é saber arquitetar.
Total Matheus!! Se não souber arquitetar, o prédio cai uma hora.. e como é comum se acostumar a não arquitetar, só ir marretando código, tem muito software mal escrito por ai que não precisaria ser tããão mal escrito.
Super didático e funcional, de volta as origens. Parabéns rapaz, ansioso pelos próximos capítulos, mas admito que me intrigou o pixel vermelho, até voltei o vídeo pra ver se eu não tinha entendido algo hehe
#FullDopamina
ahhahahahahahahaha valeuuu Batista!!!! Vacilei nessa e nem na edição eu peguei, acho que estou com algum problema de cor kkkkkkk
Oi Felipe, saudações. Cheguei agora a esse seu vídeo e espero que posso responder a esse pedido. Bem, vc fala sobe as camadas e a importância de bem separar e definir claramente as responsabilidades. Show! Mas olhando o código até esse ponto, qual parte do código é cada camada ? Para ajudar com a abstração e a ligação com o código daria para, comentar as partes do código que corresponde a cada camada ou algo assim ? Fico no aguardo. Obrigado.
Filipe boa noite! fala um pouco sobre blockchain, como criar um jogo nesse modelo. Seria um conteudo muito bom!
Eu achava que o seu canvas tinha 400x400 pixels e o incremento da movimentação dos objetos era feito com incrementos de 10 pixels. A solução que voce usou para simplificar toda essa "compensação" foi muito legal! *Eu chamo de solução elegante.*
Victor, exato! E isso vai fazer uma grande diferença quando entrarmos na parte de colisão, porque não precisaremos calcular a área ou o overlap das figuras, porque fica tão simples quanto comparar uma unidade de X e Y. Claro que tudo isso é válido somente para o primeiro jogo.
vou fala um negocio pra ti cara da até vontade de chora porque tipo eu aprendendo programação num tava rolando sabe, os caras passam as aulas tipo faça tal formula matematica e veja o resultado sabe pra mim eu sinceramente tava na duvida como que fazia pra brinca com programação e aprender de fato porque eu ainda tenho o sonho de trabalha nessa area rs mas contigo ensinando cara mt bom serio msm... achei vc por uma live que tu fez com o akita que é um cara mt bom pra explicar conceitos tbm serio vc é massa demais como professor pra ensina sabe nem parece que a gente ta aprendendo. e até que enfim o cursinho de javascript veio a fazer mais sentido. talvez falta criatividade pra mim pra usar as coisas que aprendo mas tomara que vc continnue trazendo seus projetinhos assim passo a passo e tal pode ser chato pra quem ja sabe talvez mas cara pra ensinar vc digitar e funcionar e vc lembra do cursinho poxa da mt certo ve a coisa acontecendo. vlw ae
Adorei o vídeo e o conteúdo! Só faltou mostrar a listinhas das tasks e fazer a Full Dopamina com a conclusão de cada task hehehe
hahhahahah total!!!! é verdade :)
10:40 Pixel vermelho 🤔. Nesse momento que percebemos que o Michel Teló é daltônico
kkkkkkkkkk
kkkkkkkkkkkk
kkkkkkk pensei a mesma coisa... Esse Teló não é brincadeira não... kkkkkk
Filipe, você é sensacional!!!
Valeuuuu Raphael!!!!!
Show grande video 🙂👌👌
Melhor vídeo que o youtube me recomendou :)
hahahah que massaaa Douglas!!
Incrível Filipe, vc é demais!
Valeuuu Brunooooo!!!
Muito bom 👋👋👋
Muito massaa =D
11:40, esse é o conceito de cachoeira (waterfall), em oposição ao ágil (agile), q vc mencionou depois. Este 2º provou ser + produtivo na prática industrial de planejamentos.
14:55, mas como a representação dá-se em píxeis, faz sentido ter esse registro em algum lugar. Eu usaria 1 constante global, se a ideia é não mudar isso tão cedo. Se pode mudar em certas ocasiões, uma classe seria a melhor opção. Somente se a intenção for permitir alteração a qq momento, eu passaria tais medidas na forma de argumentos de f().
15:15, cabe aí 1 refatoramento: juntar esses 2 blocos num só (lambda), com 2 chamadas. Não haveria ifs nem detecção de tipos feita pelo usuário. Segue o exemplo (C++14):
*void* renderScreen () {
*const auto* lambda = [&]( *const auto* &Colecao, *const int8_t* Cor) {
*for* ( *const auto* Ente: Colecao) {
context.fillStyle = Cor;
context.fillRect ( Ente.x, Ente.y, PIXEL_WIDTH, PIXEL_HEIGHT );
}
};
lambda (game.players, black); lambda (game.fruits, green);
}
21:42, isso é possível pq hj em dia é gerenciado por hardware. Mas houve uma época q tinha q atualizar só o q mudava...
E pimba! Ótimo vídeo, parabéns!
Cara, show sua explicação. Senti falta só do "full dopamina"...hehehe :)
hahahah Paulo, exato, faltou um #fulldopamina mesmo :D
Ia falar a mesma coisa, dá-lhe #fulldopamina pq essa camada ficou top
Filipe você já fez algum vídeo que usa a 'técnica' de Web Scraping? Estou criando um bot para Discord em Node.js (para aprender mais) e é extremamente útil, principalmente quando algum serviço não tem uma API própria pra isso -(se o site permite, claro).- Aliás... o vídeo ficou muito bom, depois vou tentar criar esse jogo, SHOW! :D. *100% FULL DOPAMINA TOTAL!*
Showwwww!!!! Eu não tenho, mas adoro fazer web scraping :D
Sobre o quadrado vermelho, eu faria um prototype com estas características, aí você poderia cloná-lo e utilizá-lo. Legal quando você quer criar um inimigo por exemplo, eles são quase iguais, mas você poderia mudar ataque, dano, posicionamento, mas já teria uma base.
Na época que eu me aventurava em jogos com action script (flash), era ótimo pra você destruir/criar inimigos de acordo com o ocorrido. E o herói também. UPDATE: no final das contas acabou bem similar.
Altíssima qualidade de ensino. Parabéns!
Sensacional Marcelo!! Valeu pelo comentário meu caro!!!
Olá, Filipe. Primeiramente parabéns pelo seu conteúdo. Eu estou usando aqui o método scale no canvas. Assim crio um canvas de 500 por 500, uso somente uma parte do grid de 10 por 10 e aumento em 50 vezes: context.scale(50, 50). Não sei se é a melhor forma de fazer isso, mas uma vantagem é que não preciso usar css pra corrigir a renderização dos pixels.
Que MASSA essa dica Roberto, matou a pau!!!!
Faz um video curso depois desde do inicio para inicantes, e detalhes , vai ficar muito bom , pq dificil de encontrar videos de games assim tao bons quanto o seu .
Show Abbas! Valeu pela sugestão :)
Ficou bacana tu passar o desafio abstrato e a gente imaginar como ficaria na tela e depois ao fazer o código fica mais fácil
Masssaaa Victor :)
Que playlist massa!
Showww Dhiego 😍
Vídeo bom demaaaais, prazeroso de assistir
Didática impecável
Valeuuuuuu Vinício!!! 💪
Ótimo trabalho cara... Absolutamente didático. Nem vi os 24 minutos passarem
Que massaaaa meu caro!!!! Show!!! To aqui na correria do próximo vídeo, vamo que vamo!!!
Muito legal, bastante didático
Showw Rafa, valeu!
Olha filipe, eu sou do tempo que gastavam horas procurando onde eu havia esquecido o ponto e virgula e cara, ver você - no javascript, não usando ponto e vírgula 🤦🏽♂️ me da umas exceptions que você nem imagina kkkk fora isso gostei do exercício de mentalizar, geralmente programamos primeiro e pensamos depois 👌🏽 irei fazer alguns testes depois kkk por fim; mais um conteúdo #delicinha parabéns!!
ahahahah Hebert, eu não sei se consigo voltar a programar JavaScript com ponto e vírgula. Mas eu entendo que causa estranheza kkkkk :)
Filipe Deschamps hahahaha eu to tentando não usar no js porém é mais forte que eu 😂😂😂
uma dica, context.clearRect(0,0,screen.width,screen.height); faz a mesma coisa que context.fillStyle = 'white';
context.fillRect(0, 0, 10, 10);
Sensacional Gabriel, muito obrigado pela dica!!!
Muito toppp parabéns pelo conteúdo !!!
Valeuuuuu André :)
showw de maisss obgggg