The Breakout game
In this part of the Java 2D games tutorial we will create a simple Breakout game clone.The Breakout is an arcade game originally developed by Atari Inc. The game was created in 1976. In this game, the player moves a paddle on the screen and bounces a ball/balls. The objective is to destroy bricks in the top of the window.
Development
In our game, we have one paddle, one ball and 30 bricks. I have created an image for a ball, paddle and a brick in Inkscape. We use a timer to create a game cycle. We do not work with angles, we simply change directions. Top, bottom, left and right. I was inspired by the pybreakout game. It was developed in PyGame library by Nathan Dawson.The game is intentionally simple. There are no bonuses, levels, score. So that it is easier to understand.
The game consists of seven files.
Commons.java
package breakout;The Commons.java file has some common constants.
public interface Commons {
public static final int WIDTH = 300;
public static final int HEIGTH = 400;
public static final int BOTTOM = 390;
public static final int PADDLE_RIGHT = 250;
public static final int BALL_RIGHT = 280;
}
Sprite.java
package breakout;The Sprite class is a base class for all objects on the Board. We put here all methods and variables that are in Ball, Brick and Paddle objects. Like getImage() or getX() methods.
import java.awt.Image;
import java.awt.Rectangle;
public class Sprite {
protected int x;
protected int y;
protected int width;
protected int heigth;
protected Image image;
public void setX(int x) {
this.x = x;
}
public int getX() {
return x;
}
public void setY(int y) {
this.y = y;
}
public int getY() {
return y;
}
public int getWidth() {
return width;
}
public int getHeight() {
return heigth;
}
Image getImage()
{
return image;
}
Rectangle getRect()
{
return new Rectangle(x, y,
image.getWidth(null), image.getHeight(null));
}
}
Brick.java
package breakout;This is the Brick class.
import javax.swing.ImageIcon;
public class Brick extends Sprite {
String brickie = "../images/brickie.png";
boolean destroyed;
public Brick(int x, int y) {
this.x = x;
this.y = y;
ImageIcon ii = new ImageIcon(this.getClass().getResource(brickie));
image = ii.getImage();
width = image.getWidth(null);
heigth = image.getHeight(null);
destroyed = false;
}
public boolean isDestroyed()
{
return destroyed;
}
public void setDestroyed(boolean destroyed)
{
this.destroyed = destroyed;
}
}
boolean destroyed;In the destroyed variable we keep the state of a brick.
Ball.java
package breakout;This is the Ball class.
import javax.swing.ImageIcon;
public class Ball extends Sprite implements Commons {
private int xdir;
private int ydir;
protected String ball = "../images/ball.png";
public Ball() {
xdir = 1;
ydir = -1;
ImageIcon ii = new ImageIcon(this.getClass().getResource(ball));
image = ii.getImage();
width = image.getWidth(null);
heigth = image.getHeight(null);
resetState();
}
public void move()
{
x += xdir;
y += ydir;
if (x == 0) {
setXDir(1);
}
if (x == BALL_RIGHT) {
setXDir(-1);
}
if (y == 0) {
setYDir(1);
}
}
public void resetState()
{
x = 230;
y = 355;
}
public void setXDir(int x)
{
xdir = x;
}
public void setYDir(int y)
{
ydir = y;
}
public int getYDir()
{
return ydir;
}
}
public void move()The move() method moves the ball on the Board. If the ball hits the borders, the directions are changed accordingly.
{
x += xdir;
y += ydir;
if (x == 0) {
setXDir(1);
}
if (x == BALL_RIGHT) {
setXDir(-1);
}
if (y == 0) {
setYDir(1);
}
}
public void setXDir(int x)These two methods are called, when the ball hits the paddle or a brick.
{
xdir = x;
}
public void setYDir(int y)
{
ydir = y;
}
Paddle.java
package breakout;This is the Paddle class. It encapsulates the paddle object in the Breakout game. The paddle is controlled with left and right arrow keys. By pressing the arrow key, we set the direction variable. By releasing the arrow key, we set the dx variable to zero. This way the paddle stops moving.
import java.awt.event.KeyEvent;
import javax.swing.ImageIcon;
public class Paddle extends Sprite implements Commons {
String paddle = "../images/paddle.png";
int dx;
public Paddle() {
ImageIcon ii = new ImageIcon(this.getClass().getResource(paddle));
image = ii.getImage();
width = image.getWidth(null);
heigth = image.getHeight(null);
resetState();
}
public void move() {
x += dx;
if (x <= 2)
x = 2;
if (x >= Commons.PADDLE_RIGHT)
x = Commons.PADDLE_RIGHT;
}
public void keyPressed(KeyEvent e) {
int key = e.getKeyCode();
if (key == KeyEvent.VK_LEFT) {
dx = -2;
}
if (key == KeyEvent.VK_RIGHT) {
dx = 2;
}
}
public void keyReleased(KeyEvent e) {
int key = e.getKeyCode();
if (key == KeyEvent.VK_LEFT) {
dx = 0;
}
if (key == KeyEvent.VK_RIGHT) {
dx = 0;
}
}
public void resetState() {
x = 200;
y = 360;
}
}
Board.java
package breakout;This is the Board class. Here we put the game logic.
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Point;
import java.awt.Toolkit;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import java.util.Timer;
import java.util.TimerTask;
import javax.swing.JPanel;
public class Board extends JPanel implements Commons {
Image ii;
Timer timer;
String message = "Game Over";
Ball ball;
Paddle paddle;
Brick bricks[];
boolean ingame = true;
int timerId;
public Board() {
addKeyListener(new TAdapter());
setFocusable(true);
bricks = new Brick[30];
setDoubleBuffered(true);
timer = new Timer();
timer.scheduleAtFixedRate(new ScheduleTask(), 1000, 10);
}
public void addNotify() {
super.addNotify();
gameInit();
}
public void gameInit() {
ball = new Ball();
paddle = new Paddle();
int k = 0;
for (int i = 0; i < 5; i++) {
for (int j = 0; j < 6; j++) {
bricks[k] = new Brick(j * 40 + 30, i * 10 + 50);
k++;
}
}
}
public void paint(Graphics g) {
super.paint(g);
if (ingame) {
g.drawImage(ball.getImage(), ball.getX(), ball.getY(),
ball.getWidth(), ball.getHeight(), this);
g.drawImage(paddle.getImage(), paddle.getX(), paddle.getY(),
paddle.getWidth(), paddle.getHeight(), this);
for (int i = 0; i < 30; i++) {
if (!bricks[i].isDestroyed())
g.drawImage(bricks[i].getImage(), bricks[i].getX(),
bricks[i].getY(), bricks[i].getWidth(),
bricks[i].getHeight(), this);
}
} else {
Font font = new Font("Verdana", Font.BOLD, 18);
FontMetrics metr = this.getFontMetrics(font);
g.setColor(Color.BLACK);
g.setFont(font);
g.drawString(message,
(Commons.WIDTH - metr.stringWidth(message)) / 2,
Commons.WIDTH / 2);
}
Toolkit.getDefaultToolkit().sync();
g.dispose();
}
private class TAdapter extends KeyAdapter {
public void keyReleased(KeyEvent e) {
paddle.keyReleased(e);
}
public void keyPressed(KeyEvent e) {
paddle.keyPressed(e);
}
}
class ScheduleTask extends TimerTask {
public void run() {
ball.move();
paddle.move();
checkCollision();
repaint();
}
}
public void stopGame() {
ingame = false;
timer.cancel();
}
public void checkCollision() {
if (ball.getRect().getMaxY() > Commons.BOTTOM) {
stopGame();
}
for (int i = 0, j = 0; i < 30; i++) {
if (bricks[i].isDestroyed()) {
j++;
}
if (j == 30) {
message = "Victory";
stopGame();
}
}
if ((ball.getRect()).intersects(paddle.getRect())) {
int paddleLPos = (int)paddle.getRect().getMinX();
int ballLPos = (int)ball.getRect().getMinX();
int first = paddleLPos + 8;
int second = paddleLPos + 16;
int third = paddleLPos + 24;
int fourth = paddleLPos + 32;
if (ballLPos < first) {
ball.setXDir(-1);
ball.setYDir(-1);
}
if (ballLPos >= first && ballLPos < second) {
ball.setXDir(-1);
ball.setYDir(-1 * ball.getYDir());
}
if (ballLPos >= second && ballLPos < third) {
ball.setXDir(0);
ball.setYDir(-1);
}
if (ballLPos >= third && ballLPos < fourth) {
ball.setXDir(1);
ball.setYDir(-1 * ball.getYDir());
}
if (ballLPos > fourth) {
ball.setXDir(1);
ball.setYDir(-1);
}
}
for (int i = 0; i < 30; i++) {
if ((ball.getRect()).intersects(bricks[i].getRect())) {
int ballLeft = (int)ball.getRect().getMinX();
int ballHeight = (int)ball.getRect().getHeight();
int ballWidth = (int)ball.getRect().getWidth();
int ballTop = (int)ball.getRect().getMinY();
Point pointRight =
new Point(ballLeft + ballWidth + 1, ballTop);
Point pointLeft = new Point(ballLeft - 1, ballTop);
Point pointTop = new Point(ballLeft, ballTop - 1);
Point pointBottom =
new Point(ballLeft, ballTop + ballHeight + 1);
if (!bricks[i].isDestroyed()) {
if (bricks[i].getRect().contains(pointRight)) {
ball.setXDir(-1);
}
else if (bricks[i].getRect().contains(pointLeft)) {
ball.setXDir(1);
}
if (bricks[i].getRect().contains(pointTop)) {
ball.setYDir(1);
}
else if (bricks[i].getRect().contains(pointBottom)) {
ball.setYDir(-1);
}
bricks[i].setDestroyed(true);
}
}
}
}
}
public void gameInit() {
ball = new Ball();
paddle = new Paddle();
int k = 0;
for (int i = 0; i < 5; i++) {
for (int j = 0; j < 6; j++) {
bricks[k] = new Brick(j * 40 + 30, i * 10 + 50);
k++;
}
}
}
In the gameInit() method we create a ball a paddle and 30 bricks. if (ingame) {
g.drawImage(ball.getImage(), ball.getX(), ball.getY(),
ball.getWidth(), ball.getHeight(), this);
g.drawImage(paddle.getImage(), paddle.getX(), paddle.getY(),
paddle.getWidth(), paddle.getHeight(), this);
for (int i = 0; i < 30; i++) {
if (!bricks[i].isDestroyed())
g.drawImage(bricks[i].getImage(), bricks[i].getX(),
bricks[i].getY(), bricks[i].getWidth(),
bricks[i].getHeight(), this);
}
}
If the game is not finished, we draw the ball, the paddle and the bricks inside the paint event. class ScheduleTask extends TimerTask {
public void run() {
ball.move();
paddle.move();
checkCollision();
repaint();
}
}
The ScheduleTask is triggerd every 10 ms. In the run method, we move the ball and the paddle. We check for possible collisiont. And we repaint the screen. if (ball.getRect().getMaxY() > Commons.BOTTOM)If the ball hits the bottom, we stop the game.
stopGame();
}
for (int i = 0, j = 0; i < 30; i++) {
if (bricks[i].isDestroyed()) {
j++;
}
if (j == 30) {
message = "Victory";
stopGame();
}
}
We check how many bricks are destroyed. If we destroyed all 30 bricks, we win the game. if (ballLPos < first) {
ball.setXDir(-1);
ball.setYDir(-1);
}
If the ball hits the first part of the paddle, we change the direction of the ball to the north-east. if (bricks[i].getRect().contains(pointTop)) {
ball.setYDir(1);
}
If the ball hits the bottom of the brick, we change the y direction of the ball. It goes down. The autoMove() method is called each game cycle to move the ball on the screen. If it hists the boundaries, the ball direction changes.
Breakout.java
package breakout;And finally, this is the Breakout class, which has the entry main method.
import javax.swing.JFrame;
public class Breakout extends JFrame {
public Breakout()
{
add(new Board());
setTitle("Breakout");
setDefaultCloseOperation(EXIT_ON_CLOSE);
setSize(Commons.WIDTH, Commons.HEIGTH);
setLocationRelativeTo(null);
setIgnoreRepaint(true);
setResizable(false);
setVisible(true);
}
public static void main(String[] args) {
new Breakout();
}
}
Figure: The Breakout game
This was the Breakout game. 
so is it possible to create a breakout image like for example instead of linear bricks make it look like a pixelated character? if so how would i code it?
ReplyDelete