Ir ao conteúdo
  • Cadastre-se
Beorlegui

Javascript Colisão em um jogo

Recommended Posts

Estou aprendendo Linguagem de programação e me deparei com uma dúvida, já tentei de todas as formas e não consegui. No pequeno joguinho, quando a bolinha encostasse no quadrado, apareceria o alerta dizendo game over e a bolinha voltaria à posição inicial.
Só consegui fazer a bolinha se mover, mas não o resto. Alguém poderia me ajudar com essa dúvida por favor?
Deixarei o código para darem uma olhada.

Obrigada.

<canvas width="600" height="400"></canvas>

<script>
	
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');

	pincel.fillStyle = 'lightblue';
	pincel.fillRect(0, 0, 600, 400);

	var x = 30;
	var y = 20;

	//Códigos do teclado:
	var esquerda = 37;
	var cima = 38;
	var direita = 39;
	var baixo = 40;

	//Taxa de incremento:
	var taxa = 5;
	var colisao = desenhaQuadrado;

	function desenhaQuadrado() {

		pincel.fillStyle = 'blue';
		pincel.beginPath();
		pincel.fillRect(50, 50, 50, 50);
		pincel.fillStroke = 'black';
		pincel.strokeRect(50, 50, 50, 50);

	}


	function desenhaBolinha(x, y, raio) {

		pincel.fillStyle = 'black';
		pincel.beginPath();
		pincel.arc(x, y, raio, 0, 2 * Math.PI);
		pincel.fill();

	}


	function limpaTela() {

		pincel.clearRect(0, 0, 600, 400);

	}


	function atualizaTela() {

		limpaTela();
		desenhaBolinha(x, y, 10);
		desenhaQuadrado();
	}

	setInterval(atualizaTela, 20);

	function setasDoTeclado(evento) {

		if(evento.keyCode == cima) {

			y = y - taxa;

		} else if (evento.keyCode == baixo) {

			y = y + taxa;

		} else if (evento.keyCode == esquerda) {

			x = x - taxa;

		} else if (evento.keyCode == direita) {

			x = x + taxa;

		}
	}

	if(desenhaBolinha == colisao) {

		alert('Você perdeu');

	}

	document.onkeydown = setasDoTeclado;

</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Beorlegui Olá

No seu teste de IF, você precisa comparar as posições X e Y.

Tem diversas formas de fazer a detecção da colisão

 

Recomendo dar uma lida nestas documentações:

https://developer.mozilla.org/kab/docs/Games/Techniques/2D_collision_detection

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection

 

Estas documentações são oficiais da Mozilla sobre colisões no javascript.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

De uma maneira bem grosseira e específica para o seu problema, você tem que testar se a área do círculo não está tocando a área do quadrado.5b27b64204667_formaodasformas.png.fceff9ded06af6dd0155a343ae5daca4.png

Esse if é bem grosseiro e resolve seu problema, porém não aconselho usar dessa maneira, tente refazer usando variáveis e diversos tamanhos de círculos e retângulos.

 

if(x > 50 - 10 && x < 110) {
			if (y > 50 - 10 && y < 110)
				alert('Você perdeu');

		}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×