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...