bigbadbrain logo
bbb Home
  Learn Programming by Making Pong


In this tutorial you will learn fundamental programming concepts by creating Pong using HTML and JavaScript. The game will require the player to control a paddle to keep a ball in play.  A screenshot of the game is shown: 



The functional specification for our game is as follows:

  1. A game screen will be 500px wide and 400 px high. When the window opens, the screen appears as shown below.
  2. The user will control the paddle with the arrow keys.  If the user presses left arrow key, the paddle will move to the left.  If the user presses the right arrow key, the paddle will move to the right.
  3. The player will start the game by pressing any key other then the left or right arrow key.
  4. When the game starts, the ball will start moving from a random location.
  5. When the game starts, the ball will move in a random direction.
  6.  The ball will bounce off the top, left, or right wall.
  7. The ball will bounce off the paddle.
  8. Whenever the player hits the ball with the paddle, the player gets a point.
  9. The score is displayed.
  10. If the ball passes the paddle, the ball stops and the game is over.
  11. When the game is over, the message "Click any key to start" appears.
Start screen
dfx interactive, inc. Contact us at