scottschiller/js-ball-collision.html

## js-ball-collision.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">

body {
 font:76% normal verdana,arial,tahoma;
}

h1, h2 {
 margin:0px;
 font-size:1.2em;
}

p {
 margin:0px 0px 1em 0px;
 padding:0px;
}

.balls img {
 position:absolute;
 width:12px;
 height:12px;
}

</style>
<script type="text/javascript">

// <![CDATA[

var balls = [];
var canvasX = 0;
var canvasY = 0;
var timer = null;
var m_lastX = 0;
var m_lastY = 0;
var M_SPACE = 24;
var B_VMIN = 5;
var B_VMAX = 5;
var B_WIDTH = 13;
var B_HEIGHT = 13;

function rnd(n) {
  return Math.random()*n;
}

function rndI(n) {
  return parseInt(rnd(n));
}

function createBall(oParent) {
  oParent.appendChild(balls[0].cloneNode(false));
  initBall(balls[balls.length-1]);
}

function createBallAtMouse(e) {
  e = e?e:event;
  createBall(document.getElementById('ball-container'));
  with (balls[balls.length-1]) {
    _x = e.clientX;
    _y = e.clientY;
  }
}

function initBall(oBall) {
  oBall._x = rnd(canvasX);
  oBall._y = rnd(canvasY);
  oBall._vX = B_VMIN + rnd(B_VMAX) * (Math.random() > 0.5 ? 1 : -1);
  oBall._vY = B_VMIN + rnd(B_VMAX);
}

function moveBall(oBall) {
  oBall._x += oBall._vX;
  oBall._y += oBall._vY;
  oBall.style.left = oBall._x + 'px';
  oBall.style.top = oBall._y + 'px';
  if ((oBall._vX > 0 && oBall._x + oBall._vX + B_WIDTH > canvasX) || (oBall._vX < 0 && oBall._x + oBall._vX < 0)) {
    // horizontal bounce
    oBall._vX *= -1;
  }
  if ((oBall._vY > 0 && oBall._y + oBall._vY + B_HEIGHT > canvasY) || (oBall._vY < 0 && oBall._y + oBall._vY < 0)) {
    // vertical bounce
    oBall._vY *= -1;
  }
}

function animateStuff() {
  for (var i=balls.length; i--;) {
    moveBall(balls[i]);
  }
  collisionCheck();
}

function isColliding(ball1, ball2) {
  if (Math.abs(ball1._x - ball2._x) < B_WIDTH && Math.abs(ball1._y - ball2._y) < B_HEIGHT) {
    /*
     * we have a collision!
     * edge case to consider: balls may get stuck colliding back and forth
     * between each other for a few frames if they don't fully "separate"
     * from each other in one frame of motion.
    */
    return true;
  } else {
    return false;
  }
}

function collisionCheck() {
  // simple loop through all the ball objects, comparing coordinates
  var i, j;
  for (i = balls.length; i--;) {
    for (j = balls.length; j--;) {
      if (j !== i) { // don't compare each ball to itself
        if (isColliding(balls[j], balls[i])) {
          // bounce the ball based on its dominant direction (horizontal or vertical movement)
          if (Math.abs(balls[j]._vX) > Math.abs(balls[j]._vY)) {
            // moving more horizontally
            balls[j]._vX *= -1;
          } else if (Math.abs(balls[j]._vY) > Math.abs(balls[j]._vX)) {
            // moving more vertically
            balls[j]._vY *= -1;
          } else {
            // edge case: if identical speed on x/y, bounce both
            balls[j]._vX *= -1;
            balls[j]._vY *= -1;
          }
        }
      }
    }
  }
}

function startAnimation() {
  if (!timer) {
    timer = setInterval(animateStuff,20);
  }
}

function stopAnimation() {
  if (!timer) {
    return false;
  }
  clearInterval(timer);
  timer = null;
}

function mouseDown(e) {
  e = e?e:event;
  m_lastX = e.clientX;
  m_lastY = e.clientY;
  document.onmousemove = mouseMove;
  document.onmouseup = mouseUp;
}

function mouseMove(e) {
  e = e?e:event;
  if (Math.abs(e.clientX - m_lastX) > M_SPACE || Math.abs(e.clientY - m_lastY) > M_SPACE) {
    m_lastX = e.clientX;
    m_lastY = e.clientY;
    createBallAtMouse(e);
  }
  return false;
}

function mouseUp() {
  document.onmousemove = null;
  document.onmouseup = null;
}

function init() {
  balls = document.getElementById('ball-container').getElementsByTagName('img');
  for (var i=balls.length; i--;) {
    initBall(balls[i]);
  }
  getWindowCoords();
  startAnimation();
  document.onmousedown = mouseDown;
}

getWindowCoords = (navigator.userAgent.match(/opera/i) || navigator.userAgent.match(/safari/i)) ? function() {
  canvasX = window.innerWidth;
  canvasY = window.innerHeight;
} : function() {
  canvasX = document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth;
  canvasY = document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;
}

window.onresize = getWindowCoords;
window.onload = init;

// ]]>

</script>
</head>
<body>

<h1>Interval-based animation</h1>

<p>
 Click and drag to create more.
</p>

<p>
 <button onclick="startAnimation()">Start</button>
 <button onclick="stopAnimation()">Stop</button>
</p>


<div id="ball-container" class="balls">
 <img src="http://www.schillmania.com/content/projects/javascript-animation-2/demo/ball.gif" alt="" />
</div>

</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
	<style type="text/css">

	body {
	font:76% normal verdana,arial,tahoma;
	}

	h1, h2 {
	margin:0px;
	font-size:1.2em;
	}

	p {
	margin:0px 0px 1em 0px;
	padding:0px;
	}

	.balls img {
	position:absolute;
	width:12px;
	height:12px;
	}

	</style>
	<script type="text/javascript">

	// <![CDATA[

	var balls = [];
	var canvasX = 0;
	var canvasY = 0;
	var timer = null;
	var m_lastX = 0;
	var m_lastY = 0;
	var M_SPACE = 24;
	var B_VMIN = 5;
	var B_VMAX = 5;
	var B_WIDTH = 13;
	var B_HEIGHT = 13;

	function rnd(n) {
	return Math.random()*n;
	}

	function rndI(n) {
	return parseInt(rnd(n));
	}

	function createBall(oParent) {
	oParent.appendChild(balls[0].cloneNode(false));
	initBall(balls[balls.length-1]);
	}

	function createBallAtMouse(e) {
	e = e?e:event;
	createBall(document.getElementById('ball-container'));
	with (balls[balls.length-1]) {
	_x = e.clientX;
	_y = e.clientY;
	}
	}

	function initBall(oBall) {
	oBall._x = rnd(canvasX);
	oBall._y = rnd(canvasY);
	oBall._vX = B_VMIN + rnd(B_VMAX) * (Math.random() > 0.5 ? 1 : -1);
	oBall._vY = B_VMIN + rnd(B_VMAX);
	}

	function moveBall(oBall) {
	oBall._x += oBall._vX;
	oBall._y += oBall._vY;
	oBall.style.left = oBall._x + 'px';
	oBall.style.top = oBall._y + 'px';
	if ((oBall._vX > 0 && oBall._x + oBall._vX + B_WIDTH > canvasX) \|\| (oBall._vX < 0 && oBall._x + oBall._vX < 0)) {
	// horizontal bounce
	oBall._vX *= -1;
	}
	if ((oBall._vY > 0 && oBall._y + oBall._vY + B_HEIGHT > canvasY) \|\| (oBall._vY < 0 && oBall._y + oBall._vY < 0)) {
	// vertical bounce
	oBall._vY *= -1;
	}
	}

	function animateStuff() {
	for (var i=balls.length; i--;) {
	moveBall(balls[i]);
	}
	collisionCheck();
	}

	function isColliding(ball1, ball2) {
	if (Math.abs(ball1._x - ball2._x) < B_WIDTH && Math.abs(ball1._y - ball2._y) < B_HEIGHT) {
	/*
	* we have a collision!
	* edge case to consider: balls may get stuck colliding back and forth
	* between each other for a few frames if they don't fully "separate"
	* from each other in one frame of motion.
	*/
	return true;
	} else {
	return false;
	}
	}

	function collisionCheck() {
	// simple loop through all the ball objects, comparing coordinates
	var i, j;
	for (i = balls.length; i--;) {
	for (j = balls.length; j--;) {
	if (j !== i) { // don't compare each ball to itself
	if (isColliding(balls[j], balls[i])) {
	// bounce the ball based on its dominant direction (horizontal or vertical movement)
	if (Math.abs(balls[j]._vX) > Math.abs(balls[j]._vY)) {
	// moving more horizontally
	balls[j]._vX *= -1;
	} else if (Math.abs(balls[j]._vY) > Math.abs(balls[j]._vX)) {
	// moving more vertically
	balls[j]._vY *= -1;
	} else {
	// edge case: if identical speed on x/y, bounce both
	balls[j]._vX *= -1;
	balls[j]._vY *= -1;
	}
	}
	}
	}
	}
	}

	function startAnimation() {
	if (!timer) {
	timer = setInterval(animateStuff,20);
	}
	}

	function stopAnimation() {
	if (!timer) {
	return false;
	}
	clearInterval(timer);
	timer = null;
	}

	function mouseDown(e) {
	e = e?e:event;
	m_lastX = e.clientX;
	m_lastY = e.clientY;
	document.onmousemove = mouseMove;
	document.onmouseup = mouseUp;
	}

	function mouseMove(e) {
	e = e?e:event;
	if (Math.abs(e.clientX - m_lastX) > M_SPACE \|\| Math.abs(e.clientY - m_lastY) > M_SPACE) {
	m_lastX = e.clientX;
	m_lastY = e.clientY;
	createBallAtMouse(e);
	}
	return false;
	}

	function mouseUp() {
	document.onmousemove = null;
	document.onmouseup = null;
	}

	function init() {
	balls = document.getElementById('ball-container').getElementsByTagName('img');
	for (var i=balls.length; i--;) {
	initBall(balls[i]);
	}
	getWindowCoords();
	startAnimation();
	document.onmousedown = mouseDown;
	}

	getWindowCoords = (navigator.userAgent.match(/opera/i) \|\| navigator.userAgent.match(/safari/i)) ? function() {
	canvasX = window.innerWidth;
	canvasY = window.innerHeight;
	} : function() {
	canvasX = document.documentElement.clientWidth\|\|document.body.clientWidth\|\|document.body.scrollWidth;
	canvasY = document.documentElement.clientHeight\|\|document.body.clientHeight\|\|document.body.scrollHeight;
	}

	window.onresize = getWindowCoords;
	window.onload = init;

	// ]]>

	</script>
	</head>
	<body>

	<h1>Interval-based animation</h1>

	<p>
	Click and drag to create more.
	</p>

	<p>
	<button onclick="startAnimation()">Start</button>
	<button onclick="stopAnimation()">Stop</button>
	</p>


	<div id="ball-container" class="balls">
	<img src="http://www.schillmania.com/content/projects/javascript-animation-2/demo/ball.gif" alt="" />
	</div>

	</body>

	</html>