Como fazer um jogo com HTML5 e Javascript – Objetos







Nesse artigo você vai aprender conceitos básico de orientação a objeto usando javascript, vamos também implementar física no nosso jogo.


Olá meus amigos, nesse artigo vamos aprender algo que é muito falado na área de desenvolvimento, vamos falar sobre orientação a objeto e também sobre física em jogos, isso mesmo, vamos falar de gravidade.

Como primeira experiência em desenvolvimento vamos criar algo bem simples, que posteriormente pode se tornar, quem sabe, em um grande jogo de plataforma. Como já havia falado no primeiro post da serie "como fazer um jogo com html e javascript" o vídeo tutoria é do Felipe Alves que tem um canal sobre tecnologia MUITO bacana.

O vídeo que ele fez é a continuação do primeiro artigo, e nele vamos aprender a criar um objeto em javascript e fazer esse objeto sofrer os efeitos da gravidade de uma maneira bem simples.

Antes de mais nada, vamos falar sobre objeto, um objeto em linguagem de programação é a forma de abstrair qualquer coisa do mundo real, é a maneira que você "explica" para o computador como alguma coisa se comporta e como ela deve se comportar no sistema, por exemplo, qualquer coisa está sujeita aos feitos da gravidade, então, quando criarmos um objeto no mundo virtual, ele também poderá sofrer esse feitos.

Um objeto tem características próprias, são elas método e atributos (cada objeto faz parte de uma classe, mas isso fica pra outro artigo) , Um método é exatamente o que parece ser, é como alguma coisa faz alguma coias, por exemplo: você sabe andar, inconscientemente exite um método que você desenvolveu para andar, um passo após o outro, e é exatamente isso que falamos para o computador fazer, programamos a forma de como aquele objeto faz aquela tarefa, um atributo também é exatamente o que parece ser, você tem olhos, boca, nariz, medidas, cor do cabelo, todas essas características tem um "valor" esse valor é o atributo, Exemplo: "olhos = azul", "altura = 1,80m" etc...

Se você tem um nível básico de programação não vai ter dificuldade quanto a isso. Em javascript criamos um objeto como se fosse uma variável da seguinte forma.

Sabendo como criamos um objeto podemos pensar nos objetos do nosso jogo, nosso jogo tem chão, obstáculos, personagem etc... vamos criar  primeiro o chão, e posteriormente nosso personagem, vamos resgatar o código anterior e continuar editando.

Com isso criamos nosso chão mas ainda não irá aparecer nada de diferente se atualizarmos nossa página, isso acontecer por que ainda não instanciamos nosso objeto, ou seja, não estamos usando o nosso objeto para nada em momento nenhum, apenas criamos ele, o que vamos usar é o método desenha que criamos, ele vai desenhar nosso chão na base do nosso canvas, vamos chamar esse método na função global desenha que criamos no primeiro artigo.

agora nossa função fica assim...

para chamar o método de um objeto é muito simples, basta colocar nome do objeto que você quer chamar seguido de um ponto com o nome do método do objeto, se por acaso aquele objeto não existir o navegador retornará um erro no console.

Nota: O prefixo "this" é utilizado para mostrar que estamos chamando um atributo daquele objeto, por exemplo, "this.cor" quer dizer que estou chamando a cor do objeto chão, podemos ter a varável cor em qualquer outro lugar ou até mesmo como uma variável global, o método só consegue acessar o seu próprio atributo com esse prefixo, para garantir que você quer usar um atributo daquele método próprio, se por algum motivo você precisar passar o valor de um atributo de outro objeto é muito simples, basta digitar o nome do objeto seguido de um ponto com o nome do atributo, por exemplo "pessoa.olhos" que vai retornar o valor "azul".

Agora vamos fazer nosso bloco que será nosso personagem futuramente, vamos criar nosso objeto bloco e da mesma forma vamos desenha-lo no canvas, chamando na função global desenha.

no nosso objeto bloco temos mais um método além do desenha, o método atualiza irá atualizar a posição Y do nosso bloco a cada segundo.

A gravidade nada mais é que uma "função" que adiciona mais 10 a cada segunda na sua velocidade (apenas para objetos em queda, não levando em consideração o arrasto do ar), falando de forma abstrata, vamos imagina um objeto qualquer no momento zero de uma queda, nesse momento o objeto tem velocidade zero, no segundo momento ( T = 1 ) a velocidade vai mudar de 0 para 10, no terceiro momento ( T = 2 ) a velocidade vai mudar de 10 para 20 e assim por diante até encontrar o chão.

O nosso algorítimo da gravidade é o seguinte

isso ficará dentro do nosso motor (que é um loop) e assim o valor da velocidade será incrementando + 1.5 a cada segundo, o problema é que o nosso bloquinho vai ficar caindo infinitamente, não queremos isso, queremos que quando ele encontre com o chão ele pare, vamos fazer isso !

Temos a posição do nosso bloco e a posição do nosso chão, temos a altura e a largura dele e a altura a largura do nosso chão, o que vamos fazer é criar uma condição, nela vamos falar que quando a base do nosso bloco atingir o chão ele terá sempre esse posição, ou seja, o a posição Y do nosso bloco vai ficar fixar dando a sensação de colisão.

"quando a posição y do nosso bloco foi maior que a posição y do chão menos a altura do bloco, a posição y do nosso bloco vai receber a posição y do chão menos a altura do bloco"

Complicado de entender, mas acredito que com prática e alguns desenhos fique mais claro

vetor colisão
Reflita sobre o assunto observando essa imagem, repita a frase tentando mapear na sua cabeça as posições.

Vamos fazer nosso bloco pular toda vez que o mouse for acionado, nos já vimos o event listener que adiciona o evento de clique no nosso código, já fizemos um alert aparecer toda vez que o clique for acionado, agora vamos criar um método para o nosso bloco e chama-lo na nosso função pula.

Um pulo é uma força contrária a da gravidade, ou seja, toda vez que pulamos estamos acelerando inversamente a gravidade, no nosso caso estamos adicionando a velocidade 1.5 a cada segundo, um pulo vai fazer o inverso, ele vai reduzir da velocidade um valor que vamos chamar de "força do pulo " esse valor será 15 e vamos adicionar no nosso atributos.

a cada vez que essa função for chamada ela subtrairá 15 da velocidade, e como a velocidade aumenta constantemente logo o nosso bloco volta ao chão.

O nosso código completo fica assim !

Bom, por enquanto é só, dúvida, sugestões ou qualquer outra coisa só comentar ai embaixo !!

 

Deixe uma resposta

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