Começando...

A primeira providência, com relação a construir um jogo (seja ele em que sistema, linguagem, ou metodologia for) é decidir o que fazer.

No âmbito do "bem simples", a estrutura óbvia mais conhecida é de longe o tiro ao alvo. Algo se mexe na tela, possivelmente passando de um lado para outro, e o jogador precisa "acertar" (seja lá no que estiver em movimento).

Temos portanto três aspectos relevantes: algo que se move (imagem e animação), sistema de controle de tiro (arma e processamento dos disparos) e finalmente o resultado de diversas tentativas (placar e escore).

Só isso já é o suficiente para iniciar um projeto de jogo que poderia ser chamado de "na mira do mouse" ou "mouse shooter" para ficar na modinha de nomes em inglês.

Revisando: definimos um tipo de jogo a ser feito e o dividimos em estruturas mais ou menos estanques. É claro que estamos deixando de lado, por enquanto, os aspectos artísticos da criação visual.

Então lá vamos nós...

Já sabemos que o HTML 5 lida com "canvas" para efeito de animações e composição de imagens. Imagine então que o "canvas" é na verdade uma "janela", através da qual assistimos o desenrolar do jogo. Não importa muito o seu tamanho e apenas para efeito de exemplificação, digamos que a área desta janela tem780 pixels de largura por 250 pixels de altura.

Vamos usar a imagem de uma ave (73 x 30 pixels), que se deslocará da esquerda para a direita (ela será o alvo a ser abatido). Como fazer isso?

Uma vez criado o script que conterá o game, é preciso estabelecer os elementos do javascript. Veja como seria o script em questão:

A instrução canvas marca o início de tudo que será interpretado como código javascript dentro do script MA porém tudo que estiver antes dela ainda será considerado instrução do Micro Aventuras . Foram definidas 6 variáveis:

canvas = a superfície onde o jogo será desenhado;

ctx = o contexto dessa superfície, ou seja, a referência que usaremos para indicar onde desenhar ou escrever;

frames = contador inteiro sem sinal que será usado para "contar" cada frame enviado para a tela;

img = imagem default do jogo (aqui usaremos um truque bem simples que é colocar todas as imagens do jogo em um só arquivo, como se fosse uma "folha de figuras" e obter dela cada elemento. Com isso o formulário html só terá que fazer o download de um arquivo.

ave_x = distância da imagem da ave até a margem esquerda da tela útil (canvas);

ave_y = distância da imagem da ave até o topo da tela útil (canvas).

Em seguida são definidos os elementos principais (globais) do game:

As 5 primeiras linhas de código definem o canvas e seu contexto. A sexta linha cria uma referência a uma função (clique) que será chamada assim que o mouse for clicado na tela.

As 3 linhas seguintes são usadas para definir a imagem (img) "folha de desenhos", carregá-la do arquivo bird003.png e em seguida criar um shape (ou figura) a partir da posição 0,0, com 73 x 30 pixels. Veja abaixo a folha completa:

Uma vez definidos os elementos, o passo seguinte é chamar a função que efetivamente vai "rodar" o jogo. O que faremos a seguir é definir uma a uma as demais funções do game propriamente dito:

Esta é a função que "roda" o game e é responsável por incrementar o contador frames, chamar a função que monta a tela e fazer tudo isso novamente, assim que possível. Ou seja, terminou de montar a tela, mostra pro usuário/jogador e monta novamente, mostra, monta, mostra e assim por diante.

Esta função mapeia o mouse e é executada sempre que um botão for pressionado. Está vazia porque ainda não definimos o que fazer (disparar o tiro).

Finalmente a função mais importante, aquela que irá "montar" a tela que o jogador verá no seu monitor:

As duas instruções ctx. definem a cor de fundo da área do canvas e "limpam" o seu conteúdo.

Em seguida a "ave" é desenhada nas suas coordenadas x,y e a coordenada x é incrementada em um pixel. Execute o script e veja o resultado. Se preferir "ver" agora, clique no link abaixo.

De agora em diante...

Você viu como criar e definir o canvas, fazer uma ave "voar" de um lado ao outro do formulário, mas, se fez tudo direitinho, deve ter percebido uma série de problemas. É neles e com eles que iremos trabalhar de agora em diante. Então, compete a você avaliar o que foi efetivamente esse primeiro "voo".

Liste os problemas que já identificou e se possível a solução que adotaria (lembrando que não é para fazer o jogo inteiro ainda, mas apenas resolver estes pequenos detalhes).

Mais: avalie o que poderia ser feito para melhorar a performance do movimento e as principais dúvidas que encontrou.

Lembre-se que sempre existe mais do que um jeito para fazer as coisas. Bom e ruim são conceitos relativos, que dependem de qual objetivo pretendemos atingir.

Só adiantando (desta vez porque é a primeira): faça o movimento ficar mais rápido e realmente parecer que a ave "vem" de trás da janela do canvas.

Fique ligado, porque logo tem mais...