Conteúdo principal
Curso: Programação > Unidade 4
Lição 4: Criando um jogo em 2D: Hoppy, o Castor SaltitanteColisões com as varetas
Nós temos o castor saltando, as varetas sendo exibidas – precisamos apenas juntá-los. Queremos saber quando nosso castor consegue passar sobre uma vareta para que possamos contar isso como uma vareta agarrada com sucesso. Isso significa que precisamos fazer uma verificação de colisão básica dos dois objetos. Há vários lugares em que podemos programar essa funcionalidade, já que lida com dois objetos – como, por exemplo, em uma função global, um método no objeto Stick ou um método no objeto Beaver. Vamos fazer isso no castor por enquanto:
Beaver.prototype.checkForStickGrab = function(stick) {
// se o castor estiver sobre a vareta, faça alguma coisa
};Nessa função, primeiro precisamos escrever uma condição que será verdadeira se o castor e a vareta colidirem e falsa caso isso não ocorra. Nós poderíamos fazê-la complexa ou estrita, com base na localização da pata do castor, por exemplo, mas vamos ficar no básico por enquanto. Eles devem "colidir" se:
- A posição x do centro da vareta estiver entre os dois lados do castor.
- A posição y do centro da vareta estiver entre o topo da cabeça e as solas dos pés do castor.
A vareta é desenhada usando o comando
rect, o que normalmente significaria que as suas propriedades x e y seriam representadas pelas coordenadas do canto superior esquerdo. No entanto, para simplificar o nosso cálculo de colisão, podemos mudar para um modo em que o rect é desenhado a partir do centro:rectMode(CENTER);
rect(this.x, this.y, 5, 40);A imagem do castor também é desenhada do canto superior esquerdo por padrão, mas vamos deixar desse modo, já que funciona bem para o nosso cálculo. Para verificar a primeira condição, sobre a posição x, podemos verificar se a posição x da vareta é maior que ou igual ao lado esquerdo do castor (x) e menor que ou igual ao lado direito do castor (x + 40):
stick.x >= this.x && stick.x <= (this.x + 40)Podemos fazer uma verificação similar para a posição y, na qual verificamos se a posição y da vareta é maior ou igual ao topo da cabeça do castor (y), e menor ou igual às solas dos pés do castor (y + 40):
stick.y >= this.y && stick.y <= (this.y + 40)Agora, o que deveríamos realmente fazer assim que detectarmos uma colisão entre o castor e a vareta? Queremos efetivamente remover a vareta da tela e evitar outra colisão. Uma maneira simples de fazer isso é simplesmente empurrar a vareta para fora da tela ao mudar a sua coordenada y:
stick.y = -400;Ao mesmo tempo, queremos lembrar quantas varetas o castor "agarrou", então iremos incrementar a propriedade interna das varetas:
this.sticks++;Finalmente, precisamos chamar esse método em um momento oportuno – que tal logo após desenhar cada vareta?
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}Juntando tudo, fica assim - dê uma olhada, quando você apanha as varetas, elas desaparecem!
Quer participar da conversa?
Nenhuma postagem por enquanto.