For this week’s project I decided to make a classic game: Pong. Pong is a game where you and an AI (or another player) have to knock a ball back and forth until the ball gets past someone. Seeing as we were working with collision and physics for our projects, I thought creating a game would be fun. I thought that paying homage to the very first game ever made would be a cool idea. The sketch is here:
Currently, you can only do PvE and fight a bot in the game. It will follow the ball’s position and try to hit it back towards you. The player’s board will follow the y-axis of your mouse’s position. With each hit, the ball increases in speed, making it harder to hit the longer the round goes. Once it reaches past one of the players, the score will be increased by one for the winning player and the ball will be reset. Currently, when the ball is reset, it will always start going towards the player and not the AI.
Using the Matter.js library for the first time was intimidating. It’s quite an expansive library that is capable of doing a lot. I also found the documentation for the library to not be the best, as it has very limited writing explaining functions (especially how to use them properly) and there are essentially no examples to work with. The examples on GitHub are made to be used with actual JS, and not p5, which meant that the examples can’t be looked at and you have to infer what the programs are trying to do. After some testing, I was more or less able to understand the parts of the library I needed to use and made the program.
The biggest issue I ran into while creating this program had to do with the collision. Firstly, I was very confused on how to properly implement collision detection, because of the aforementioned lack of documentation. There are multiple ways to have collision detection, and I wasn’t sure which was best. I ended up opting for an event listener that also had an embedded collision detection if statement to ensure that it would properly detect the ball collision. Here is the code for this:
Events.on(engine, "collisionStart", collisionEvent);
...
function collisionEvent(event) {
if (
Collision.collides(player.body, ball.body) != null ||
Collision.collides(
ai.body,
ball.body || Collision.collides(ball.body, ai.body) != null
)
) {
Body.setVelocity(ball.body, {
x: -ball.body.velocity.x * 1.15,
y: ball.body.velocity.y,
});
Body.setPosition(ai.body, { x: width - 20, y: ai.body.position.y });
}
}
While this is a small line of code, this was arguably the part that took longest to figure out, so I am particularly proud of this working.
I also had an issue where the ball would not collide with the player’s board, and would simply go right through it. After sifting through the documentation many times, I realized that the way I was changing the position of the board in the physics engine was not actually changing it, and I fixed it to use the proper setPosition() method. There are some other issues with the program that I wasn’t able to properly fix because I didn’t have enough time. First, when the ball gets faster, it starts to push the AI board backwards and can knock it off screen when it gets fast enough. I tried to make a bandaid fix to reset its x-position when there was collision detected, but the collision detection for the AI is very inconsistent and only works sometimes. There’s also a weird issue where there seems to be an invisible box the ball can collide with that is in the middle of the edges of the left and right of the screen. I’m not really sure why this is happening, perhaps an issue regarding how the positions are moved on the player. The final issue I’ve seen is that occasionally the ball will gain way more velocity than intended and shoots off the screen really quickly. Occasionally it will also do the opposite and lose all its velocity which renders the game unplayable somewhat. I think this is because the collision is detecting multiple times sometimes, but I don’t know how I could fix this.
Other than fixing these problems, I think there are a few changes I could make to improve the program. First, I want to add options to the game, such as two player support, keyboard controls and AI difficulties. I also would want to improve the AI, making them accelerate towards the ball when it is very close, which is more similar to actual AI in Pong. Due to time constraints, I couldn’t figure this out, but it is definitely something I would want to improve on. The last thing I could consider is a score threshold or some other way to reset the game, which currently will go on forever until the program is restarted. These are the many things that I would like to improve on.
References:
https://www.ponggame.org/