-
-
Save alinakhay/2a9d4997693c8ed31ef9805832d41b32 to your computer and use it in GitHub Desktop.
PINGPONG TEST: A small ping pong front end app in HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| = 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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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 | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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