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

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 

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 

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) 

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 

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 

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 

 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 

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)) 

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 

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!