Welcome to the final tutorial in our Brick Breaker game series! In this tutorial, we'll handle the logic for the remaining collisions, check for win and loss states, change levels, and more.
Where We Left Off. . .
Be sure to read part 1 and part 2 of this series to fully understand the code presented in this tutorial.
Step 35: Detect Brick Collisions
When the ball collides with a brick, we will use the same technique applied to the paddle to determine the side the ball will follow:
function removeBrick(e) -- Check the which side of the brick the ball hits, left, right if(e.other.name == 'brick' and (ball.x + ball.width * 0.5) < (e.other.x + e.other.width * 0.5)) then xSpeed = -5 elseif(e.other.name == 'brick' and (ball.x + ball.width * 0.5) >= (e.other.x + e.other.width * 0.5)) then xSpeed = 5 end end
Step 37: Remove Brick
When a brick is hit, we use the other parameter of the collision event to find out exactly which brick was hit, and then remove it from both the stage and the bricks group:
-- Bounce, Remove if(e.other.name == 'brick') then ySpeed = ySpeed * -1 e.other:removeSelf() e.other = nil bricks.numChildren = bricks.numChildren - 1
Step 38: Add Score
Each brick hit will add 100 points to the score. The score will be taken from the score constant and added to the current score as text.
score = score + 1<br /> scoreNum.text = score * SCORE_CONST<br /> scoreNum:setReferencePoint(display.CenterLeftReferencePoint)<br /> scoreNum.x = 54 <br /> end
Step 39: Check Bricks
This code checks if there are anymore bricks left on stage and displays a "you won" message if not:
if(bricks.numChildren < 0) then alert(' You Win!', ' Next Level ›') gameEvent = 'win' end end
Step 40: Ball Movement
The ball speed is determined by the xSpeed and ySpeed variables. When the update function is executed, the ball starts moving using these values for placement on every frame.
function update(e) -- Ball Movement ball.x = ball.x + xSpeed ball.y = ball.y + ySpeed
Step 41: Wall Collision
This code checks for wall collisions with the ball, and responds by sending the ball in the opposite direction when necessary:
if(ball.x < 0) then ball.x = ball.x + 3 xSpeed = -xSpeed end--Left if((ball.x + ball.width) > display.contentWidth) then ball.x = ball.x - 3 xSpeed = -xSpeed end--Right if(ball.y < 0) then ySpeed = -ySpeed end--Up
Step 42: Loss Condition
An if statement is used to check if the paddle misses the ball. If true, an alert is displayed asking the user if they would like to try again.
if(ball.y + ball.height > paddle.y + paddle.height) then alert(' You Lose', ' Play Again ›') gameEvent = 'lose' end--down/lose
Step 43: Game Status Message
The Alert Screen shows the player information about the status of the game. It is shown when a win/loss event is reached.
Two parameters are used in this function:
- t: The alert title
- m: A short message
function alert(t, m) gameListeners('remove') alertBg = display.newImage('alertBg.png') box = display.newImage('alertBox.png', 90, 202) transition.from(box, {time = 300, xScale = 0.5, yScale = 0.5, transition = easing.outExpo}) titleTF = display.newText(t, 0, 0, 'akashi', 19) titleTF:setTextColor(254,203,50) titleTF:setReferencePoint(display.CenterReferencePoint) titleTF.x = display.contentCenterX titleTF.y = display.contentCenterY - 15 msgTF = display.newText(m, 0, 0, 'akashi', 12) msgTF:setTextColor(254,203,50) msgTF:setReferencePoint(display.CenterReferencePoint) msgTF.x = display.contentCenterX msgTF.y = display.contentCenterY + 15 box:addEventListener('tap', restart) alertScreen = display.newGroup() alertScreen:insert(alertBg) alertScreen:insert(box) alertScreen:insert(titleTF) alertScreen:insert(msgTF) end
Step 44: Restart
The next function checks the game status (win, lose, finished) and performs the corresponding action:
function restart(e) if(gameEvent == 'win' and table.maxn(levels) > currentLevel) then currentLevel = currentLevel + 1 changeLevel(levels[currentLevel])--next level levelNum.text = tostring(currentLevel) elseif(gameEvent == 'win' and table.maxn(levels) <= currentLevel) then box:removeEventListener('tap', restart) alertScreen:removeSelf() alertScreen = nil alert(' Game Over', ' Congratulations!') gameEvent = 'finished' elseif(gameEvent == 'lose') then changeLevel(levels[currentLevel])--same level elseif(gameEvent == 'finished') then addMenuScreen() transition.from(menuScreen, {time = 300, y = -menuScreen.height, transition = easing.outExpo}) box:removeEventListener('tap', restart) alertScreen:removeSelf() alertScreen = nil currentLevel = scoreText:removeSelf() scoreText = nil scoreNum:removeSelf() scoreNum = nil levelText:removeSelf() levelText = nil levelNum:removeSelf() levelNum = nil ball:removeSelf() ball = nil paddle:removeSelf() paddle = nil score = 0 end end
Step 45: Change Level
This function changes updates the level when necessary:
function changeLevel(level) -- Clear Level Bricks bricks:removeSelf() bricks.numChildren = 0 bricks = display.newGroup() -- Remove Alert box:removeEventListener('tap', restart) alertScreen:removeSelf() alertScreen = nil -- Reset Ball and Paddle position ball.x = (display.contentWidth * 0.5) - (ball.width * 0.5) ball.y = (paddle.y - paddle.height) - (ball.height * 0.5) -2 paddle.x = display.contentWidth * 0.5 -- Redraw Bricks buildLevel(level) -- Start background:addEventListener('tap', startGame) end
Step 46: Call Main Function
In order to initially start the game, the Main function needs to be called. With the above code in place, we'll do that here:
Main()
Step 47: Create the Loading Screen
The Default.png file is an image that will be displayed right when you start the application while the iOS loads the basic data to show the Main Screen. Add this image to your project source folder, it will be automatically added by the Corona compliler.
Step 48: Icon
Using the graphics you created before you can now create a nice and good looking icon. The icon size for the non-retina iPhone icon is 57x57px, but the retina version is 114x114px and the iTunes store requires a 512x512px version. I suggest creating the 512x512 version first and then scaling down for the other sizes.
It doesn't need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.
Step 49: Testing in the Simulator
It is time to do the final test. Open the Corona Simulator, browse to your project folder, and then click open. If everything works as expected, you are ready for the final step!
Step 50: Build
In the Corona Simulator go to File > Build and select your target device. Fill the required data and click build. Wait a few seconds and your app will be ready for device testing and/or submission for distribution!
Conclusion
The final result is a customizable and entertaining game. Try adding your own custom graphics and levels to spice things up!
I hope you liked this tutorial series and find it helpful. Thank you for reading!
Comments