Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Corona SDK

Build a Match Shapes Game - Adding Interaction


This is the second installment in the Corona SDK Match Shapes tutorial. In today’s tutorial, we’ll add to the interface and game interaction by programming the shape matching algorithm. Read on!

Also available in this series:

  1. Build a Match Shapes Game - Interface Creation
  2. Build a Match Shapes Game - Adding Interaction

Where We Left Off. . .

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

Step 1: Start Button Listeners

This function adds the necessary listeners to the TitleView buttons.

Step 2: Show Credits

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

Step 3: Hide Credits

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

Step 4: Show Game View

When the Play button is tapped, the title view is tweened and removed revealing the game view. There are many parts involved in this view, so we'll split them in the next steps.

Step 5: Game Background

This code places the game background image in the stage.

Step 6: Place Holders

The Place Holders are background graphics used to represent where the actual shapes should be dragged to. The next lines create them and place them in the stage.

Step 7: Instructions

An instructions message will be animated when the game starts. You can change the time it appears by changing the performWithDelay() code.

Step 8: Shapes

The shapes that will be used are created in the next few lines of code.

Step 9: Game Listeners

This function adds the necessary listeners to start the game logic.

Step 10: Hit Test Objects

We'll use an excellent and useful function for collision detection without physics. You can find the original example and source at CoronaLabs Code Exchange.

Step 11: Drag Shapes

This is the principal function of this game, it handles the object dragging by checking the object's position and moving it to the event position.

Step 12: Square Collision

This last function also contains code that checks if the shape is in the correct spot. This is the square part.

Step 13: Triangle Collision

The same method is used for the triangle. If the correct shape is placed in the correct spot, the shape drag listener is removed.

Step 14: Pentagon Collision

This is the pentagon part. If the right shape touches the right spot when the touch event ends, the shape aligns to the center of the placeholder.

Step 15: Check for Completion

Finally, we'll check if the three shapes have been placed correctly, and then play a sound and call an alert if it is correct.

Step 16: Alert

The alert function creates an alert view, animates it, and ends the game.

Step 17: Call Main Function

In order to start the game, the Main function needs to be called. With the above code in place, we can do that here:

Step 18: Loading Screen

The Default.png file is an image that is displayed 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 automatically be added by the Corona compiler.

Step 19: Icon

Using the graphics created previously you can now create a nice 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 transparent glare, iTunes and the iPhone will do that for you.

Step 20: Testing in Simulator

It's time for 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 last step!

Step 21: 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!


In this series you learned about object dragging and collision detection without using the physics engine. This may reduce your app memory consumption and increase the performance. You can experiment with the final result and try to make your custom version of the game!

I hope you enjoyed this tutorial series and found it helpful. Thank you for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.