Can we make Pong in less than a 100 lines of Javascript?

The original Pong took Atari over 3 months to complete back in 1972. The classic arcade game was one of the first commercially successful games that paved the way for the game development industry.

Additionally, it’s simplicity makes it one of the first projects that any programmer takes on.

As a showcase of how much easier programming has become in the past 50 years, we’re going to be attempting to make Pong in less than 100 lines of Javascript!

You can play the finished project deployed on Codesphere here.

Let’s get started!

Our Different Components

There’s going to be four parts that we need to build for our pong game:

1. Graphics
2. Paddle Movement
3. Bouncing Ball
4. Score Keeping
   

Graphics

I’m going to cheat a little bit and use a graphics library to save us some menial work so we can strictly focus on the game logic.

Paddle Movement

Next up, let’s create two paddles and draw them onto the screen. Additionally, let’s allow the player to move them (I’ll use the built in keyDown function from P5.JS)

Bouncing Ball

Now let’s add in a ball. When the ball hits the top or bottom border, we want it’s y velocity to switch directions.

When the ball hits one of the paddles, we want it’s x velocity to switch direction and increase slightly(To hit harder). Additionally, to make the game more fun we’ll randomize the y velocity so it is harder to anticipate the ball.

Score Keeping

Finally, let’s start tracking the score. When the ball hits the left or right border we’ll change the score and reset the position of the ball. We’ll then display the score at the top of the screen!

And there you have it! We’ve created Pong in less than 100 lines of code!

If you’re looking to show off a game you make, the easiest place to deploy it is Codesphere. Codesphere is the only cloud provider that makes cloud deployment as easy as local deployment!

Happy Coding and Merry Christmas!