o simpleGame

o motor do Cena objeto usa um dos novos recursos mais interessantes do HTML5 - a tag canvas. Esta tag emocionante permite desenhar imagens e outros elementos diretamente sobre uma parte do browser.

Uma breve olhada em uma tela de jogo,

Aqui está uma página básica exibindo uma tela com dois retângulos e uma imagem.

  
Básico lona Demonstração
Seu navegador não suporta a tag canvas ...

desenho básico tela para o seu jogo

A tag canvas é uma tag HTML, mas ele é usado principalmente como um espaço reservado em HTML. A etiqueta tem uma lona contextoatributo, que permite que o programador directamente desenhar gráficos na página. Veja como esse exemplo funciona:

1. Adicionar um tag canvas ao HTML.

   Normalmente, você vai criar uma tag canvas no HTML, mas o simpleGame biblioteca adiciona automaticamente um tag canvas e anexa-lo para o final do corpo da página.

2. Crie uma função para o desenho.

   Neste exemplo, a tela é desenhado em uma função chamada quando a página carrega inicialmente. Dentro simpleGame, a função de desenho será chamado 20 vezes por segundo.

3. Obter um contexto de desenho.

   A tag canvas suporta um contexto de desenho em 2D (sim, 3D está chegando, mas não é ainda amplamente suportado). Use o getContext () Método para fazer uma referência ao contexto de desenho.

4. Criar um javascript Imagem Objeto.

   duende objetos no simpleGame biblioteca são baseados em imagens de javascript. Comece criando um Imagem objeto em javascript.

5. Definir atributo de origem da imagem.

   Para vincular um arquivo para o Imagem objeto, defina o src propriedade do Imagem opor-se a um arquivo de imagem no mesmo diretório que o seu programa. Isto irá associar uma imagem com o documento, mas a imagem não será desenhada no page- em vez disso, ele é armazenado na memória para ser usado no código.

6. Defina o estilo de preenchimento.

   Você pode desenhar desenhos cheios e abertas com a tag canvas. o fillStyle pode ser definido como cores, bem como padrões e gradientes.

7. Criar retângulos.

   Você pode desenhar um retângulo aberto com o strokeRect () método e um rectângulo com o sólido fillRect () método. No simpleGame biblioteca, o Cena o objetivo de Claro() método simplesmente desenha um retângulo preenchido em cor de fundo da cena.

8. Desenhar a imagem na tela.

   Use o drawImage () método para desenhar uma imagem dentro de uma lona. Há muitas variações deste método, mas o utilizado no simpleGame especifica a posição eo tamanho da imagem.