☰
Navigation :

Memory Match Game

Memory Match Game

Let’s create a simple memory game. Please download the following zip file.

You find the psd file and the two external code files in the zip

Steps

  1. create a group which contains photo layers
  2. make a variable to let the external code to know which photo is tapped.
  3. add a button to each photo. set the variable value with photo number and attach touchHandler.lua
  4. add memoryGame.lua as external code

1.create a group

Create a kwik project with iPad mini using the psd file in the memory.zip.

Project and pages > Create Groups

Insert all photo layers and group name is gp_photos that is referred in the external codes

2.Create a variable

project and pages > Create Variable

photoNum variable is created. It holds a same number for same photo. For example, photo1 and photo11 layers are same. So we assign 1 to the button of photo1 and photo11

3.Create buttons

Each photo layer is a button with photoNum and with the external code of touchHandler.lua

From Code, add Edit Variable and Add External Code. photo1 and photo11 are set with 1 for photoNum

touchHandler.lua is set

but_11 for photo11. photoNum is 1

but_2 is photo2 and photoNum is 2

but_22 is photo22 and photoNum is 2

Set photoNum and touchHandler.lua to photo3, photo33, photo4 and photo44 as well

4.1 Finally memoryGame.lua

add memoryGame.lua from project and pages > Add External Code

Insert the lua codes after buttons and actions.

that’s all. Publish and test it.

4.2 lua codes

touchHandler.lua is just one line

layer.hitTest(event.tap.target)

memoryGame.lua has two parts. showing photos randomly and hitTest function

local placeHolder = {}
for i=1, layer.gp_photos.numChildren do
  placeHolder[i] = {}
  placeHolder[i].x, placeHolder[i].y = layer.gp_photos[i].x, layer.gp_photos[i].y
end

for i=1, layer.gp_photos.numChildren do
  local ind = math.random(#placeHolder)
  layer.gp_photos[i].x, layer.gp_photos[i].y = placeHolder[ind].x, placeHolder[ind].y
  table.remove(placeHolder,ind)
  layer.gp_photos[i].alpha = 0.01
  layer.gp_photos[i].matched = false
end

local flips = 1
local flipped = {}

layer.hitTest= function(self)
  if self.matched  then return true end
  isHistTest = true
  if (flips == 1) then
    _K.trans.flipCard = transition.to( self, {alpha=1, time=1000, delay=0})
    if flipped[1] ~= self then
      table.insert(flipped,self)
      self.photoNum  = UI.photoNum
      flips = 2
    end
  elseif flips == 2 then --second flip in the round
    if flipped[1] ~= self then
      table.insert(flipped,self)
      self.photoNum  = UI.photoNum
      _K.trans.flipCard = transition.to( self, {alpha=1, time=1000, delay=0})
      if (flipped[1].photoNum == flipped[2].photoNum) then
        flipped[1].matched = true
        flipped[2].matched = true
        flips = 1 -- returns the number of flips to 1
        flipped = {} --cleans the flipped table
      else
        -- cards don’t match
        local card1, card2 = flipped[1],flipped[2]
        local function hideAgain()
          _K.trans.flipCard1 = transition.to( card1, {alpha=0.01, time=1000, delay=0})
          _K.trans.flipCard2 = transition.to( card2, {alpha=0.01, time=1000, delay=0})
        end
        _K.timerStash.hideAgain = timer.performWithDelay( 2000, hideAgain, 1 ) --timer to block the cards again, with the cover image
        flips = 1
        flipped = {}
      end
    end
  end
  return true
end