Create A Breakout Sport With Flame and Forge2D – Half 3

This text is Half 3 of a three-part tutorial on making a Flutter Breakout sport with Flame and Forge2D.

The companion articles to this tutorial are:

In Half 2 of this tutorial, you expanded your data of Forge2D. You realized the right way to create the brick wall and paddle on your Breakout sport. You additionally realized the right way to add consumer enter controls and create joints to attach inflexible our bodies.

Your sport is starting to appear to be the Breakout sport.

On this tutorial, you’ll full your Breakout sport by including gameplay logic and skinning the sport. Additionally, you’ll study:

• Add sport guidelines and behaviors.
• Add gameplay logic.
• Create a Forge2D sensor.
• Use the Flame Widgets Overlay API so as to add Flutter widgets to regulate the sport.
• Add consumer faucet enter.
• Use Canvas to pores and skin your sport by portray the inflexible BodyComponent within the sport to provide them coloration.

Getting Began

You should use the mission you labored on in Half 2 of this tutorial or the starter mission for this tutorial. Obtain it by clicking the Obtain Supplies button on the high or backside of the tutorial.

Each of those tasks have a Forge2D ball bouncing inside an enviornment. Additionally, you might have a brick wall, a paddle the participant can management and collision detection that removes bricks from the wall. That is the place to begin for this tutorial.

Including Sport Guidelines and Behaviors

Video games have guidelines and should pose a problem to gamers. Sadly, your sport at this level doesn’t have any guidelines and it isn’t a lot of a problem — when the participant misses the ball, it bounces off the underside wall and continues. If the participant destroys all of the bricks, the ball continues to bounce in an empty enviornment. You’ll now add gameplay logic to your sport.

Including Gameplay Logic

A Breakout sport is over when the participant misses the ball with the paddle. Sport guidelines additionally embody that when a participant destroys all of the bricks, the participant wins and the sport is over. You’ll now add this gameplay logic to your sport.

Open forge2d_game_world.dart and add the next enum on the high of the file earlier than the Forge2dGameWorld class definition:

enum GameState {
 initializing,
 prepared,
 operating,
 paused,
 received,
 misplaced,
}

These would be the six states on your sport. Now, add a gameState property to Forge2dGameWorld and set the preliminary state to initializing.

 GameState gameState = GameState.initializing;

Subsequent, set the sport state to prepared as soon as the sport completes initializing. Add the next state change because the final line in _initializeGame:

 gameState = GameState.prepared;

You now have the primary two states of your sport in place.

Successful and dropping are two important sport states. First, you’ll see the right way to decide when the participant loses the sport and set the sport state to GameState.misplaced. Then, you’ll add a verify for when all of the bricks within the wall are destroyed and set the sport state to GameState.received.

Including a Forge2D Sensor

You’ll now add a Forge2D sensor for the lifeless zone to detect when the participant has missed the ball. What’s a lifeless zone? It’s a area on the backside of the sector. The lifeless zone will use a Fixture sensor that detects collisions with out producing a response. Restated, this implies you may get notified of a collision, however the colliding physique will go by with out responding to the collision.

Create a dead_zone.dart file within the parts folder and add the next traces of code to the file:

import 'bundle:flame/extensions.dart';
import 'bundle:flame_forge2d/flame_forge2d.dart';

import '../forge2d_game_world.dart';
import 'ball.dart';

// 1
class DeadZone extends BodyComponent<Forge2dGameWorld> with ContactCallbacks {
 last Measurement measurement;
 last Vector2 place;

 DeadZone({
 required this.measurement,
 required this.place,
 });

 @override
 Physique createBody() {
 last bodyDef = BodyDef()
 ..sort = BodyType.static
 ..userData = this
 ..place = place;

 last zoneBody = world.createBody(bodyDef);

 last form = PolygonShape()
 ..setAsBox(
 measurement.width / 2.0,
 measurement.peak / 2.0,
 Vector2.zero(),
 0.0,
 );

 // 2
 zoneBody.createFixture(FixtureDef(form)..isSensor = true);

 return zoneBody;
 }

 // 3
 @override
 void beginContact(Object different, Contact contact) {
 if (different is Ball) {
 gameRef.gameState = GameState.misplaced;
 }
 }
}

1. The declaration for DeadZone physique ought to look acquainted to you. DeadZone must react to the ball coming into contact with it, so add the ContactCallbacks mixin.
2. Setting the isSensor flag of the FixtureDef to true makes this physique distinctive. Sensor our bodies detect collisions however don’t react to them.
3. If the ball comes into contact with the lifeless zone, set the gameState to GameState.misplaced. Forge2dGameWorld will detect the sport state change within the sport loop replace methodology.

The sport loop must verify the sport state and act appropriately. On this case, when the participant loses, the sport must cease. With the Flame sport engine, pausing the engine is the suitable motion.

Open forge2d_game_world.dart and add these imports:

import 'bundle:flame/extensions.dart';

import 'parts/dead_zone.dart';

Then add the DeadZone physique to the _initializeGame routine between BrickWall and Paddle.

 last deadZoneSize = Measurement(measurement.x, measurement.y * 0.1);
 last deadZonePosition = Vector2(
 measurement.x / 2.0,
 measurement.y - (measurement.y * 0.1) / 2.0,
 );

 last deadZone = DeadZone(
 measurement: deadZoneSize,
 place: deadZonePosition,
 );
 await add(deadZone);

You need the lifeless zone to fill the sector space on the backside of the display. First, set the deadZoneSize to be the identical width and 10% of the peak of the sport space. Subsequent, set the deadZonePosition, so the DeadZone heart is on the backside of the sport space.

Now with a lifeless zone in place, you’ll be able to correctly place the paddle. The paddle ought to transfer alongside the highest fringe of the lifeless zone. Change paddlePosition to put the underside fringe of the paddle on the high fringe of the lifeless zone.

 last paddlePosition = Vector2(
 measurement.x / 2.0,
 measurement.y - deadZoneSize.peak - paddleSize.peak / 2.0,
 );

Add the next replace routine to forge2d_game_world.dart. The replace routine will pay attention for modifications to the sport state.

 @override
 void replace(double dt) {
 tremendous.replace(dt);

 if (gameState == GameState.misplaced) {
 pauseEngine();
 }
 }

Flame calls your replace routine from the sport loop, permitting you to make modifications or reply to occasions corresponding to sport state modifications. Right here, you’re calling pauseEngine to cease the execution of the sport loop.

Construct and run the mission. Now, you’ll get a white rectangular space on the backside of the display, which is the lifeless zone sensor physique. The sport stops when the ball comes into contact with the lifeless zone.

Why is the DeadZone physique white? For that matter, why are all of the Forge2D our bodies white? Forge2D’s BodyComponent default habits is to render physique fixture shapes, making them seen. You’ll be able to flip off this default habits by setting the renderBody property of a BodyComponent to false.

Open dead_zone.dart and add the next line of code on the high of the DeadZone class after the constructor.

 @override
 bool get renderBody => false;

Construct and run the mission. The lifeless zone physique stays, however Forge2D will not be rendering the fixture shapes on the physique. In an upcoming part, you’ll study extra about rendering our bodies if you “pores and skin” the sport.

Including the Win Sport State

Your sport is aware of when a participant loses, however not after they win. So that you’re now going so as to add the remaining sport states to your sport. Start by including the win state. Gamers win after they destroy all of the bricks.

Open brick_wall.dart and add the next code to replace simply after the for loop that eliminated destroyed bricks from the wall:

 if (kids.isEmpty) {
 gameRef.gameState = GameState.received;
 }

Now, open forge2d_game_world.dart and alter the if assertion situation within the replace operate to verify gameState for both GameState.misplaced or GameState.received.

 if (gameState == GameState.misplaced || gameState == GameState.received) {
 pauseEngine();
 }

Your sport will now acknowledge when the participant wins or loses, and the gameplay stops.

Including Begin and Reset Controls

Your sport begins to play if you run the app, no matter whether or not the participant is prepared. When the sport ends with a loss or a win, there’s no solution to replay the sport with out restarting the app. This habits isn’t user-friendly. You’ll now add controls for the participant to start out and replay the sport.

You’ll use overlays to current customary Flutter widgets to the consumer.

Flame Overlays

The Flame Widgets Overlay API offers a handy methodology for layering Flutter widgets on high of your sport widget. In your Breakout sport, the Widgets Overlay API is ideal for speaking to the participant when the sport is able to start and getting enter from the participant about replaying the sport.

You outline an Overlay in an overlay builder map offered to the GameWidget. The map declares a String and an OverlayWidgetBuilder builder methodology for every overlay. Flame calls the overlay builder methodology and provides the overlay if you add the overlay to the energetic overlays checklist.

You’ll begin by including a easy overlay informing the participant the sport is able to start.

Including a Sport-Prepared Overlay

Create an overlay_builder.dart file within the ui folder and add the next traces of code to the file:

import 'bundle:flutter/materials.dart';
import '../forge2d_game_world.dart';

// 1
class OverlayBuilder {
 OverlayBuilder._();

 // 2
 static Widget preGame(BuildContext context, Forge2dGameWorld sport) {
 return const PreGameOverlay();
 }
}

// 3
class PreGameOverlay extends StatelessWidget {
 const PreGameOverlay({tremendous.key});

 @override
 Widget construct(BuildContext context) {
 return const Heart(
 baby: Textual content(
 'Faucet Paddle to Start',
 fashion: TextStyle(
 coloration: Colours.white,
 fontSize: 24,
 ),
 ),
 );
 }
}

Let’s look at this code:

1. OverlayBuilder is a category container for scoping the overlay builder strategies.
2. Declare a static overlay builder methodology named pregame to instantiate the PreGameOverlay widget.
3. Declare a PreGameOverlay widget as a stateless widget. The PreGameOverlay widget is a widget that facilities a Textual content widget within the GameWidget container with textual content instructing the participant to faucet the paddle to start the sport.

Open main_game_page.dart and embody the next import to get the OverlayBuilder.preGame builder methodology:

import 'overlay_builder.dart';

And supply GameWidget with an overlay builder map:

 baby: GameWidget(
 sport: forge2dGameWorld,
 overlayBuilderMap: const {
 'PreGame': OverlayBuilder.preGame,
 },
 ),

You’ve created the overlay and notified Flame the right way to construct the overlay. Now you should utilize the overlay in your sport. It’s essential current the pregame overlay when the sport state is GameState.prepared.

Open forge2d_game_world.dart and add the next line of code on the finish of _initializeGame after setting gameState to GameState.prepared:

 gameState = GameState.prepared;
 overlays.add('PreGame');

Including Participant Faucet Enter

At present, a power is utilized to the ball after the sport is initialized and the Breakout sport begins. Sadly, this isn’t player-friendly. The only solution to let the participant management the sport begin is to attend till they faucet the sport widget.

Open forge2d_game_world.dart and take away the decision to _ball.physique.applyLinearImpulse from onLoad. The onLoad methodology will now solely name _initializeGame.

 @override
 Future<void> onLoad() async {
 await _initializeGame();
 }

Now, embody the next import and add the HasTappables mixin to your Forge2dGameWorld:

 import 'bundle:flame/enter.dart';

 class Forge2dGameWorld extends Forge2DGame with HasDraggables, HasTappables {

Subsequent, add a brand new onTapDown methodology to Forge2dGameWorld.

 @override
 void onTapDown(int pointerId, TapDownInfo information) {
 if (gameState == GameState.prepared) {
 overlays.take away('PreGame');
 _ball.physique.applyLinearImpulse(Vector2(-10.0, -10.0));
 gameState = GameState.operating;
 }
 tremendous.onTapDown(pointerId, information);
 }

When a participant faucets the display, onTapDown will get known as. If the sport is within the prepared and ready state, take away the pregame overlay and apply the linear impulse power that begins the ball’s motion. Lastly, don’t overlook to alter the sport state to GameState.operating.

Earlier than making an attempt your new pregame overlay, transfer the ball’s beginning place. In any other case, the overlay textual content might be on high of the ball. Contained in the _initialize methodology, change the beginning place of the ball to this:

 last ballPosition = Vector2(measurement.x / 2.0, measurement.y / 2.0 + 10.0);

 _ball = Ball(
 radius: 0.5,
 place: ballPosition,
 );
 await add(_ball);

Construct and run the mission. Your Breakout sport is ready so that you can faucet the display to start.

Very cool! However you continue to want a solution to reset the sport and play once more.

Including a Sport-Over Overlay

The sport-over overlay might be just like the game-ready overlay you created. But, whereas the overlay might be related, you could modify your sport to reset the sport parts to their preliminary pregame states.

Start by opening forge2d_game_world.dart and add the next resetGame methodology.

 Future<void> resetGame() async {}

resetGame is a placeholder methodology that you simply’ll come again to shortly.

Now, open overlay_builder.dart and create a brand new postGame overlay builder methodology in OverlayBuilder.

 static Widget postGame(BuildContext context, Forge2dGameWorld sport)  sport.gameState == GameState.received);

 last message = sport.gameState == GameState.received ? 'Winner!' : 'Sport Over';
 return PostGameOverlay(message: message, sport: sport);
 

The postGame overlay will congratulate the participant on a win or allow them to know the sport is over on a loss.

Now, declare a PostGameOverlay stateless widget to show the suitable postgame message to the participant and provides them a replay button to reset the sport. Add the PostGameOverlay class on the backside of overlay_builder.dart.

class PostGameOverlay extends StatelessWidget {
 last String message;
 last Forge2dGameWorld sport;

 const PostGameOverlay({
 tremendous.key,
 required this.message,
 required this.sport,
 });

 @override
 Widget construct(BuildContext context) {
 return Heart(
 baby: Column(
 mainAxisAlignment: MainAxisAlignment.heart,
 kids: [
 Text(
 message,
 style: const TextStyle(
 color: Colors.white,
 fontSize: 24,
 ),
 ),
 const SizedBox(height: 24),
 _resetButton(context, game),
 ],
 ),
 );
 }

 Widget _resetButton(BuildContext context, Forge2dGameWorld sport) {
 return OutlinedButton.icon(
 fashion: OutlinedButton.styleFrom(
 facet: const BorderSide(
 coloration: Colours.blue,
 ),
 ),
 onPressed: () => sport.resetGame(),
 icon: const Icon(Icons.restart_alt_outlined),
 label: const Textual content('Replay'),
 );
 }
}

The PostGameOverlay widget ought to really feel acquainted. The postgame overlay is outlined utilizing Flutter widgets, a Textual content widget to show a message and a button to reset the sport.

Discover the onPressed callback methodology within the reset button. The overlay builder methodology API offers a reference to the sport loop. Your overlay can use this reference to ship a message to the sport loop to reset the sport. Fairly cool, huh?

Resetting the Sport

You now have a postgame overlay, however you could make your sport resettable.

First, open forge2d_game_world.dart and make all of the Forge2D our bodies occasion variables. These might be late last variables as a result of the our bodies aren’t created till the sport is loading.

 late last Enviornment _arena;
 late last Paddle _paddle;
 late last DeadZone _deadZone;
 late last BrickWall _brickWall;

After you’ve created the occasion variables, repair the variable initializations in _initializeGame.

 Future<void> _initializeGame() async {
 _arena = Enviornment();
 await add(_arena);

 last brickWallPosition = Vector2(0.0, measurement.y * 0.075);

 _brickWall = BrickWall(
 place: brickWallPosition,
 rows: 8,
 columns: 6,
 );
 await add(_brickWall);

 last deadZoneSize = Measurement(measurement.x, measurement.y * 0.1);
 last deadZonePosition = Vector2(
 measurement.x / 2.0,
 measurement.y - (measurement.y * 0.1) / 2.0,
 );

 _deadZone = DeadZone(
 measurement: deadZoneSize,
 place: deadZonePosition,
 );
 await add(_deadZone);

 const paddleSize = Measurement(4.0, 0.8);
 last paddlePosition = Vector2(
 measurement.x / 2.0,
 measurement.y - deadZoneSize.peak - paddleSize.peak / 2.0,
 );

 _paddle = Paddle(
 measurement: paddleSize,
 floor: _arena,
 place: paddlePosition,
 );
 await add(_paddle);

 last ballPosition = Vector2(measurement.x / 2.0, measurement.y / 2.0 + 10.0);

 _ball = Ball(
 radius: 0.5,
 place: ballPosition,
 );
 await add(_ball);

 gameState = GameState.prepared;
 overlays.add('PreGame');
 }

Now, make the three Breakout sport parts — the ball, paddle and wall — resettable.

Open ball.dart and add the next reset methodology:

 void reset() {
 physique.setTransform(place, angle);
 physique.angularVelocity = 0.0;
 physique.linearVelocity = Vector2.zero();
 }

Within the reset methodology, you’re resetting the ball’s location again to its preliminary place and setting the angular and linear velocities to zero, a ball at relaxation.

Now, open paddle.dart and add this reset methodology:

 void reset() {
 physique.setTransform(place, angle);
 physique.angularVelocity = 0.0;
 physique.linearVelocity = Vector2.zero();
 }

Lastly, open brick_wall.dart and add this reset methodology:

 Future<void> reset() async {
 removeAll(kids);
 await _buildWall();
 }

Now, open forge2d_game_world.dart. First, add a name to indicate the postgame overlay when the sport state is misplaced or received, contained in the replace operate:

 if (gameState == GameState.misplaced || gameState == GameState.received) {
 pauseEngine();
 overlays.add('PostGame');
 }

Then, add the next code to resetGame.

 Future<void> resetGame() async {
 gameState = GameState.initializing;

 _ball.reset();
 _paddle.reset();
 await _brickWall.reset();

 gameState = GameState.prepared;

 overlays.take away(overlays.activeOverlays.first);
 overlays.add('PreGame');

 resumeEngine();
 }

This methodology units the sport state to initializing after which calls the reset strategies on the three dynamic parts. After the sport parts reset, set the sport state to prepared, exchange the postgame overlay with the pregame overlay and resume the sport.

Now, open main_game_page.dart and add the postgame overlay to the overlayBuilderMap.

 overlayBuilderMap: const {
 'PreGame': OverlayBuilder.preGame,
 'PostGame': OverlayBuilder.postGame,
 },

Construct and run the mission. The sport now congratulates the participant for successful or the sport is over. In each instances, the participant can press a button to replay the sport.

Tip: Testing the win-game state might be tedious, if it’s a must to destroy all of the bricks. To make successful the sport simpler, set the rows and columns of the brick wall to a smaller worth.

Congratulations! You’ve a useful Breakout sport.

Your sport has the wanted parts and performance for a Breakout sport. You’ve added gameplay logic for successful and dropping a sport. You’ve added sport states to regulate organising, taking part in and resetting the sport. However, one thing’s lacking. The sport isn’t stunning.

You have to “pores and skin” your sport to make it fairly.

Skinning Your Sport

A number of strategies could make your sport prettier. Flame helps Sprites and different instruments to pores and skin video games. Additionally, Forge2D’s BodyComponent has a render methodology you’ll be able to override to offer your customized render methodology. Within the following sections, you’ll study to create a customized render methodology for the ball, paddle and brick wall.

Rendering the Ball

Forge2D is two-dimensional. A ball is a three-dimensional sphere. So what are you able to do to provide the ball a 3D look? Gradients! Rendering the ball with a radial gradient will present the 3D phantasm wanted.

Open ball.dart and add the next imports:

import 'bundle:flutter/rendering.dart';

import 'bundle:flame/extensions.dart';

Now, add the next gradient code after the Ball constructor:

 last _gradient = RadialGradient(
 heart: Alignment.topLeft,
 colours: [
 const HSLColor.fromAHSL(1.0, 0.0, 0.0, 1.0).toColor(),
 const HSLColor.fromAHSL(1.0, 0.0, 0.0, 0.9).toColor(),
 const HSLColor.fromAHSL(1.0, 0.0, 0.0, 0.4).toColor(),
 ],
 stops: const [0.0, 0.5, 1.0],
 radius: 0.95,
 );

Utilizing HSL, hue, saturation and lightweight, coloration declarations might be simpler to learn and perceive than different coloration fashions. These three colours are shades of white at 100%, 90% and 40% lightness. This RadialGradient makes use of these shades of white to provide the ball a cue-ball look.

Subsequent, add the next render methodology to the Ball part:

 //1
 @override
 void render(Canvas canvas) {

 // 2
 last circle = physique.fixtures.first.form as CircleShape;

 // 3
 last paint = Paint()
 ..shader = _gradient.createShader(Rect.fromCircle(
 heart: circle.place.toOffset(),
 radius: radius,
 ))
 ..fashion = PaintingStyle.fill;

 // 4
 canvas.drawCircle(circle.place.toOffset(), radius, paint);
 }

The render methodology is straightforward. Let’s take a more in-depth look.

1. You’ll be able to override the Forge2D BodyComponent render methodology to customise drawing the physique. The render methodology passes you a reference to the Dart Canvas, the place you’ll be able to draw the physique.
2. The ball physique has a single CircleShape fixture. Get the form data from the physique.
3. Create a Paint object with the gradient to make use of when drawing the ball.
4. Draw the ball with the radial gradient.

Construct and run the mission. Discover the shading impact on the ball? Fairly cool, huh?

Rendering the Paddle

Rendering the paddle is like the way you rendered the ball, however simpler. To color the paddle, you’ll use a single opaque coloration.

Open paddle.dart and add the next imports:

import 'bundle:flutter/rendering.dart';

Then add the next render methodology to the Paddle part:

 @override
 void render(Canvas canvas) {
 last form = physique.fixtures.first.form as PolygonShape;

 last paint = Paint()
 ..coloration = const Coloration.fromARGB(255, 80, 80, 228)
 ..fashion = PaintingStyle.fill;

 canvas.drawRect(
 Rect.fromLTRB(
 form.vertices[0].x,
 form.vertices[0].y,
 form.vertices[2].x,
 form.vertices[2].y,
 ),
 paint);
 }

The PolygonShape has the vertices of the paddle in form.vertices. The primary level is the higher left-hand nook of the rectangle. The decrease right-hand nook is the third level. You should use these factors to attract the paddle on the canvas.

Construct and run the mission. You’ve colorized the paddle.

That leaves coloring the brick wall.

Rendering the Brick Wall

Rendering the brick wall has two parts: the rainbow of colours used to paint the wall and the portray of every brick. The brick wall handles creating the bricks making up the wall. The brick wall will preserve the checklist of colours for the wall and assign every brick an acceptable coloration. Every brick might be chargeable for rendering itself with its assigned coloration.

Begin by opening brick.dart and add the next import:

import 'bundle:flame/parts.dart';

Subsequent, add a coloration property to Brick:

 last Measurement measurement;
 last Vector2 place;
 last Coloration coloration;

 Brick({
 required this.measurement,
 required this.place,
 required this.coloration,
 });

Then, add the next render methodology:

 @override
 void render(Canvas canvas) {
 if (physique.fixtures.isEmpty) {
 return;
 }

 last rectangle = physique.fixtures.first.form as PolygonShape;

 last paint = Paint()
 ..coloration = coloration
 ..fashion = PaintingStyle.fill;

 canvas.drawRect(
 Rect.fromCenter(
 heart: rectangle.centroid.toOffset(),
 width: measurement.width,
 peak: measurement.peak,
 ),
 paint);
 }

Discover the verify to make sure a Fixture is on the brick physique. We want this situation as a result of the brick may very well be within the means of being destroyed when Forge2D calls the render methodology.

Subsequent, open brick_wall.dart and add the next personal methodology to generate an evenly dispersed set of colours.

 // Generate a set of colours for the bricks that span a spread of colours.
 // This coloration generator creates a set of colours spaced throughout the
 // coloration spectrum.
 static const transparency = 1.0;
 static const saturation = 0.85;
 static const lightness = 0.5;

 Listing<Coloration> _colorSet(int rely) => Listing<Coloration>.generate(
 rely,
 (int index) => HSLColor.fromAHSL(
 transparency,
 index / rely * 360.0,
 saturation,
 lightness,
 ).toColor(),
 growable: false,
 );

The _colorSet routine generates a set of colours by dividing the vary of coloration hues evenly over the rows of bricks. This rainbow of colours is harking back to the Atari Breakout sport.

Now, add a non-public native variable after the BrickWall constructor to retailer the colours.

 late last Listing<Coloration> _colors;

Modify the onLoad methodology to create the colour set.

 @override
 Future<void> onLoad() async {
 _colors = _colorSet(rows);
 await _buildWall();
 }

Lastly, replace the decision to Brick to incorporate the assigned coloration for the brick within the _buildWall operate.

 await add(Brick(
 measurement: brickSize,
 place: brickPosition,
 coloration: _colors[i],
 ));

Construct and run the mission.

Congratulations! You’ve created a Breakout sport utilizing Flutter, Flame and Forge2D.

The place to Go From Right here?

Obtain the finished mission recordsdata by clicking the Obtain Supplies button on the high or backside of the tutorial.

The Breakout sport you created is the naked minimal performance for a sport. Tweaking and fine-tuning a sport could make your sport tougher. Listed here are some concepts:

• Add collision detection code to maintain the ball’s velocity inside a spread that makes the sport difficult.
• Add ranges to the sport with parameters that make every successive stage harder.
• Add scoring to the sport by assigning values to the bricks.
• Add a timer to the sport.

You may make many additions to take your Breakout sport to the following stage. Be inventive and let your creativeness be your information!