Memory Match in Modern Javascript with Phaser 3 - Part 5

A more involved game for beginners to Phaser 3 and modern JavaScript

by Tommy Leung on August 24, 2020 6 minute read

If you've gone through the basic first game in modern JavaScript or the infinite jumper book then you've got the basics down so let's try making something a little bit more complicated!

We suggest Memory Match. A Mario Party-inspired memory game where you control a character to pick boxes until all matches are found within a limited amount of time.

In part 4, we fixed a couple of bugs left over from part 3 and handled the cases for a match or no match.

For this part 5, we'll add logic that stuns the player when the bear is revealed and then check for level complete when all matches have been made.

We also have a video version on YouTube if you prefer to watch or want to see how it is coded in real-time.

Stay Away From Bears

In Mario Party's memory match, Mario becomes stunned and unable to move after selecting a tile with Bowser behind it.

We'll do something similar by disabling the player from moving when the box with a bear in it is opened.

Let's start by adding a check after the tween that reveals an item is finished. Add this to the onComplete callback in the openBox() method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


/**
 * 
 * @param {Phaser.Physics.Arcade.Sprite} box 
 */
openBox(box)
{
	// other code...

	this.tweens.add({
		targets: item,
		y: '-=50',
		alpha: 1,
		scale: 1,
		duration: 500,
		onComplete: () => {
			// 👇 add this check
			if (itemType === 0)
			{
				// call handleBearSelected() if true
				this.handleBearSelected()
				return // 👈 and early exit
			}

			if (this.selectedBoxes.length < 2)
			{
				return
			}

			this.checkForMatch()
		}
	})
}

We check to see if itemType is 0 which represents the bear. If true, we call handleBearSelected() and early exit.

Next, let's implement handleBearSelected():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


handleBearSelected()
{
	// get the selected box information
	const { box, item } = this.selectedBoxes.pop()

	// tint the bear red
	item.setTint(0xff0000)

	// set the box to frame 7 (a red box)
	box.setFrame(7)

	// disable the player and any movement
	this.player.active = false
	this.player.setVelocity(0, 0)

	// wait 1 second and then return to normal
	this.time.delayedCall(1000, () => {
		item.setTint(0xffffff)
		box.setFrame(10)
		box.setData('opened', false)

		this.tweens.add({
			targets: item,
			y: '+=50',
			alpha: 0,
			scale: 0,
			duration: 300,
			onComplete: () => {
				this.player.active = true // 👈 re-activate the player
			}
		})
	})
}

First, we call pop() as we did in the previous part to get the last selected box and item. We are using modern JavaScript's Destructuring Syntax on line 4.

It is simply a shorthand for this:

1
2
3


const data = this.selectedBoxes.pop()
const box = data.box
const item = data.item

Then we add a red tint to the bear and change the box to use frame index 7 which is a red box.

Next, we set the player to inactive and stop all movement on lines 13 and 14.

After that, we wait 1 second before restoring everything to normal and tweening the bear out like other items.

We have to add one more thing to stop the player from moving when active is set to false. Add this to updatePlayer():

1
2
3
4
5
6
7
8
9


updatePlayer()
{
	if (!this.player.active)
	{
		return
	}

	// previous code...
}

Now when you open a box with the bear, it will turn red and the player will be unable to move for 1 second. 😎

Checking for Level Completed

You can basically play the entire game now except nothing happens after you find all the matches.

We can do this by keeping a count of how many matches we've found and then compare it against the total matches that can be found in this level.

There are 9 boxes and 1 is the bear which is just there to slow the player down. The remaining 8 make up 4 matching pairs. This means the level is completed when 4 matches are found.

Let's turn that logic into code by first, adding a matchesCount property to the Game Scene:

1
2
3
4
5
6


export default class Game extends Phaser.Scene
{
	// other code...

	matchesCount = 0
}

Notice that we don't need to specify a type using JSDoc because we are setting it to a number.

Next, we want to increment matchesCount each time a match is found. We can do that in checkForMatch() like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


checkForMatch()
{
	// code for no match condition...

	++this.matchesCount // 👈 add this line

	this.time.delayedCall(1000, () => {
		first.box.setFrame(8)
		second.box.setFrame(8)
	})
}

Now we need to check when it is equal to 4 and show a “You Win” message. The player should be disabled as well.

We can do that right after the boxes are changed to use frame index 8 which is a blue box showing that a match has occurred.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


checkForMatch()
{
	// code for no match condition...

	++this.matchesCount

	this.time.delayedCall(1000, () => {
		first.box.setFrame(8)
		second.box.setFrame(8)

		// 👇 check that we have 4 matches
		if (this.matchesCount >= 4)
		{
			// game won

			// 👇 disable and stop player like before
			this.player.active = false
			this.player.setVelocity(0, 0)

			// add a You Win! text 👇
			const { width, height } = this.scale
			this.add.text(width * 0.5, height * 0.5, 'You Win!', {
				fontSize: 48
			})
			.setOrigin(0.5)
		}
	})
}