Online Book Reader

Home Category

HTML5 Canvas [79]

By Root 6431 0
type="text/javascript">

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 ball = balls[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 ball = balls[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 = balls[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 ball = balls[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

Return Main Page Previous Page Next Page

®Online Book Reader