Tabela de Conteúdos:

• Visão Geral
• O projeto
• O que você pode aprender
• Prática

Visão geral

Não tem nada mais chato do que ver teoria sem prática. Esta publicação é para trazer um pouco de conhecimento atrelado à prática no JavaScript, tentando explorar minuciosamente alguns parâmetros que estamos aplicando em um projeto.

• Link do resultado final
• Link do Repostório Git

O projeto

O projeto que usaremos como prática é o famosos “jogo da cobrinha” ou Snake Game. O jogo dispensa apresentações, por isso vou deixar apenas esta imagem do seu funcionamento:

O que você vai aprender

• Criação e manipulação do elemento Canva.
• Aplicação de lógica do JavaScript em um jogo
• Eventos

Prática

Certo, vamos dividir a prática em 4 grandes etapas para ficar mais fácil abordá-la: 1 — criar o campo; 2 — Criar a cobra e a maçã; 3— adicionar regras do jogo.

Dica: Você pode realizar todo o projeto no CodePen

1 — Criar o campo.

A criação do campo é bem tranquila. No html vamos utilizar o elemento “Canva” com a definição de width e height em 400px para darmos vida a ele na tela (Este tamanho de 400px que estamos definindo agora é importante para dividirmos posteriormente)Teremos algo assim:

<canva id="board" width="400px" height="400px"></canva>

Para os colegas que ainda não o utilizaram, o <canva> é um elemento que cria na tela uma área “bitmizada” que permite fazer a manipulação desta área com o JavaScript.

Foto de um campo bitmap

Como demonstrado na imagem, conseguimos “desenhar” em campos pré-definidos.

Agora vamos para o JavaScript para iniciarmos a pintura do campo. Para delimitar o campo precisamos definir 4 variáveis no arquivo JavaScript:

1 — board: Nesta variável vamos usar o método “getElementById()”.

let board = getElementById('board'); //Aqui criamos a referência do elemento que está na tela

2 — getContext(): Vamos utilizar este método para preparar o canva para receber as nossas alterações em um contexto de 2 dimensões. Esta é uma estrutura básica do próprio canva.

var context = board.getContext("2d");

3 — fieldQuantity: Esta constante será responsável por dizer em quantos campos teremos dentro do nosso canva.

const fieldQuantity = 20;

4 — fieldLength: Esta constante será responsável por definir o tamanho de cada campo em px.

const fieldLength = 20;

Repare que, tanto a quantidade de campos e o tamanho de campos são iguais. A lógica aqui é simples, no eixo X temos a distância de 400px e vamos dividir em 20 partes(quantity) de 20px(length). O mesmo para o eixo Y.

Aí você, leitor, que é um sabedor das ciências ocultas e matemáticas, deve ter se perguntado “se em um plano qualquer de 2 dimensões dividido da forma como dividimos, deveríamos ter 400 campos de 20 pixel na tela e não 20 campos, onde entra esta informação?”. E aqui, senhores, está a ação do getContext(“2d”), que interpreta os seus dados e replica para as duas dimensões.

Certo, agora vamos dar cor ao nosso quadro. Neste caso, vamos pegar o elemento projetado em duas dimensões, e utilizar o método “fillRect(xInicial, yInicial, width, height)” para preenchê-lo como uma figura retangular; e o método “fillStyle” para definir a cor do elemento.

context.fillStyle = "black";
context.fillRect(0, 0, board.width, board.height);
// x = 0 e y = 0 informa que a insersão da cor deve começar nos pontos (0,0) e ir até width e height do board.
// importante ressaltar que os pontos 0,0 ficarão no topo do canva.
// Então olhe para ele como um plano cartesiano onde o eixo x,y ficam no canto superior a esquerda da tela, onde começao canva.

Após completar este etapa, você deve ser capaz de ver no seu navegador o board com fundo preto:

Board do game até o momento. Um retângulo de fundo preto

2 — Criar a cobra e a maçã

Apesar de separar esta etapa da criação das regras do jogo, no desenvolvimento dela, vamos precisar pensar e interpretar algumas regras para decidir qual será o nosso próximo passo. Se fizéssemos o oposto, faríamos um exercício abstrato demais para ter um resultado apenas no final.

A primeira regra que precisamos pensar aqui, para este grame, é a taxa de atualização da tela. Veja que a partir do momento que criamos a tela, ela é um monolito estático, como um quadro. Como nos desenhos antigos e nos jogos de minigame, para dar a sensação de movimento, precisamos apagar a tela e redesenhar a tela atualizada. Então, sempre que a cobra (que vamos chamar de Cruela) andar, a tela precisa atualizar a informação para mostrar onde a Cruela está atualmente.

Pegando esta informação, vamos criar uma regra para atualizar a tela a cada unidade de tempo:

setInterval(updFrame, 1000 / 15);

function updFrame(){

}

Neste caso então, vamos chamar a cada 60 milisegundos uma função chamada Update Frame(updFrame) e vamos começar o jogo a partir dela.

a. A maçã

A maçã por ser mais fácil de criá-la, vamos começar por ela. Para a maçã, assim como para o board e para a Cruela posteriormente, sempre precisaremos tratá-los em 2 dimensões, então vamos definir um ponto inicial para a que ela apareça.

E para pintá-la usaremos os mesmos métodos que utilizamos anteriormente:

//........
let [appleX, appleY] = [10, 15]; //repare que, como nosso board vai até o ponto 20, se colocar que a maçã estará em um ponto maior ou igual ao ponto 20, ela estará fora do nosso tabuleiro.

function updFrame(){

context.fillStyle = "red";  //definimos a cor da maçã como vermelha  
  context.fillRect(
    appleX * fieldLength, //aqui definimos que a maçã existirá a partir do ponto X (10) até 20px depois desse ponto e antes do ponto 11.
    appleY * fieldLength, // o mesmo para o eixo y para formar um quadrado
    fieldLength, // aqui define a distância que será preenchida no eixo x
    fieldLength // aqui define a distância que será preenchida no eixo y
  );
}

A partir destas definições, teremos a seguinte tela:

Board do game mostrando a maçã

b. A cruela

Para fazer a Cruela, vamos pensar o conceito dela. Diferente da maçã, a cobra se moverá e o corpo dela seguirá o caminho feito. Precisamos pensar nesta regra, pois o movimento é importante e quase uma identidade do jogo. A partir desta lógica, precisamos criar uma cabeça, que ditará o movimento, o corpo dela e guardar o caminho / trilha que o movimento que foi executado para cada parte do corpo seguir esta trilha. Para isto criaremos 3 variáveis:

let [headX, headY] = [10 , 5]; //Assim como a maçã, vamos iniciar a Cruela em um ponto do mapa e será no ponto (10,5).
let snakeBody = 3; //Aqui estamos definindo o tamanho inicial da cobra
let snakeTrail = []; // E neste array iremos guardar a trilha que a Cruela fez. A ideia é que 
// No snakeTrail será uma array de objetos com as seguintes infos 
// snakeTrail = [ { x:10, y:5 }, { x:11, y:5 }, { x:11, y:4 }, { x:11, y:3 } ...]
// neste exemplo mostra mais ou menos uma representação de algo se movendo para o lado (eixo X) e para cima (eixo Y)

function updFrame(){
// .........

}

Para dar via ao corpo da cobra, o processo será diferente da maça. Vemos aqui que a forma como a cobra é apresentada no mapa, é o seu tamanho e como definimos, o seu tamanho inicial é 3. Ou seja, ela irá ocupar “campos” do mapa. Ao mesmo tempo, como estamos armazenando o caminho que a cobra fará dentro de uma array, podemos usar o maravilho método “array.map()” que irá pegar o caminho que a cobra faz e irá “pintar” o corpo da cobra em todos os campos por onde ela está passando.

!Importante: Todas as variáveis iniciais devem estar FORA da função update Frame, okay? O porquê… se você colocar dentro da função, toda vez que ele atualizar a página, a cobra voltará para o ponto inicial.

Faremos da seguinte forma:

function updFrame(){
// .........

context.fillStyle = "white";  
 
for (let a = 0; a < snakeTrail.length; a++) { //Não gosto de usar o i no loop for
  
context.fillRect(
  snakeTrail[a].x * fieldLength,
  snakeTrail[a].y * fieldLength,
  fieldLength,
  fieldLength
    );
}

// Aqui nós adicionamos adicionamos a cabeça da cobra no Trail, pois a cabeça será o primeiro movimento
snakeTrail.push({ x: headX, y: headY });
// A cabeça deve ser renderizada por ultimo, pois se ela for a primeira coisa
// renderizada, o resto do corpo será renderizado por cima da caveça e se tentarmos
// checar se a cobra bateu em algo, ela sempre acusará que está batendo no próprio corpo

}

Repare que a confecção é muito parecida com a anterior, o que difere é a necessidade de usar a iteração para acessar todo o caminho que a cobra fará, interagindo com os pontos x,y armazenados (estamos levando em consideração os objetos armazenados neste Array).

Antes de continuar, vamos pular algumas etapas e dar movimento ao nosso personagem Cruela, apenas para vê-la se mexer no board? depois disso vamos direto para as regras do jogo.

c. movimentação

Para criar a movimentação temos 2 variáveis para levar em consideração e uma lógica. Como vimos anteriormente, nós inserimos a Cruela no board dando um “push” das suas coordenadas no plano cartesiano, Agora o que temos que fazer é andar e dar o push de todo o caminho feito dentro do “snakeTrail”.

As variáveis que preciamos computar agora são o botão digitado, que ditará o movimento, e a velocidade que nossa amiga andará, que naturalmente será 1 bloco por vez.

const velocity = 1; // Aqui dizemos a velocidade que o a cobra se moverá quando estiver em movimento
var [velX, velY] = [0,0] // esta variável nos contará a velocidade atual da cobra, inicialmente em 0

function updFrame(){
// ........  

// Atentamos aqui que se a velocidade x,y é da cobra, temos que atrelar a ela. Vamos ligar estas variáveis da seguinte forma

headX += velX;
headY +=  velY;
// assim estamos dizendo que headX = headX + velX
// então se headX está na posição 10 e a velocidade X for 1, o próximo local que headX estará é o 11
// assim movimentamos a cobra em um ponto no eixo X.

//Neste caso, esta atribuição deve ser feita antes da iteração, pois se fizemos depois,
// o programa primeiro irá checar se ela pode andar e depois ela irá andar
// mas sempre ficará travada. Desta forma garantimos que ela dará o primeiro
// passo e depois checará se ela colidiu com algo.

context.fillStyle = "white";    
for (let a = 0; a < snakeTrail.length; a++){
// .......
}

Neste caso, é importante que as variáveis de velocidade sejam declaradas no escopo global com var, ou fora da função updFrame, pois precisaremos acessá-la de outra função que irá verificar a tecla digitada.

Para fazer esta verificação, usaremos uma função que irá checar o botão apertado e, por meio do switch irá colocar, definir a velocidade X ou Y da cobra.

document.addEventListener("keydown", keyPress); 
//Este event listener irá escutar o botão apertado e executará a função keyPress


const velocity = 1;
var velX = 0;
var velY = 0;

function updFrame(){
// ........
headX += velX;
headY += velY;
}

function keyPress(event){
  //Se não souber o código do botão do seu teclado, ou quiser configurar o seu teclado à vontade
  //utilize este console.log para verificar o código dos botões do seu teclado.
  console.log(event.keyCode);

  //A lógica é bem simples no eixo X, imagine o plano cartesiano onde o 
  //eixo X conforme anda para  direita ele aumenta e quando anda 
  // e qando anda para a esquerda ele se aproxima de 0 
  switch (event.keyCode) {
    case 37: //Para esquerda
      velx = -velocity;
      vely = 0;
      break;
    case 38: //Para cima
      velx = 0;
      vely = -velocity;
      break;
    case 39: //Para direita
      velx = velocity;
      vely = 0;
      break;
    case 40: //Para baixo
      velx = 0;
      vely = velocity;
      break;
  }
}

A lógica do eixo X e Y são bem parecidas, a única nuance, como foi dito anteriormente, é que no caso do canva é como se fosse um plano cartesiano de cabeça para baixo então por isso ir para cima e para baixo é a lógica contrária do que vemos o X.

Neste momento ao apertar as teclas do seu teclado a Cruela começará a se movimentar pelo mapa. No entanto ela ficará deste jeito:

A cobra se movimentou sem parar e saiu da tela

Aqui vemos dois grandes problemas. O primeiro, a cobra saiu da tela, a segunda é que todos os movimentos estão sendo inseridos no array e o caminho da cobra não se atualiza. O que podemos fazer aqui é Verificar se a cobra está maior do que o corpo dela permite, e atualizar o seu tamanho removendo do array a entrada mais antiga. Ou seja, se a ultima entrada fica no final, removemos a entrada que está no índice 0.

function updFrame(){
//.......
while (snakeTrail.length > snakeBody) {
   snakeTrail.shift();
 }
}

Após fazer este movimento, verá que o array que contem o caminho da cobra (snakeTrail) e elimina as informações que seja desnecessárias, mostrando apenas as necessárias. Talvez você veja que a tela em si não mudou, o Cruela continua riscando todo o board e não vejo a diferença, se isto acontecer, provavelmente você terá que voltar lá nas primeiras linhas digitadas, recortar a “pintura” do board, e colá-lo dentro da função updateFrame.

function updFrame(){
context.fillStyle = "black";
context.fillRect(0, 0, board.width, board.height);
//.......... o restante da função deverá estar abaixo
}

Agora a Cruela estará andando andando livremente pelo board como você desejar.

A cobra andando corretamente.

3 — Regras do jogo

Neste jogo simples e bobo, vamos adicionar apenas três regras básicas: a. Ao passar por cima da maçã, a cobra deverá aumentar o seu tamanho e uma nova maçã deverá ser gerada em outro lugar do board; b. Caso a cobra bata em si mesma o jogo volta ao ponto inicial (game over); c. Queremos que quando a cobra chegue até a borda do mapa ela surja na borda oposta.

Estas são as regras de negócio do nosso jogo e, se você chegou até aqui, pode sofrer mais um pouquinho para terminarmos o game.

Para as regras a seguir, vamos, basicamente, usar o if para verificar se a cabeça da cobra tocou na maça, em si mesma, ou na borda e fará uma ação diferente em cada caso.

if(headX == PontoX de algo && headY == Ponto Y do mesmo algo){
}

a. regra da maçã de ouro

Seguindo esta nossa lógica anterior, vamos checar se a cobra tocou na maçã:

function updFrame(){
// ..........
if(headX == appleX && headY == appleY){ //aqui checamos a colisão dos objetos
  snakeBody++ // adicionamos + 1 ponto no tamanho da cobra

  appleX = Math.floor(Math.random() * fieldQuantity)
  appleY = Math.floor(Math.random() * fieldQuantity)
  
  //Aqui geramos um número aleatório para a maçã e ela será renderizada em outra parte do board, 
  //respeitando o tamanho a quantidade de campos que tem no board
  // para que ela não seja gerada fora do mapa ou apenas em um lugar do mapa

 }
}

Jogo com a regra da maçã adicionada

b. regra da colisão

Nesta regra faremos a mesma checagem. No entanto, vamos precisar fazer a checagem no mesmo local que fazemos a iteração do caminho feito pela cobra. Isto se faz necessário, porque cada parte da cobra preenche um campo dentro do board, então ela precia checar se a cabeça da cobra colidiu com cada um desses campos. Teremos o seguinte código:

for (let a = 0; a < snakeTrail.length; a++) {
    //Não gosto de usar o i no loop for
    context.fillRect(
      snakeTrail[a].x * fieldLength,
      snakeTrail[a].y * fieldLength,
      fieldLength,
      fieldLength
    );

  if( snakeTrail[a].x == headX && snakeTrail[a].y == headY){
    velX = 0;
    velY = 0;
    snakeBody = 3;
  }
}

Assim você já garante que a cobra pare e resete quando colidir consigo mesma. Agora vamos para a última regra:

c. regra da borda infinita

Aqui nós teremos que interagir com o board, tendo em mente aquele plano cartesiano que falamos desde o inicio da nossa criação.

Olhando aqui, nós podemo refletir o seguinte. Nós queremos verificar se a cabeça da cobra passou da borda esquerda, significa que headX ficou menor que 1. E para aparecer do outro lado, o que faremos? Sabemos que o board tem 20 campos (fieldQuantity), então nós queremos que ele surja no campo 20 — 1 (fieldQuantity — 1 )que é o último campo antes da borda.

Vamos usar esta lógica para todos os quatro campos:

if (headX < 0) {
   headX = fieldQuantity -1;
 }
 if (headX > fieldQuantity -1) {
   headX = 0 ;
 }
 if (headY < 0) {
   headY = fieldQuantity - 1;
 }
 if (headY > fieldQuantity -1 )  {
   headY = 0;
 }

E assim nosso código está completo e funcional de um Snake Game. Um ajuste legal que eu recomentdo é ir no código e fazer esta alteração:

//..........
for (let a = 0; a < snakeTrail.length; a++) { //Não gosto de usar o i no loop for
  
context.fillRect(
  snakeTrail[a].x * fieldLength,
  snakeTrail[a].y * fieldLength,
  fieldLength -1,
  fieldLength -1 //esta alteração irá tirar 1 px da pintura e dará o efeito de contorno em volta dos campos que a cobra ocupa
    );
//........

E o resultado final é este:

Parabéns! Vá lá, mostre para os seus amigos o que você fez usando algumas poucas linhas de código.

Se gostou deste tutorial, me siga no GitHub e no LinkedIn, dê uma olhada no repositório (link no início do artigo) e faça você mesmo. Não deixe nunca de praticar.

Ainda há muito o que melhorar e se voce gostar do desafio, continue daqui. Pegue este artigo e faça um estudo incrementando este jogo. Crie um bloco de pontuação, uma mensagem de GameOver personalizada, deixe a sua criatividade rolar.

Artigo escrito por mim originalmente no Medium : https://medium.com/@tirianx/javascript-na-p%C3%A1tica-construindo-o-snake-game-a772f7353eac