Como usar o Canvas para criar um jogo espacial
Este tutorial explica como usar recursos Canvas HTML5 para desenvolver um jogo espacial em estilo arcade original.
Nesta seção
| Tópico | Descrição |
|---|---|
|
Este tópico explica como desenhar um plano de campo estelar e uma espaçonave. | |
|
Este tópico explica como mover a espaçonave verde e laranja criada no tópico Desenhando o plano de fundo e o veículo. | |
|
Este tópico explica como detectar colisões entre seu veículo e os outros objetos na tela. | |
|
Este tópico explica como remover obstáculos da tela e calcular uma pontuação final. |
Canvas HTML5 pode criar gráficos rápidos, leves, que favorecem o desenvolvimento de jogos. Esta seção explica como usar Canvas para criar um jogo espacial em estilo retrô que será executado em uma página da Web. Esse jogo foi projetado para mostrar os princípios básicos de como os recursos de Canvas podem ser usados para desenvolver jogos para a Web. O objetivo desse jogo espacial é levar uma espaçonave com segurança até uma base passando pelo campo estelar com asteroides explosivos.
Este tutorial contém o código completo para a execução do jogo. O código é escrito em Canvas HTML5 e JavaScript, além de consistir em quatro códigos de amostra anotados autônomos. Cada amostra aborda uma tarefa de programação principal necessária ao desenvolvimento de um aspecto diferente do jogo. O quarto código de amostra integra todas as tarefas para criar um jogo totalmente funcional que pode ser executado usando-se as teclas de seta para mover a espaçonave por um labirinto estelar de asteroides vermelhos explosivos. Se você atingir um asteroide, a espaçonave será destruída. Para chegar com segurança à base, você deve evitar os asteroides ou destruí-los antes de atingi-los. A pontuação se baseará em quantas vezes você mover a espaçonave e quantas bombas lançar.
Canvas pode ser usado para criar vários jogos baseados na Web diferentes. Trata-se de uma ferramenta de desenvolvimento efetiva que funciona no immediate mode e renderiza gráficos diretamente na tela. Diferentemente dos sistemas retained mode, não há nenhuma etapa intermediária que ocorre antes da tela ser desenhada. Dessa forma, o modo imediato de Canvas possibilita o desenvolvimento de jogos executados mais rapidamente e que usam menos memória do que outras tecnologias gráficas. Outra vantagem de Canvas é a forma como ele usa pixels para criar e ler imagens na tela. É fácil realizar animações complexas alterando-se cada pixel individualmente. Canvas também pode detectar quais pixels foram desenhados na tela. Usando esse recurso, um programa de jogo pode determinar se os objetos estão em colisão. A detecção de colisão é um requisito essencial para a criação de jogos rápidos.
Os códigos de exemplo neste tutorial foram escritos com a maior simplicidade possível para mostrar os princípios básicos das quatro tarefas de programação de jogos. A simplicidade das amostras permite uma expansão e uma personalização simples para que seja possível criar jogos da Web. O material de discussão é exibido ao final do código que explica o design e a estrutura de cada parte do código, mostra como as peças se encaixam e inclui links para mais informações. Para obter mais informações sobre a programação de Canvas, consulte MSDN Canvas Reference.
Tópicos relacionados