Corona SDK: Build a Shell Game - Interaction

This is the second installment in our Corona SDK Three Shell Game tutorial. In today's tutorial, we'll add to our interface and start coding the game interaction. Read on!

Where We Left Off. . .

Please be sure to check part 1 of the series to fully understand and prepare for this tutorial.

Step 1: Variables

These are the variables we'll use, read the comments in the code to know more about them. Some of their names are self explanatory, so there will be no comment there.

local moveSpeed = 600
local totalMoves = 5

Step 2: Declare Functions

Declare all functions as local at the start.

local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local placeBet = {}
local randomShellMove = {}
local checkMovesLeft = {}
local revealBall = {}
local alert = {}

Step 3: Constructor

Next, we'll create the function that will initialize all the game logic:

function Main()
	--code
end

Step 4: Add Title View

Now we place the TitleView in the stage and call a function that will add the tap listeners to the buttons.

function Main()
	title = display.newImage('title.png', display.contentCenterX - 123, 40)
	playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
	titleView = display.newGroup(title, playBtn, creditsBtn)
	
	startButtonListeners('add')
end

Step 5: Start Button Listeners

This function adds the necesary listeners to the TitleView buttons:

function startButtonListeners(action)
	if(action == 'add') then
		playBtn:addEventListener('tap', showGameView)
		creditsBtn:addEventListener('tap', showCredits)
	else
		playBtn:removeEventListener('tap', showGameView)
		creditsBtn:removeEventListener('tap', showCredits)
	end
end

Step 6: Show Credits

The credits screen is shown when the user taps the credits button, a tap listener is added to the credits view to remove it.

function showCredits:tap(e)
	playBtn.isVisible = false
	creditsBtn.isVisible = false
	creditsView = display.newImage('credits.png')
	transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

Step 7: Hide Credits

When the credits screen is tapped, it'll be tweened out of the stage and removed.

function hideCredits:tap(e)
	playBtn.isVisible = true
	creditsBtn.isVisible = true
	transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

Step 8: Remove Title View

When the Play button is tapped, the title view is tweened and removed, revealing the game view. All the game graphics are added by this function, check each component in the following functions.

function showGameView:tap(e)
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
end

Step 9: Bank Credits

This code adds the bank credits text as well as the bank image.

bank = display.newText('5', 18, 5, native.systemFontBold, 14)
bank:setTextColor(234, 170, 12)
bankText = display.newImage('bankText.png', 7.5, 25)

Step 10: Ball

The ball is instantiated by the next line, a center position is given to it:

ball = display.newImage('ball.png', 228, 142)

Step 11: Shells

Next are the Shells wich are positioned in the left, center and right parts of the stage, we use also a group to index them and use them later.

s1 = display.newImage('shell.png', 50, 114)
s2 = display.newImage('shell.png', 195, 84)
s2.name = 's2'
s3 = display.newImage('shell.png', 340, 114)
shells = display.newGroup(s1, s2, s3)

Step 12: Button Bar

Lastly, the button bar is added, this is the dark background, message text, and bet button.

buttonBar = display.newImage('buttonBar.png', 0, 270)
msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
betBtn = display.newImage('betBtn.png', 223, 275)
	
betBtn:addEventListener('tap', placeBet)
	
gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)

Step 13: Code Review

Here is the full code written in this tutorial alongside with comments to help you identify each part:

-- Three Shell Game
-- Developed by Carlos Yanez

-- Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

-- Graphics

-- [Background]

local bg = display.newImage('bg.png')

-- [Title View]

local title
local playBtn
local creditsBtn
local titleView

-- [Credits]

local creditsView

-- [Bank Credits]

local bank
local bankText

-- [Shells]

local s1
local s2
local s3
local shells

-- [Ball]

local ball

-- [Button Bar]

local buttonBar

-- [Bet Button]

local betBtn

-- [Message Text]

local msg

-- [GameView]

local gameView

-- [Alert]

local alert

-- Variables

local moveSpeed = 600
local totalMoves = 5

-- Functions

local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local placeBet = {}
local randomShellMove = {}
local checkMovesLeft = {}
local revealBall = {}
local alert = {}

-- Main Function

function Main()
	title = display.newImage('title.png', display.contentCenterX - 123, 40)
	playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
	titleView = display.newGroup(title, playBtn, creditsBtn)
	
	startButtonListeners('add')
end

function startButtonListeners(action)
	if(action == 'add') then
		playBtn:addEventListener('tap', showGameView)
		creditsBtn:addEventListener('tap', showCredits)
	else
		playBtn:removeEventListener('tap', showGameView)
		creditsBtn:removeEventListener('tap', showCredits)
	end
end

function showCredits:tap(e)
	playBtn.isVisible = false
	creditsBtn.isVisible = false
	creditsView = display.newImage('credits.png')
	transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

function hideCredits:tap(e)
	playBtn.isVisible = true
	creditsBtn.isVisible = true
	transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

function showGameView:tap(e)
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
	
	-- [Bank Credits]
	
	bank = display.newText('5', 18, 5, native.systemFontBold, 14)
	bank:setTextColor(234, 170, 12)
	bankText = display.newImage('bankText.png', 7.5, 25)
	
	-- [Ball]
	
	ball = display.newImage('ball.png', 228, 142)
	
	-- [Shells]
	
	s1 = display.newImage('shell.png', 50, 114)
	s2 = display.newImage('shell.png', 195, 84)
	s2.name = 's2'
	s3 = display.newImage('shell.png', 340, 114)
	shells = display.newGroup(s1, s2, s3)
	
	-- [Button Bar]
	
	buttonBar = display.newImage('buttonBar.png', 0, 270)
	msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
	betBtn = display.newImage('betBtn.png', 223, 275)
	
	betBtn:addEventListener('tap', placeBet)
	
	gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)
end

Next Time...

In the next and final part of the series, we'll handle the shells animation, tap events to select the shells, 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!

HIGHLIGHTS OF THE DAY