Parte 1 - Recriação do Galaxian

Nos anos 80, os jogos de nave se tornaram populares em meio ao crescente
público de jogadores. Um desses jogos, o Galaxian, foi compartilhado entre amigos na época
da segunda geração de video games, o Atari 2600. Para recriar o jogo em uma nova versão,
foram estabelecidos três modelos referentes a mecânica do jogo: natural, matemático e
computacional.

Modelo Natural

No jogo você controla uma nave que deve destruir o exército de naves inimigas para passar de nível. A cada inimigo destruído, você ganha pontos. Os inimigos andam de um lado a outro da tela, e um inimigo sai da formação e vai em sua direção para lhe atacar. Se a nave for atingida, perde-se uma vida. O jogador recebe 3 vidas ao iniciar o jogo.

Exemplo.

Modelo Matemático

A movimentação da nave se restringe a direita e esquerda e tem velocidade única. A largura e altura da tela são definidas dentro do Canvas. A cade clique do Enter, um tiro é lançado. Se o tiro colide com um inimigo, é acrescentado 30 pontos. A nave, o tiro e os inimigos possuem cores diferentes. 

As formas dos elementos são quadriláteros que possuem todos os ângulos internos congruentes.

A colisão é verificada dentro de uma função que compara as posições e dimensões dos retângulos e retorna um valor booleano.

Modelo Computacional

Consiste na criação da nave, tiro, inimigos e pontuação.

Nave: Objeto chamado nave, que tem como parâmetros y, width e height. Sendo estes, a posição no eixo y da tela, a largura e altura da nave. Dentro da função nave.desenha() foi criado um rect() utilizando y, width e height e o x sendo a variável posX que é atualizada sempre que o botão da esquerda ou direita é pressionado. Por fim, a função nave.desenha() é chamada no draw(). 

nave = {y: (altura-(alturaNave + borda + 10)), width: 30, height: alturaNave};

nave.desenha = function () {

fill(255, 255, 0);

rect(posX, this.y, this.width, this.height);

}

nave.desenha();

Movimentação da Nave: if() para condicionar a resposta para que caso a nave ultrapasse os limites da tela em um dos lados, o posX muda a posição para o lado oposto.

if(posX > (largura-60)) {

posX = 30;

} 

else if(posX < 30) {

posX = largura - 60;

}

Tiro: Objeto com os elementos x, y, vx, width, height, vy e colidiu. Sendo vy a velocidade de movimento vertical e colidiu a variável que confirma se houve colisão com os inimigos, implementada como inicialmente como false.

tiro = tiros[i];

tiro.desenha = function (){

fill(255);

rect(this.x, this.y, this.width, this.height);

}

// movimenta o tiro

tiro.y -= tiro.vy;

tiro.desenha();

Inimigos: São objetos criados dentro de um vetor, com uma quantidade pré-estabelecida. 

for(let i = 0; i < qtdSprites + 1; i++) {

sprites[i] = {x: x, y: y, vx:2, width: 30, height: 30, colidiu: false};

}

No draw() é criada a função de desenho:

sprite.desenha = function() {

fill(28, 63, 156);

rect(this.x, this.y, this.width, this.height);

}

Pontuação: Para implementar a pontuação é necessário verificar se houve colisão da bala com o inimigo. 

hit = collideRectRect(tiro.x, tiro.y, tiro.width, tiro.height, sprites.x, sprites.y, sprites.width, sprites.height); 

// Implementada a partir da biblioteca de colisão 2d do P5, chamada "p5.collide2d"

// se colidiu

if(hit) {

sprites.colidiu = true;

tiro.colidiu = true;

// se sprite foi atingido

if(sprites.colidiu) {

pontos += 30;

hit = false;

}

Nave representada em amarelo, tiro na cor branca e inimigos na cor azul.

Protótipo

Utilizando o P5, popular framework do processing, construí o protótipo com as bases do gameplay desenvolvidos. As três mecânicas implementadas no placeholder do jogo foram a de movimentação da nave, lançamento do tiro e a colisão. Os sprites foram representados através de retângulos.

Movimentação da nave: Como visto no Galaxian, a nave possui características próprias. Se localiza próxima a borda inferior da tela, se movimenta horizontalmente e não possui limites entre uma "parede" e outra, por exemplo, se for direcionado completamente para o lado direito, ao atingir o limite da tela, reaparece no lado esquerdo.

Lançamento do tiro: Surge um pouco acima da borda superior da nave, quando criado. Caso o usuário aperte o enter, uma função é ativada, e a velocidade do tiro é incrementada, fazendo o tiro se mover para cima.

Colisão: Na primeira parte, é existente entre dois elementos. Que é o tiro dado pela nave e os monstros. Quando o tiro é ativado, ele se move no eixo vertical, podendo atingir um dos sprites inimigos em sua posição no eixo x. Caso a posição da bala seja igual a posição do sprite, os dois são eliminados. Se a bala não atingir um inimigo ela transpassa o limite do topo da tela normalmente, desaparecendo um pouco antes de atingir o topo, assim como ocorre no Galaxian.

Além disso, o programa conta com o sistema de pontuação

 já previamente implementado.

Url para download: Galaxian

OBS: Para verificar o código, acesse o arquivo chamado "codigo.js" em Galaxian\assets\js.