Um dos conceitos mais importantes na Programação!

nesse vídeo a gente vai aprender e treinar um dos paradigmas mais importantes da programação que se chama separation of contorno é treinando esse tipo de coisa que vai fazer o seu cérebro pensar como um programador de verdade então pra treinar isso a gente vai aprender a utilizar o canvas do html que é um recurso extremamente poderoso e é meio que você consegue abrir um buraco negro dentro da sua página para renderizar de uma forma extremamente performática coisas em 2d e 3d e não serve só para coisas simples wanda olha a complexidade desse negócio todos aqui

está sendo realizado dentro de um campus no navegador e você tem controle total para até manipulá exatamente o que vai ser indenizado pixel a pixel olha essa cidade que dele sim a gente é muito bonito ou até coisas mais práticas como da experiência do seu cliente na hora de consumir seu produto como neste caso para escolher o assento do avião ou também para os detalhes mais simples mas que mudam totalmente a sensação de navegar no seu site e neste vídeo a gente vai aprender a programar a base disso tudo que a gente viu agora mais

óbvio começando da forma mais simples que dá e revisando as camadas que a gente vai programar linha desse jogo a gente tem o seguinte camada de apresentação que é onde a gente vai usar o kama chamada da lógica mais dados que vão ficar todas as regras do nosso jogo todas as informações inclusive vamos renomear essa camada pra camada do jogo fechado a gente tem também a camada dos impulsos que é onde a gente vai receber todas as interações do jogador e essa interação pode ser pois não pegar o celular para detectar o movimento o comando

de voz mas no nosso caso vai ser tão simples quanto usar as setas do teclado e por último a chamada de network onde a gente vai trocar informações com o servidor inclusive vai ser responsabilidade do servidor de sincronizar todas as informações com todos os clientes que estiverem conectados é bastante trabalho mas ao mesmo tempo bastante conhecimento começando pelo começo eu toco repositório do jogo multiplayer e eu vou utilizar o kit pode pra editar ele se você não sabe o que é o kit pode surgir você vê o vídeo passado daqueles porque é um sistema sensacional

que vai utilizar a premissa inteira então veja o vídeo passado porque a gente vai tentar expressar o máximo assim a ferramenta e vão ver como é que a experiência de desenvolvimento no geral com ela a primeira coisa que vou fazer é fechar o preview e para o nosso servidor inclusive todo esse script startup está aqui dentro do tipo pontue mão dá um zoom aqui pra vocês ele tem todas as configurações aqui mais para frente inclusive eu posso falar a respeito de como inclusive utilizar o doc ao redor que é fenomenal também estou impressionado com o

sistema ea segunda coisa que eu fazia que entrar dentro da pasta playground para criar uma nova pasta com esse novo experimento na verdade eu já implementou uma primeira versão da poc para entender o que eu não entendia sobre desenvolve jogos multiplayer e aí vou criar uma nova pasta agora com o primeiro lançamento chamada de força que lhes então quem nem o folder foi feliz e se você está sem idéias do que de que pasta que nome só para criar sua pasta e quiser copiar tudo que estou vendo a partir de agora fiquei super à vontade

depois você pode mudar todos os nomes e pastas tudo que quiser inclusive você pode até criar uma pasta com o seu nome é depois muda com uma ideia de jogo que você vai ter fique à vontade bom como a gente viu nos vídeos anteriores esse jogo ele tem uma relação entre um cliente e um server e eu vou começar pelo cliente pra gente conseguir acompanhar as coisas acontecendo na tela mas para treinar o cérebro schnorr condições uma das formas de ajudar o seu cérebro entender o que que é isso é força a ele a pensar

de forma abstrata porque quando você conseguir fazer isso é como se você olhar se o código no matrix e conseguir se imaginar como isso poderia ser representado de forma visual se seu cérebro ainda não é aquele clique nos preocupa pode ser difícil no começo mas a partir do momento que ele se acostumar com essa idéia vai ser libertador a gente já vai chegar o momento de treinar isso dentro desse vídeo inclusive a gente vai treinar de duas formas então agora eu vou criar um arquivo chamado cliente pontua html que vai ser responsável pelo nosso cliente

site nada de mais que a gente programou aqui o que deveria ver na tela uma tela branca com um quadrado também branco de 500 pixels de largura e altura mas com uma borda cinza mas como é que consegue ver isto é como é que consegue rodar isso dado que todas as informações estão dentro do contêiner do kit pode pra isso a gente pode utilizar um módulo chamado surfe eu adoro ele ele é extremamente simples e uma vez você rodando ele transformar a pasta em que você rodou num servidor estático e pronto tem várias formas de

instalar e rodar a ele e eu vou mostrar forma mais descartável possível porque um pouco mais pra frente a gente vai fazer o nosso back end em old serviço de arquivo é servir o cliente site também então vou ditar aqui mpx mpxe3 já vem junto com o npm ele vai baixar temporariamente o senhor e vai rodar numa fala só é maravilhoso ver aqui beleza com a pasta rodando inclusive ele vai estar todos os arquivos e eu vou ficar aqui no clube ponto html e temos aqui o nosso quadrado branco com uma borda cinza de 500

fixa show agora a gente pode programar todos os gráficos do nosso jogo dentro de si camas e sim a gente vai utilizar 100% de programação para fazer isso e nesse momento vem o primeiro treinamento para o seu cérebro consegue pensar de forma abstrata isso aqui é mais fácil que dá para chegar mais pra frente vai ter um exercício um pouco mais difícil então é importante você passar por eles porque o próximo é que esse exercício mas é o contrário então ele vai atacar de todos os lados para o seu cérebro não conseguiu escapar bom a

gente tem em mãos aqui dentro do nosso navegador 11 camas maravilhoso de 500 pixels de largura e 500 pixels de altura que a gente vai poder desenhar o que a gente quiser aqui dentro correto então a primeira coisa que ele vai fazer é joga tudo aqui fora vendo a sua cabeça e joga todo se esse browser que fora tudo nosso objetivo agora é dentro de um espaço virtual dentro da nossa cabeça de também 500 quinhentas unidades de altura e largura tanto faz a unidade é a gente conseguir desenhar um quadrado vermelho dentro desse espaço como

que a gente consegue representar essa figura com exactidão utilizando apenas informações apenas dados como exatamente você descreveria todas as informações que lhes quadrado tem vamos começar pelo mais simples a cor então a gente sabe que agora a gente precisa de no mínimo uma variável para guardar o valor da cor a cor vermelha beleza mas sobre o posicionamento e tamanho do quadrado não tem muito como escapar de num espaço bidimensional você tem que definir aonde quadrado começa a ser desenhado qualquer coordenada x que ele começa a ser desenhado e também qualquer coordenada y e aí logo

depois também qual é o tamanho desse cuidado qualquer largura que ele vai ocupar e por último qualquer altura ótimo então com essas variáveis em mãos principalmente as últimas é que a coordenadora x condenada a y largura e altura eu peço agora que você comece a colocar valores dentro dessas várias informações e com essas informações eu peço também que você começa a imaginar o resultado final por exemplo a gente tem na nossa cabeça um espaço virtual de 500 pixels de largura que entre os pixels de altura ea gente quer desenhar um quadrado vermelho que comecem a

coordenadora x 0 na coordenada y 0 e vai ter 250 pixels de largura e também 250 pixels de altura eu só dei pra você os dados o que estou pedindo agora é pra você conseguir imaginar imprimir dentro do seu cérebro justamente a camada de apresentação só com esses lados que odeia o mais massa é que agora neste exato momento vários cérebros que estão vendo este vídeo receberam exatamente as mesmas informações dos mesmos dados e podem estar imaginando coisas diferentes e isso é um problema vamos programar isso e ver se o resultado é exatamente o que

você realizou na sua camada de apresentação era exatamente isso que você estava imaginando se aparecer uma coisa diferente do que você está imaginando não tem problema revisita tem que entender o que aconteceu e se você conseguiu acertar para bem estar preparado para o próximo desafio mas vamos revisitar o que é o programa aqui então em resumo é bem simples eu abri uma tag script dentro do nosso bola e logo embaixo do campus ea primeira linha foi utilizar o método que ela mentiu a idade com um disco em que é o dia do nosso campo pra

pegar essa dessa esse elemento html e puxar dentro do nosso esporte então apesar que aqui dentro da variável screen eu tenho essa tag canvas vamos dizer assim uma parte muito importante é de dentro desse campo mas a gente pegar o contexto porque dá pra pegar um contexto dois de pé pastando astro em 2d ou pegar um contexto 3d que deve ter vai dar pra fazer várias outras coisas e aí passaria a a friend o pdl mas isso é outra história por enquanto ele vai ficar dentro de um contexto 2d então eu tenho esse contexto agora

na variável acontece que eu posso fazer várias coisas legais com isso então antes de definir todas as variáveis aí eu defini que o filme está eu seria a nossa cor head e aí uma mecânica um mecanismo interessante do campus é que primeiro você prepara as ferramentas para a ferramenta de desenho e depois desenho formado então aqui eu fiz uma coisa tão simples quanto preparar a cor da ferramenta com a cor vermelha que está aqui em cima e depois utiliza uma ferramenta de retângulo para criar o nosso pra desenhar nosso quadrado que ele aceita a posição

x a posição y a largura e altura e ponto final dando esses comandos vai aparecer isso daqui na sua tela mas vocês podem notar que os nossos dados aqui estão jogadas eles não estão dentro de uma estrutura nela estão não são variáveis soltas e o mas agora é que o nosso próximo desafio vai envolver uma estrutura de dados ea gente vai fazer de uma forma contrária eu vou mostrar pra vocês um campus do jogo renderizado ea gente vai ter que imaginar qual que poderia ser uma estrutura de dados que conseguiria representar isso e o canvas

é esse a gente tem um campus de 10 pixels de largura por 10 pixels de altura é se vocês notarem a gente tem do jogadores que são os pisos mais escuros ali e aí uma coisa é importante notar a gente está realmente mexendo com pixels agora tá os pixels eles não têm largura ele só tem uma posição x y e isso foi um detalhe desse jogo interessante que vai desencadear em várias facilidades para a gente entender o que está acontecendo aqui pra frente mas esse é um ponto importante só são pixels eles não têm altura

e largura apesar que tem um posicionamento físico a gente também tem uma frutinha ele também representada pelo piso vermelho ea pergunta é como é que você representaria isso numa estrutura de dados ea questão é não é código necessariamente está porque o código a gente vai usar para renderizar isso pra escrever pra desenhar no camas o que eu estou te pedindo aqui é só estrutura de dados só as informações como é que você faria isso a boa notícia é que tem várias formas então dá para acertar de vários jeitos e tudo vai depender das necessidades de

negócio ou das limitações técnicas que você quer estipular como por exemplo a necessidade de identificar todos os ardis de todos os objetos na tela todos os andes das frutas ou dos jogadores ou até escolher o conte de responsabilidade você quer passar para as próximas chamadas no caso de definir a cor do pixel uma escolha seria fazer acordo pixelview backend então teria está na estrutura de dados ou você pode passar isso para o cliente sai para o cliente site responsável por pintar por definir a cor de cada pixel é a cor da frutinha o jogador e

tudo isso só foi office e é supercomum você ficar travado pensando em todas as combinações possíveis até o infinito mas é mais saudável você fazer uma primeira versão e testar e evoluindo conforme as necessidades do jogo eu vou escrever aqui então a versão que foi super satisfatório aguenta o tranco do caramba e foi extremamente flexível para nossa versão anterior de jogo eu comecei encapsulando todas as informações do jogo num objeto chamado guim e aqui eu fiz uma separação do que são as coordenadas dos jogadores ea coordenadas das frutas e aí pra cada objeto eu coloquei

um identificador e também a sua coordenadora x ea coordenada aí a fruta exatamente o mesmo mecanismo e como identificar e oi de todos os objetos que estão na tela eu posso fazer coisas do tipo o pixel que estou prestes a imprimir é do jogador que está jogando o jogo aqui do seu lado ou é dos outros jogadores se for do jogador está jogando eu posso imprimir com uma cor especial que no caso lá na primeira versão ajuizou cor amarela e se for dos outros jogadores o emprego com qualquer outra cor que no caso também foi

cinza ou outro caso importante se alguém cometeu uma fruta independente de qual jogador que foi preciso remover só aquela fruta tela correta como é que eu vou conseguir identificar qualquer fruta como é que eu vou mandar pra todos os planos estão conectados qualquer fruta que foi já consumida por um outro jogador mas normalmente têm várias formas de montar isso e vai depender sempre muito do que você está querendo otimizar agora ele vai programar o código javascript vai pegar essa estrutura de dados e desenha em cima do campo sair a primeira coisa que vou fazer é

reduzir o nosso camas para 10 pixels de altura largura e logo em seguida escreveu javascript que reitera em cima desses dados e transforma em desenho vamos lá o show está implementado ea mega simples também eu queria uma função chamada render screen ea chama lava que em cima para já está indenizando então dentro dessa função ela tem duas coisas importantes que na verdade são dois looks e eles são iguais o primeiro lupi e ele vai passar contra os players que estão nesse objeto aqui em cima né são esses os players e o segundo logo ele vai

fazer praticamente a mesma coisa só que ele vai passar pelas frutas ea upa por dentro de todos os objetos que estão aqui então nesse vão usar como exemplo esse primeiro look ele vai entrar dentro do objeto e vai ver um extrai aqui essa chave então esse valor player 1 ele vai passar pra cá princípio grande e aí novo no próximo lupi vai fazer a mesma coisa para essa linha aqui e vai passar um player 2 pressa para essa variável aqui e aí dentro disso eu identifico esse objeto eu estranho dentro do game ponto players o

player digital novamente primeira linha ele vai pegar nesse valor aqui e vai puxar todo esse objeto aqui pra dentro dessa variável eu consigo trabalhar com ela de forma isolada então como um jogador eu quero que ele preenche a cor de black e aí o formato eu uso o mesmo filme rex e aí eu passo um x no player x que vai ser na primeira linha vai ser daqui né um x e um y que daí vai ser isso aqui ea largura e altura eu coloco como um porque como falei antes ele não deveria ter nem

altura em orgulho está simulando um pixel mesmo então deveria se preocupar se preocupar com a um acordo e nada dele então as frutas exatamente a mesma coisa a única coisa que eu faço é obviamente que terá sobre a chave fruits e eu coloco a cor verde para imprimir no fim o estádio é tudo a mesma coisa eu acho separar os jogadores das frutas bastante semântico mas com certeza você pode estar se perguntando agora olha eu conseguir resolver tudo isso daí dentro de um look só dentro de um fórum só aí identificar ia dentro do objeto

o tipo dele então eu consideraria que tudo o objeto ea está bem do tipo eu defenderia dentro desse único lupi o que o jogo deveria entre show tudo bem que no seu entender só ter dotes como você falou pra todos os objetos você vai precisar mandar o tipo e isso vai penalizar um pouco no bairro estão prontos o jogo vai ser principalmente jogado por 3g talvez dessa redundância de valor em todos os objetos como forma de consegui entender o que deveria imprimir na tela possa ser um possa ser um desperdício e talvez o maior problema

que eu vejo de consolidar tudo isso dentro de um for é você acoplar dentro do jogo a lógica de impressão de fruta impressão de jogador não sei me causa uma estranheza eu prefiro por enquanto duplicar o código pra ter flexibilidade total do que eu daqui pra frente com essas duas coisas mas novamente espero que tenhamos de software que você deveria fazer do jeito que você acha melhor fazer o treino da forma que você imaginou e veja a sete pontos e consegue chegar mas então vamos ver como é que isso quando a tela 321 tac que

isso olha que interessante o nosso jogo tem um tem um cheirinho do que aconteceu mas é eu vou atualizar a regra de css para a gente dar uma esticada nilson senhor show a gente fez o nosso primeiro código imprimir a nossa estrutura de dados na tela e aí o que define aquino css foi meu amante à moda e aí eu coloquei uma propriedade e médico wendling para ele não deixar os pixels borrados não fazem tripulação se eu tirar isso daqui salvar olha só como fica e aí tem os racks e os pilotos navegadores têm que

entender até que ponto que tudo aqui é realmente compatível com todos os vereadores deixou salvado derrota agora deixa pincelada não tentei pular quem define que apesar de o nosso campo tem uma uma em 10 pixels de camas para a largura ea altura eu defini o objeto aqui ó o style dele tem 400 pixels por isso ele deu essa essa aumentar de tamanho é mais pra frente inclusive ele vai fazer isso por dentro do código javascript para ter controle total mas por enquanto é isso aqui mas a questão importante aqui no jogo final essas coisas vão

estar se mexendo e aí lembra que eu expliquei que a camada do jogo é responsável pelas regras e pelas informações que é nossa basicamente a nossa estrutura de dados ou pelo menos é o que a gente tem agora e aí fica sob a responsabilidade da camada de apresentação conseguir renderizar conseguir apresentar da forma correta esses dados então eu vou aqui nosso débitos e olha que interessante deixou fechar aqui que vou alterar os dados aqui dentro do nosso débitos e vamos ver se a nossa camada de renderização tá se comportando jeito que a gente espera que

a renderizar a nova formação jogo então eu tenho a variável game que é onde está toda nossa todos os candidatos então se eu fizer bem ponto groups vamos mexer a fruta a única fruta que a gente tenha faltam então ela tá com a coordenadora x com 13 ou seja na posição 4 e altura 1 ou seja na posição nos vão atrás vamos colocar como colocar o x1 pixel por um lado colocar vezes x 31 colocar x igual a 4 e vão manter exatamente a mesma coisa igual então vou apertar o enter e vão ver ele

renderizando roupa não rendemos o que bom que bom que não analisou porque do jeito que a gente fez o nosso código a gente pediu para dar um rangers crime só uma vez se tivesse atualizando aqui tem um baita de um problema pelo mas que bom que não atualizou tantas comportando corretamente e agora ele vai consertar isso então uma das estratégias é a gente fazer a função que renderiza tela se chama de forma recursiva ou seja assim que ela chegar no final dela ela chama ela mesmo de volta e fica assim no loop eterno assim em

toda vez que a nossa estrutura de dados tiveram um dado novo ou um dado modificado a camada de apresentação vai render isaaa última versão desses dados e é legal que o browser fornece uma função especial pra chamar esse tipo de situação sempre no momento certo no time cef e essa função se chama request animation anne frank e é ótima para otimizar ações do tipo aba do navegador que tem o jogo não está ativa então vai reduzir consideravelmente a quantidade de vezes que ele chama essa função para economizar processamento e energia e também funciona no celular

certas utilização isto é sensacional e esse tipo de coisa é mais um dos benefícios que você tenha um cpi-9 condições onde a lógica do jogo ela vai continuar rodando normalmente mas você consegue otimizar a agressivamente uma camada que nesse caso é a camada de apresentação sem modificar em nada na lógica do jogo bom incluir o reconhece e mexem dentro do novo código é extremamente simples sem sol [Música] e agora toda vez que a função vender screen foi chamada quando ela chegar no final dela falar e reconhece animation frame toda vez que você conseguir chamar alguma

coisa chama essa função aqui que ela mesmo então vamos salvar aqui e vamos fazer refresh navegador e eu vou fazer exatamente o mesmo movimento que a gente fez antes a gente vai alterar para a fruta um que essa daqui um x dela de 43 que dá agora pra 4 que está aqui então vamos dar o entre e vão ver epa duplicaram as frutas como é que pode então analisar o objeto aqui alguém de frutos ea gente vai ver que não tem só uma fruta ela está na coordenada 4 o que aconteceu esse é um comportamento

padrão do campus e basicamente de todas as ferramentas que você consegue escrever diretamente na tela de uma forma mais low level toda vez que a gente desenha no canvas a gente mandou instruções de adicionar novas coisas na tela pintar novos pixels da tela em nenhum momento a gente mandou deletar coisas passadas ou quintard branco para passar por cima e para não transformar isso num inferno de gerenciar tem uma técnica no mundo de jogos que se chama crioula screen que é antes você desenhar próxima animação você deleta tela inteira você dá um clima noir na tela

pra começar tudo do zero é bem legal sem sol [Música] o show então o que eu estou fazendo aqui é no topo da função vender screen eu defini que a nossa ferramenta vai ter a cor branca e aí a gente vai fazer um quadrado com a dimensão total do câmeras que ele começa no na coordenada 0 x 0 y e vai até lá no final 10 nela largura 10 de altura 10 então vamos ver o resultado aqui mandar reflexo na tela e agora vou executar exatamente o mesmo momento que a gente fez fazendo 1 x

3 por x 4 com vento 31 agora sim e mais massa é que agora qualquer alteração que eu fizer na estrutura de dados e não interessa quem que conseguir fazer essa alteração vai refletir de uma forma correta da inflação eu vou ter a altura agora da frutinha eu vou colocar como y 5v embalar y 6 o funk está se mexendo nas reuniões ela tem pra lá e pra cá qualquer alteração que eu fizer vai funcionar para os jogadores também um game quando players vão pegar aquilo player um jantar me sugerem que ele está a composição

x 1 em um show vamos colocar x 1 o governo brasileiro também x 2 píton ou mantém um colar a321 tima também se mexeu então imagina essas informações vindo do backhand de todos os jogadores tanto faz a camada de apresentação ela só precisa saber consumir esses dados e apresentar na forma certa então a gente consegue alterar as informações do jogo no console a gente altera o stent na marreta eu acho que chegou a hora de a gente começar o programa a camada do input onde a gente pega os eventos do teclado no caso dos setinhas

e começa a alterar o status do jogo e com isso também a gente começa a se aproximar na camada do jogo que é a camada mais importante então pra ver esse vídeo é só clicar aqui fechada valeu [Música]