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:
local addMenuScreen = {}
local tweenMS = {}
local hideAbout = {}
local rmvAbout = {}
local addGameScreen = {}
local buildLevel = {}
local movePaddle = {}
local gameListeners = {}
local startGame = {}
local update = {}
local bounce = {}
local removeBrick = {}
local alert = {}
local restart = {}
local changeLevel = {}
Step 17: Constructor Code
Now create Main(), the first function that will be called when our game starts:
local function Main()
addMenuScreen()
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:
function addMenuScreen()
menuScreen = display.newGroup()
mScreen = display.newImage('mScreen.png')
startB = display.newImage('startB.png')
startB.name = 'startB'
aboutB = display.newImage('aboutB.png')
aboutB.name = 'aboutB'
menuScreen:insert(mScreen)
startB.x = 160
startB.y = 260
menuScreen:insert(startB)
aboutB.x = 160
aboutB.y = 310
menuScreen:insert(aboutB)
Step 19: Button Listeners
Listeners are added to the buttons to perform the tweenMS function when tapped:
startB:addEventListener('tap', tweenMS)
aboutB:addEventListener('tap', tweenMS)
end
Step 20: Call About Screen
This function checks which button was tapped and displays the corresponding view:
function tweenMS:tap(e)
if(e.target.name == 'startB') then
-- Start Game
transition.to(menuScreen, {time = 300, y = -menuScreen.height, transition = easing.outExpo, onComplete = addGameScreen})
else
-- Call AboutScreen
aboutScreen = display.newImage('aboutScreen.png')
transition.from(aboutScreen, {time = 300, x = menuScreen.contentWidth, transition = easing.outExpo})
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:
startB.isVisible = false;
aboutB.isVisible = false;
end
end
Step 23: Remove About Screen
The next function tweens the about screen offstage and removes it:
function hideAbout:tap(e)
transition.to(aboutScreen, {time = 300, x = aboutScreen.width*2, transition = easing.outExpo, onComplete = rmvAbout})
end
function rmvAbout()
aboutScreen:removeSelf()
-- Enable Menu Buttons
startB.isVisible = true;
aboutB.isVisible = true;
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:
function addGameScreen()
-- Destroy Menu Screen
menuScreen:removeSelf()
menuScreen = nil
Step 25: Add Game Screen
Next we add the paddle and ball graphics:
-- Add Game Screen
paddle = display.newImage('paddle.png')
ball = display.newImage('ball.png')
paddle.x = 160
paddle.y = 460
ball.x = 160
ball.y = 446
paddle.name = 'paddle'
ball.name = 'ball'
Step 26: Call Build Level Function
Then we build the level. This function is fully explained later in the tut:
buildLevel(levels[1])
Step 27: Scores & Levels Text
The last graphics to add are for the score and levels text:
scoreText = display.newText('Score:', 5, 2, 'akashi', 14)
scoreText:setTextColor(254, 203, 50)
scoreNum = display.newText('0', 54, 2, 'akashi', 14)
scoreNum:setTextColor(254,203,50)
levelText = display.newText('Level:', 260, 2, 'akashi', 14)
levelText:setTextColor(254, 203, 50)
levelNum = display.newText('1', 307, 2, 'akashi', 14)
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:
background:addEventListener('tap', startGame)
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.
function movePaddle:accelerometer(e) -- Accelerometer Movement 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:
if((paddle.x - paddle.width * 0.5) < 0) then
paddle.x = paddle.width * 0.5
elseif((paddle.x + paddle.width * 0.5) > display.contentWidth) then
paddle.x = display.contentWidth - paddle.width * 0.5
end
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.
function buildLevel(level)
-- Level length, height
local len = table.maxn(level)
bricks:toFront()
for i = 1, len do
for j = 1, W_LEN do
if(level[i][j] == 1) then
local brick = display.newImage('brick.png')
brick.name = 'brick'
brick.x = BRICK_W * j - OFFSET
brick.y = BRICK_H * i
physics.addBody(brick, {density = 1, friction = 0, bounce = 0})
brick.bodyType = 'static'
bricks.insert(bricks, brick)
end
end
end
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.
function gameListeners(action)
if(action == 'add') then
Runtime:addEventListener('accelerometer', movePaddle)
--Runtime:addEventListener('enterFrame', update)
paddle:addEventListener('collision', bounce)
--ball:addEventListener('collision', removeBrick)
else
Runtime:removeEventListener('accelerometer', movePaddle)
--Runtime:removeEventListener('enterFrame', update)
paddle:removeEventListener('collision', bounce)
--ball:removeEventListener('collision', removeBrick)
end
end
Step 33: Start Game
In this function we call the gameListeners function that will start the movement and game controls:
function startGame:tap(e)
background:removeEventListener('tap', startGame)
gameListeners('add')
-- Physics
physics.addBody(paddle, {density = 1, friction = 0, bounce = 0})
physics.addBody(ball, {density = 1, friction = 0, bounce = 0})
paddle.bodyType = 'static'
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:
function bounce(e)
ySpeed = -5
-- Paddle Collision, check the which side of the paddle the ball hits, left, right
if((ball.x + ball.width * 0.5) < paddle.x) then
xSpeed = -5
elseif((ball.x + ball.width * 0.5) >= paddle.x) then
xSpeed = 5
end
end
-- Run the Code
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!
Comments