Pong

by Erik Wiessmann

Set up

Set up a website, javascript, and css file.

Plan

Pong has two paddles and a ball. The paddles only move up and down. The ball moves across the screen. If the ball intersects the paddle it will bounce towards the other side of the screen. If the ball passes the paddle a point is scored for the opponent.

We will make this a one person game, so the computer will be the other player. We will make the computer perfect and then we will introduce mistakes so that it is possible to beat the computr player.

The paddles will be rectangles. The ball will be a circle.

We will start by making our paddle. It will need:

• x-position
• y-position
• height
• width
• y velocity
• color

Our ball will need:

• x-position
• y-position
• radius
• y velocity
• x velocity
• color

We will set up each item in an array (allowing, many balls in a game if we desire!)

Each object needs to move and draw.

The canvas should fill the web page and we should not allow the page to scroll.

The css

The program should constantly call an update function. The update functions should:

1. clear the canvas
2. move the paddles and ball
3. draw the ball and paddles
4. draw the score

You should set up the games initial state

We must move the paddles with the keyboard.

You may also change the paddle friction value to allow the paddle to slide across the screen.

Make the computer move their paddle.

We now need to check for collsions with walls and paddles.

Stop paddles from going off screen.

Score a point when the ball hits a wall and draw a score.

Customize your game by playing with the code on your own!