Nesse post vamos mostrar como criar um jogo que chamei de “Dodge” no P5.js. Esse jogo consiste em um personagem principal controlado pelo jogador que precisa desviar dos inimigos que vão tentando atropelá-lo.

Contextualizando…

Quem já jogou Top Gear no Nintendinho vai se identificar com esse game. Mas vamos falar a verdade né? Se você for pensar em qualquer jogo de corrida retrô mesmo é a mesma ideia sempre: um ponto desviando de obstáculos. Além disso, se você já foi aos shopping centers e visitou um daqueles espaços com games para crianças, provavelmente já viu máquinas assim:

A ideia do game é exatamente a mesma, mas é claro que aqui no nosso site não vamos tentar atingir esse nível de complexidade não é mesmo?

Então vamos lá!

Curte jogos? não esquece de ver nossa seção completa de jogos!

Como funciona o jogo?

Em primeiro lugar precisamos conhecer as regras do nosso jogo, não é mesmo? Então vamos lá, eu preparei uma lista de requisitos:

1. O personagem principal deve-se mover (principalmente) para baixo e para cima;
2. O personagem principal deve ter uma velocidade constante (determinada pelo programador)
3. Os blocos (inimigos) devem ser retângulos com largura e altura aleatórios (respeitando um mínimo de 10px máximo de 120px)
4. Os blocos devem passar da esquerda para direita em velocidade constante (não existe aceleração)
5. Os blocos inimigos podem colidir com o personagem principal (use a função dist do P5.js)

Mãos no código!

A primeira coisa que precisamos fazer é criar duas funções capazes de desenhar nosso personagem e os vilões:

function personagem(){
  // inicio do personagem
  fill("yellow");
  rect(x, y, 50, 50);
  fill("black");
  square(x + 5, y + 10, 10);
  fill("black");
  square(x + 35, y + 10, 10);
  fill("black");
  rect(x + 5, y + 27, 40, 10);
}

function vilao(x, y) {
  rect((x = x + 20), y, 100, 30);
}

Em seguida, precisamos definir como o nosso personagem precisa se movimentar, para isso fazemos:

  if (keyIsDown(UP_ARROW)) {
    y = y - 5;
  }
  if (keyIsDown(DOWN_ARROW)) {
    y = y + 5;
  }
  if (keyIsDown(RIGHT_ARROW)) {
    x = x + 5;
  }
  if (keyIsDown(LEFT_ARROW)) {
    x = x - 5;
  }

Seria legal só começarmos nosso jogo quando o usuário clica na tela, para isso eu preciso fazer algumas coisas.

1. definir uma variável para armazenar se o jogo começou ou não.

let statusJogo = false;

2. definir uma função que alterna o status de “falso” para “verdadeiro” quando clicamos na tela:

function mouseClicked() {
  statusJogo = true;
}

3. definir o movimento dos personagens (vilões) baseado no status do jogo:

if (statusJogo == true) {
    //inicio do vilao
    for (let i = 0; i < 3; i++) {
      xV[i] = xV[i] + vel[i];
      vilao(xV[i], yV[i]);
    }
  } else {
    for (let i = 0; i < 3; i++) {
      vilao(xV[i], yV[i]);
    }
  }

Agora nosso proximo passo verificar se o vilão já saiu da tela (para a direita). Nesse caso, o vilão deve voltar para uma posição da esquerda para ser exibido novamente no game:

// quando chega ao final (500) ele volta para o -200
  for (let i = 0; i < 3; i++) {
    if (xV[i] >= 500) {
      yV[i] = random(0, 500);
      xV[i] = -150;
  
    }
  }

Por fim, e não menos importante… vamos verficar a colisão entre objetos. Para isso vamos usar a função dist:

  for(let i = 0; i< 3 ; i++){
    let d = dist(x, y, xV[i], yV[i])
    
    if (d >= 0 && d <= 41){
      console.log(d);
      statusJogo = false
      x = 250
      y = 250
      xV[i] = 0
      yV[i] = random (0,500)
      xS = 0
    }
  }

Feito isso, basta adicionar funções básicas como uma pontuação e voilá!

Use “W A S D” para movimentar o personagem

---

Código completo

Veja nosso resultado final:

// personagem
let x = 250;
let y = 250;

// vilões
let xV = [];
let yV = [];
let vel = [];
let xS = 0
let yS = 2500


let statusJogo = false;

function setup() {
  createCanvas(500, 500);

  for (let i = 0; i < 3; i++) {
    xV.push(0);
    yV.push(random(0, 500));
    vel.push(random(4,10))
  }
}

function draw() {
  background(220);
  if (keyIsDown(UP_ARROW)) {
    y = y - 5;
  }
  if (keyIsDown(DOWN_ARROW)) {
    y = y + 5;
  }
  if (keyIsDown(RIGHT_ARROW)) {
    x = x + 5;
  }
  if (keyIsDown(LEFT_ARROW)) {
    x = x - 5;
  }
  
  personagem();

  if (statusJogo == true) {
    //inicio do vilao
    for (let i = 0; i < 3; i++) {
      xV[i] = xV[i] + vel[i];
      vilao(xV[i], yV[i]);
    }
  } else {
    for (let i = 0; i < 3; i++) {
      vilao(xV[i], yV[i]);
    }
  }

  // quando chega ao final (500) ele volta para o -200
  for (let i = 0; i < 3; i++) {
    if (xV[i] >= 500) {
      yV[i] = random(0, 500);
      xV[i] = -150;
  
    }
  }
  
  textSize(32)
  text(xS, 40,40);
  square(xS, yS, 10, 10);
 
  if (statusJogo == true){
    xS++;
  }
  
  // verifica colisão (morte do personagem)
  
  for(let i = 0; i< 3 ; i++){
    let d = dist(x, y, xV[i], yV[i])
    
    if (d >= 0 && d <= 41){
      console.log(d);
      statusJogo = false
      x = 250
      y = 250
      xV[i] = 0
      yV[i] = random (0,500)
      xS = 0
    }
  }
}

function personagem(){
  // inicio do personagem
  fill("yellow");
  rect(x, y, 50, 50);
  fill("black");
  square(x + 5, y + 10, 10);
  fill("black");
  square(x + 35, y + 10, 10);
  fill("black");
  rect(x + 5, y + 27, 40, 10);
}

function vilao(x, y) {
  rect((x = x + 20), y, 100, 30);
}

function mouseClicked() {
  statusJogo = true;

}

Veja também em nosso github e repositório do P5:

• Github
• P5.js editor