Pong Game Variations in p5.js
Horizontal Pong
This code creates a classic Pong game with horizontal movement.
Variables and Setup
canvasX and canvasY define the canvas size. The playerPaddle object stores the player paddle’s properties, including position, size, and speed. The ball object stores the ball’s properties.
The setup() function initializes the canvas and resets the ball’s position.
Gameplay Functions
draw() is the main game loop, calling functions to display shapes, control the paddle, update positions, and check for collisions.
displayShapes() draws the paddle and ball on the canvas.
updatePaddles() updates the player paddle’s position based on its speed and keeps it within the canvas boundaries.
controlPaddle() handles player input using the left and right arrow keys to control the paddle’s movement.
checkCollision() detects collisions between the ball and the paddle or canvas edges, reversing the ball’s direction accordingly.
updateBall() updates the ball’s position based on its speed.
resetBall() resets the ball’s position and assigns random speeds in both x and y directions.
Vertical Pong
This variation features vertical gameplay with an AI-controlled opponent.
Additional Variables and Setup
The enemyPaddle object is introduced to represent the opponent’s paddle. The AIControl() function is added to handle the AI’s behavior.
Gameplay Functions
updatePaddles() now updates both the player and enemy paddles’ vertical positions.
controlPaddle() remains the same, using the up and down arrow keys for player control.
checkCollision() now checks for collisions with both paddles, slightly increasing the ball’s speed on each paddle hit.
AIControl() moves the enemy paddle up or down based on the ball’s vertical position.
Random Points
This code generates random points with varying colors and sizes on the canvas.
Variables and Setup
position stores the x and y coordinates of each point. myColor stores the RGBA color values. size determines the point size.
The setup() function initializes the canvas and sets a gray background with no stroke for the points.
Drawing Points
draw() continuously generates random positions and colors for the points, then draws them as ellipses on the canvas.
Growing and Shrinking Ellipses
This code creates two ellipses that move diagonally and change size in opposite directions.
Variables and Setup
Multiple variables define the initial positions, sizes, and speeds of the ellipses.
The setup() function initializes the canvas.
Animation
draw() updates the positions and sizes of the ellipses, making one grow and the other shrink as they move diagonally.
Ellipse Diagonal Movement
This code animates an ellipse moving diagonally across the canvas, resetting its position when it reaches the bottom-right corner.
Variables and Setup
Variables define the canvas dimensions, ellipse size, initial position, and speed.
The setup() function initializes the canvas and sets the initial values.
Animation and Reset
draw() updates the ellipse’s position diagonally and checks if it has reached the bottom-right corner. If so, it resets the position to the top-left corner.
Bouncing Ball
This code creates a ball that bounces off the edges of the canvas.
Variables and Setup
position stores the ball’s x and y coordinates. xSpeed and ySpeed determine the ball’s horizontal and vertical speeds.
The setup() function initializes the canvas and sets the initial position and speeds.
Movement and Bouncing
draw() updates the ball’s position based on its speeds and checks if it hits the canvas edges. If so, it reverses the corresponding speed to create a bouncing effect.
Randomly Colored Balls
This code generates balls with random colors, sizes, and movements that bounce off the canvas edges.
Variables and Setup
position stores the ball’s coordinates. colorShape stores the RGBA color values. size, directionX, directionY, and strokeWeight_ determine the ball’s size, movement directions, and stroke weight.
The setup() function initializes the canvas and calls generateShape() to create the first ball.
Shape Generation and Display
generateShape() sets random properties for the ball, including position, color, size, movement directions, and stroke weight.
displayShape() draws the ball on the canvas with the generated properties.
Animation and Edge Checking
animateShape() updates the ball’s position based on its movement directions and calls checkEdges().
checkEdges() checks if the ball is outside the canvas boundaries. If so, it calls generateShape() to create a new ball.
Kirby Ball Game
This code creates a game where the player controls Kirby to avoid a bouncing ball. The player shrinks upon collision, and power-ups can restore size.
Variables and Setup
player and ball objects store their respective properties. score tracks the player’s score. powerUp counts available power-ups. Additional variables manage images, sounds, and fonts.
The preload() function loads images and sounds. setup() initializes the canvas, sets initial positions, and configures image mode.
Gameplay Functions
draw() calls various functions to display images, update text, handle player movement, update the ball, check for collisions, and manage power-ups.
textBallSpeed() displays the current ball speed.
displayImages() draws the background, player, ball, and power-up images.
textScore() displays the current score.
textPowerUp() displays the number of available power-ups.
keyPressed() checks for the spacebar press to use a power-up.
playerMovement() handles player movement using arrow keys and constrains the player within the canvas.
updateBall() updates the ball’s position based on its speeds.
checkEdges() reverses the ball’s direction when it hits the canvas edges and plays a bounce sound.
checkPlayerCollision() detects collisions between the player and the ball, decreasing the player’s size, resetting the ball, increasing the score, and playing a sound.
changeBallSpeed() adjusts the ball’s speed based on collisions.
drecreasePlayerSize() decreases the player’s size upon collision and increases the power-up count when the minimum size is reached.
usePowerUp() restores the player’s size and resets the power-up count when a power-up is available.
resetBall() resets the ball’s position and randomizes its direction.
resetSize() restores the player’s size and plays a sound.