Tic-Tac-Toe Realtime (Parte 1 - Clone do Projeto) | Express.js - Socket.io

Fabricio Parola — Mon, 28 Oct 2019 18:30:35 +0000

Neste tutorial pretendo guiar você leitor por algumas das tecnologias mais impressionantes do universo JavaScript de uma forma intuitiva.
Desenvolveremos um Jogo da Velha em tempo real, com salas para linkar dois jogadores e online na web.

Obs: É importante que você, caro leitor, já tenha uma prévia bagagem de JavaScript e que entenda minimamente como a linguagem se comporta, como os elementos na página são selecionados, como javascript trata funções e eventos e como funções com callback se comportam. Alguns conceitos do ECMAScript 6 também serão utilizados, mas isto não será impeditivo ao entendimento.
Já ter utilizado o framework Express.js também auxiliará no entendimento. Ao longo do tutorial o foco será no desenvolvimento da lógica do game com javaScript padrão e no desenvolvimento realtime com socket.io, o servidor como um todo está previamente configurado para que o leitor não precise se preocupar com isto.

Clonando a base do projeto

Utilizaremos um projeto base para que você não perca tempo precisando configurar coisas simples e nem desenvolver a interface do jogo, mas caso você sinta vontade de modificar sinta-se a vontade.

Antes de clonar, é importante saber que você precisa conter instalado em seu computador o NodeJs. No projeto utilizei o gerenciador de pacotes yarn, que pode ser instalado com tutoriais através deste link

Clonando

$ git clone https://github.com/fparol4/tic-tac-toe-realtime.git
$ cd tic-tac-toe-realtime
$ git checkout initial-structure
$ yarn install ou $ npm install caso você não tenha o yarn instalado

Após realizar estas operações, você poderá rodar o comando $ yarn start:dev ou $ npm run start:dev para inicializar o servidor.
Agora você já pode entrar em seu navegador e navegar até o link localhost:3333 e visualizar a tela inicial.

Estrutura de pastas

tic-tac-toe-realtime
├── src /* raiz do projeto */
│   └── public /* armazenar arquivos estaticos */
│       └── client-game.js /* logica do game para o cliente */
│       └── main.css /* css default */
│   └── views /* armazenar o html do projeto */
│       └── index.ejs
│   └── app.js /* servidor do projeto */
│   └── game.js /* logica do game */
│   └── routes.js /* arquivo para configuracao de rotas */

Configurando váriaveis do game

Para colocarmos a mão no código já neste tutorial, setaremos em váriaveis os field's do nosso game. Para isto, abra o seu editor de código preferido, no meu caso utilizarei o vscode e navegue até src > public > client-game.js. Este é o arquivo JS que o cliente irá visualizar, todo o código javascript nele portanto refletirá em nossa página principal.

Adicionemos algumas váriaveis ao nosso arquivo:

/** Exibe o modal assim que a página abre */
MicroModal.show('modal')

/** Constants */

/** Se refere ao span que contem o jogador no momento (X's ou Y's) */
const turnNow = document.getElementById('turn_now')

/** Se refere ao input em que o usuário pode digitar o ID da room */
const roomId = document.getElementById('room_id')

/** Se refere ao botão para criar uma room */
const createRoomButton = document.getElementById('create_room')

/** Se refere a todos os quadrados do jogo. Retorna uma lista com todos eles */
const fieldsSquares = document.querySelectorAll('.field__square')

/** Variables */
let playingNow = 'X'

Agora você pode navegar até a página principal, clicar com o botão direito e depois em inspencionar, navegar até a aba 'Console' e digitar o nome de algumas váriaveis, o retorno refletirá nos elementos que instanciamos.

Próximo POST