Dots Game

HTML5 para Jogos (parte 3)

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

Ao exemplo anterior, vamos acrescentar outro elemento canvas:

<html>
<html>
  <head>
    <script type="text/javascript" src="sprites.js"></script>
  </head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
  <body>
    <p>Use as setas do teclado para mover a personagem</p>
    <canvas id="idCanvas" width="640" height="480">
      Seu navegador não tem suporte ao 'canvas'.
    </canvas>
    <p><i>Canvas</i> de teste</p>
    <canvas id="idCanvas2" width="640" height="480">
      Seu navegador não tem suporte ao 'canvas'.
    </canvas>
  </body>
</html>

Perceba que o atributo id de cada canvas é diferente (nas linhas 12 e 16). Cada identificador deve ser único para que um elemento possa ser endereçado separadamente pelo JavaScript, que é a linguagem que será usada para programar a “inteligência” do jogo. Entretanto, o Cascading Style Sheets (CSS), responsável pelo visual da página, pode endereçar classes de elementos ao invés de cada um deles separadamente. Veja o código que está entre as tags style, que se inicia na linha 5. Mude o border de 1px para 2px e altere a cor de black para blue.

Finalizando, recorte o código entre as tags <style> e </style> e cole-o na aba CSS do JS Bin. Então, remova as tags <style> e </style> da aba HTML. Com as abas, o JS Bin simula o uso de um arquivo separado somente para o CSS e outro para o JavaScript, que começaremos a estudar em breve. Então, verifique que o efeito de usar as tags <style> e um arquivo separado é o mesmo. Altere novamente a cor e a espessura da borda para comprovar o funcionamento.

No próximo artigo, vamos ver como o JavaScript identifica o canvas e como referenciar seu contexto para fazer um desenho. Sugestões e críticas são muito bem-vindas. Deixe as suas nos comentários.

Anúncios

2 comentários sobre “HTML5 para Jogos (parte 3)

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