Jogo de Simulação.

1. Jogo de Simulação.

luisrcs
(usa Linux Mint)

Enviado em 27/08/2015 - 18:07h

Estou tentando criar um joguinho que simule física e gravidade, o qual uma é atraída por outra e ocorre uma colisão, mas não tô conseguindo fazer a bola preta sempre seguir a branca.

Segue o código:



<html>

	<head>

		<meta charset="UTF-8" /> 

		<script>

			function draw(){ //desenha na tela

				//posição x e y da bola1

				var x = 400;

				var y = 300;

				//deslocamento da bola1

				var dx = 0;

				var dy = 0;

				//posição x e y da bola2

				var x2 =  700;

				var y2 = 500;

				//deslocamento da bola2

				var dx2 = 0;

				var dy2 = 0;

				//função que anima as bolas

				function animate(){

					//atribui o deslocamento a posição x e y

					x += dx;

					y += dy;

					x2 += dx2;

					y2 += dy2;

					//retorna a diferença entre a distâncias das bolas

					var a = y2-y;

					var b = x2-x;

					//garante que a não haverá divisão por zero

					if(a == 0){

						a = 1;

					}

					if(b == 0){

						b = 1;

					}

					//garante diferença positiva entre as distâncias

					if(a < 0){

						a = -a;

					}

					if(b < 0){

						b = -b;

					}

					//tenta fazer com que a bola2 siga a bola1 (mas está errado e não consegui concertar)

					if(a/b > 1){

						if(dx2 <= 0){

							dx2 = -b/a;

						}

						else{

							dx2 = b/a;

						}

						if(dy2 <= 0){

							dy2 = -1;

						}

						else{

							dy2 = 1;

						}

					}

					else{

						if(dy2 <= 0){

							dy2 = -a/b;

						}

						else{

							dy2 = a/b;

						}

						if(dx2 <= 0){

							dx2 = -1;

						}

						else{

							dx2 = 1;

						}

					}

					//garante que quando a bola2 atinja a bola1, esta etre em deslocamento

					if(((x-x2 || x2-x) <= 5 && (x-x2 || x2-x) >= 0) && (((y-y2 || y2-y) <= 5) && (y-y2 || y2-y) >= 0)){

						if(dx < 0){

							dx = (dx2-0.1);

						}

						else{

							dx = dx2+0.1;

						}

						if(dy < 0){

							dy = (dy2-0.1);

						}

						else{

							dy = dy2+0.1;

						}

					}

					//limita o espaço na tela para as bolas circularem

					if(x <= 0 || x >= 1000){

						dx = -dx;

					}

					if(y <= 0 || y >= 630){

						dy = -dy;

					}

					if(x2 <= 0 || x2 >= 1000){

						dx2 = -dx2;

					}

					if(y2 <= 0 || y2 >= 630){

						dy2 = -dy2;

					}



					ball(); //chama o desenho da bola1

					ball2(); //chama o desenho da bola2

					window.requestAnimationFrame(animate); //garante a animação das bolas (chamando a função recursivamente)

				}

				function ball(){ //desenha a bola1 com as parâmetros processados

					var bola1 = document.getElementById('bola1');

					bola1.style.top = y+'px';

					bola1.style.left = x+'px';

				}

				function ball2(){ //desenha a bola2 com as parâmetros processados

					var bola = document.getElementById('bola2');

					bola2.style.top = y2+'px';

					bola2.style.left = x2+'px';

				}

				animate(); //chama a função de animação

			}

		</script>

		<style>

			body{

				background-color: green;

			}

			#bola1{

				position: absolute;

				width: 5px;

				height: 5px;

				border: solid black 1px;

				border-radius: 50px;

				top: 0;

				left: 0;

				background-color: white;

				z-index: 1;

			}

			#bola2{

				position: absolute;

				width: 10px;

				height: 10px;

				border: solid black 1px;

				border-radius: 50px;

				top: 0;

				left: 0;

				background-color: black;

				z-index: 1;

			}

			#posicao{

				position: absolute;

				width: 200px;

				height: 150px;

				font-family: courier new;

				font-size: 14px;

				top: 0;

				right: 0px;

				background-color: white;

				z-index: 1;

			}

		</style>

	</head>   

	<body onload='draw();'>

		<div id='bola1'></div>

		<div id='bola2'></div>

	</body>

</html>



Agradeço muito a quem poder me ajudar.