Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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>

 

Editado por DiF

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

Obrigada, vou dar uma olhada e tentar entender.

:)

  • Curtir 1

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






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

×