JavaScript

HTML5/JavaScript para Jogos (Parte 4)

Se você perdeu a parte 3, acesse-a aqui: Parte 3

Acrescentei o JavaScript ao título, uma vez que, a partir deste artigo, começaremos a ver a “inteligência” do jogo, que não é programada no HTML.

Primeiro, vamos falar do objeto window, que representa uma janela do navegador aberta. Caso queira saber mais, veja as propriedades e métodos deste objeto no link a seguir

http://www.w3schools.com/jsref/obj_window.asp

Entretanto, antes de deixar que o jogo rode, é necessário verificar se as imagens e sons usados já foram carregados. Uma das formas de fazer isso é chamar uma função que inicie o jogo somente ao se detectar o evento onload do objeto window, conforme o código a seguir

window.onload = function() {
    ...
};

Traduzindo, o evendo onload do objeto window deverá chamar function, que não recebe argumentos (já que não há nada entre os parênteses na linha 1). A função chamada deverá conter o código a ser executado quando os recursos terminarem de ser carregados (representado pelas reticências).

Para saber mais sobre o evento onload, veja a referência a seguir

http://www.w3schools.com/jsref/event_onload.asp

Agora, precisamos acessar o elemento canvas a partir do código JavaScript. Lembre-se que a declaração do elemento foi feita em HTML, da seguinte forma

...
<canvas id="idCanvas2" width="640" height="480">
    Seu navegador não tem suporte ao 'canvas'.
</canvas>
...

Então, através do objeto document, que representa a página web, e que é o proprietário de todos os elementos da página, podemos conseguir uma referência ao canvas, após todos os elementos da página terem sido carregados, da seguinte forma

window.onload = function() {	  
    canvas2 = document.getElementById("idCanvas2");
};

Repare que canvas2 é uma variável que apontará para o elemento canvas de id igual a idCanvas2, conforme declarado no HTML. Você pode encontrar mais informações sobre o objeto document no link

http://www.w3schools.com/js/js_htmldom_document.asp

Entretanto, ainda não é possível desenhar no canvas, uma vez que ele é somente um container. Porém, o método getContext retorna um objeto que provê ferramentas para desenhar. Assim, o uso de getContext para uso das ferramentas 2D e o desenho de um retângulo com origem em (10,20), de largura 100 e altura 200 pode ser feito da seguinte forma

window.onload = function() {	  
    canvas2 = document.getElementById("idCanvas2");
    ctx2 = canvas2.getContext("2d");
    ctx2.strokeRect(10, 20, 100, 200);
};

Outras informações sobre o contexto bidimensional podem ser encontradas em

http://www.w3schools.com/tags/ref_canvas.asp

O resultado final no JS Bin pode ser visto no segundo canvas da página

http://jsbin.com/wiceha

Até a próxima!

Anúncios

2 comentários sobre “HTML5/JavaScript para Jogos (Parte 4)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s