Criando um jogo em Javascript [1/5] – Fundo

Por que a galinha atravessou a rua?

Certa vez, durante uma de minhas aulas, um aluno disse que um dos seus objetivos era fazer um joguinho. Pergunto se poderia ajudá-lo. Claro!

Jogos são complicados de programar. Muito esforço e conhecimento são necessários.

Pensei sobre um jogo simples, pra facilitar a implementação o máximo possível. Pelas restrições da tecnologia da época, os jogos do Atari não tinha grandes complicações. Aí, lembrei de um post em que Henrique Lobo Weissmann implementava o Freeway, aquele jogo da galinha atravessando a rua do Atari, manipulando um canvas do HTML5 com Javascript.

Resolvi fazer a minha versão, com uma abordagem e um tema um pouco diferentes.

Cenário com canvas do HTML5

Para fazer o cenário do jogo, vamos utilizar a tag canvas do HTML5:

<html>
  <body>
    <canvas id="canvas" width="640" height="480"
      style="border: solid 1px black; margin: 0px auto; display: block;"></canvas>
  </body>
</html>

É importante declarar a largura (width) e altura (height) diretamente no canvas, para que os desenhos não fiquem distorcidos. Através do atributo style, adicionamos uma borda, retiramos as margens superior e inferior e fizemos o canvas ocupar a linha toda. Não é a maneira ideal de declarar CSS, mas pra gente é o suficiente…

O resultado do código acima está disponível em:
http://a-dilminha.appspot.com/passo-a-passo/iniciando/1-canvas.html.

1-canvas

Colorindo o fundo com JS

Vamos colorir o canvas com um cinza escuro, para que seja o asfalto do nosso cenário.

Para isso, utilizaremos JavaScript, declarado dentro de uma tag script:

<html>
  <body>
    <canvas ...></canvas>
    <script>
      //nosso js aqui...
    </script>
  </body>
</html>

Nosso código JavaScript ficará diretamente no HTML. Não é o ideal, mas serve para o nosso caso…

Dentro da tag script, vamos obter o objeto DOM do canvas pelo id e, a partir desse, um context 2D, que podemos utilizar para desenhar pontos, retângulos, pixels e outras coisas.

var canvas = document.getElementById("canvas");
var contexto = canvas.getContext("2d");

A partir do context, vamos configurar a propriedade fillStyle com um cinza escuro e desenhar um retângulo, preenchendo todo a largura e altura do canvas, com a função fillRect.

//preenche o fundo com cinza escuro
contexto.fillStyle = "dimgray";
contexto.fillRect(0, 0, canvas.width, canvas.height);

O resultado do código acima está disponível em:
http://a-dilminha.appspot.com/passo-a-passo/iniciando/2-fundo.html

2-fundo

Desenhando as calçadas

Usaremos um cinza mais claro para preencher um retângulo no topo e um no fim do canvas que serão as calçadas:

//calcada superior
contexto.fillStyle = "lightgray";
contexto.fillRect(0, 0, canvas.width, 80);

//calcada inferior
contexto.fillStyle = "lightgray";
contexto.fillRect(0, 380, canvas.width, 100);

Os parâmetros da função fillRect são:

  • o x inicial, da esquerda para a direita
  • o y inicial, do topo para baixo
  • a largura do retângulo em px
  • a altura do retângulo em px

O resultado do código acima está disponível em:
http://a-dilminha.appspot.com/passo-a-passo/iniciando/3-calcadas.html

3-calcadas

Desenhando as faixas da rua

Através do fillRect, vamos desenhar pequenos retângulos brancos de 20 px de largura e de 4 px de altura. Teremos duas faixas, uma superior e uma inferior, separando a rua em três pistas.

//faixas
contexto.fillStyle = "white";
for(var i = 0; i < 25; i++){
  //faixa superior
  contexto.fillRect(i*30-5, 185, 20, 4);

  //faixa inferior
  contexto.fillRect(i*30-5, 280, 20, 4);
}

O resultado do código acima está disponível em:
http://a-dilminha.appspot.com/passo-a-passo/iniciando/4-faixas.html

4-faixas

Tem mais

Fique ligado(a), que não acabamos ainda! Esse é apenas o primeiro de uma série de posts!

Anúncios

8 comentários sobre “Criando um jogo em Javascript [1/5] – Fundo

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s