JavaScript - Detectar choque entre circulos canvas HTML5

   
Vista:
Imágen de perfil de Isaac

Detectar choque entre circulos canvas HTML5

Publicado por Isaac (5 intervenciones) el 28/02/2015 21:47:01
Quisiera saber cómo puedo hacer que, teniendo dos círculos, como objetos independientes, los cuales están rebotando dentro del canvas de forma libre, cuando se encuentren reboten entre ellos y cambien su dirección.

Adjunto mi código JS para mi canvas, para que sepan cómo lo tengo planteado, si no se lee bien aquí, dejo adjunto el archivo JS, gracias:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// Función que crea un circulo.
function circle(x, y, r, color) {
   contexto.fillStyle = color;
   contexto.beginPath();
   contexto.arc(x, y, r, 0, Math.PI*2, true);
   contexto.closePath();
   contexto.fill();
}
 
// Función que crea un rectangulo. 
function rect(x, y, w, h, color) {
   contexto.fillStyle = color;
   contexto.fillRect(x, y, w, h);
}
 
// Función que crea un objeto pelota
function Pelota(x, y, r, color) {
   this.x = x;
   this.y = y;
   this.r = r;
   this.color = color;
   this.dx = 1;
   this.dy = 1.1;
   this.speed = 2;
   this.center = this.r/2;
 
   this.update = function() {
      if (this.x+this.center > ancho_rectangulo || this.x-this.center < 0) {
         this.dx = -this.dx;
      }
 
      if (this.y+this.center > alto_rectangulo || this.y-this.center < 0) {
         this.dy = -this.dy;
      }
 
      this.x += this.dx * this.speed;
      this.y += this.dy * this.speed;
   }
 
   this.draw = function() {
      circle(this.x, this.y, this.r, this.color);
   }
}
 
//Función que actualiza y dibuja la pelota.
function gameLoop() {
   limpiar();
 
   // Si (pelota.x > width) entonces clearInterval(intervalId);
   pelota1.update();
   pelota1.draw();
 
   pelota2.update();
   pelota2.draw();
}
 
// Función que limpia los pasos de la pelota
function limpiar() {
   contexto.fillStyle = "grey";
   rect(0, 0, ancho_rectangulo, alto_rectangulo);
}
 
// Función para iniciar el programa
function init() {
   canvas = document.getElementById("miCanvas");
   contexto = canvas.getContext("2d");
   ancho_rectangulo = canvas.width;
   alto_rectangulo = canvas.height;
 
   pelota1 = new Pelota(50, 50, 10, "silver");
   pelota2 = new Pelota(50, 250, 10, "black");
 
   setInterval(gameLoop, 20); //Llama a la función gameLoop cada 20 milisegundos de forma indefinida.
}
 
window.onload = init;
 
// Variables.
var canvas, contexto, ancho_rectangulo, alto_rectangulo;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Detectar choque entre circulos canvas HTML5

Publicado por MMan (2 intervenciones) el 28/02/2015 22:20:39
da1e9d3f3b668162eae9edb7a5356b07

http://www.sectormatematica.cl/contenidos/distancia.htm

funcion distancia (p1, p2 )
return d = sqrt ( (p2.x-p1.x)^2 + (p2.y-p1.y)^2) );

// Math.sqrt
/// Math.pow( num, 2 ) = num^2


funcion chocaron( pelota1, pelota2 )

si (pelota1.r + pelota2.r) > distancia (pelota1, pelota2 )
return true;

return false;

// un error en el dibujo... en vez de >... se puso <
----------

if chocaron (pelota1,pelota2) {
// cambia de direccion
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Isaac

Detectar choque entre circulos canvas HTML5

Publicado por Isaac (5 intervenciones) el 01/03/2015 00:24:44
Buena explicación, muchas gracias.

Y a qué altura de mi código hago la comprobación:

if chocaron (pelota1,pelota2) {
// cambia de direccion
}

Y si se cumple que se han chocado, como modifico la dirección de las pelotas?

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Detectar choque entre circulos canvas HTML5

Publicado por MMan (2 intervenciones) el 01/03/2015 02:16:20
segun tu codigo....

tienes 2 coordenads X, Y

this.dx = -this.dx;
this.dy = -this.dy;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar