Skip to content

Instantly share code, notes, and snippets.

@ebababi

ebababi/README

Created November 29, 2012 12:38
Show Gist options
  • Save ebababi/4168787 to your computer and use it in GitHub Desktop.
Save ebababi/4168787 to your computer and use it in GitHub Desktop.
Download ZIP
PINGPONG TEST: A small ping pong front end app in HTML5
Raw
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).
Raw
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
}
Raw
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>
Raw
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 });
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment