HTML5 Canvas [79]
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
function drawScreen () {
context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
update();
testWalls();
collide();
render();
}
function update() {
for (var i = 0; i //Friction ball.velocityx = ball.velocityx - ( ball.velocityx*friction); ball.velocityy = ball.velocityy - ( ball.velocityy*friction); ball.nextx = (ball.x += ball.velocityx); ball.nexty = (ball.y += ball.velocityy); } } function testWalls() { var ball; var testBall; for (var i = 0; i if (ball.nextx+ball.radius > theCanvas.width) { ball.velocityx = ball.velocityx*−1; ball.nextx = theCanvas.width - ball.radius; } else if (ball.nextx-ball.radius < 0 ) { ball.velocityx = ball.velocityx*−1; ball.nextx = ball.radius; } else if (ball.nexty+ball.radius > theCanvas.height ) { ball.velocityy = ball.velocityy*−1; ball.nexty = theCanvas.height − ball.radius; } else if(ball.nexty-ball.radius < 0) { ball.velocityy = ball.velocityy*−1; ball.nexty = ball.radius; } } } function render() { var ball; context.fillStyle = "#000000"; for (var i = 0; i ball.x = ball.nextx; ball.y = ball.nexty; context.beginPath(); context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true); context.closePath(); context.fill(); } } function collide() { var ball; var testBall; for (var i = 0; i for (var j = i+1; j < balls.length; j++) { testBall = balls[j]; if (hitTestCircle(ball,testBall)) { collideBalls(ball,testBall); } } } } function hitTestCircle(ball1,ball2) { var retval = false; var dx = ball1.nextx - ball2.nextx; var dy = ball1.nexty - ball2.nexty; var distance = (dx * dx + dy * dy); if (distance <= (ball1.radius + ball2.radius) * (ball1.radius + ball2.radius) ) { retval = true; } return retval; } function collideBalls(ball1,ball2) { var dx = ball1.nextx - ball2.nextx; var dy = ball1.nexty - ball2.nexty; var collisionAngle = Math.atan2(dy, dx); var speed1 = Math.sqrt(ball1.velocityx * ball1.velocityx + ball1.velocityy * ball1.velocityy); var speed2 = Math.sqrt(ball2.velocityx * ball2.velocityx + ball2.velocityy * ball2.velocityy); var direction1 = Math.atan2(ball1.velocityy, ball1.velocityx); var direction2 = Math.atan2(ball2.velocityy, ball2.velocityx); var velocityx_1 = speed1 * Math.cos(direction1 - collisionAngle); var velocityy_1 = speed1 * Math.sin(direction1 - collisionAngle); var velocityx_2 = speed2 * Math.cos(direction2 - collisionAngle); var velocityy_2 = speed2 * Math.sin(direction2 - collisionAngle); var final_velocityx_1 = ((ball1.mass - ball2.mass) * velocityx_1 + (ball2.mass + ball2.mass) * velocityx_2)/(ball1.mass + ball2.mass); var final_velocityx_2 = ((ball1.mass + ball1.mass) * velocityx_1 + (ball2.mass - ball1.mass) * velocityx_2)/(ball1.mass + ball2.mass); var final_velocityy_1 = velocityy_1; var final_velocityy_2 = velocityy_2; ball1.velocityx = Math.cos(collisionAngle) * final_velocityx_1 + Math.cos(collisionAngle + Math.PI/2) * final_velocityy_1; ball1.velocityy = Math.sin(collisionAngle) * final_velocityx_1 + Math.sin(collisionAngle + Math.PI/2) * final_velocityy_1; ball2.velocityx = Math.cos(collisionAngle) * final_velocityx_2 + Math.cos(collisionAngle + Math.PI/2) * final_velocityy_2; ball2.velocityy = Math.sin(collisionAngle) * final_velocityx_2 + Math.sin(collisionAngle + Math.PI/2) * final_velocityy_2; ball1.nextx = (ball1.nextx += ball1.velocityx); ball1.nexty = (ball1.nexty += ball1.velocityy); ball2.nextx = (ball2.nextx += ball2.velocityx); ball2.nexty