Advertisement
  1. Code
  2. Corona SDK

Create a Brick Breaker Game with the Corona SDK: Game Controls

Scroll to top
Read Time: 6 min
This post is part of a series called Create a Brick Breaker Game with the Corona SDK.
Create a Brick Breaker Game with the Corona SDK: Application Setup
Create a Brick Breaker Game with the Corona SDK: Collision Detection

In this tutorial series, we’ll be building a Brick Breaker game from scratch using the Corona SDK. The goal of this game is to control a pong-like paddle to knock a ball against a stack of bricks until they all break.


Where We Left Off. . .

If you haven't already done so, please be sure to read part 1 of this series to fully understand the code in this tutorial.

Step 16: Function Declarations

Having declared a multi-dimensional table to hold our levels in Step 15, now declare all the functions that will be used in this app:

1
2
local addMenuScreen = {}
3
local tweenMS = {}
4
local hideAbout = {}
5
local rmvAbout = {}
6
local addGameScreen = {}
7
local buildLevel = {}
8
local movePaddle = {}
9
local gameListeners = {}
10
local startGame = {}
11
local update = {}
12
local bounce = {}
13
local removeBrick = {}
14
local alert = {}
15
local restart = {}
16
local changeLevel = {}

Step 17: Constructor Code

Now create Main(), the first function that will be called when our game starts:

1
2
local function Main()
3
    addMenuScreen()
4
end

Step 18: Add Menu Screen

The next code snippet adds the menu screen graphics to the stage and stores them in the menuScreen group:

1
2
function addMenuScreen()
3
    menuScreen = display.newGroup()
4
    mScreen = display.newImage('mScreen.png')
5
    startB = display.newImage('startB.png')
6
    startB.name = 'startB'
7
    aboutB = display.newImage('aboutB.png')
8
    aboutB.name = 'aboutB'
9
10
    menuScreen:insert(mScreen)
11
    startB.x = 160
12
    startB.y = 260
13
    menuScreen:insert(startB)
14
    aboutB.x = 160
15
    aboutB.y = 310
16
    menuScreen:insert(aboutB)

Step 19: Button Listeners

Listeners are added to the buttons to perform the tweenMS function when tapped:

1
2
	startB:addEventListener('tap', tweenMS)
3
	aboutB:addEventListener('tap', tweenMS)
4
end

Step 20: Call About Screen

This function checks which button was tapped and displays the corresponding view:

1
2
function tweenMS:tap(e)
3
    if(e.target.name == 'startB') then
4
        -- Start Game
5
        transition.to(menuScreen, {time = 300, y = -menuScreen.height, transition = easing.outExpo, onComplete = addGameScreen})
6
    else
7
        -- Call AboutScreen
8
        aboutScreen = display.newImage('aboutScreen.png')
9
        transition.from(aboutScreen, {time = 300, x = menuScreen.contentWidth, transition = easing.outExpo})
10
        aboutScreen:addEventListener('tap', hideAbout)

Step 21: Hide Menu Buttons

These lines, the conclusion of the tweenMS function from above, hide the menu screen buttons to avoid unwanted taps:

1
2
    startB.isVisible = false;
3
    aboutB.isVisible = false;
4
    end
5
end

Step 23: Remove About Screen

The next function tweens the about screen offstage and removes it:

1
2
function hideAbout:tap(e)
3
    transition.to(aboutScreen, {time = 300, x = aboutScreen.width*2, transition = easing.outExpo, onComplete = rmvAbout})
4
end
5
function rmvAbout()
6
    aboutScreen:removeSelf()
7
    -- Enable Menu Buttons
8
    startB.isVisible = true;
9
    aboutB.isVisible = true;
10
end

Step 24: Destroy Menu Screen

When the user taps the start button we begin the game screen creation. The first thing to do is destroy the Menu Screen:

1
2
function addGameScreen()
3
4
    -- Destroy Menu Screen
5
6
    menuScreen:removeSelf()
7
    menuScreen = nil

Step 25: Add Game Screen

Next we add the paddle and ball graphics:

1
2
    -- Add Game Screen
3
    paddle = display.newImage('paddle.png')
4
    ball = display.newImage('ball.png')
5
    paddle.x = 160
6
    paddle.y = 460
7
    ball.x = 160
8
    ball.y = 446
9
    paddle.name = 'paddle'
10
    ball.name = 'ball'

Step 26: Call Build Level Function

Then we build the level. This function is fully explained later in the tut:

1
2
buildLevel(levels[1])

Step 27: Scores & Levels Text

The last graphics to add are for the score and levels text:

1
2
scoreText = display.newText('Score:', 5, 2, 'akashi', 14)
3
scoreText:setTextColor(254, 203, 50)
4
scoreNum = display.newText('0', 54, 2, 'akashi', 14)
5
scoreNum:setTextColor(254,203,50)
6
levelText = display.newText('Level:', 260, 2, 'akashi', 14)
7
levelText:setTextColor(254, 203, 50)
8
levelNum = display.newText('1', 307, 2, 'akashi', 14)
9
levelNum:setTextColor(254,203,50)

Step 28: Start Listener

A listener is added to the background. This listener will start the game when the background is tapped:

1
2
    background:addEventListener('tap', startGame)
3
end

Step 29: Move Paddle

The paddle will be controlled using the device accelerometer. The data will be obtained using e.xGravity and passed to the x property of the paddle.

1
2
function movePaddle:accelerometer(e)
3
4
	-- Accelerometer Movement
5
	paddle.x = display.contentCenterX + (display.contentCenterX * (e.xGravity*3))

Step 30: Paddle Border Collision

To stop the paddle from leaving the stage, we create invisible borders on the sides of the screen:

1
2
    if((paddle.x - paddle.width * 0.5) < 0) then
3
        paddle.x = paddle.width * 0.5
4
    elseif((paddle.x + paddle.width * 0.5) > display.contentWidth) then
5
        paddle.x = display.contentWidth - paddle.width * 0.5
6
    end
7
end

Step 31: Build Level Function

The levels will be built by this function.

It uses a parameter to obtain the level to build, calculates its size, and runs a double for loop, one for the height and one for the width. Next, it creates a new Brick instance that is placed according to its width, height, and the number correspondig to i and j. The brick is declared as static in the physics engine as it will not be detecting the collision, that will be handle by the ball which is the only dynamic physics type.

Lastly, the brick is added to the bricks group to access it outside this function.

1
2
function buildLevel(level)
3
4
    -- Level length, height
5
6
    local len = table.maxn(level)
7
    bricks:toFront()
8
9
    for i = 1, len do
10
        for j = 1, W_LEN do
11
            if(level[i][j] == 1) then
12
                local brick = display.newImage('brick.png')
13
                brick.name = 'brick'
14
                brick.x = BRICK_W * j - OFFSET
15
                brick.y = BRICK_H * i
16
                physics.addBody(brick, {density = 1, friction = 0, bounce = 0})
17
                brick.bodyType = 'static'
18
                bricks.insert(bricks, brick)
19
            end
20
        end
21
    end
22
end

Step 32: Game Listeners

This function adds or removes the listeners. It uses a parameter to determine if the listeners should be added or removed. Note that some lines are commented as the functions to handle them have not yet been created.

1
2
function gameListeners(action)
3
  if(action == 'add') then
4
  Runtime:addEventListener('accelerometer', movePaddle)
5
  --Runtime:addEventListener('enterFrame', update)
6
  paddle:addEventListener('collision', bounce)
7
  --ball:addEventListener('collision', removeBrick)
8
  else
9
  Runtime:removeEventListener('accelerometer', movePaddle)
10
  --Runtime:removeEventListener('enterFrame', update)
11
  paddle:removeEventListener('collision', bounce)
12
  --ball:removeEventListener('collision', removeBrick)
13
  end
14
end

Step 33: Start Game

In this function we call the gameListeners function that will start the movement and game controls:

1
2
function startGame:tap(e)
3
    background:removeEventListener('tap', startGame)
4
    gameListeners('add')
5
    -- Physics
6
    physics.addBody(paddle, {density = 1, friction = 0, bounce = 0})
7
    physics.addBody(ball, {density = 1, friction = 0, bounce = 0})
8
    paddle.bodyType = 'static'
9
end

Step 34: Paddle-Ball Collisions

When the ball hits the paddle, the ySpeed is set to negative to make the ball go up. We also check in which side of the paddle the ball has hit to choose the side where it will move next. The collision is detected by the collision event listener added in the gameListeners function:

1
2
function bounce(e)
3
    ySpeed = -5
4
    -- Paddle Collision, check the which side of the paddle the ball hits, left, right
5
    if((ball.x + ball.width * 0.5) < paddle.x) then
6
        xSpeed = -5
7
    elseif((ball.x + ball.width * 0.5) >= paddle.x) then
8
        xSpeed = 5
9
    end
10
end
11
12
-- Run the Code
13
Main()

Next in the Series

In the next and final part of the series, we'll be handling brick and wall collisions, scores, levels and the final steps to take prior to release like app testing, creating a start screen, adding an icon and, finally, building the app. Stay tuned for the final part!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.