Javascript Colisão em um jogo

[Beorlegui]

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>

 

[DiF]

@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.

 

[Beorlegui]

Obrigada, vou dar uma olhada e tentar entender.

[CiroboyBR]

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.

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');

		}