Advertisement
  1. Code
  2. Mobile Development
  3. Corona

Corona SDK: Build a Shell Game - Interaction

Scroll to top
Read Time: 6 min

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.

1
2
local moveSpeed = 600
3
local totalMoves = 5

Step 2: Declare Functions

Declare all functions as local at the start.

1
2
local Main = {}
3
local startButtonListeners = {}
4
local showCredits = {}
5
local hideCredits = {}
6
local showGameView = {}
7
local placeBet = {}
8
local randomShellMove = {}
9
local checkMovesLeft = {}
10
local revealBall = {}
11
local alert = {}

Step 3: Constructor

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

1
2
function Main()
3
	--code
4
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.

1
2
function Main()
3
	title = display.newImage('title.png', display.contentCenterX - 123, 40)
4
	playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
5
	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
6
	titleView = display.newGroup(title, playBtn, creditsBtn)
7
	
8
	startButtonListeners('add')
9
end

Step 5: Start Button Listeners

This function adds the necesary listeners to the TitleView buttons:

1
2
function startButtonListeners(action)
3
	if(action == 'add') then
4
		playBtn:addEventListener('tap', showGameView)
5
		creditsBtn:addEventListener('tap', showCredits)
6
	else
7
		playBtn:removeEventListener('tap', showGameView)
8
		creditsBtn:removeEventListener('tap', showCredits)
9
	end
10
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.

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

Step 7: Hide Credits

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

1
2
function hideCredits:tap(e)
3
	playBtn.isVisible = true
4
	creditsBtn.isVisible = true
5
	transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
6
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.

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

Step 9: Bank Credits

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

1
2
bank = display.newText('5', 18, 5, native.systemFontBold, 14)
3
bank:setTextColor(234, 170, 12)
4
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:

1
2
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.

1
2
s1 = display.newImage('shell.png', 50, 114)
3
s2 = display.newImage('shell.png', 195, 84)
4
s2.name = 's2'
5
s3 = display.newImage('shell.png', 340, 114)
6
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.

1
2
buttonBar = display.newImage('buttonBar.png', 0, 270)
3
msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
4
betBtn = display.newImage('betBtn.png', 223, 275)
5
	
6
betBtn:addEventListener('tap', placeBet)
7
	
8
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:

1
2
-- Three Shell Game
3
-- Developed by Carlos Yanez
4
5
-- Hide Status Bar
6
7
display.setStatusBar(display.HiddenStatusBar)
8
9
-- Graphics
10
11
-- [Background]
12
13
local bg = display.newImage('bg.png')
14
15
-- [Title View]
16
17
local title
18
local playBtn
19
local creditsBtn
20
local titleView
21
22
-- [Credits]
23
24
local creditsView
25
26
-- [Bank Credits]
27
28
local bank
29
local bankText
30
31
-- [Shells]
32
33
local s1
34
local s2
35
local s3
36
local shells
37
38
-- [Ball]
39
40
local ball
41
42
-- [Button Bar]
43
44
local buttonBar
45
46
-- [Bet Button]
47
48
local betBtn
49
50
-- [Message Text]
51
52
local msg
53
54
-- [GameView]
55
56
local gameView
57
58
-- [Alert]
59
60
local alert
61
62
-- Variables
63
64
local moveSpeed = 600
65
local totalMoves = 5
66
67
-- Functions
68
69
local Main = {}
70
local startButtonListeners = {}
71
local showCredits = {}
72
local hideCredits = {}
73
local showGameView = {}
74
local placeBet = {}
75
local randomShellMove = {}
76
local checkMovesLeft = {}
77
local revealBall = {}
78
local alert = {}
79
80
-- Main Function
81
82
function Main()
83
	title = display.newImage('title.png', display.contentCenterX - 123, 40)
84
	playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
85
	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
86
	titleView = display.newGroup(title, playBtn, creditsBtn)
87
	
88
	startButtonListeners('add')
89
end
90
91
function startButtonListeners(action)
92
	if(action == 'add') then
93
		playBtn:addEventListener('tap', showGameView)
94
		creditsBtn:addEventListener('tap', showCredits)
95
	else
96
		playBtn:removeEventListener('tap', showGameView)
97
		creditsBtn:removeEventListener('tap', showCredits)
98
	end
99
end
100
101
function showCredits:tap(e)
102
	playBtn.isVisible = false
103
	creditsBtn.isVisible = false
104
	creditsView = display.newImage('credits.png')
105
	transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
106
end
107
108
function hideCredits:tap(e)
109
	playBtn.isVisible = true
110
	creditsBtn.isVisible = true
111
	transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
112
end
113
114
function showGameView:tap(e)
115
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
116
	
117
	-- [Bank Credits]
118
	
119
	bank = display.newText('5', 18, 5, native.systemFontBold, 14)
120
	bank:setTextColor(234, 170, 12)
121
	bankText = display.newImage('bankText.png', 7.5, 25)
122
	
123
	-- [Ball]
124
	
125
	ball = display.newImage('ball.png', 228, 142)
126
	
127
	-- [Shells]
128
	
129
	s1 = display.newImage('shell.png', 50, 114)
130
	s2 = display.newImage('shell.png', 195, 84)
131
	s2.name = 's2'
132
	s3 = display.newImage('shell.png', 340, 114)
133
	shells = display.newGroup(s1, s2, s3)
134
	
135
	-- [Button Bar]
136
	
137
	buttonBar = display.newImage('buttonBar.png', 0, 270)
138
	msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
139
	betBtn = display.newImage('betBtn.png', 223, 275)
140
	
141
	betBtn:addEventListener('tap', placeBet)
142
	
143
	gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)
144
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!

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.