Criando Jogos em HTMl5 – 1ª parte

Antes de comerçar nosso curso Criando Jogos em HTML5, subentendemos que você já tenha uma boa base em HTML5 (Html, CSS e JavaScript). Caso contrário aconselhamos aos interessados, dar uma olhada nestas tecnologias antes de começar a desenvolver jogos.

O que torna a maioria dos jogos de computador divertido é o simples fato deles na sua essência, simular de forma estilizada o mundo real. Assim como no mundo real, os objetos interagem de alguma forma com outros objetos, como as paredes, postes, casas, carros, pessoas entre outros obstáculos naturais. Na programação dos jogos, esta interação é representada pelo evento de detecção de colisões.

1.Colisões

Os pontos de colisões são representados por áreas previamente definidas, capazes de descobrir se um ponto de colisão X está se cruzando com um ponto de colisão Y.

colision1

Para descobrir se um ponto de colisão está se cruzando com o retângulo acima, primeiro você deve definir os lados esquerdo(left), direito(rigth), superior(top) e inferior(bottom) do retângulo (sprite). Observe no código abaixo:

var left = sprite.x;
var right = sprite.x + sprite.width;
var top = sprite.y;
var bottom = sprite.y + sprite.height;

A variável spriteObject será utilizada para todos os sprites do jogo.

var spriteObject = {
sourceX: 0,
sourceY: 0,
sourceWidth: 64,
sourceHeight: 64,
x: 0,
y: 0,
width: 64,
height: 64,
left: function() {
return this.x; },
right: function() {
return this.x + this.width;
},
top: function() {
return this.y;
},
bottom: function() {
return this.y + this.height;
};

As quatro propriedades são métodos. Você pode ver que elas calculam a posição dos lados do sprite e, em seguida, retornam o resultado em:
return this.y + this.height;

*Veja o resultado final do código clicando aqui!

Leia também, como desenvolver aplicativos para Smart TVs!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *