Desenvolvimento - Javascript

Criando um jogo da velha em DHTML (HTML+Javascript) com jvGame

Veja neste artigo como publicar um jogo em Javascript a partir de uma classe numa página HTML.

por Rodney Albuquerque


Artigo escrito por: Luan Ramos, Rodrigo Gonçalves e Roni Albert

Atualmente, existem várias formas de se criar um jogo para as mais diversas plataformas existentes e modernas.

Seja para console, para desktop, para web, as opções não faltam. Para os amantes de games, uma das opções de criação de um jogo é usando Javascript.

De nada adiantaria criar um jogo sem publicá-lo. Para isso abordaremos a criação de um jogo da velha, usando uma Classe em Javascript e colocando-a em uma página em HTML.

1) Preparando o material:

Para criarmos nosso primeiro jogo vamos precisar de:

  • 5 imagens em formato suportado por navegadores web. Comumente usam-se os formatos JPEG ou GIF;
  • O arquivo JS (Javascript) contendo a definição da classe jvGame;
  • Editor de textos simples (podemos usar o bloco de notas para isso);
  • Um navegador web para testarmos nosso jogo.

Tendo esse material em mãos, salvamos as imagens e o arquivo jvGame em uma pasta qualquer.

2) Criando o arquivo HTML

Usaremos o editor de textos para criarmos o arquivo HTML e escrevermos um modelo básico de um arquivo HTML. Nosso código HTML deve ficar assim:

<html>
<head>
<title>Jogo da velha com DHTML</title>
</head>
<body>
</body>
</html>

Essa é a estrutura básica de um arquivo HTML. Prepararemos essa estrutura para o nosso game.

A classe jvGame requer que escrevamos pouco HTML. Basta um elemento DIV com um atributo ID definido e resto será criado dinamicamente. Criaremos nossa DIV dentro do nosso Elemento BODY. Podemos dar qualquer valor para o ID da DIV.

Aqui definiremos como "myGame", o nosso elemento BODY deve ficar assim:

<body>
<div id="myGame"></div>
</body>

Feito isso, é hora de importar para o nosso arquivo HTML o arquivo com a definição da classe jvGame. Para isso usamos o elemento SCRIPT do HTML definindo para ele um atributo SRC com o caminho para esse arquivo como valor. Vamos escrever esse elemento dentro do elemento HEAD. Faremos assim:

<head>
<title>Jogo da velha com DHTML</title>
<script src="jvGame.js"></script>
</head>

Agora que incluímos o arquivo jvGame no nosso arquivo HTML podemos usar a classe jvGame que está definida nesse arquivo. Trabalharemos com essa classe e criaremos mais um elemento SCRIPT no nosso arquivo, mas dessa vez vamos escrevê-lo dentro do BODY, depois do nosso elemento DIV e não iremos definir um atributo SRC, pois iremos escrever o Javascript diretamente dentro dele.

O arquivo HTML deve estar assim:

<html>
<head>
<title>Jogo da velha com DHTML</title>
<script src="jvGame.js"></script>
</head>
<body>
<div id="myGame"></div>
<script>
</script>
</body>
</html>

Vamos então à classe jvGame:

Precisaremos de um objeto dessa classe. Para isso, vamos instanciar o objeto usando o construtor dessa classe que tem o mesmo nome da classe.

Esse construtor deve receber como parâmetro o valor da ID que definimos para o nosso DIV e nosso objeto deve ter o mesmo nome que usamos como valor desse ID. Ficará assim:

var myGame = new jvGame("myGame");

Agora que temos um objeto da classe jvGame, precisaremos configurar alguns de seus atributos.

O primeiro passo é "dizer" para o nosso objeto quais as imagens ele irá usar para criar o gráfico do jogo, para isso usamos o método "Players" dessa classe.

Esse método recebe 3 parâmetros sendo que o primeiro é o caminho para a imagem que representará o jogador 1, o segundo é o caminho para a imagem que representará o jogador 2 e o terceiro é o caminho da imagem que será exibida nas áreas livres. Escreveremos então o seguinte:

myGame.Players("jogador1.jpg","jogador2.jpg","livre.jpg");

Nota: Considerando que o nome das imagens que salvamos anteriormente sejam estes. As imagens poderiam ter outros nomes, mas, para isso, teríamos que mudar os parâmetros desse método com o nome das respectivas imagens salvas.

Com o objeto instanciado e as imagens definidas já podemos testar nosso jogo. Para iniciar o jogo usamos o método "Start". Esse método não recebe parâmetros. Nosso arquivo HTML ficará assim:

<html>
<head>
<title>Jogo da velha com DHTML</title>
<script src="jvGame.js"></script>
</head>
<body>
<div id="myGame"></div>
<script>
var myGame = new jvGame("myGame");

myGame.Players("jogador1.jpg","jogador2.jpg","livre.jpg");
myGame.Start();
</script>
</body>
</html>

Salve esse arquivo na mesma pasta que você salvou as imagens e o arquivo jvGame.js com extensão .htm ou .html e abra-o no navegador para testar o jogo.

Esperamos que tenha sido útil. Continuem criando jogos!

Glossário

  • Classe: Conjunto de propriedades (atributos) e ações (métodos) que serão manipulados durante a execução do programa.
  • Método: “Ações” que são desenvolvidas na classe que serão implementadas e manipuladas durante a execução do programa. Atributo: Propriedade ou característica de um objeto.
  • HTML: Hyper-Text Markup Language. Linguagem de marcação de hiper-texto. É a linguagem usada para criação de páginas web.
  • Javascript: Linguagem de programação client-side desenvolvida pela NetScape muito utilizada em páginas HTML.
  • DHTML: Dynamic Hyper-Text Markup Language. É o uso do HTML com o auxílio de uma linguagem de programação client-side (Nesse caso, Javascript) de forma a deixar a página HTML mais dinâmica.
  • Console: Video-game.
  • Desktop: PC’s de casa, não-móveis ou Computadores de Mesa.
  • Elemento HTML: Pode-se considerar como um objeto da página e são definidos pelas tags HTML.
Rodney Albuquerque

Rodney Albuquerque - Professor Universitário do curso de Ciência da Computação