NodeJs/Reacts/Django Lab
Introduction:
A Brick Breaker game in Java is a classic arcade-style game where the player controls a paddle at the
bottom of the screen to bounce a ball and destroy a wall of bricks positioned above. The core mechanics
involve:
Paddle Control:
The player moves a paddle horizontally, typically using keyboard input (e.g., arrow keys), to intercept
and redirect the ball.
Ball Movement and Collisions:
A ball moves around the screen, bouncing off the walls, the paddle, and the bricks. Collision detection is
crucial to determine how the ball's direction changes upon impact with these elements.
Brick Destruction:
When the ball collides with a brick, the brick is destroyed and removed from the game board. This
action often contributes to the player's score.
Game Objectives:
The primary goal is to destroy all the bricks on the screen. The game typically ends if the ball falls
below the paddle (resulting in a lost life) or when all bricks are cleared (leading to a win).
Game Elements:
Game Board: The visual area where the game takes place, often with a background
and borders.
Bricks: The targets that the player must destroy, usually arranged in a grid or
pattern. Bricks might have varying properties, such as requiring multiple hits to break or
offering power-ups.
Paddle: The player-controlled object used to interact with the ball.
Department of CSE, BRECW 1
NodeJs/Reacts/Django Lab
Pseudo code
1. Initialize Game
START
Create Window (Width, Height)
Set Timer for game loop (e.g., 8 ms) Initialize:
paddleX = starting paddle position ballX,
ballY = starting ball positions ballXdir
= -1 (horizontal direction) ballYdir = -2
(vertical direction)
Load bricks:
rows = 3
cols = 7
Create 2D array bricks[rows][cols] and mark all as 1 (visible)
score = 0
total Bricks = rows * cols
2. Game Loop (runs every few milliseconds)
On Timer Tick:
IF game running THEN
Move ball:
Department of CSE, BRECW 2
NodeJs/Reacts/Django Lab
ballX = ballX +
ballXdir ballY = ballY
+ ballYdir
Check wall collisions:
IF ballX < 0 OR ballX > windowWidth THEN reverse ballXdir
IF ballY < 0 THEN reverse ballYdir
Check paddle collision:
IF ball intersects paddle THEN
reverse ballYdir
Check brick collision:
For each brick in bricks[][]
IF brick is visible AND ball intersects brick THEN
Make brick invisible
Increase score
Decrease totalBricks
Reverse ballYdir
Exit collision loop
Check loss:
IF ballY > windowHeight THEN
Game Over
stop ball movement
Department of CSE, BRECW 3
NodeJs/Reacts/Django Lab
Check win:
IF totalBricks == 0 THEN
You Win
stop ball movement
3. Drawing on Screen
Draw background
Draw paddle at paddleX
Draw ball at (ballX, ballY)
Draw each visible brick
Draw score
IF Game Over or Win THEN show message
4. Paddle Controls
On Left Arrow Key:
Move paddleX left by fixed amount (e.g., -20)
On Right Arrow Key:
Move paddleX right by fixed amount (e.g., +20)
Ensure paddle stays within window boundaries
5. Restart Game
If ENTER key is pressed AND game over
Reset ball, paddle, score, bricks
Set game running = true
Department of CSE, BRECW 4
NodeJs/Reacts/Django Lab
MAIN code:
import [Link].*;
import [Link].*;
import [Link].*;
public class BrickBreaker extends JPanel implements KeyListener, ActionListener {
// Game Variables
private Boolean play = false;
private int score = 0;
private int totalBricks =
21; private Timer timer;
private int delay = 8;
private int playerX = 310; // Paddle position
private int ballPosX = 120; // Ball position
private int ballPosY = 350;
private int ballXdir = -1;
private int ballYdir = -2;
// Brick Map
private int [][]
map;
private int brickWidth;
private int brickHeight;
Department of CSE, BRECW 5
NodeJs/Reacts/Django Lab
// Constructor
public BrickBreaker ()
{ map = new int [3][7];
for (int i = 0; i < 3; i++)
for (int j = 0; j < 7; j++)
map[i][j] = 1;
brickWidth = 540 / 7;
brickHeight = 150 / 3;
addKeyListener(this);
setFocusable(true);
setFocusTraversalKeysEnabled(false);
timer = new Timer (delay, this);
timer. start ();
// Draw Everything
public void paint(Graphics g) {
// Background
[Link]([Link]);
[Link](1, 1, 700, 600);
// Draw Bricks
Department of CSE, BRECW 6
NodeJs/Reacts/Django Lab
for (int i = 0; i < map. length; i++) {
for (int j = 0; j < map [0]. length; j++)
{ if (map[i][j] > 0) {
g. setColor ([Link]);
g. fillRect (j * brickWidth + 80, i * brickHeight + 50,
brickWidth, brickHeight);
g. setColor (Color. Black);
g. drawRect (j * brickWidth + 80, i * brickHeight + 50,
brickWidth, brickHeight);
// Borders
g. setColor ([Link]);
g. fillRect (0, 0, 3, 600);
g. fillRect (0, 0, 700, 3);
g. fillRect (697, 0, 3, 600);
// Score
g. setColor ([Link]);
g. setFont (new Font ("serif", [Link], 20));
Department of CSE, BRECW 7
NodeJs/Reacts/Django Lab
g. drawString ("Score: " + score, 560, 30);
// Paddle
g. set Color ([Link]);
g. fillRect (playerX, 550, 100, 8);
// Ball
g. set Color (Color. Yellow);
g. fill Oval (ballPosX, ballPosY, 20, 20);
// Win Message
if (totalBricks <= 0)
{ play = false;
ballXdir = 0;
ballYdir = 0;
g. set Color ([Link]);
g. setFont (new Font ("serif", [Link], 30));
g. drawString ("You Won!", 260, 300);
g. setFont (new Font ("serif", [Link], 20));
g. drawString ("Press Enter to Restart", 230, 340);
// Game Over
if (ballPosY > 570) {
Department of CSE, BRECW 8
NodeJs/Reacts/Django Lab
play = false;
ballXdir = 0;
ballYdir = 0;
g. set Color ([Link]);
[Link](new Font ("serif", [Link], 30));
g. drawString ("Game Over!", 250, 300);
g. setFont (new Font ("serif", Font. BOLD, 20));
g. drawString ("Score: " + score, 280, 330);
g. drawString ("Press Enter to Restart", 230, 360);
g. dispose ();
@Override
public void actionPerformed (ActionEvent e)
{ timer. start ();
if (play) {
// Ball Movement
ballPosX += ballXdir;
ballPosY += ballYdir;
Rectangle ballRect = new Rectangle (ballPosX, ballPosY, 20, 20);
Department of CSE, BRECW 9
NodeJs/Reacts/Django Lab
Rectangle paddleRect = new Rectangle (playerX, 550, 100, 8);
if ([Link](paddleRect)) {
ballYdir = -ballYdir;
// Brick Collision
A:
for (int i = 0; i < map. length; i++) {
for (int j = 0; j < map [0]. length; j++)
{ if (map[i][j] > 0) {
int brickX = j * brickWidth + 80;
int brickY = i * brickHeight + 50;
Rectangle brickRect = new Rectangle (brickX, brickY, brickWidth, brickHeight);
if ([Link](brickRect)) {
map[i][j] =
0;
totalBricks--;
score += 5;
if (ballPosX + 19 <= brickX || ballPosX + 1 >= brickX + brickWidth)
Department of CSE, BRECW 10
NodeJs/Reacts/Django Lab
ballXdir = -ballXdir;
else
ballYdir = -ballYdir;
break A;
// Wall Bounce
if (ballPosX < 0) ballXdir = -ballXdir;
if (ballPosY < 0) ballYdir = -ballYdir;
if (ballPosX > 670) ballXdir = -ballXdir;
repaint ();
@Override
public void keyPressed (KeyEvent e) {
if (e. getKeyCode () == KeyEvent.VK_RIGHT)
{ if (playerX < 600) playerX += 20;
play = true;
Department of CSE, BRECW 11
NodeJs/Reacts/Django Lab
if ([Link]() == KeyEvent.VK_LEFT)
{ if (playerX > 10) playerX -= 20;
play = true;
if (e. getKeyCode () == KeyEvent.VK_ENTER) {
if (! play) {
// Reset Game
play = true;
ballPosX = 120;
ballPosY = 350;
ballXdir = -1;
ballYdir = -2;
score = 0;
totalBricks = 21;
// Reset Brick Map
for (int i = 0; i < 3; i++)
for (int j = 0; j < 7; j++)
map[i][j] = 1;
repaint ();
Department of CSE, BRECW 12
NodeJs/Reacts/Django Lab
@Override public void keyTyped (KeyEvent e) {}
@Override public void keyReleased (KeyEvent e)
{}
// MAIN METHOD TO RUN GAME
public static void main (String [] args)
{ JFrame frame = new JFrame ();
BrickBreaker game = new BrickBreaker
(); frame. setBounds (10, 10, 700, 600);
frame. set Title ("Brick Breaker");
frame. set Resizable(false);
frame. setVisible(true);
frame. setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
[Link](game);
Department of CSE, BRECW 13
NodeJs/Reacts/Django Lab
OUPUT:
Department of CSE, BRECW 14