Breakout
Tags: javascript, game, canvas
Published: 2019-05-17 02:33:34

# Intro

Breakout is a classic arcade video game. 

The original Breakout game was developed and published by Atari back in 1976. The game was an instant hit and inspired countless of clones on all generations of computers.

In this article you’ll learn how to recreate this game that will offer you and your friends hours of entertainment.


# What do you need?

To run the code in this article you don’t need to install anything on your local computer.

Just open the online JavaScript playground from [codeguppy.com/code.html](https://codeguppy.com/code.html) and copy and paste the following code in the integrated editor.

When ready, press the “Play” button to run the code.

![](https://thepracticaldev.s3.amazonaws.com/i/jrfuf4aez5etwnt0jitf.png)


# Source code

```
var paddleWidth = 60;
var brickWidth = 50;
var brickHeight = 20;
var brickSpace = 20;
var rowSpace = 10;

var xPaddle;
var yPaddle;

var ball;
var ballsLeft;

var bricks = [];

background("Field");
fill("white");

function enter()
{
    initGame();
}

function initGame()
{
    bricks = createBricks();
    ballsLeft = 3;
    
    initBall();
}

function initBall()
{
    xPaddle = width / 2;
    yPaddle = height - 20;

    ball = {
        radius : 5,
        x : 0,
        y : 0,
        xvel : 5,
        yvel : -5,
        inMotion : false
    };
}

function loop()
{
    clear();

    readKeys();
    displayBricks();
    displayPaddle();

    updateBall();
    displayBall();

    checkForCollision();

    displayStats();
}

function displayStats()
{
    push();
    fill('black');
    noStroke();

    text("Balls: " + ballsLeft, 10, height - 20);
    text("Bricks: " + bricks.length, 10, height - 6);

    pop();
}

function updateBall()
{
    if ( !ball.inMotion )
    {
        ball.x = xPaddle + paddleWidth / 2;
        ball.y = yPaddle - ball.radius;
    }
    else
    {
        updateBallInMotion();
    }
}

function updateBallInMotion()
{
    ball.x += ball.xvel;
    ball.y += ball.yvel;

    if ( ball.x < 0 || ball.x > width )
    {
        ball.xvel *= -1;
    }
    else if ( ball.y < 0 )
    {
        ball.yvel *= -1;
    }
    else if ( collisionCircleRect(ball.x, ball.y, ball.radius, xPaddle, yPaddle, paddleWidth, 10) )
    {
        ball.yvel *= -1;
    }
    else if ( ball.y > height )
    {
        ballsLeft--;
        
        if (ballsLeft >= 0)
        {
            initBall();
        }
        else
        {
            initGame();
        }
    }
}

function checkForCollision()
{
    var brickIndex = getHitBrick();
    if ( brickIndex == -1 )
    {
        return;
    }

    bricks.splice(brickIndex, 1);
    ball.yvel *= -1;

    if ( bricks.length == 0 )
    {
        initGame();
    }
}


// Iterate through all the bricks and check
// if the ball hits any bricks.
// Returns the index of the brick that is hit ... or -1
function getHitBrick()
{
    for(var i = 0; i < bricks.length; i++)
    {
        var brick = bricks[i];

        if ( collisionCircleRect( ball.x, ball.y, ball.radius, brick.x, brick.y, brickWidth, brickHeight ) )
        {
            return i;
        }
    }

    return -1;
}

function displayBall()
{
    ellipse( ball.x, ball.y, ball.radius * 2 );
}

function readKeys()
{
    if ( keyIsDown( LEFT_ARROW ) && xPaddle > 0  )
    {
        xPaddle -= 5;
    }
    else if ( keyIsDown( RIGHT_ARROW) && xPaddle < width - paddleWidth )
    {
        xPaddle += 5;
    }
    else if ( keyIsDown (32) )  // SPACE
    {
        ball.inMotion = true;
    }
}

function createBricks()
{
    var noBricks = Math.floor((width - brickSpace) / ( brickWidth + brickSpace ));
    var arBricks = [];

    for(var row = 0; row < 3; row++)
    {    
        for(var col = 0; col < noBricks; col++ )
        {
            var x = col * ( brickWidth + brickSpace ) + brickSpace;
            var y = row * (brickHeight + rowSpace) + rowSpace;
            
            var brick = { x : x, y : y };
            arBricks.push(brick);
        }
    }

    return arBricks;
}

function displayBricks()
{
    for(var i = 0; i < bricks.length; i++)
    {
        var brick = bricks[i];
        rect( brick.x, brick.y, brickWidth, brickHeight );
    }
}

function displayPaddle()
{
    rect( xPaddle, yPaddle, paddleWidth, 10 );
}
```


# Feedback

If you liked the article, please follow [@codeguppy](https://twitter.com/codeguppy) on Twitter and / or visit [codeguppy.com](https://codeguppy.com) for more tutorials and projects.

Also, if you want to extend this article with detailed instructions explaing how to build the program step by step, please leave feedback in the comments.