Piece of code: Math balls look at

Hoje começa uma nova seção no site chamada Piece of Code.

Você já jogou Math balls? Seu objetivo no jogo é destruir bolas com números de acordo com o fundo do jogo. Se aparece a palavra even, você destrói as bolas pares. Se odd, as impares. Clique aqui para jogar.

Não sei se você reparou mas, enquanto você move o mouse sobre a tela do jogo, as bolas olham para o ponteiro do mouse. Quando uma bola morre, elas olham para a bola que morreu. Hoje vamos criar esse efeito.

Abaixo vc pode conferir uma demo com o efeito funcionando:

Mova o mouse sobre o desenho…

Código:

Abaixo você confere o código (comentado) da demo que você viu acima.

import flash.events.MouseEvent;

stage.addEventListener(MouseEvent.MOUSE_MOVE, olhaMouse);

function olhaMouse(e:MouseEvent):void{
	// O olho da esquerda (eye1) começa na posição (153,144);
	// O olho da direita (eye2) começa na posição (241,144);
	
	// Calcula a distancia em X entre o mouse e o olho1;
	var dx:Number = mouseX - eye1.x;
	// Calcula a distancia em Y entre o mouse e o olho1;
	var dy:Number = mouseY - eye1.y;
	// Calcula o angulo;
	var radians:Number = Math.atan2(dy,dx);
	/* Move o olho1 tendo como referencia a posição
	 * inicial do olho (153,144);
	 *
	 * O valor 15 é a distancia que a pupila deve percorrer
	 * para chegar a borda do olho;
	 * Cheguei nesse valor subtraindo o raio do olho (25)
	 * pelo raio da pupila (10);
	*/
	eye1.x = 153 + Math.cos(radians) * 15;
	eye1.y = 144 + Math.sin(radians) * 15;
	
	/* As linhas abaixo apenas repetem os passos acima
	 * para o olho da direita (eye2);
	 */

	dx = mouseX - eye2.x;
	dy = mouseY - eye2.y;
	radians = Math.atan2(dy,dx);
	eye2.x = 241 + Math.cos(radians) * 15;
	eye2.y = 144 + Math.sin(radians) * 15;
}

Você pode baixar o projeto abaixo:

Download

Mesma logica, diversas aplicações…

A logica utilizada para criar esse efeito já foi mostrada (com mais detalhes) em outro post do site, onde explico como criar o seguinte efeito:

Controles:
Clique sobre a tela para começar…
S: Atira.
Setas: Move a nave.

Você pode conferir o outro post clicando aqui.

Qualquer coisa, comenta ai…
Ate mais,