Coding 1: Pong Project

A classic, classic game!

Requirements

START WITH THIS CODE  

For Coding 1, we're creating a 1-player pong game. The rules are as follows:

  • There's a rectangular paddle along the bottom of of the screen controller by the player
    • It tries to follow the mouse. It doesn't just "stick" the the mouse's location
    • It stops at the edges of the screen.
  • There's 1 ball bouncing around the screen
    • The ball keeps moving straight unless it hits something
    • If the ball hits the left, top, or right walls, it simply bounces off of them
    • If the ball hits the paddle, it bounces off the paddle
    • If the ball hits the bottom all, the game is over

Other Required Features

  • Game Over
    • When the ball hits the bottom wall, the ball should stop
    • At this point, game displays "You lose, click to restart" or similar text
  • Score Counters
    • Current Score: a label with the number of hits the player has accomplished since the last restart is displayed in the top left
      • This should reset to zero when the player restarts the game
    • Record Score: a label with the highest score the player achieved should be in the top left
      • This should not reset when a player restarts the game.

Bonus Features

  • Paddle Trap Bug: Solve the "paddle trap" glitch, where the ball slides across the paddle when it hits the paddle from the side
  • Animating Colors: Make the ball and/or paddle and/or background slowly animate through colors to provide some variety
  • Ball Trail: Leave a faded / fading trail behind where the ball has been
  • Intro Instructions: before the game starts, display text on the screen telling the user how to play, what controls to use, etc.
  • Gradually Increasing Ball Speed: over time, gradually increase the speed of the ball to make the game harder over time. Reset this when the user restarts the game
  • Random Ball Bounce: when the ball hits the paddle (or a wall), add a slight amount of randomness to how it bounces off so that the ball doesn't follow a super boring predictable pattern.
  • Angled Paddle: Make the paddle a different shape then a rectangle (consider a semi-circle or a trapezoid). Adjust the bounce logic so that the ball bounces off these angles correctly

Tips

Recommended Steps

  1. Make a ball on the screen, and get it to move
  2. Get the ball to bounce off the edges of the screen
  3. Make a paddle along the bottom wall
  4. Get the paddle to follow (not stick to) the mouse's x-coordinate movements
  5. Get the ball bouncing off the paddle
  6. Detect when the ball hits the bottom wall
    • For Oct 17th homework, set noLoop() to stop game

Getting the ball to bounce

Screencast

// ball moves right if ballXSpd is positive
// and left if ballXSpd is negative
ballX += ballXSpd;
// When the right side of the ball is past 
// the right side of the screen ...
if(ballX + ballRadius > width){
    // We negate the x velocity, which causes 
    // it to bounce
    ballXSpd=-ballXSpd;
}

Getting the paddle to follow the mouse

Screencast

Remember our "ball following the mouse" catalyst? This is the same concept!

Detecting if ball hits paddle

Screencast

In addition to testing the y postiion of the ball, you also need to ensure the ball is horizontally within the paddle

Pausing and resuming the game

Screencast

Two functions will help you immensely when figuring out how to pause and restart the game: loop() and noLoop()

  • noLoop() tells processing.js to pause the draw loop (stop making new frames). So the draw() function stops getting called.
    • Think of this like frameRate(0); (frameRate(0) doesn't to what you expect)
    • Other functions, like mouseClicked(), will still get called
  • loop() is the opposite: it tells processing.js to resume the draw loop