Wikipedia: “An elastic collision is a collision in which the total kinetic energy of the colliding bodies after collision is equal to their total kinetic energy before collision.”

In this case ball collision by manipulating DOM elements with CSS animations. This is a basic game mechanic used in many games like Snooker or Hunderds.

Although this tutorial is written in javascript, you should be able to use the same techniques and concepts in almost any development environment. Based on a flash tutorial Managing ball vs ball collision with Flash by Emanuele Feronato.


add the balls

In the first function we call, we add the balls to the scene. Just creating some DIV elements, give them some properties and push them to an array to access them later on. We also start the render if the last element is added. To keep the DIV elements in style we set some CSS properties like “border-radius”.

var ballsArray =[];
var maxBalls = 5;

function initBalls()
	//ADD maxBalls
	for (var i=0;i<maxBalls;i++)
		var ball = document.createElement("div");
		ball.className ="ball";

		ball.left =Math.round(Math.random()*window.innerWidth-30);
		ball.top = Math.round(Math.random()*390);
		ball.collision = 0;
                ball.mass = 1;

                //RANDOM START SPEED
    	        ball.xspeed = Math.round(Math.random()*8-4);
    	        ball.yspeed = Math.round(Math.random()*8-4);



                if(ballsArray.length == maxBalls){tick();}



move the balls

In this function we loop trough the Array which stores the balls an animate them by changing some CSS properties. First we check if any ball reaches the end of the screen. If so we inverse speed for the x and y direction. Next we get the speed value for the actual ball and apply it to the current position. This function is called in the render tick so it is executed on every frame.

function moveBall()
                //for each ball in the array
		for (var i=0;i<maxBalls;i++)
                        //Check for a collision with boundaries
			if (ballsArray[i].left<0) {ballsArray[i].left = 0;ballsArray[i].xspeed *= -1;}		// BOUNDRIES Left
			if (ballsArray[i].left>window.innerWidth-30) {ballsArray[i].left = window.innerWidth-30;ballsArray[i].xspeed *= -1;}	// BOUNDRIES Right
			if (ballsArray[i].top<0) {ballsArray[i].top = 0;ballsArray[i].yspeed *= -1;}		// BOUNDRIES Top
			if (ballsArray[i].top>window.innerHeight-30) {ballsArray[i].top = innerHeight-30;ballsArray[i].yspeed *= -1;}	// BOUNDRIES Bottom

			ballsArray[i].left += ballsArray[i].xspeed;
			ballsArray[i].top += ballsArray[i].yspeed;

			//ballsArray[i].style.WebkitTransform = "translate("+ballsArray[i].left+"px,"+ballsArray[i].top+"px)";//2D Transform
			ballsArray[i].style.WebkitTransform = "translate3D("+ballsArray[i].left+"px,"+ballsArray[i].top+"px,0px)";//3D Transform fo better Performance?? -> "testing"
            ballsArray[i].style.MozTransform = "translate3D("+ballsArray[i].left+"px,"+ballsArray[i].top+"px,0px)";
   		//ball.style.WebkitTransform = "translate("+ball.dx+"px,"+ball.dy+"px)";



ball collision

There is a whole lot of math in this function. It gets called every time two balls collide together, ball and ball2. If you want to understand how this works, you could read these articles “The Physics of an Elastic Collision”  also “real-world-physics-problems“.

function manage_bounce(ball, ball2) {
    dx = ball.left-ball2.left;
    dy = ball.top-ball2.top;
    collisionision_angle = Math.atan2(dy, dx);
    magnitude_1 = Math.sqrt(ball.xspeed*ball.xspeed+ball.yspeed*ball.yspeed);
    magnitude_2 = Math.sqrt(ball2.xspeed*ball2.xspeed+ball2.yspeed*ball2.yspeed);
    direction_1 = Math.atan2(ball.yspeed, ball.xspeed);
    direction_2 = Math.atan2(ball2.yspeed, ball2.xspeed);
    new_xspeed_1 = magnitude_1*Math.cos(direction_1-collisionision_angle);
    new_yspeed_1 = magnitude_1*Math.sin(direction_1-collisionision_angle);
    new_xspeed_2 = magnitude_2*Math.cos(direction_2-collisionision_angle);
    new_yspeed_2 = magnitude_2*Math.sin(direction_2-collisionision_angle);
    final_xspeed_1 = ((ball.mass-ball2.mass)*new_xspeed_1+(ball2.mass+ball2.mass)*new_xspeed_2)/(ball.mass+ball2.mass);
    final_xspeed_2 = ((ball.mass+ball.mass)*new_xspeed_1+(ball2.mass-ball.mass)*new_xspeed_2)/(ball.mass+ball2.mass);
    final_yspeed_1 = new_yspeed_1;
    final_yspeed_2 = new_yspeed_2;
    ball.xspeed = Math.cos(collisionision_angle)*final_xspeed_1+Math.cos(collisionision_angle+Math.PI/2)*final_yspeed_1;
    ball.yspeed = Math.sin(collisionision_angle)*final_xspeed_1+Math.sin(collisionision_angle+Math.PI/2)*final_yspeed_1;
    ball2.xspeed = Math.cos(collisionision_angle)*final_xspeed_2+Math.cos(collisionision_angle+Math.PI/2)*final_yspeed_2;
    ball2.yspeed = Math.sin(collisionision_angle)*final_xspeed_2+Math.sin(collisionision_angle+Math.PI/2)*final_yspeed_2;



render tick

This function is called every frame to animate all the Objects on the screen. The function check first if the distance between any balls is greater than the diameter. If not it collides, calls the ball collision function and passes the two colliding balls over. We also call the moveBall & tick function to keep the animation running.

function tick()

     for (x=0; x<=maxBalls; x++) 
        for (y=x+1; y<maxBalls; y++) 
        	distance_x = Math.abs(ballsArray[x].left-ballsArray[y].left);
        	distance_y = Math.abs(ballsArray[x].top-ballsArray[y].top);
        	distance = Math.sqrt(distance_x*distance_x+distance_y*distance_y);

        	if (distance<=31 && (ballsArray[x].collision == 0 || ballsArray[y].collision == 0)) 
        		ballsArray[x].collision = 1;
                ballsArray[y].collision = 1;
                manage_bounce(ballsArray[x], ballsArray[y]);
        	else if (distance>31) 
                ballsArray[x].collision = 0;
                ballsArray[y].collision = 0;



    requestAnimFrame( tick );//RUN THE NEXT TICK




If your game mechanic bases on elastic collision this is a great way of doing it. Full control over the code, light weight, fast and simple.