bal - bal collision... kom er niet uit.
Wie hier heeft wat verstand van collisions? Mij gaat het blijkbaar boven mijn pet.
Ik heb een aantal ballen (div objecten met maximale border-radius), welke allemaal aan een js object gelinkt zijn.
Ze worden op random plekken neer gezet met een random snelheid, (x_inc en y_inc) en bewegen rond het scherm (x += x_inc en y += y_inc)
Nu wil ik dat ze van elkaar af stuiteren als ze elkaar raken,
Het detecteren van wanneer ze moeten stuiteren lukt wel.
Maar ik krijg ze niet op de goeie hoek weg gestuurd.
Dit is wat ik nutoe heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
var first_dx = first_x - second_x;
var first_dy = first_y - second_y;
var second_dx = second_x - first_x;
var second_dy = second_y - first_y;
var first_angle = Math.atan2(first_dx, first_dy) / Math.PI * 180;
var second_angle = Math.atan2(second_dx, second_dy) / Math.PI * 180;
first.x_inc = Math.sin(first_angle) * (first.x_inc + first.y_inc);
first.y_inc = Math.cos(first_angle) * (first.x_inc + first.y_inc) * -1;
second.x_inc = Math.sin(second_angle) * (second.x_inc + second.y_inc);
second.y_inc = Math.cos(second_angle) * (second.x_inc + second.y_inc) * -1;
var first_dy = first_y - second_y;
var second_dx = second_x - first_x;
var second_dy = second_y - first_y;
var first_angle = Math.atan2(first_dx, first_dy) / Math.PI * 180;
var second_angle = Math.atan2(second_dx, second_dy) / Math.PI * 180;
first.x_inc = Math.sin(first_angle) * (first.x_inc + first.y_inc);
first.y_inc = Math.cos(first_angle) * (first.x_inc + first.y_inc) * -1;
second.x_inc = Math.sin(second_angle) * (second.x_inc + second.y_inc);
second.y_inc = Math.cos(second_angle) * (second.x_inc + second.y_inc) * -1;
NOTE: Omdat iedere bal op een botsing controlleerd word dit script alleen uitgevoerd if first_y < second_y) daardoor word er wel 2x een botsing gemerkt maar word deze maar 1x afgehandeld.
Ik weet niet precies wat er verkeerd gaat, voornamelijk dat de ballen in elkaar springen en vervolgens binnen in elkaar gaan stuiteren als gekken.
Wie kan mij vertellen wat ik fout doe? Klopt de hele berekening niet of implementeer ik hem gewoon verkeerd?
Gewijzigd op 16/09/2010 11:33:40 door Johan Dam
En dat in het geval van loodrecht, deze dus ook loodrecht weer terug komt?
dat meen ik me te herrineren, maar zeker weten doe ik het niet ;-)
Johan Dam op 16/09/2010 11:48:30:
Als het andere object stil staat wel, maar geld het ook voor 2 bewegende objecten?
Weet niet. Kan je daar niet op Googlen? ;-)
http://en.wikipedia.org/wiki/Collision_detection
Ik weet niet hoe het zit met je wiskunde, maar dat zal je nodig hebben...
Verder kan je veel beter rekenen met vx en vy ipv met hoeken, scheelt veel gonio. Ook kan je van een bal beter een object maken.
Met mootools
Ik heb geen idee of het werkt, het is maar een opzet
Code (php)
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
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
<?php // highlighting
var Ball = new Class({
initialize: function(x, y, vx, vy) {
this.x = x;
thix.y = y;
this.vx = vx;
this.vy = vy;
this.create();
},
move: function() {
this.x += this.vx;
this.y += this.vy;
this.update();
},
create: function() {
// Teken de bal
},
update: function() {
// Update de locatie van de bal
}
});
var BallList = new Class({
balls: new Array(),
addBall: function(ball) {
this.balls.push(ball);
},
move: function() {
for(i in this.balls) {
balls[i].move();
}
}
});
var ball1 = new Ball(0,0, 10, 10);
var ball2 = new Ball(100, 100, -10, -10);
var list = new BallList();
list.addBall(ball1);
list.addBall(ball2);
?>
var Ball = new Class({
initialize: function(x, y, vx, vy) {
this.x = x;
thix.y = y;
this.vx = vx;
this.vy = vy;
this.create();
},
move: function() {
this.x += this.vx;
this.y += this.vy;
this.update();
},
create: function() {
// Teken de bal
},
update: function() {
// Update de locatie van de bal
}
});
var BallList = new Class({
balls: new Array(),
addBall: function(ball) {
this.balls.push(ball);
},
move: function() {
for(i in this.balls) {
balls[i].move();
}
}
});
var ball1 = new Ball(0,0, 10, 10);
var ball2 = new Ball(100, 100, -10, -10);
var list = new BallList();
list.addBall(ball1);
list.addBall(ball2);
?>
Gewijzigd op 16/09/2010 15:52:25 door Pim -
vx en vy gebruik ik ook, alleen heten ze bij mij x_inc en y_inc,
Met het hele object is niks mis, het gaat puur om de afhandeling van de detectie.
Graden gebruik ik omdat je toch moet weten waar de botsing plaats vind.
Zal straks als ik thuis ben de link bestuderen.
Maar wanneer je twee ballen hebt lijkt me dit toch handiger:
Code (php)
Gewijzigd op 16/09/2010 17:37:47 door Pim -
Het enige dat niet werkt is welke richting ze op moeten stuiteren na een botsing