Installing the game ¶

Cuis-Smalltalk does not come with any notion of toolbar, but it is fairly easy to create one with a row layout and buttons:

installToolbar

| toolbar button |
toolbar := LayoutMorph newRow separation: 2.
button := PluggableButtonMorph model: self action: #startGame :: 
   enableSelector: #isStopped;
   icon: Theme current playIcon;
   borderWidth: 2;
   borderColor: Color black;
   setBalloonText: 'Play the game';
   morphExtent: 32 asPoint.
toolbar addMorph: button.
...
self addMorph: toolbar layoutSpec: LayoutSpec new useMorphHeight

Observe enableSelector: #isStopped, indeed the “Play” button is only active when the game isStopped. The same applies with the “Stop” button – not shown here. The toolbar height – row layout – is shrunk to the height of its submorphs, to do so the toolbar is added to the window with the appropriate specification LayoutSpec new useMorphHeight.

The cards are installed in several rows in the playground, previously emptied. We remember about each card in a special cards array we can access with x and y coordinates, also the position of a card in the playground. The colors to be used are randomly chosen and arranged in:

installCards

| colors  row |
playground removeAllMorphs.
cards := Array2D  newSize: size.
colors := self distributeColors shuffled.
1 to: size y do: [:y |
   row := LayoutMorph newRow.
   1 to: size x do: [:x | | card |
      card := MemoryCard model: self action: #flip: actionArgument: x@y.
      card layoutSpec proportionalWidth: 1; proportionalHeight: 1.
      card cardColor: colors removeFirst.
      row addMorph: card.
      cards at: x@y put: card ].
   playground addMorph: row ]

We make the card interactive, it is a button, when clicked the message #flip: is sent to the game window with argument the position in the cards array and playground:

MemoryCard model: self action: #flip: actionArgument: x@y

Game logic ¶

The core of the game logic is in the flip: method. It first flips and locks⁶ the clicked card

flip: position

| flippedCards |
(cards at: position) flip; lock.

then it detects if all the flipped cards share the same color. To do so, we do a clever trick of Smalltalk: we collect all the colors of the flipped cards, then converts the collection of color as a Set instance, all duplicated colors are removed. If the size of the resulting set is not 1, it means cards have different colors. In that case, we inform the user with a message, then unflip and unlock the clicked cards:

flippedCards := self flippedCards.
(flippedCards collect: [:aCard | aCard cardColor]) asSet size = 1 ifFalse: [
   "Give some time for the player to see the color of this card "
   self message: 'Colors do not match!'.
   self world doOneCycleNow.
   (Delay forSeconds: 1) wait.
   " Color does not match, unflip the flipped cards and unlock "
   flippedCards do: [:aCard | aCard flip; unlock].
   ^ self]

If the colors match, we check if we reach the tupleSize association count – initialized by default to 2, to make pair of cards. If so, we make the cards to flash and we mark them as done so they can’t be played anymore

   flippedCards size = tupleSize ifTrue: [
      " We found a n-tuple! "
      self message: 'Great!' bold, ' You find a ', tupleSize asString, '-tuple!'.
      flippedCards do: #flash.
      flippedCards do: #setDone.

At this point of the game logic, in the event of a game win, we inform the user and update the game status

      self isGameWon ifTrue: [
         self message: 'Congatuluation, you finished the game!' bold red.
         playing := false] ]

Messages to the user ¶

During the game logic, at several occurrences, we informed the user through messages. The message are printed in the status bar set at initialization time:

installStatusBar

statusBar := TextParagraphMorph new
   padding: 2;
   color: Color transparent;
   borderWidth: 1;
   borderColor: self borderColor twiceLighter ;
   setHeightOnContent.
self addMorph: statusBar layoutSpec: LayoutSpec new useMorphHeight.
self message: 'Welcome to ', 'Memory Game' bold

Its companion method to write a new text message just updates the contents of the TextParagraphMorph instance:

message: aText

statusBar contents: aText ;
   redrawNeeded 

A message sent to the status bar can be more than a plain string, it can be a Text instance with styling attributes. To do so, we send specific messages to a string, for example ’hello’ bold converts the ’hello’ string as a Text set with a bold style.

Examples of styling:

'Hello' red bold.
'Hello ' italic, ' my love' red bold.

To discover more messages, browse the method categories text conversion ... of the CharacterSequence class.

Access and test ¶

In the core logic of the game, we accessed the flipped cards in the playground. It is a matter of selecting the cards both not done and flipped.

flippedCards

^ cards elements select: [:aCard | aCard isDone not and: [aCard isFlipped] ]

The Array2D instance of the cards variable offers access to its cells with x and y coordinates; however it does not offer the whole range of the Collection protocol, and particularly the select: method. Nevertheless, its underneath elements attribute is an Array, part of the Collection hierarchy, we use it to get the whole power of the Collection protocol.

We proceed the same to select the done cards

doneCards

^ cards elements select: #isDone

and undone cards are selected by a subtracting operation, prone to resist to code evolution in the card protocol

undoneCards

^ cards elements asOrderedCollection 
   removeAll: self doneCards;
   yourself

In the core logic of the game, we test if the game is won, it is a matter of testing if all the cards are done, in that case this count is equal to the number of cards in the game

isGameWon

^ (cards elements select: #isDone) size = (size x * size y)

The remaining methods of the game does not require comment, they can be read in the complete source code of the Memory Game v1.