CODEWITHSUNDEEP
javascript
Kaloyan Dimov
Kaloyan Dimov

Reputation: 57

Collision detection of two balls using images

I am a beginner in JS programming and I have an assignment to do something like a screensaver. I already have two balls bouncing around on the screen but I need an algorithm to make them bounce off each other. I went through the articles here but the code is not sufficient.. or at least for me. Here is the code.

<html> 
<head> 
<style type="text/css"> 
    .b {position:absolute; left:0px; top:0px; width:50px; height:50px;}
    .c {position:absolute; left:0px; top:0px; width:50px; height:50px;}
</style> 
<SCRIPT language="javascript"> 


    var x =Math.random();
    var y  =0 ;
    var h  =12;
    var v  =22;
    var g  =1;
    var r  =0;
    var q  =0;
    var gg = 0;


    var u = Math.random() ;
    var i =222;
    var o = 12;
    var p = 22;
    var l  =1;
    var k =0;
    var j = 0;
    var mm = 0;

    var height=window.innerHeight;
    var width=window.innerWidth;
    function moveball() 
    {
        var b1 = document.getElementById('ball');

        v=v+g;r=q;q=y;
        if(y==r&&y>394&&g==5)return;
        x=x+h;y=y+v;
        if(x>width){x=width;h=h*-1;}
        if(y>height){y=height;v=v*-1;}
        if(x<0){x=0;h=h*-1;}
        if(y<0){y=0;v=v*-1;}
        if(v==-26&&gg==5){gg=0;g=5;}
        b1.style.top=y + 'px';
        b1.style.left=x + 'px';

        var b2 = document.getElementById('ball2');

        p=p+l;k=j;j=i;
        if(i==k&&i>394&&l==5)return;
        u=u+o;i=i+p;
        if(u>width){u=width;o=o*-1;}
        if(i>height){i=height;p=p*-1;}
        if(u<0){u=0;o=o*-1;}
        if(i<0){i=0;p=p*-1;}
        if(p==-26&&mm==5){mm=0;l=5;}
        b2.style.top=i + 'px';
        b2.style.left=u + 'px';
        t=setTimeout("moveball()",32);


}

</script> 
</head> 
<body onLoad="moveball();" > 

    <div id="ball" class="b"><img src="ballA.gif" width="50" height="50"></div> 
    <div id="ball2" class="c"><img src="trol.png" width="50" height="50"></div> 


</body>

As far as I can understand my problem is that I am not handling balls that have been created by js2Draw but I am using images of balls. If you have any idea how I can do that please help I am desparate.

Upvotes: 3

Views: 941

Answers (1)

Floris
Floris

Reputation: 46435

Right now your code allows the balls to bounce off the "walls" of your screen, but not each other. What you need to do is calculate when they get too close - that is, their centers are closer than their diameter apart.

You're making life more difficult for yourself (and for me...) by using an inconvenient naming convention - instead of having x1, x2 for the x coordinate of balls 1, 2 (even better, have x[i] for the coordinate of the ith ball), you are using different letters. I won't try to fix that but I would recommend you will get better code when you use sensible variables.

So right now you have an object at (x,y) with velocity (h,v), and a second object at (u,i) with velocity (o,p). We need to know if these two objects will "collide" during the next move step. That is - is the distance of these balls after their move step closer than 50? If a collision occurs, we can swap the velocities of balls 1 and 2 - that is approximately what happens in an elastic collision:

var xnew = x + h;
var ynew = y + v;
var unew = u + o;
var inew = i + p;
var newDist = Math.sqrt(Math.pow(xnew-unew,2) + Math.pow(ynew-inew,2));
if (newDist < 50) {
  v1x = o;
  v1y = p;
  o = h; p = v; h = v1x; v = v1y;
}

I added these lines just before you update b2 position, and it shows that things "pretty much" work. You would want to re-arrange your code a little bit so you do this calculation before updating either position of b1 or b2, but the general gist should be obvious from this code (which does seem to produce roughly what you want, even if the physics isn't quite right - but then this is a screensaver, not a physics experiment).

Upvotes: 2

Related Questions