alinakhay/README

## README
= PINGPONG TEST

Can you make a small ping pong front end app with HTML5? Basically it has 2
square wall and can kick the ball the each other, don't think it to be very
complicated, you should be able to finish this within 3 hours. Just want to see
a ball can be kicked from left to right and from right to left, and the ball
can be a square as well.

== Citations

Work based on the tutorial of Cristian Nistor published at lostresort.BIZ
(http://www.lostresort.biz/blog/2011/11/15/develop-a-ping-pong-game-using-html5-css3-and-javascript).

= Instructions

Use the W, S to move left paddle and UP, DOWN keys to move the right one.

= Testing

The implementation have been tested manually on the latest versions of Firefox (15.01), Google Chrome (23.0) and Apple Safari (6.0.2).

## pingpong.css
#game {
	background: #daeff5;
	width: 600px;
	height: 300px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 5px;
	border: 2px solid #ffffff
}
#ball {
	background: #d9ed7a;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 290px;
	top: 140px;
	border-radius: 10px;
	border: 1px solid #000000
}
.paddle {
	background: #d5d3d3;
	position: absolute;
	left: 50px;
	top: 115px;
	width: 15px;
	height: 70px;
	border-radius: 5px;
	border: 1px solid #000000
}
#paddleB {
	left: 535px
}

## pingpong.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf8">
	<title>PINGPONG TEST</title>
	<link rel="stylesheet" type="text/css" href="pingpong.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<header>
		<h1>PINGPONG TEST</h1>
	</header>
	<div id="content">
		<p>Can you make a small ping pong front end app with HTML5? Basically it has 2 square wall and can kick the ball the each other, don't think it to be very complicated, you should be able to finish this within 3 hours. Just want to see a ball can be kicked from left to right and from right to left, and the ball can be a square as well.</p>
		<p>Work based on the tutorial of Cristian Nistor published at <a href="http://www.lostresort.biz/blog/2011/11/15/develop-a-ping-pong-game-using-html5-css3-and-javascript">lostresort.BIZ</a>.</p>
		<p><strong>Use the W, S and UP, DOWN keys.</strong></p>
		<div id="game">
			<div id="paddleA" class="paddle"></div>
			<div id="paddleB" class="paddle"></div>
			<div id="ball"></div>
		</div>
	</div>
	<script src="pingpong.js" type="text/javascript"></script>
</body>
</html>

## pingpong.js
var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 };
var pressedKeys = [];
var ball = { speed: 3, x: 290, y: 140, directionX: 1, directionY: 1 };
var pauseBall = false;

$(function() {
	// Store in buffer keyboard events
	$(document).keydown(function(e) {
		pressedKeys[e.which] = true;
	});
	$(document).keyup(function(e) {
		pressedKeys[e.which] = false;
	});

	// Set main loop to be called on the desired frame rate
	setInterval(gameLoop, 1000 / 60);
});

// Main loop of the game
function gameLoop() {
	moveBall();
	movePaddles();
}

// Control movement of paddles based on keyboard events
function movePaddles() {
	var paddleSpeed = 5;

	// Check keyboard events
	if (pressedKeys[KEY.W]) {
		// Move the paddle A up
		var top = parseInt($("#paddleA").css("top"));
		if (top >= -parseInt($("#paddleA").css("height"))/2) {
			$("#paddleA").css("top", top - paddleSpeed);
		}
	}
	if (pressedKeys[KEY.S]) {
		// Move the paddle B down
		var top = parseInt($("#paddleA").css("top"));
		if (top <= (parseInt($("#game").css("height")) - (parseInt($("#paddleA").css("height")))/2)) {
			$("#paddleA").css("top", top + paddleSpeed);
		}
	}
	if (pressedKeys[KEY.UP]) {
		// Move the paddle B up
		var top = parseInt($("#paddleB").css("top"));
		if (top >= -parseInt($("#paddleB").css("height"))/2) {
			$("#paddleB").css("top", top - paddleSpeed);
		}
	}
	if (pressedKeys[KEY.DOWN]) {
		// Move the paddle B down
		var top = parseInt($("#paddleB").css("top"));
		if (top <= (parseInt($("#game").css("height")) - (parseInt($("#paddleB").css("height")))/2)) {
			$("#paddleB").css("top", top + paddleSpeed);
		}
	}
}

// Control movement of the ball doing collision checking
function moveBall() {
	var gameWidth = parseInt($("#game").width());
	var gameHeight = parseInt($("#game").height());

	if (pauseBall) return;

	// Check collision to the bottom border and change the moving orientation on Y axis
	if (ball.y + ball.speed * ball.directionY > (gameHeight - parseInt($("#ball").height()))) {
		ball.directionY = -1
	}

	// Check collision to the top border and change the moving orientation on Y axis
	if (ball.y + ball.speed * ball.directionY < 0) {
		ball.directionY = 1
	}

	// Check collision to the right border and re-initialize ball position
	if (ball.x + ball.speed * ball.directionX > gameWidth ) {
		ball.x = 290;
		ball.y = 140;
		pauseBall = true;
		$("#ball").animate({ "left": ball.x, "top": ball.y }, 2000, function() { pauseBall = false; });
		ball.directionX = -1;
		return;
	}

	// Check collision to the left border and re-initialize ball position
	if (ball.x + ball.speed * ball.directionX < 0) {
		ball.x = 290;
		ball.y = 140;
		pauseBall = true;
		$("#ball").animate({ "left": ball.x, "top": ball.y }, 2000, function() { pauseBall = false; });
		ball.directionX = 1;
		return;
	}

	// Update ball position on X and Y axes based on speed and orientation
	ball.x += ball.speed * ball.directionX;
	ball.y += ball.speed * ball.directionY;

	// Check collision to the paddle A and change the moving orientation on X axis
	var paddleAX = parseInt($("#paddleA").css("left")) + parseInt($("#paddleA").css("width"));
	if (ball.x + ball.speed * ball.directionX < paddleAX) {
		var paddleAYBottom = parseInt($("#paddleA").css("top")) + parseInt($("#paddleA").css("height"));
		var paddleAYTop = parseInt($("#paddleA").css("top"));

		if ((ball.y + ball.speed * ball.directionY <= paddleAYBottom) && (ball.y + ball.speed * ball.directionY >= paddleAYTop)) {
			ball.directionX = 1
		}
	}

	// Check collision to the paddle B and change the moving orientation on X axis
	var paddleBX = parseInt($("#paddleB").css("left")) - parseInt($("#paddleB").css("width"));
	if (ball.x + ball.speed * ball.directionX >= paddleBX) {
		var paddleBYBottom = parseInt($("#paddleB").css("top")) + parseInt($("#paddleB").css("height"));
		var paddleBYTop = parseInt($("#paddleB").css("top"));

		if ((ball.y + ball.speed * ball.directionY <= paddleBYBottom) && (ball.y + ball.speed * ball.directionY >= paddleBYTop)) {
			ball.directionX = -1
		}
	}

	// Render the updated ball position
	$("#ball").css({ "left": ball.x, "top": ball.y });
};
	= PINGPONG TEST

	Can you make a small ping pong front end app with HTML5? Basically it has 2
	square wall and can kick the ball the each other, don't think it to be very
	complicated, you should be able to finish this within 3 hours. Just want to see
	a ball can be kicked from left to right and from right to left, and the ball
	can be a square as well.

	== Citations

	Work based on the tutorial of Cristian Nistor published at lostresort.BIZ
	(http://www.lostresort.biz/blog/2011/11/15/develop-a-ping-pong-game-using-html5-css3-and-javascript).

	= Instructions

	Use the W, S to move left paddle and UP, DOWN keys to move the right one.

	= Testing

	The implementation have been tested manually on the latest versions of Firefox (15.01), Google Chrome (23.0) and Apple Safari (6.0.2).
	#game {
	background: #daeff5;
	width: 600px;
	height: 300px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 5px;
	border: 2px solid #ffffff
	}
	#ball {
	background: #d9ed7a;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 290px;
	top: 140px;
	border-radius: 10px;
	border: 1px solid #000000
	}
	.paddle {
	background: #d5d3d3;
	position: absolute;
	left: 50px;
	top: 115px;
	width: 15px;
	height: 70px;
	border-radius: 5px;
	border: 1px solid #000000
	}
	#paddleB {
	left: 535px
	}
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="utf8">
	<title>PINGPONG TEST</title>
	<link rel="stylesheet" type="text/css" href="pingpong.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<header>
	<h1>PINGPONG TEST</h1>
	</header>
	<div id="content">
	<p>Can you make a small ping pong front end app with HTML5? Basically it has 2 square wall and can kick the ball the each other, don't think it to be very complicated, you should be able to finish this within 3 hours. Just want to see a ball can be kicked from left to right and from right to left, and the ball can be a square as well.</p>
	<p>Work based on the tutorial of Cristian Nistor published at <a href="http://www.lostresort.biz/blog/2011/11/15/develop-a-ping-pong-game-using-html5-css3-and-javascript">lostresort.BIZ</a>.</p>
	<p><strong>Use the W, S and UP, DOWN keys.</strong></p>
	<div id="game">
	<div id="paddleA" class="paddle"></div>
	<div id="paddleB" class="paddle"></div>
	<div id="ball"></div>
	</div>
	</div>
	<script src="pingpong.js" type="text/javascript"></script>
	</body>
	</html>
	var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 };
	var pressedKeys = [];
	var ball = { speed: 3, x: 290, y: 140, directionX: 1, directionY: 1 };
	var pauseBall = false;

	$(function() {
	// Store in buffer keyboard events
	$(document).keydown(function(e) {
	pressedKeys[e.which] = true;
	});
	$(document).keyup(function(e) {
	pressedKeys[e.which] = false;
	});

	// Set main loop to be called on the desired frame rate
	setInterval(gameLoop, 1000 / 60);
	});

	// Main loop of the game
	function gameLoop() {
	moveBall();
	movePaddles();
	}

	// Control movement of paddles based on keyboard events
	function movePaddles() {
	var paddleSpeed = 5;

	// Check keyboard events
	if (pressedKeys[KEY.W]) {
	// Move the paddle A up
	var top = parseInt($("#paddleA").css("top"));
	if (top >= -parseInt($("#paddleA").css("height"))/2) {
	$("#paddleA").css("top", top - paddleSpeed);
	}
	}
	if (pressedKeys[KEY.S]) {
	// Move the paddle B down
	var top = parseInt($("#paddleA").css("top"));
	if (top <= (parseInt($("#game").css("height")) - (parseInt($("#paddleA").css("height")))/2)) {
	$("#paddleA").css("top", top + paddleSpeed);
	}
	}
	if (pressedKeys[KEY.UP]) {
	// Move the paddle B up
	var top = parseInt($("#paddleB").css("top"));
	if (top >= -parseInt($("#paddleB").css("height"))/2) {
	$("#paddleB").css("top", top - paddleSpeed);
	}
	}
	if (pressedKeys[KEY.DOWN]) {
	// Move the paddle B down
	var top = parseInt($("#paddleB").css("top"));
	if (top <= (parseInt($("#game").css("height")) - (parseInt($("#paddleB").css("height")))/2)) {
	$("#paddleB").css("top", top + paddleSpeed);
	}
	}
	}

	// Control movement of the ball doing collision checking
	function moveBall() {
	var gameWidth = parseInt($("#game").width());
	var gameHeight = parseInt($("#game").height());

	if (pauseBall) return;

	// Check collision to the bottom border and change the moving orientation on Y axis
	if (ball.y + ball.speed * ball.directionY > (gameHeight - parseInt($("#ball").height()))) {
	ball.directionY = -1
	}

	// Check collision to the top border and change the moving orientation on Y axis
	if (ball.y + ball.speed * ball.directionY < 0) {
	ball.directionY = 1
	}

	// Check collision to the right border and re-initialize ball position
	if (ball.x + ball.speed * ball.directionX > gameWidth ) {
	ball.x = 290;
	ball.y = 140;
	pauseBall = true;
	$("#ball").animate({ "left": ball.x, "top": ball.y }, 2000, function() { pauseBall = false; });
	ball.directionX = -1;
	return;
	}

	// Check collision to the left border and re-initialize ball position
	if (ball.x + ball.speed * ball.directionX < 0) {
	ball.x = 290;
	ball.y = 140;
	pauseBall = true;
	$("#ball").animate({ "left": ball.x, "top": ball.y }, 2000, function() { pauseBall = false; });
	ball.directionX = 1;
	return;
	}

	// Update ball position on X and Y axes based on speed and orientation
	ball.x += ball.speed * ball.directionX;
	ball.y += ball.speed * ball.directionY;

	// Check collision to the paddle A and change the moving orientation on X axis
	var paddleAX = parseInt($("#paddleA").css("left")) + parseInt($("#paddleA").css("width"));
	if (ball.x + ball.speed * ball.directionX < paddleAX) {
	var paddleAYBottom = parseInt($("#paddleA").css("top")) + parseInt($("#paddleA").css("height"));
	var paddleAYTop = parseInt($("#paddleA").css("top"));

	if ((ball.y + ball.speed * ball.directionY <= paddleAYBottom) && (ball.y + ball.speed * ball.directionY >= paddleAYTop)) {
	ball.directionX = 1
	}
	}

	// Check collision to the paddle B and change the moving orientation on X axis
	var paddleBX = parseInt($("#paddleB").css("left")) - parseInt($("#paddleB").css("width"));
	if (ball.x + ball.speed * ball.directionX >= paddleBX) {
	var paddleBYBottom = parseInt($("#paddleB").css("top")) + parseInt($("#paddleB").css("height"));
	var paddleBYTop = parseInt($("#paddleB").css("top"));

	if ((ball.y + ball.speed * ball.directionY <= paddleBYBottom) && (ball.y + ball.speed * ball.directionY >= paddleBYTop)) {
	ball.directionX = -1
	}
	}

	// Render the updated ball position
	$("#ball").css({ "left": ball.x, "top": ball.y });
	};