Crazy Pong – My Second JS Project

My second Javascript project, Crazy Pong, was inspired by my first project. I felt like my first project was fairly simple, and wanted to build something similar but more complex. A very long time ago I tried to get into Objective C. When I was learning Objective-C I followed a tutorial that built a simple Ping-Pong game. I eventually got overwhelmed and gave up on Objective C. I decided that I now had the skills to build something like that in JavaScript, so that’s what I did.

Object Manipulation

To start I just tried to manipulate an object on the DOM with keyboard inputs. Once I eventually got that to work I restricted the movement to just left and right, and limited to the area of movement inside the game area. In my last project, I used view height and view width to make the project fully responsive. This time around I decided to make this project non-responsive. This made it much easier later down the line with the hit detection.

Other Players

Next, I created other players. For this, I created more of the paddles in HTML, styled them identical to each other in CSS, and then positioned them on opposite ends of the playing area. To move them I tested if the ball position was ever different than the paddle position. I then incremented the paddle position accordingly to follow the ball position. This created an extremely basic AI that would track the ball like a real player would.

Artificial Intelligence

I didn’t want to make the other paddles seem like absolute robots, so I made their skill dynamic. Every time a paddle hits the ball it becomes slightly faster, or slightly slower. This made the paddles slightly less robotic. For this, I used the Math.random() function to randomly generate a movement speed between 1.5 and 3.5.

Collision Detection

Next was detecting the collision between the ball and the paddles. This was something I had never done before. After some googling, I found some solutions that didn’t really make sense in my head, so I took it step by step and figured it out myself. If the ball position was within both edges of the paddle and reached the paddle’s outer face then collision was detected. Really the solution is very simple it just looks a little complex. Once collision was detected it would change the ballSpeedY or ballSpeedX depending on which paddle it hit. This is what makes the ball go in a slightly different direction every time it hits a paddle.

Scoring Detection

If the ball ever went past the paddle and hit an edge the ball position was reset, this effectively served the ball back to the player again. If the ball hit the red player’s wall the red player’s score would increase. If the ball hit blue player’s wall then blue player’s score would increase. This method of scoring was used for every wall. I thought this was the best way to implement some sort of scoring system, so I just rolled with it.

Scoring System

I decided it would make the most sense if the scoring system counted up instead of down. The player doing the best would have the lowest score, and the player doing the worst would have the highest score. Although this is slightly counterintuitive to most games I felt like it made the most sense in this situation.

Running the Application

Finally was the setInterval() function which ran everything I mentioned above as much as possible. This means that the ball position, paddle positions, ball speed, hit detection, AI movement and scoring all update as fast as possible. This also allows for a cheeky way to slow down the entire application if needed.

Summary

Overall this application was much simpler than my first but was built on some of the same ideas. I used the Math.random() function multiple times which I learned in the first application. I also used event actions which I used in my first application. The only thing that presented a large challenge for me was the hit detection. Now that I understand hit detection and how to implement I will probably use it more in the future. You can play Crazy Pong by visiting my Projects page, and you can view the code by visiting my GitHub.