o simpleGame

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.

Um breve olhar para uma tela de jogo

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

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

desenho básico da lona para o seu jogo

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

1. Adicionar uma tag canvas ao HTML.

   Normalmente, você vai criar uma tag lona no HTML, mas o simpleGame biblioteca automaticamente adiciona uma 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 de 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.

   Video: Jogo em Canvas (C-Tank) Aula 1 - Instanciando o objeto canvas

   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, definir 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 abertos com a tag canvas. o fillStyle pode ser configurado para cores, bem como padrões e gradientes.

7. Criar retângulos.

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

8. Desenhar a imagem na tela.

   Video: Offscreen canvas - HTML5 Game Development

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