Web Development Studio

Ping Pong Ball Throw Physics

Author: steve

JavaScript throw physics code for (enter url here)
var canvas;
var ctx;
var ball = {
	x: 200,
	y: 400,
	radius: 20,
	vx: 0,
	vy: 0
};
var bounds = {
	left: 0,
	right: 600
};
var currentX = ball.x;
var lastX = currentX;
var currentY = ball.y;
var lastY = currentY;
var isDragging = false;
var offset;
var gravity = 10;
var bounce = 0.6;
var mousePosX = 0;
var mousePosY = 0;

function animate() {
	if(isDragging) {
		// throw physics for x
		lastX = currentX;
		currentX = mousePosX;
		ball.vx = (currentX - lastX) / 2;
		// throw physics for y
		lastY = currentY;
		currentY = mousePosY;
		ball.vy = (currentY - lastY) / 2;
	}
	else {
		// ball motion and bounds testing
		ball.x += ball.vx;
		// left
		if(ball.x - ball.radius <= 0) {
			// reverse velocity sign
			ball.vx *= -1;
			// move ball back off the edge so it doesn't duplicate the hit detection on
			// consecutive frames
			ball.x = ball.x + (ball.radius - ball.x);
		}
		// right
		if(ball.x + ball.radius >= 600)	{
			ball.vx *= -1;
			ball.x = ball.x - ((ball.x + ball.radius) - 600);
		}
		// top
		if(ball.y - ball.radius <= 0) {
			ball.vy *= -1;
			ball.y = ball.y + (ball.radius - ball.y);
		}
		// bottom
		if(ball.y + ball.radius >= 600) {
			ball.vy *= -1;
			ball.vy *= bounce;
			ball.y = ball.y - ((Math.floor(ball.y) + ball.radius) - 600);
		}
		ball.y += ball.vy;
		ball.vy = ball.vy + (gravity / 40);
		// sideways friction
		ball.vx *= 0.99;
	}

	drawBall();
}
function onDown(e) {
	isDragging = true;
	mousePosX = e.clientX-canvas.offsetLeft;
	mousePosY = e.clientY-canvas.offsetTop;
	try {
		addEventListener('mousemove', function(e) { onMove(e);} , false);
	}
	catch(e) {
		// ie
		attachEvent('mousemove', function(e) { onMove(e);} , false);
	}
}
function onUp(e) {
	isDragging = false;
	try {
		removeEventListener('mousemove', function(e) { onMove(e);} , false);
	}
	catch(e) {
		// ie
		detachEvent('mousemove', function(e) { onMove(e);} , false);
	}
}

function onMove(e) {
	if(isDragging) {
		mousePosX = e.clientX-canvas.offsetLeft;
		mousePosY = e.clientY-canvas.offsetTop;
		ball.x = mousePosX;
		ball.y = mousePosY;
		if(ball.x <= bounds.left)
			ball.x = bounds.left;
		else if(ball.x >= bounds.right)
			ball.x = bounds.right;
	}
}

function grab()	{
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	try {
		canvas.addEventListener('mousedown', function(e) { onDown(e);} , false);
		canvas.addEventListener('mouseup', function(e) { onUp(e);} , false);
	}
	catch(e) {
		// for IE
		canvas.attachEvent('mousedown', function(e) { onDown(e);} , false);
		canvas.attachEvent('mouseup', function(e) { onUp(e);} , false);
	}

	drawBall();
	setInterval(animate, 1000 / 30);
}

function drawBall() {
	ctx.clearRect(0,0,600,600);
	ctx.beginPath();
	ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI * 2, false);
	ctx.stroke();
	ctx.fillStyle = 'white';
	ctx.fill();
	ctx.closePath();
}

window.onload = grab;

                                
0