Como criar jogos HTML com base em um navegador

Muitos jogos de computador on-line baseados em navegador são criados usando o Adobe Flash, um ambiente de autoria caro, disponível quase que exclusivamente para profissionais. Felizmente, existe uma alternativa ao Flash que permite que usuários ocasionais criem jogos com base em um navegador, sem nenhum custo. Você pode criar uma dinâmica única e esse tipo de jogo incorporando o código JavaScript nas páginas da Web com HTML normal.

Passo 1

Use elementos de formulário HTML para criar interfaces de usuário simples para o seu jogo. Você pode criar botões, campos de texto, caixas de seleção, menus e botões radiais em um formulário HTML (consulte Referências 1, seção 17.4.1). Por exemplo, as 10 linhas seguintes de HTML formam uma interface simples para coletar o nome de um jogador: Parabéns, você definiu uma nova pontuação alta!

Etapa 2

Consulte os elementos do formulário HTML incorporado no código JavaScript usando o Modelo de objeto de documento (consulte as referências 2, capítulo 8). Por exemplo, a função Javascript a seguir recupera o nome do player no campo de texto criado na etapa 1. Insira esse código entre a primeira e a segunda linhas do código na etapa 1 .

Etapa 3

Chamar funções JavaScript em resposta a uma ação do usuário em um formulário com atributos de tag especiais. Por exemplo, para fazer com que o botão “Enviar” criado na etapa 1 chame a função JavaScript adicionada na etapa 2, altere o código HTML do botão para o seguinte:

Etapa 4

Utilize este código, um exemplo modificado da fonte JavaScript, para determinar as coordenadas do cursor do mouse do usuário na janela do navegador (ver Referências 3) .

Passo 1

Use elementos do formulário para fornecer informações ao usuário e receber contribuições. Por exemplo, a seguinte linha de código JavaScript usa o elemento de entrada de texto criado na “Entrada do Usuário” para produção de texto: document.hsform.hsname.value = “Obrigado por jogar!”

Etapa 2

Oculta e mostra imagens ou outros elementos em documentos HTML referentes à propriedade style no DOM, como nesta página de exemplo adaptada do livro de Goodman “Livro de receitas JavaScript e DHTML” (consulte as referências 2, página 361) :

Etapa 3

Ele manipula muitos outros elementos da janela do navegador com referências DOM no código JavaScript. Por exemplo, você pode alterar o tamanho dos quadros, fazer a página rolar, alterar a cor do plano de fundo e exibir as caixas de diálogo de alerta, como visto na “Entrada do usuário”. Consulte a seção “Recursos” para obter uma lista de exemplos de código que demonstram a grande extensão da influência que você pode exercer no navegador do usuário com JavaScript.

Etapa 4

Ele usa referências DOM, mecanismos especiais de horário JavaScript, CSS e propriedades de estilo para animar imagens ou outros objetos HTML de maneira transparente através da janela do navegador. Substitui o bloco no código de exemplo na etapa 2 com o seguinte para criar uma animação simples, como uma adaptação de “Cookbook JavaScript e DHTML” (ver Referências 2, página 417) .

Passo 1

Combine as funções de entrada e saída no código JavaScript com uma função principal que controla a execução do jogo.

Etapa 2

Execute automaticamente a função principal assim que a página for carregada, usando a seguinte linha JavaScript, localizada logo após sua função principal dentro do bloco : window.onload = mainFunctionName;

Etapa 3

Use a função de alerta () em JavaScript que ajudará você a depurar seu jogo à medida que o cria. Basta colocar alertas diferentes em diferentes pontos do seu código; Em seguida, abra a página e acompanhe a execução na ordem dos alertas. Você também pode exibir dados úteis de depuração em cada janela de alerta, como o valor de um contador de loop ou outra variável.

Etapa 4

Publique seu documento HTML e imagens em um site e convide pessoas para jogar seu jogo, sem a necessidade de plug-ins para o Flash.

Referências

 

Você pode estar interessado:

Deixe um comentário