Week 10- Super Breakout Game

Concept:

When I saw the assignment to create a project using Matter.js, the first thing that came to mind was recreating the classic Super Breakout game. I wanted to take the concept of bouncing a ball to break blocks and add some extra dynamics and fun with a physics engine. Super Breakout is simple yet addictive: you control a paddle, bouncing a ball to break rows of blocks. The challenge grows as the ball speeds up and changes angles, keeping the player focused and engaged.

Embedded Sketch:

Logic of Code:

I started by setting up a canvas with Matter.js as the physics engine to handle everything from gravity to collisions.

• Matter.js Basics: First, I created an engine and world using Matter.Engine and Matter.World, which handle the entire physics environment. To make the ball and paddle, I used Matter.Bodies to create specific shapes, including a rectangle for the paddle and a circle for the ball.
• Applying and Changing Forces: The ball starts with an initial velocity that gives it an upward and slightly angled movement. Each time the ball hits a block, I apply a slight random force. This “slight random force” is a tiny push in a random direction, which makes the ball move in an unpredictable way after each collision. This force helps the ball take new paths, creating a more dynamic and challenging gameplay experience, as it doesn’t just keep following the same straight line.
• Collision Events: Using Matter.Events.on, I could detect whenever the ball hit a block. Each time it does, the code removes that block from the world, applies a small random force to the ball, and slightly increases the ball’s speed, making the game progressively harder. Additionally, I added logic to make the ball bounce when it touches the canvas edges, keeping it in play.

Challenges:

One issue I encountered was the ball getting stuck bouncing horizontally, going left to right without moving much vertically. To solve this, I added a check to ensure the ball always has a minimum vertical speed (y velocity). If the y velocity is too low, the code adjusts it to a minimum value, ensuring the ball keeps moving in both directions. This way, the game remains challenging, and the ball doesn’t get trapped in a back-and-forth loop.

function increaseBallSpeed() {
    let speedFactor = 1.02; // Increase speed slightly after each collision
    let minYVelocity = 3; // Minimum vertical speed to prevent horizontal bouncing
    let currentVelocity = ball.velocity;
    
    // Set new velocity with minimum vertical speed
    let newVelocity = {
        x: currentVelocity.x * speedFactor,
        y: Math.abs(currentVelocity.y) < minYVelocity 
           ? (currentVelocity.y < 0 ? -minYVelocity : minYVelocity) 
           : currentVelocity.y * speedFactor
    };
    
    Body.setVelocity(ball, newVelocity); // Apply the new velocity to the ball
}

In this function:

• speedFactor controls how much the ball’s speed increases with each hit, keeping it manageable.
• minYVelocity sets a minimum speed for the y direction, so the ball keeps moving vertically.
• The code checks if Math.abs(currentVelocity.y) is less than minYVelocity. If it is, the y velocity is adjusted to either minYVelocity or -minYVelocity based on its current direction.

This addition keeps the gameplay smooth and prevents the ball from getting stuck in horizontal motion, which makes it one of my favorite parts of the code!

Future Improvements: 

While I’m happy with the current version, there’s a lot more I could add to enhance the gameplay. Some ideas for future improvements include:

• Power-Ups: Add special blocks that, when hit, might speed up the ball, slow it down, or make it larger, adding more excitement and strategy to the game.
• Score Tracking and Levels: Keeping score and advancing to new levels as blocks get progressively harder to break or new rows appear.
• Sound Effects: Adding sounds for when the ball hits a block, the paddle, or the canvas edges to make it more engaging.
• Mobile Version: Modifying the controls for touch interaction so the game can be played on mobile devices.