Introduction Into HTML : Ping Pong Game

Introduction Into HTML : Ping Pong Game


For the purpose of this task, I have created a simple HTLM ping pong game to demonstrate my level of understanding the key principles.

The player is up against the computer and the aim of the game is to get the ball past it.


Controls for the Player paddle

Up = Up Arrow Key

Down = Down Key.


My Approach
Step 1: Create the pitch and walls
Step 2: Then created the Paddles and ball
Step 3: Made sure the ball moved and in the right direction
Step 4: Once the ball is in the right direction, I then to make sure it collide with the paddles.
Step 5: Sort out the collisions so they bounce off the player paddle and the computer paddles as well as the walls.
Step 6: Once that is sorted, the final step was to update the ball position when the player serves and then implement the score.

Improvements to make:

  • A high score / Implement a winning / Losing Condition to make the game more interesting.
  • Multiplayer option
  • Experiment with 3D spacing (Basically turn the game into 3D).