First, let's look at what our game will contain when we're done with this article:
- A ball that can be hit from one side to the other inside the playing court
- A playing court drawn by the browser using CSS
- The ball will always stay inside this court
- If the ball hits the right or left edges of the court, the opposite side has won that round.
- Flat paddles for hitting the ball, Pong style
- Each paddle will be movable using keyboard entry
- The paddles will have "hit" the ball if any part of the ball hits any part of the paddles
- Two different ways to start play or "serve" the ball
- One button to "Start Play!"
- One keystroke to serve the ball.
- A scoreboard
- A way to change the difficulty (speed or paddle size) of the game
- A way for two players on different computers to play the game
- A way for both players to move their paddles at the same time
Let's start out by creating the HTML and drawing the playing court. Last time we used the entire window for our animation, and the ball bounced around against the inside boundaries of the browsers. This time we're going to use a div inside our browser window as our court. We'll draw a blue court of 400 x 750 pixels, with a dashed centerline. The outside boundaries of the court will be 4 pixels wide. The center line will be only 1 pixel wide.