Criando um jogo em Javascript [3/5] – Carros

Daremos continuidade à implementação em Javascript de uma versão do jogo da galinha do Atari.

No primeiro post, fizemos o pano de fundo do jogo.

Já no segundo post, fizemos o personagem principal, movendo-o a partir das setas do teclado e limitando até onde é possível ir.

Agora, vamos colocar alguns carros, que poderão colidir com o nosso personagem principal.

Carros

Colocaremos, sobre o nosso fundo, três carros:

Carrinho amareloCarrinho azulCarrinho de polícia

Essas imagens podem ser baixadas em:
http://a-dilminha.appspot.com/carrinho-amarelo.png
http://a-dilminha.appspot.com/carrinho-azul.png
http://a-dilminha.appspot.com/carrinho-policia.png

Precisamos inseri-las na página.

Para o nosso personagem principal, fizemos da seguinte maneira:

function desenhaImagem(){
   contexto.drawImage(imagem, x, y, imagem.width, imagem.height);
};

//personagem principal
var imagem = new Image();
imagem.src = "../../dilminha.png";
var x = 320;
var y = 400;
imagem.onload = desenhaImagem;

Para os carros, devemos fazer coisa parecida, alterando os valores do src, do x e do y. Então, teríamos o seguinte código:

//carrinho amarelo
var imagem2 = new Image();
imagem2.src = "../../carrinho-amarelo.png";
var x2 = -10;
var y2 = 300;
imagem2.onload = desenhaImagem;

//carrinho azul
var imagem3 = new Image();
imagem3.src = "../../carrinho-azul.png";
var x3 = 560;
var y3 = 200;
imagem3.onload = desenhaImagem;

//carrinho de polícia
var imagem4 = new Image();
imagem4.src = "../../carrinho-policia.png";
var x4 = 10;
var y4 = 100;
imagem4.onload = desenhaImagem;

Repare nos números para o x e y em cada imagem. Quanto maior o x, mais para direita. Quanto maior o y, mais para baixo. Assim, o carrinho amarelo fica na faixa de baixo, bem à esquerda (até um pouco fora da tela). Já o carro azul é posicionado na faixa do meio e à direita. O carrinho de polícia fica na fixa de cima, à esquerda.

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

Imagem da Dilminha sobre o fundo

Organizando o código com objetos

Ao testarmos o código acima, vamos perceber que os carrinhos não foram exibidos! Que coisa! Mas por que?

O que acontece é que tentamos reutilizar o código da função desenhaImagem mas deixamos referências fixas às variáveis x, y e imagem, que são referentes ao personagem principal.

Poderíamos deixar o x, o y e a imagem como parâmetros da função desenhaImagem. Mas vamos usar uma abordagem diferente para organizar o código: objetos.

Essas imagens dos personagens de um jogo são comumente chamadas de sprites.

Então, vamos criar um construtor Javascript chamado Sprite que terá todas a estrutura comum entre o personagem principal e cada um dos carros:

function Sprite(caminhoDaImagem, xInicial, yInicial) {
	this.x = xInicial;
	this.y = yInicial;

	this.imagem = new Image();
	this.imagem.src = caminhoDaImagem;

	var that = this;
	this.imagem.onload = function() {
		that.largura = that.imagem.width;
		that.altura = that.imagem.height;
		that.desenhaImagem();
	}

	this.desenhaImagem = function() {
		contexto.drawImage(this.imagem, this.x, this.y, this.largura, this.altura);
	}
}

Como parâmetro desse construtor recebemos o caminho da imagem, o x inicial e o y inicial. Através do this, guardamos o x e y e criamos uma imagem usando o caminho recebido como parâmetro.

No onload, função chamada assim que uma imagem é carregada, não temos acesso ao this. Por isso, utilizamos um truque muito comum: guardamos o this em uma variável chamada that. A variável that fica acessível porque é carregada na definição da função através do mecanismo chamado de closure.

Para criar o personagem principal e os carros, teremos algo como:

var dilminha = new Sprite("../../dilminha.png", 320, 400);

var carrinhoAmarelo = new Sprite("../../carrinho-amarelo.png", -10, 300);

var carrinhoAzul = new Sprite("../../carrinho-azul.png", 560, 200);

var carrinhoPolicia = new Sprite("../../carrinho-policia.png", 10, 100);

Invocamos o construtor Sprite com o new, para criar os objetos do personagem principal e de cada carro. Além disso, demos nomes melhores às variáveis.

Devemos alterar a função que passamos ao setInterval para que sejam usados os objetos que acabamos de criar:

setInterval(function(){
	desenhaFundo();
	dilminha.desenhaImagem();
	carrinhoAmarelo.desenhaImagem();
	carrinhoAzul.desenhaImagem();
	carrinhoPolicia.desenhaImagem();
},50);

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

Dilminha e carros

Movendo o mundo

Temos um problema: nem o personagem principal nem os carros estão movimentando-se. Precisamos efetuar algumas alterações no código.

No construtor Sprite, vamos adicionar uma função move, que recebe as variações das posições x e y e trata os limites:

function Sprite(caminhoDaImagem, xInicial, yInicial) {

	//restante do código...

	this.move = function(dx, dy) {
		this.x += dx;
		this.y += dy;
		//limites
		if(this.x > canvas.width) {
			this.x = -this.largura;
		} else if(this.x < -this.largura) {
			this.x = canvas.width;
		}
		if(this.y > canvas.height - this.altura + 5) {
			this.y -= dy;
		} else if(this.y <= -5) {
			this.y = canvas.height - this.altura;
		}
	}
}

No trecho de código que trata o pressionamento das setas do teclado, vamos usar o objeto do personagem principal:

document.onkeydown = function(event) {
	switch(event.which) {
	case 37: //pra esquerda
		dilminha.move(-10, 0);
		break;
	case 38: //pra cima
		dilminha.move(0, -10);
		break;
	case 39: //pra direita
		dilminha.move(10, 0);
		break;
	case 40: //pra baixo
		dilminha.move(0, 10);
		break;
	}
}

No fim da função do setInterval, vamos fazer com que os carrinhos amarelo e o da polícia movam-se para a direita e com que o azul mova-se para a esquerda (usando um valor negativo). Quanto maior o valor passado, mais rápido o carro será movido:

setInterval(function(){
	//desenha fundo e imagens...

	carrinhoAmarelo.move(7, 0);
	carrinhoAzul.move(-5, 0);
	carrinhoPolicia.move(10, 0);
},50);

Os limites horizontais são tratados na função move do Sprite, fazendo com que os carros apareçam à esquerda ao ultrapassar o limite da direita e vice-versa. O efeito da movimentação é visualizado na próxima chamada da função do setInterval.

O resultado do código acima está disponível em:
http://a-dilminha.appspot.com/passo-a-passo/carros/12-move-tudo.html

Movendo Dilminha e carros

Tem mais

Movemos nosso personagem principal a partir do teclado. E os carros são movidos automaticamente.

Mas veja no gif acima: a colisão do nosso personagem com o carro da polícia não ocasiona nada. Deveria ser um GAME OVER. Esse é o assunto da próxima semana!

Anúncios

2 comentários sobre “Criando um jogo em Javascript [3/5] – Carros

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