Apostila Jogos CSS

Desenvolvimento de Jogos
CSS/JAVASCRIPT
Rogrio B. de Andrade
(Prof. Especialista em Educao)
Valria Fernandes Mendes

(Coordenadora do Curso Tcnico em Informtica)
UNIVAP UNIVERSIDADE DO VALE DO PARABA COLGIO TCNICO UNIVAP VILLA BRANCA - JACARE
Cascading Style Sheets (CSS) uma linguagem de estilo que serve para definir a apresentao de documentos escritos em HTML, tem por caracterstica separar formato e o contedo de um documento. Utilizaremos CSS e Java script para criar um jogo que poder ser executado em um navegador (Ie ou Mozillaetc). O primeiro passo definir divises (div) que representaro cada objeto de nosso jogo, incialmente o persoangem e o cenrio. Abaixo, um exmplo de como definir o contexto de cdigos CSS. Devem vir entre as tagas <head> e <//head>. A seguir criamos uma representao denominada personagem e cenrio, sendo possvel definir diversas propriedades (width,height, top, left etc).
<style type="text/css"> div.personagem{ width : 102px; // comprimento height : 117px; // altura top : 297px; // equivale a posio y left : 50px; // equivale a posio x position : absolute; // define tipo de posicionamento visibilisty : visible; // definie visibilidade } div.cenario{ width : 100%; height : 100%; top : 0px; left : 0px; position : absolute; visibility : visible; }
</style> O segundo passo criar rotinas (funes) que permitiro controlar o movimento do personagem no cenrio. O controle ser atravs do teclado. Toda funo dever estar inserida entre as tags <script> e </script>, pois, neste contexto que inserimos cdigos em Javascript. Atravs de Java script podemos inserir lgica em pginas HTML. Cdigos em CSS so inseridos em arquivos do tipo HTML. Um objeto criado atravs de uma declarao Div pode ser acessada e alterada atravs de comandos em Javascript que acessaro a propriedade de um Div (CSS) podendo inclusive alterar o valor.
Abaixo o cdigo de uma funo definida como Keyboard. Esta funo permite direcionar o Div personagem atravs do teclado. Os cdigos numricos 38,40,37 e 39 equivalem respectivamente as teclas de direo: para cima, para baixo, para esquerda e para direita. As duas primeiras linhas logos aps o carter { possibilitam recuperar a tecla que o usurio digitou. So necessrias estas duas linhas para que a identificao da tecla seja possvel tanto no IE quanto em outros navegadores. Infelizmente os navegadores no so 100% compatveis em relao a linguagem Javascript. A linha cdigo: y=parseInt(document.getElementById("personagem").style.top)+10; acessa o objeto personagem, recuperando o valor da propriedade top. Para acessar a propriedade top, faz-se necessrio referenciar antes a propriedade style, que tambm est sendo referenciada pelo prprio objeto personagem, que por sua vez est referenciado por document. Qualquer objeto criado em uma pgina Html, pode ser acessada atravs de document. ParseInt convert o valor acessado em um nmero somado a nmero 10 (que o deslocamento em pixel). Esta soma armazenada na varivel y. Para atualizar a posio de um Div, controlado atravs do teclado devemos realizar o deslocamento do mesmo em funo da tecla e ainda devolver o resultado do calculo a propriedade especfica. document.getElementById("personagem").style.top=y+'px'; Ou seja, fazer agora exatamente o contrrio, acessando a propriedade atravs de document e atribuindo a varivel calculada anteriormente.
Entendo o sistemas de coordenadas: O lado tem o Div personagem. A propriedade top equivale a Y e a propriedade left a x do plano cartesiando. Ainda temos as propriedades wdith e height indicando largura e altura respectivamente.
A fim de reaproveitar cdigo de programao e conseqentemente diminuir o tamanho do arquivo e sua respectiva manuteno, o uso de funes extremamente recomendvel. Uma funo permite aproveitar a lgica de soluo de um determinado problema em vrios momentos. No exemplo estudado, criamos vrias funes, que sero explicadas a seguir: A funo setDivTop permite adicionar ao valor da propriedade top um determinado valor. Lembre-se um valor negativo, faz com que o objeto v para cima e um valor positivo para baixo, pois, top equivale a Y do plano cartesiano. Para utilizar a funo setDivTop necessrio informar o objeto e o valor a ser adicionado (podendo ser negativo ou positivo).
Acima, temos que a varivel obj cria uma referencia para document.getElementById do objeto a ser modificado. Atravs da varivel obj podemos acessar as propriedades subseqentes at chegar a top. Para isto o valor atual de top armazenado na varivel l (convertida para nmero inteiro) que posteriormente tem o contedo da varivel valor adicionado a mesma. Por ltimo a propriedade top atualizada recebendo o valor de l +px. O px indica que estamos trabalhando com coordenadas na forma de pixels.
A mesma lgica vale para manipularmos a propriedade left, lembrando que left equivale a x do plano cartesiano.
Ainda h as funes SetDivTopValue e setDivLeftValue, enquanto as anteriores comentadas adicionam um determinado valor, estas ltimos atribuem um valor especfico, alterando o valor da propriedade para o indicado no chamado a funo. A funo iniDivValues permite inicializar os valores de propriedades do objeto personagem,no caso indicando onde o mesmo deve aparecer. Observe que esta funo apenas faz chamada a outras funes. Ela utiliza a funo setDivTopValue e setDivLeftValue para indicar a posio top (y) e left(x) do personagem.
Lembrem-se todas as funes mencionadas anteriormente devem estar declaradas entre tags <script> e </script>. A declarao de funes e respectivas implementaes so descritas para ser utilizado posteriormente, o que chamamos de chamadas s funes, que podem ocorrer dentro ou fora de uma funo. possvel uma funo chamar uma ou mais funes.
A seguir o corpo da pgina HTML. Observe que antes do corpo propriamente dito, temos o fechamento do contexto Java script, indicado por </script>. A duas linhas anteriores fazem chamada a funo Keyboard que tem por objetivo direcionar o Div personagem de acordo com a tecla de direo utilizada pelo usurio. Observe que est funo chamada duas vezes, uma com o resultado associado ao evento onkeypress e outro ao evento onkeydown, isto necessrio, pois os navegadores (IE, Mozilla etc) interpretam de forma diferente os eventos de teclado. Codificando desta forma podemos fazer com que o jogo desenvolvido funcione na maioria dos navegadores, ou pelos menos nos principais.
O restante do cdigo o corpo da pgina Html propriamente dito. A tag <body> indica o incio deste contexto e </body> o final. Entre estas tags, temos a criao da identificao dos objetos com referncias as suas respectivas classes. Poderamos criar nomes distintos para os ids. Podemos ter por exemplo um id=vilo com referncia a um personagem e outro heri com a mesma referncia, se ambos tem as mesmas caractersticas (propriedades). Outra observao importante o cdigo de linha: <img src="cenariosp.png" onLoad="initDivValues()"> width="800" height="600"
Esta linha est inserida dentro da criao do cenrio e informa que a figura do id cenrio representada pelo arquivo cenario.png. Alm disto, o evento onLoad chama a funo initDivValues que insere o personagem em um posio especfica .
Nas pginas finais o cdigo fonte completo deste jogo bsico (apenas movimentao).
<html> <head> <style type="text/css"> div.personagem{ width: 102px; height: 117px; top: 297px; left: 50px; position: absolute; visibilisty: visible; } div.cenario{ width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; visibility: visible; } </style> <script language="javascript"> var // limite mximo do objeto para retornar ao topo do cenario em relao ao comprimento MAXX=680; MAXY=550; // contagem de pontos pontos=0; // define um valor para y do objeto function setDivTopValue(qualObj,valor) { obj = document.getElementById(qualObj); l = parseInt(obj.style.top); // removes the "px" at the end l = valor; obj.style.top = l+'px'; return(l); } // define um valor para x do objeto function setDivLeftValue(qualObj,valor) { obj = document.getElementById(qualObj); obj.style.left = valor+'px'; return(l); }
// incrementa y do objeto mais o valor dado function setDivTop(qualObj,valor){ obj = document.getElementById(qualObj); l = parseInt(obj.style.top); // removes the "px" at the end l = l +valor; obj.style.top = l+'px'; return(l); } // incrementa x do objeto mais o valor dado function setDivLeft(qualObj,valor){ obj = document.getElementById(qualObj); l = parseInt(obj.style.left); // removes the "px" at the end l = l +valor; obj.style.left=l+'px'; return(l); } // identifica teclas e direciona conforme ao do usurio function keyboardControl(oEvent) { // cdigo abaixo identifica controle de tecla para o ie, mozilla e outros oEvent = oEvent ? oEvent : window.event; tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which; if (tecla==38){ // para cima y=parseInt(document.getElementById("personagem").style.top)-10; document.getElementById("personagem").style.top=y+'px'; } else if (tecla==40) { // para baixo y=parseInt(document.getElementById("personagem").style.top)+10; document.getElementById("personagem").style.top=y+'px'; } else if (tecla==37) { // para esquerda x=parseInt(document.getElementById("personagem").style.left)-10; document.getElementById("personagem").style.left=x+'px'; } else if (tecla==39) { // para direita x=parseInt(document.getElementById("personagem").style.left)+10; document.getElementById("personagem").style.left=x+'px'; } }
// inicia valores para os objetos do jogo function initDivValues() { setDivTopValue("personagem",410); setDivLeftValue("personagem",200); } // inicia captura das teclas para ie, mozilla e outros document.onkeypress = keyboardControl; document.onkeydown = keyboardControl; </script> </head> <body> <div id="cenario" class="cenario"> <img src="cenariosp.png" width="800" height="600" onLoad="initDivValues()"> </div> <div id="personagem" class="personagem"> <IMG NAME="animation" SRC="ha.gif" > </div> </body> </html>

Apostila Jogos CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostila Jogos CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Desenvolvimento de Jogos

Valria Fernandes Mendes

Das könnte Ihnen auch gefallen