Programming Assignment 2
A JavaScript Game

Due on Tuesday October 1 before midnight
Worth 5% of your final grade


This project must be done individually. No copying is permitted. The goal of this project is to learn JavaScript and DOM by implementing a simple computer game, reminiscent to the Pong arcade video game from the 70s.


You will do this project on your own PC/laptop. You have to use the Mozilla Firefox web browser and you can use the firebug plugin for debugging your JavaScript code. To run JavaScript expressions, such as print the value of a variable, activate Firebug and on its Console menu select "Show Command Editor", then type an expression such as 1+2 and hit Run. Note: You should not use any JavaScript library, such as JQuery. You should not use the JavaScript canvas object.


The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and DOM.

Project Description

You need to write a JavaScript file pong.js, used in the file pong.html, that implements the following actions:

The pong court is 1100x600px, the pong ball is 50x50px, and the paddle is 102x14px. When you click left on the court, the ball will start from a random place at the left border of the court at a random angle between -π/4 and π/4. The paddle can move up and down on the right border by just moving the mouse (without clicking the mouse). The ball bounces at the left, top, and bottom borders of the court. If the ball crosses the right border, you loose a point and the game is suspended (you would need to click on the court again to resume). So the goal of this game is to move the paddle to protect the right border by hitting the ball.

Hints: it will be easier to develop your code by ignoring the paddle and making all the court borders solid, so the ball will bounce on every border. After you make this work, you can change your code so that the ball that tries to cross the right border bounces if it hits the paddle. You need to define a time period (the "tick") dt to calculate the new x/y coordinates from the current. The speed coordinates vx/vy are determined when the ball is kick-started (from the kick angle). The new x is x+vx*dt, but if the new value is beyond the right border, then the ball must be bounced by seting vx = -vx and x = 2*width-x, assuming that the court x-coordinates are from 0 to width. You do something similar for the left, top, and, bottom borders.

Note: You should use plain JavaScript. You should not use any JavaScript library, such as JQuery. You should not use the JavaScript canvas object.

What to Submit

Use the form below to submit your pong.html and pong.js files. We do not accept email or hardcopy submissions. You may submit your files as many times as you like, but only the most recently submitted files will be retained and evaluated (newly submitted files replace the old files under the same file name). After you submit the files, please double-check that your submitted files are correct by clicking on the Status link and by playing your game on your browser.

Submit Project #2:

Last modified: 09/17/13 by Leonidas Fegaras