Our pong clone finally has an end condition!! This means by rights it actually is a game. You can win, you can loose and the game will even congratulate, or commiserate you when the game is over – although I wouldn’t take “Game Over” as a commiseration, but you get the point.
Where I left off with the blog yesterday there was also a minor issue that I resolved last night. When you clicked on the link, the game started right away before you were ready to start. Not only that you had no control of the game until you actually clicked on the canvas to activate it. So now the game cancommiseationt start until ‘spacebar’ is pressed, and that in turn won’t work untill the user has clicked on the canvas. Solved.
I did that by making a boolean like this.
boolean isRunning = false;
Next I changed my code so that my ball.update() and both paddle updates where only called in my draw() loop if isRunning was set to true.
// update – if game is running, update game logic before objects are drawn to the screen
if(isRunning == true){
ball.update();
leftPaddleInput();
paddleAI();
rightPaddle.update();
leftPaddle.update();
}
Now I just needed a way to start the game so I added these functions.
// start and pause game with SPACEBAR
void spacePressed(){
if(keyPressed){
if(key == ‘ ‘){
if (isRunning == false){
isRunning = true;
}
}
}
}
// text displayed when game is paused
void gamePausedTxt(){
if(isRunning == false){
text(“Game Paused. Press SPACE to play!”,300,120);
}
}
The first function sets isRunning to true, starting the game. The second funtion just displays text to the user if isRunning is False.
Now to get the game to actually end, I just added some code that set isRunning to false if the value of score1 reached 5, or if the value of score2 reached 5. If score1 reaches 5 it displays “YOU WIN!” else if score2 teaches 5 it displays “GAME OVER!”. The code looks like this.
// checks if the game has ended and displays the appropriate text to the user.
boolean isGameOver(){
if(score1 == 5) { // if player wins
isRunning = false;
textSize(30);
text(“YOU WIN!”, 325,350);
return true;
}
if(score2 == 5) { // if player loses
isRunning = false;
textSize(30);
text(“GAME OVER!”, 315,350);
return true;
}
}
This is the code that gets called inside of our draw() funtion to make it all work.
// check if spacebar is pressed to start game
spacePressed();
gamePausedTxt();
isGameOver();
Then I added a reset() funtion inside of the spacePressed() to reset the game when it ends.
void reset(){
if(isGameOver() == true){
score1 = 0;
score2 = 0;
leftPaddle.y = ( height / 2 ) – ( leftPaddle.h / 2 );
rightPaddle.y = ( height / 2 ) – ( rightPaddle.h / 2 );
}
}
// text displayed when game is paused
void gamePausedTxt(){
if(isRunning == false){
text(“Game Paused. Press SPACE to play!”,300,120);
reset(); // this is where we put the new function.
}
}
Now we have a big task at hand. Even though our game is technically a game, it’s not a very good one. And I don’t mean “pong” is a bad game, just specifically this pong. If you clicked on the link and tried play the game for a round you probably noticed a few things wrong with it. For starters the control of the paddle doesn’t feel right. This is of course only true if you figured out that ‘W’ and ‘S’ is for ‘up’ and ‘down’. If you accidently hit 2 keys at once you get some pretty shitty results. The paddle sometimes continues moving up even though you are trying to make it move down. So that’s 1 to the list,
1. fix crappy controls.
The next probably more obvious problem is that the ball always bounces at 45 degrees no matter how you hit the ball with your paddle. Anyone who played classic pong knows that this is not how real pong is played. This is important because it goes hand in hand with the feal of the controls. The player should feel like he/she has some element of control with the balls direction by aiming for different spots on the paddle.
Because our ball only moves at one angle you probably relized a pattern in the game pretty quickly. After the first goal our ball bounces once off our player paddle, once off the AI paddle, then once again off our player paddle resulting in a goal. All you have to do is make sure you don’t let the ball pass your paddle and you will have a goal every 3 bounces no matter what. You have 0 control over what happens to the ball outside of a very boring binary that includes the results of hitting, or not hitting the ball. Epic fail on a video game!! The whole point of a game is to have an experience of choice and this game at it’s core has 2… let the ball in, or bounce it back. So next on the list, and probably more tricky while arguably more important is,
2. Add angular control to the ball.
If you played more then one round of our current version of pong you also probably found another bug asside from god awful controls, and that’s even shittier collision. If the ball hits the paddle at the just the right spot near either of it’s corners, the ball gets trapped inside. It bounces frantically trying to escape until it eventually reaches the other side and hopefully flys off towards the AI paddle. If not, then it flys off into your goal giving the bot a point. So
3. fix collision
Last small detail is that spacebar only works when the game either has not yet started or after it has ended by winning or loseing. It would be nice to introduce an option to pause the game while in play. I did try adding this to the code last night, but because of the way I get my input there is some pretty funny results. Try copying the source code and see if you can add a line in the spacePressed() function that changes isRunning to false if it is true, and true if it is false. See what happens? Not good at all.
To fix this will go along side fixing our paddle control. We need to store the last key state into a variable so we can compare it to the current key state. if space has already been pressed we don’t want the game to continually setting isRunning over and over again. We only want it to be changed once untill we have lifted our finger off of the key, and then pressed it again to continue playing. This is the last significant change that needs to be done to our game to make true pong clone.
Our list now looks like this.
1. Fix crappy controls
2. Add angular control to the ball
3. Fix crappy collision
4. Add a pause function
