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.
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.
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.
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.
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.
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.
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.