With the Memory Game widget you can easily create a simple memory game that the end user can play to find & match pairs of equal images.

Creating a memory game is really simple, just drag it from the Objects panel to the stage, position it on your page, then drag the images you want to include.

For each image added to the widget, PubCoder will actually add a pair of cards to the game: on the stage, only one of it will appear flipped, for previewing purposes, while of course the game will start with every card flipped for the end user:

Double click on the memory game placeholder on stage to edit the list of images, or use the selection inspector to edit generic settings.


Memory Game widget supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a Memory Game widget, select it and use the selection inspector at the right of your project window.

Images Click to open the to edit the list of images for the memory game
Crop ▹ Auto Crop Mode One between Fill Object, Fit to Object and Center, defines how automatic cropping is applied to the front images of the card more informations
Back Image The image to use for the back of the cards. Tip: The back image also defines the shape of the cards!
Zoom Defines the size of the cards, relative to the chosen back image
Inner Margin Defines the space, in pixels, between the back image and the card border
Outer Margin Defines the space, in pixels, between the various cards
Cards ▹ Background Color The background color to apply to the cards
Cards ▹ Border Color The color to apply to the border of the cards
Cards ▹ Border Width Defines the thickness, in pixels, of the border of the cards
Cards ▹ Corner Radius The radius, in pixels of the border of the cards
Reveal Cards at Start If enabled, the position of every card will be revealed to the user for a short period of time, defined by the Time child property, before the game starts
Flip Card Sound Allows to optionally specify a sound that will be played when the end user flips a card


Memory Game widget triggers all Widget Events, plus the ones listed below. To edit event handlers for a Memory Game, select it and use the Interactivity Panel on the right side of the project window.

Card Flipped

The user tapped/clicked on a card to flip it

Cards Match

The user flipped two matching cards

Cards Mismatch

The user flipped two mismatching cards

Game Completed

The user flipped all matching pairs of cards, thus completing the game

Game Started

The game was just started


Memory game widget can be used as target of most Generic Actions and of the specific Start Memory Game action, that allows to (re)start the game, shuffling the cards of course.