Um dos conceitos mais importantes na Programação!

Подписаться 782 тыс.

Просмотров 223 тыс.

50% 1

✅ 𝗔𝗚𝗢𝗥𝗔 𝗘𝗨 𝗧𝗘𝗡𝗛𝗢 𝗨𝗠 𝗖𝗨𝗥𝗦𝗢 😍
▸ 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: filipedeschamp...
✅ 𝗢𝗟𝗛𝗔 𝗤𝗨𝗘 𝗠𝗔𝗦𝗦𝗔!
▸ 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: www.youtube.co...
✅ 𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟
▸ 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/fil...
▸ Vídeo sobre o Gitpod: • Editor de Código sensa...
▸ Playlist do Jogo Multiplayer: • Primeiro Jogo Multiplayer

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

7 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 628

@FilipeDeschamps Год назад

*PERA!!!!!* - Antes de ler os comentários, olha que *massinha* que ficou meu *Curso de Programação* curso.dev To muito orgulhoso, sério 🔥 🔥 🔥

@GabrielPato 4 года назад

Que delicinha esse vídeo!

@gamesantosbr 4 года назад

Também achei mesmo

@FilipeDeschamps 4 года назад

hahahahhh dááá-le mestre patooooooo!!! 😍

@paulorubens1444 3 года назад

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

@NINJ4_D3V 3 года назад

@@paulorubens1444 ja viu o video burlando o joguinho da kabum ?, sabe de nada inocente

@Cookieukw 2 года назад

Olha se não é o Pabriel Gato

@lucas99196 4 года назад

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

@FilipeDeschamps 4 года назад

hahahahahahahahahahahahahahahaha

@rimersongomes1566 4 года назад

Compro na hora!

@otaviinn 4 года назад

Eu também, sem pestanejar

@ricardohonoriocorreia7862 4 года назад

Didática sensacional! O cara consegue se emocionar com os resultados kkkk. Obrigado pelo material excelente!

@wagnerjunior3782 4 года назад

Poxa, acabei de procurar na Udemy. Ajuda ai Filipe kkkkk.

@gleyconxavier2831 4 года назад

Quando finalmente saber o funcionamento do plano cartesiano se torna útil kkk professora!!! nunca duvidei da senhora! kkkk

@FilipeDeschamps 4 года назад

hahahahahahahahah Gleycon, exato!!!!!

@argeniosilveira3132 4 года назад

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 ⬇

@hiroshi7130 6 месяцев назад

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.

@PersonalXZ 4 года назад

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.

@FilipeDeschamps 4 года назад

Total!!!!

@GlauciaLemos 4 года назад

Pode usar um pacote chamado Howler.js ;) howlerjs.com/ Inclusive... tou para escrever um artigo sobre ele & Three.js :)

@ffccardoso 4 года назад

@@GlauciaLemos e aí, escreveu???

@GlauciaLemos 4 года назад

@@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. 🙃

@gideonsantos8643 4 года назад

@@GlauciaLemos Já na espera! ^^ Estudo música e irá contribuir mto para muitos projetos por aqui...

@xXMatheusSSZXx 4 года назад

"Olha essa cidade, que DELICINHA!" - DESCHAMPS, Filipe

@FilipeDeschamps 4 года назад

kkkkkkk

@kauemurakami 4 года назад

hahaha parece a abertura do seriado sillicon valley

@araujored1146 Год назад

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!

@gustavogodoy491 4 года назад

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.

@FilipeDeschamps 4 года назад

Sensacional Gustavo, obrigado pelo apoio meu caro!!!

@lucass.p9579 4 года назад

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.

@FilipeDeschamps 4 года назад

hahahahah show Lucas!! Que bom esse timing :)

@Matheusess 4 года назад

19:10 "QUE BOM QUE NÃO RENDERIZOU" KKKK AMO ESSE CARA

@FilipeDeschamps 4 года назад

kkkkkkkkkkkk 😍 se tivesse renderizado eu ia ta preocupado kkkkkk

@Matheusess 4 года назад

@@FilipeDeschamps kkkkkkkkkkk lenda! Bora trabalhar esse jogo!

@alissonsantos5353 4 года назад

kkkkkkkkkkkkkkkkkk

@MaThMaTa1000 4 года назад

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

@FilipeDeschamps 4 года назад

Mathews, ai sim, curti!!! Pelo seu comentário deu pra entender que você entende, matou a pau :)

@MaThMaTa1000 4 года назад

@@FilipeDeschamps Hehehe E olha que nem comecei a falar de testes unitários! 8 anos de curso capitão!

@galeradosvidaloka 4 года назад

Ame alguém que lhe ame como o Deschamps ama nos ensinar!

@felipe31soares 4 года назад

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.

@FilipeDeschamps 4 года назад

Sensacional xará! Obrigado pelo retorno :)

@jardelfrank9132 4 года назад

Eu tava me programando pra aprender a usar o canvas e o youtube me surgere seu vídeo, show demais :)

@FilipeDeschamps 4 года назад

hahhhaha que timing massa Jardel :)

@guialves64 4 года назад

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

@FilipeDeschamps 4 года назад

hahhahahahahahah que shoooowww Gui, fico muito feliz em ler isso, sério :)

@rodrigomuniz2006 4 года назад

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.

@FilipeDeschamps 4 года назад

Valeuuu Rodrigo!

@PodcastsInternacioanis 4 года назад

Fico feliz de entender tudo sabendo muito pouco de JS, acho que é o primeiro video de JS que entendo tudo kk, adoro seu canal.

@FilipeDeschamps 4 года назад

Ahhhh que massaaaa Darko!!!! 😍

@FilipeDeschamps 3 года назад

✅ *GOSTA DE NOTÍCIAS SOBRE PROGRAMAÇÃO E TECNOLOGIA?* Então você vai pirar nisso: filipedeschamps.com.br/newsletter

@leonardofps1 4 года назад

Que vídeo sensacional, nem parecia que tinha 24 minutos. Sua didática é excelente, cara !

@FilipeDeschamps 4 года назад

Valeuuuu Leo!!! 😍

@VictorCampos87 4 года назад

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

@FilipeDeschamps 4 года назад

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.

@mayraamaral7267 4 года назад

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!

@FilipeDeschamps 4 года назад

Show Mayra!! E sempre muito obrigado sua presença aqui no canal, vamo que vamo!!!!

@dennisalves 4 года назад

10:38 "Frutinha representada pelo pixel VERMELHO" o Filipe é daltonico?

@FilipeDeschamps 4 года назад

AHAHAHAH FERROU

@josiasfurtado5734 4 года назад

O cenário que ele grava pra ele é roxo

@carlosalexandrelopes4575 4 года назад

vim justamente pra comentar isso

@wagnerjunior3782 4 года назад

@@carlosalexandrelopes4575 eu também. Caí na risada quando ele falou pixel vermelho.

@GoEvenHarder 4 года назад

eu fiquei assustado eu pensei que EU que tava ficando daltonico kkkkkkkkkkkkk

4 года назад

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!

@FilipeDeschamps 4 года назад

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 RU-vid não me avisa mais das respostas nos comentários que eu faço :(

4 года назад

@@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) } }

@opedroaranda 4 года назад

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.

@FilipeDeschamps 4 года назад

Que comentário sensacional Pedrin!!! Puts, muito obrigado MESMO!!!! 😍

@uziel7GamePlays 4 года назад

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.

@FilipeDeschamps 4 года назад

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!

@PedroHenriqueTSI 4 года назад

Show Filipe, ótima didática, oque mais gostei foi as pausas para explicar cada parte do código. Nunca tinha trabalhado com canvas antes.

@FilipeDeschamps 4 года назад

Shooww Pedro :)

@matheusgeres 4 года назад

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.

@FilipeDeschamps 4 года назад

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.

@piruleibbe 4 года назад

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.

@FilipeDeschamps 4 года назад

Sensacional TR, muito obrigado pelo apoio!!! 💪

@leandrosob 4 года назад

Assisti esse video achando que não iria entender nada, mas aprendi muita coisa do que vc disse nos cursos da Alura. Muito legal!!

@FilipeDeschamps 4 года назад

Ahhhh que massa Leandro :)

@moacirlimajr7073 4 года назад

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

@FilipeDeschamps 4 года назад

Showwww Moacir, massa :)

@ademarjunior8906 4 года назад

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!

@FilipeDeschamps 4 года назад

hahaha massaa Ademar 😍

@Nepomucena100 2 года назад

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

@icaroferracini 4 года назад

É muito massa ver a explicação do Filipe, é uma didática excelente. Eu não programo mas consigo entender perfeitamente.

@FilipeDeschamps 4 года назад

hahaha que massa Ícaro :)

@diogocardoso5185 4 года назад

Aeeeeeeehhhh saiuuu, tava querendo a continuação há um tempão Se liga, tu é o cara!

@FilipeDeschamps 4 года назад

hahahahah massaaa Diogo :D

@jeanmarcos8265 4 года назад

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!

@FilipeDeschamps 4 года назад

Showww Jean :) sou apaixonado por didática!

@alexandrecgoes 4 года назад

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.

@Darthilandia 4 года назад

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!

@FilipeDeschamps 4 года назад

Que massaaa Rodolfo, tamo junto meu caro 👍

@guilhermekaegomes3913 4 года назад

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

@valdirsalgueiro9087 4 года назад

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!

@FilipeDeschamps 4 года назад

Opaaaa Valdir, que massa!!! Posta sim! Mas posta num novo comentário, porque o RU-vid não me notifica quando alguém responde o meu comentário mais :(

@edward_t450 4 года назад

Voltou as origens. Vou voltar a acompanhar seu canal. Parabéns.

@FilipeDeschamps 4 года назад

Massaaaa Edward, valeu por essa segunda chance!

@53Queijos 4 года назад

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

@FilipeDeschamps 4 года назад

Ahhh que massa Fabricio!!! Depois do projeto finalizado manda um PR lá pro repositório :)

@luccarabelo354 4 года назад

Como sempre, mais um vídeo INCRÍVEL

@FilipeDeschamps 4 года назад

Lucca que massaaaa, valeuuuu :)

@carloshenriqueoliveira79 2 года назад

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

@knop.mickael 3 года назад

15:25 Nossa, essa informação mudou minha visão, de verdade!

@marcelobrito 4 года назад

Esse mlk é um absurdo. Vídeo incrível!!!

@FilipeDeschamps 4 года назад

Tamo junto Marcelão!!! 💪

@LuisFelipe-td8qk 2 года назад

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

@EuFelipeAndrade 4 года назад

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

@FilipeDeschamps 4 года назад

Totaaal xará! Como a playlist comecou sem isso, meio que eu to seguindo as camadas como checklist, mas faltou mesmo :)

@natanxavier150 4 года назад

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

@FilipeDeschamps 4 года назад

Show de bola Natan :) seja bem vindo meu caro!

@LuizCarlosNolasco 4 года назад

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!

@Julianoqm 4 года назад

"-Aqui nos temos um quadrado branco sem nada dentro MARAVILHOSO!" (DESCHAMPS, Filipe) kkkkkkkkkkkkkk

@antoniocarlosdearaujolimaf6375 4 года назад

Você leciona com um entusiasmo contagiante. Parabéns pelo canal e pelo ótimo conteúdo.

@FilipeDeschamps 4 года назад

Showww Mr Acalf, e obrigado pelo comentário :)

@MarceloRocha-pd3ri 4 года назад

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!

@FilipeDeschamps 4 года назад

Sensacional Marcelo!! Valeu pelo comentário meu caro!!!

@khaledmohamad3758 4 года назад

Esses vídeos estão mt chamativos, socorroo!!! chamei até meu irmão pra ver.

@FilipeDeschamps 4 года назад

haahhahahah sensacional!!!!! Dááá-le Khaled e seu irmão 💪

@ruirossi6241 4 года назад

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.

@FilipeDeschamps 4 года назад

Massaaa Rui, seja bem vindo meu caro 👍

@relvascaue4869 4 года назад

Passei a semana tentando aprender canvas.. Agora sei que vou aprender 🏆💻

@MrAbrazildo 2 года назад

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

@wmp7848 3 года назад

Esse menino e MT bom!

@LucasSouza-ph1ug 3 года назад

Top, gostei muito do canvas. Nunca tinha utilizado, sou meio leigo no front mas to começando a entender.

@analytical_abas 4 года назад

Cara, show sua explicação. Senti falta só do "full dopamina"...hehehe :)

@FilipeDeschamps 4 года назад

hahahah Paulo, exato, faltou um #fulldopamina mesmo :D

@PauloTiagoCastanhoMariano 4 года назад

Ia falar a mesma coisa, dá-lhe #fulldopamina pq essa camada ficou top

@xVictorGt 4 года назад

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

@FilipeDeschamps 4 года назад

Masssaaa Victor :)

@edmilsonmota2505 4 года назад

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.

@eded2863 4 года назад

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)

@FilipeDeschamps 4 года назад

Sensacional meu caro!! Valeu pelo comentário e sugestão!!!

@samuel72 4 года назад

Nunca fiz nada sobre essa linguagem de HTML5 (acertei?) vi seu vídeo fui pausando e entendendo, e consegui chegar nos mesmos resultados que no vídeo, gostei muito!

@FilipeDeschamps 4 года назад

Ahhhhh que massa Sam!!! Eu uso HTML5 e JavaScript!

@corterapido901 4 года назад

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 .

@FilipeDeschamps 4 года назад

Show Abbas! Valeu pela sugestão :)

@thiagoztaaso9784 4 года назад

adorei a forma detalhada que você explicou o código, já tô na espera da continuação!

@FilipeDeschamps 4 года назад

Showww Thiago :)

@voidnatta 4 года назад

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

@FilipeDeschamps 4 года назад

Showwwww!!!! Eu não tenho, mas adoro fazer web scraping :D

@luca0898 4 года назад

Muito didático! Cara, uma coisa que acho ser interessante é: Invés de usar "for(player in game.players)" e ter que pegar o identificador de cada objeto para conseguir acessa-lo, você pode usar o "for(player of game.players)" que trará a propriedade em si, assim como não irá usar o identificador não há necessidade de usar o "for in" ... Ótimo vídeo, vlw!

@FilipeDeschamps 4 года назад

Fala meu caro, mas pelo que lembro o for...of ele funciona apenas para arrays, ou eu to enganado?

@HebertdeLima 4 года назад

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

@FilipeDeschamps 4 года назад

ahahahah Hebert, eu não sei se consigo voltar a programar JavaScript com ponto e vírgula. Mas eu entendo que causa estranheza kkkkk :)

@HebertdeLima 4 года назад

Filipe Deschamps hahahaha eu to tentando não usar no js porém é mais forte que eu 😂😂😂

@RobertoRenovato 4 года назад

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.

@FilipeDeschamps 4 года назад

Que MASSA essa dica Roberto, matou a pau!!!!

@luizamorim3132 4 года назад

Puts, mano. Meu coração até acelerou aqui com esse negócio do pixel vermelho, achei que EU estava vendo ele errado, como se estivesse daltônico. jkkjkj Estou aqui torcendo para ter sido apenas algum erro seu, mano. jkjkjkjkkkj Vídeo sensacional, adoro seus vídeos ! Você é foda !

@FilipeDeschamps 4 года назад

kkkkkkkkkkk valeuuuu Luiz!!!

@kuskoinsano 4 года назад

Cara. Aprender programação desse jeito descontraído é muito foda. #1 inscrito #JS

@FilipeDeschamps 4 года назад

Valeuuuu meu caro, seja muito bem vindo!!!!

@codificandoideias4244 4 года назад

Muito massa saber que um vídeo pode ter tanto conteúdo 😃 parabéns! pela didática e pelo conhecimento passado

@FilipeDeschamps 4 года назад

Shoooowww!! E vem mais :)

@gabrielcorreiadasilva172 4 года назад

uma dica, context.clearRect(0,0,screen.width,screen.height); faz a mesma coisa que context.fillStyle = 'white'; context.fillRect(0, 0, 10, 10);

@FilipeDeschamps 4 года назад

Sensacional Gabriel, muito obrigado pela dica!!!

@marceloprado2035 4 года назад

Excelente vídeo! Adoraria ver mais deste tipo de conteúdo. Algo legal de falar seria sobre Design Patterns, imagina que máximo.

@FilipeDeschamps 4 года назад

Showww Marcelão, que legal ter ver aqui!!

@gilmargatto 4 года назад

Delicinha de conteúdo!!! Esse e o tipo que eu gosto de assistir. Já estou fazendo o meu tmb.

@FilipeDeschamps 4 года назад

Masssaaa Gilmar, seja bem vindo!!!!!

@alessandrobezerramoreira9871 4 года назад

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.

@cassinhu1 4 года назад

Caraca! Muito o video, ja esta like on... acredito que um titulo como “vamos criar um jogo com canvas” e o titulo atual como subtítulo... poderia atrair mais interessados.

@FilipeDeschamps 4 года назад

Massa Acassio! Valeu pela sugestão meu caro!

@davilago8356 4 года назад

Que dahora! Ótimo vídeo, explicação impecável. Grato...

@FilipeDeschamps 4 года назад

Massaaaa Davi, to apaixonado por didática :)

@cirosobral 4 года назад

10:40 Pixel vermelho 🤔. Nesse momento que percebemos que o Michel Teló é daltônico

@FilipeDeschamps 4 года назад

kkkkkkkkkk

@swplogic4158 4 года назад

kkkkkkkkkkkk

@NHelp 4 года назад

kkkkkkk pensei a mesma coisa... Esse Teló não é brincadeira não... kkkkkk

@RogerioLins1975 4 года назад

Caraca Filipe, didática impressionante, inspirador em meu jovem...

@FilipeDeschamps 4 года назад

Massaaa Rogerio, valeu meu caro!

@moupeople5549 4 года назад

Olá Filipe, ainda vou no inicio do video mas já estou a comentar... MUITO BOM :D

@FilipeDeschamps 4 года назад

hahhahahah show!

@davivieira1632 4 года назад

Fala Felipe que massa esse vídeo. O que você acha que utilizar o ES6 Proxies parar criar um Watch do objeto game? Acho que não há motivos para executar a função renderScreen sem que haja alteração no objeto. Nos permite também modificar somente o pixel alterado, sem precisar redesenhar toda a arena. Abraços

@FilipeDeschamps 4 года назад

Show Davi! Seria ótimo, mas dai nesse caso eu utilizaria um Observer Pattern para ficar mais acessível aos iniciantes, dado que esse é para ser o primeiro jogo multiplayer da pessoa. O que acha desse pattern?

@davivieira1632 4 года назад

@@FilipeDeschamps show .

@otaviowill 4 года назад

É Filipe Deschamps... Seus jargões já está na boca da galera. Me diz aí, e tudo isso não uma delicinha?! Parabéns pela partilha de conhecimento.

@FilipeDeschamps 4 года назад

hahahahahahah é verdade!!! ahahhah

@batista7898 4 года назад

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

@FilipeDeschamps 4 года назад

ahhahahahahahahaha valeuuu Batista!!!! Vacilei nessa e nem na edição eu peguei, acho que estou com algum problema de cor kkkkkkk

@irvindo 4 года назад

O que mais gostei foi da criação dos jogadores e fruta e seus atributos e também de programar imprimindo na tela.

@FilipeDeschamps 4 года назад

Show Leo 🤝

@logancarvalho 4 года назад

Ótimo trabalho cara... Absolutamente didático. Nem vi os 24 minutos passarem

@FilipeDeschamps 4 года назад

Que massaaaa meu caro!!!! Show!!! To aqui na correria do próximo vídeo, vamo que vamo!!!

@stattusdahora3998 4 года назад

Muito bom, as pessoas precisam ver seus vídeos. ❤👏

@FilipeDeschamps 4 года назад

Showwww Rosi!! Please me ajuda a compartilhar o vídeo :)

@alison.aguiar 4 года назад

Pimba kkk da hora cara eu li um livro de html que tinha um conteúdo extenso disso eu parei quando peguei um projeto pra fazer mais um dia quero usar já em uma engine e fazer uma brincadeira.

@FilipeDeschamps 4 года назад

Showwww Alison!

@cristianogro 4 года назад

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

@FilipeDeschamps 4 года назад

hahhahahah total!!!! é verdade :)

@jheipixd5718 3 года назад

Filipe boa noite! fala um pouco sobre blockchain, como criar um jogo nesse modelo. Seria um conteudo muito bom!

@antoniogregorio1433 4 года назад

Quando você mandou tentar enxergar o código da 2 imagem eu simplesmente vi isso aqui haha const screen = document.getElementById('screen') const contextcb = screen.getContext('2d') var preto1 = criarBloco('black', 10, 10, 10, 10); var preto2 = criarBloco('black', 90, 90, 10, 10); var green1 = criarBloco('green', 30, 10, 10, 10); function criarBloco(c, x, y, w, h){ let valor = {} valor[0] = contextcb.fillStyle = c valor[1] = contextcb.fillRect(x, y, w, h) return valor } com base na aula de factory

@franklingoncalves6978 4 года назад

Conteúdo muito massa.... #Delicinha de aula...

@FilipeDeschamps 4 года назад

hahahahah show Franklin!!!

@franklingoncalves6978 4 года назад

@@FilipeDeschamps você tem algum artigo/material para estudar mais sobre Separation of Concerns?

@andersonq 4 года назад

Esse vídeo é full dopamina. Sensacional!!

@FilipeDeschamps 4 года назад

hahahahah show de bola Andersonnnn!!! Tamo junto 💪 fico feliz que gostou!

@douglaslee2566 4 года назад

Melhor vídeo que o youtube me recomendou :)

@FilipeDeschamps 4 года назад

hahahah que massaaa Douglas!!

@DanteDerette 2 года назад

Legal show de bola!

@FilipeDeschamps 4 года назад

*Estou apaixonado por essa a IDE Online que estou usando no vídeo, fiz um rápido review dela aqui:* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q7YfzbJRzm0.html

@gustavo.paixao 4 года назад

Coloca esses dois vídeos na playlist. Parabéns pelo conteúdo de qualidade! :)

@RomeuMello 4 года назад

Apenas 100 horas por mês de uso, são suficientes para acompanhar os tutoriais?

@mixercrafts5138 4 года назад

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

@frojobags 4 года назад

Para limpar a tela no caso eu utilizei o comando: context.fillRect(0, 0, 10, 10) . Creio que também seria valido.

@Cookieukw 2 года назад

context.clearRect(0, 0, canvas.width, canvas.height);

@machadoar1840 4 года назад

Ops... Sou seu fã FILIPE !!!!!!!!!!!!!! Cadê a parte 2

@rommelsantos3107 4 года назад

Filipe, onde voce geralmente hospeda seus projetos (Github, Bitbucket, GitLab) e porque essa escolha?

@FilipeDeschamps 4 года назад

Rommel, ótima pergunta. Hoje eu primariamente hospedo no Github e o porque é tão simples quanto ela foi a primeira plataforma a abraçar o mundo open source do jeito certo, foi a pioneira no que fez. Mas eu sei que hoje ela está com umas complicações...