Crie um jogo de desenho multijogador com Phaser e MongoDB

No HTML acima, adicionamos scripts para Phaser e MongoDB Realm. Também definimos um elemento de container HTML <div>, como visto pelo IDgame, para manter nosso jogo quando chegar a hora.

Abra o arquivogame.js e inclua o seguinte código padrão:

A classeGameacima é responsável pela renderização e pelas interações entre o usuário e o jogo, e pelas interações entre o jogo e o banco de dados. Por enquanto, não vamos nos preocupar com nosso banco de dados.

Dentro do método constructor, pegamos as informações fornecidas pelo usuário para configurar o Phaser. Alguns dos campos de configuração têm valores padrão, caso o usuário decida não fornecê-los ao instanciar a classe. Esses dados virão do desenvolvedor e não do jogador. No que diz respeito àscenas, o initScene será responsável pela inicialização das variáveis do jogo, o createScene será responsável pela sincronização com o servidor quando o jogo for carregado pela primeira vez e o updateScene será responsável pelas interações contínuas com o jogo.

Antes de pularmos para cada uma das funções, vamos voltar ao arquivoindex.html e instanciar nossa classe. Isso pode ser feito na tag<script>que existe atualmente:

No código acima, estamos definindo que nosso jogo deve ser renderizado no elemento HTML com o IDgame. Também estamos dizendo que ele deve ter a largura e a altura totais que estão disponíveis para nós no navegador. Essa largura e altura totais funcionam tanto para computadores quanto para dispositivos móveis.

Agora podemos dar uma olhada em cada uma das nossas cenas no arquivogame.js, começando com a funçãoinitScene :

Por enquanto, a função initScenepermanecerá curta. Isso ocorre porque ainda não vamos nos preocupar em inicializar nenhuma informação do banco de dados. Quando se trata destrokes, ela representará coleções independentes de pontos. Uma pincelada é apenas uma série de pontos conectados, portanto, queremos mantê-los. Precisamos ser capazes de determinar quando uma pincelada começa e termina, portanto, podemos usar isDrawing para determinar se levantamos o cursor ou o lápis.

Agora vamos dar uma olhada na funçãocreateScene:

Isso nos leva à mais extravagante das cenas. Vamos dar uma olhada na funçãoupdateScene:

A função updateSceneé responsável por renderizar continuamente as coisas na tela. Ela é executada constantemente, ao contrário dacreateScene, que é executada apenas uma vez. Ao atualizar, queremos verificar se estamos desenhando ou não.

As cenários são bons, embora não tenhamos adicionado lógica MongoDB a eles. Precisamos realmente criar o jogo para que as imagens possam ser usadas. No arquivorole.js, atualize a seguinte função:

O código acima usará a configuração do Faser que definimos no métodoconstructor e iniciará a configuraçãodefault. A partir de agora, não estamos passando nenhum dado para nossas cenários, mas passaremos no futuro.

Com a funçãocreateGame disponível, precisamos utilizá-la. No arquivoindex.html, adicione a seguinte linha ao seu bloco <script>abaixo da instanciação do objetogame :

Lembre-se de que, se quiser experimentar o jogo, precisa servi-lo ou hospede-o. Você não pode simplesmente abrir o arquivoindex.html do seu sistema de arquivos. Se você não quiser configurar a hospedagem localmente, consulte o Realm para hospedagem do.

Supondo que você já tenha criado um Atlas cluster, crie um banco de dadosmongo-draws com uma coleçãogame. Não vamos adicionar nenhum documento manualmente, mas quando começarmos a adicioná-los, eles ficarão assim:

A matrizstrokes será preenchida a partir de qualquer que o Phaser determine ser um caminho, conforme criado na parte anterior deste tutorial. O _id representará uma sala de jogos e o owner_id representará o anfitrião ou proprietário dessa sala em particular. Essencialmente, o plano é que apenas o anfitrião possa adicionar novas pinceladas em uma sala de jogos enquanto os outros participantes assistem.

Na áreaRegras do painel Realm, você vai querer criar duas regras para a collection dojogo. A primeira regra, para o proprietário do documento, você deseja conceder a ele a capacidade de leitura e escrita. Para não proprietários, como queremos que eles assistam ao jogo, daremos acesso de leitura. Durante o processo de criação de regras, certifique-se de especificar que o owner_id do documento deve ser mapeado para o proprietário do documento.

Os camposdatabaseName e collectionNamedevem corresponder ao nome do seu banco de dados e coleção. O realmAppId pode ser encontrado no painel do Realm na web, no canto superior esquerdo da tela.

Antes de tentarmos criar ou entrar em um jogo existente, precisamos nos autenticar no MongoDB Realm. No arquivogame.js, atualize a seguinte função:

Então agora o que precisamos fazer é descobrir como criar um novo documento de sala de jogos ou usar um que já existe. Já temos uma funçãocreateGame, mas precisaremos melhorá-la para incluir a funcionalidade de banco de dados. Dentro da funçãocreateGame do arquivorole.js, altere para o seguinte:

Pudemos atualizar o arquivoindex.html para usar a nova funçãocreateGame, mas sabemos que vamos querer criar ou participar, não apenas criar. Com isso em mente, vamos atualizar outra função no arquivojogo.js:

Com as funçõesjoinGame e createGame disponíveis, vamos atualizar uma função wrapper para eliminar parte do trabalho.

Na funçãojoinOrCreateGame, primeiro fazemos a autenticação no MongoDB Realm. Após a autenticação, tentamos entrar em um jogo. Se a participação não for bem-sucedida porque não existe nenhum documento, tentaremos criar um jogo.

Então, vamos atualizar o arquivoindex.html para usar nossa funçãojoinOrCreateGame em vez de nossa funçãocreateGame:

Nem tudo era absolutamente necessário, mas dá ao nosso jogo uma aparência melhor. Essenciais agora temos um campo de entrada. Quando o campo de entrada é enviado, seja com uma pressão de tecla ou um clique, a funçãojoinOrCreateGame é chamada O keyCode == 13 representa que a tecla Enter foi pressionada. A função não é chamada diretamente, mas as funções do wrapper a chamam. O ID do jogo é extraído da entrada e os componentes HTML são transformados com base nas informações sobre o jogo.

Agora que podemos criar ou participar de jogos tanto de uma perspectiva de experiência do usuário quanto de uma perspectiva lógica, precisamos mudar o que acontece quando se trata de interagir com o próprio jogo. Precisamos ser capazes de armazenar nossas pinceladas no MongoDB. Para fazer isso, vamos revisitar a funçãoupdateScene:

Vamos atualizar nossa funçãocreateScene :

Quando a funçãocreateScene é executada, estamos pegando a matrizstrokes que foi fornecida pelas funções createGamee joinGame e fazendo um loop sobre ela. Lembre-se, na funçãoupdateScene, estamos armazenando o caminho exato. Isso significa que podemos carregar o caminho exato e desenhá-lo.

Isso é ótimo, mas os usuários do outro lado só verão as pinceladas quando iniciarem o jogo pela primeira vez. Precisamos fazer com que elas recebam novas pinceladas à medida que são inseridas em nosso documento. Podemos fazer isso com fluxos de mudanças no Realm.

Agora estamos observando nossa collection em busca de documentos que tenham um campo_idque corresponda ao nosso game ID. Lembre-se de que estamos em um jogo, não precisamos observar documentos que não sejam do nosso jogo. Quando um novo documento chega, podemos examinar os campos atualizados e renderizar os novos traços na cena.