Exportar (0) Imprimir
Expandir Tudo

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ópicoDescrição

Desenhando a tela de fundo e o veículo para um jogo que usa canvas do HTML5 e JavaScript

Este tópico explica como usar o canvas do HTML5 e JavaScript para desenhar uma tela de fundo de campo de estrela e um veículo voador para um jogo que criar.

Usando o Canvas HTML5 e o JavaScript para mover um veículo em um jogo

Este tópico explica como usar o Canvas HTML5 e o JavaScript para mover a espaçonave verde e laranja criada no tópico Desenhando o plano de fundo e o veículo.

Uso de canvas de HTML5 e JavaScript para detectar colisões entre veículos em um jogo

Este tópico explica como detectar colisões entre seu veículo e outros objetos na tela.

Usando o Canvas HTML5 e o JavaScript para remover obstáculos em um jogo e para rastrear a pontuação

Este tópico inclui um exemplo de código anotado autônomo que mostra como usar o Canvas HTML5 e o JavaScript para remover obstáculos do seu veículo e rastrear a pontuação. O código de exemplo baseia-se no código disponível no tópico Usando o Canvas HTML5 e o JavaScript para detectar colisões entre veículos em um jogo.

 

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 saber mais sobre a programação de Canvas, consulte MSDN Canvas Reference.

Tópicos relacionados

Canvas HTML5

 

 

Mostrar:
© 2015 Microsoft