Memory Game

arrays

shuffle

setTimeout

Date

polygons

1

What does new Ball(…) create?

2

What does everything.push(x) do?

3

How is a drag turned into a launch?

4

Why convert degrees to radians?

Cards start face down. The player clicks two. Matches are removed; non-matches flip back after a pause. When every pair is found, the game shows the time taken.

Version one uses polygons on the card fronts. Version two uses photos, and a match means the same person in different pictures, like the 2 of hearts matching the 2 of diamonds.

FROM THE BOOK

Chapter 5 · The Memory Game
pp. 141–177

YOU WILL BUILD

• triangle.html
• memoryPolygons.html
• memoryPictures.html

01

Model each card as an object with a draw() method.

02

Build a deck of pairs and store it in an array.

03

Shuffle by swapping two random cards many times.

04

Load photos with new Image(); draw them with drawImage.

05

Hit-test a mouse click against card rectangles.

06

Track turn state: firstpick, firstcard, secondcard.

07

Pause before flipping back with setTimeout.

08

Time the game with Date and detect the end.

09

Draw regular polygons with paths and trigonometry.

Cards

Backs that all look the same, and fronts that differ.

Matching

Know which cards match and where each card is on the board.

A pause

Show both faces, wait so the player can see them, then remove or flip back.

No cheating

Clicking the same card twice must not count as a match.

1

Where

sx, sy, swidth, sheight

2

What

info: which pair it belongs to.

3

How

draw = drawback until it is picked.

CODE · script · canvas 400 × 200

var deck = [];
for (var i = 0; i < 4; i++) {
  deck.push({ x: 20 + i * 95, y: 15, info: i });
  deck.push({ x: 20 + i * 95, y: 105, info: i });
}
ctx.font = "32px Arial";
deck.forEach(function (card) {
  ctx.fillStyle = "teal";
  ctx.fillRect(card.x, card.y, 75, 80);
  ctx.fillStyle = "white";
  ctx.fillText(card.info, card.x + 28, card.y + 52);
});

var deck = [];

{ x: …, y: …, info: i }

deck.push(…) twice

deck.forEach(function (card) {

fillText(card.info, …)

Fewer or more cards appear. With more cards you need a bigger canvas or smaller cards.

1

Pick

Two random positions, i and k.

2

Swap

Exchange their info using a holder.

3

Repeat

3 × the deck length.

CODE · shuffle.html · script

var cards = ["A","A","B","B","C","C","D","D"];
var out = "Before: " + cards.join(" ") + "<br>";
var len = cards.length;
for (var n = 0; n < 3 * len; n++) {
  var i = Math.floor(Math.random() * len);
  var k = Math.floor(Math.random() * len);
  var holder = cards[i];      // swap i and k
  cards[i] = cards[k];
  cards[k] = holder;
}
out = out + "After: " + cards.join(" ");
document.body.innerHTML = out;

Math.floor(Math.random() * len)

var holder = cards[i];

cards[i] = cards[k];

cards[k] = holder;

n < 3 * len

Unshuffled, each pair sits one above the other. One swap barely mixes the deck.

1

First pick

Show it and remember it.

2

Second pick

Show it and compare info.

3

Pause

setTimeout(flipback, 1000), then remove or hide.

CODE · script · c = canvas 760 × 380

var box = { x: 250, y: 100, w: 260, h: 180 };
function paint(color) {
  ctx.fillStyle = color;
  ctx.fillRect(box.x, box.y, box.w, box.h);
}
c.addEventListener("click", function (e) {
  var mx = e.offsetX, my = e.offsetY;
  var hit = mx > box.x && mx < box.x + box.w &&
            my > box.y && my < box.y + box.h;
  paint(hit ? "gold" : "salmon");
  setTimeout(function () { paint("teal"); }, 1000);
});
paint("teal");

e.offsetX, e.offsetY

mx > box.x && mx < box.x + box.w

my > box.y && my < box.y + box.h

hit ? "gold" : "salmon"

setTimeout(…, 1000)

200 is too fast to see the cards; 3000 feels slow. About one second works well.

1

Angle step

2π ÷ n

2

Corner

(x + r·cos, y + r·sin)

3

Join

moveTo, then lineTo each corner, then fill.

CODE · script · canvas 400 × 200

function polygon(cx, cy, r, n) {
  var step = 2 * Math.PI / n;
  ctx.beginPath();
  ctx.moveTo(cx + r, cy);
  for (var i = 1; i < n; i++) {
    ctx.lineTo(cx + r * Math.cos(i * step),
               cy + r * Math.sin(i * step));
  }
  ctx.closePath();
  ctx.fill();
}
polygon(60, 100, 45, 3);  polygon(170, 100, 45, 5);
polygon(290, 100, 45, 8);

2 * Math.PI / n

ctx.moveTo(cx + r, cy);

r * Math.cos(i * step)

r * Math.sin(i * step)

ctx.closePath(); ctx.fill();

A pentagon, a hexagon, then a shape that looks almost like a circle.

Fix: Check that the second pick is a different card from the first.

Fix: pageX / pageY are page positions. Keep the canvas at the top-left, or subtract its offset.

Fix: Keep the jpg files in the Week5 folder and match the names exactly.

Fix: Subtract starttime, then divide by 1000 to get seconds.

A

Position

B

info

C

Colour

D

Size

A

Call flipback every second

B

Call flipback once, after 1 second

C

End the game

D

Call it 1000 times

A

30

B

45

C

60

D

90

A

To shuffle

B

To work out the elapsed time

C

To flip cards

D

To draw text

1

Folder

Create a folder named Week5.

2

Copy

Copy the example files and their images, audio or video into it.

3

Open

Open the folder in VS Code or Sublime Text.

4

Save

Edit, then save with Ctrl+S.

5

Check

Refresh the browser (F5). Open the console (F12).

Add console.log(deck) after shuffle() to see each card’s info and check the pairs.

NEXT WEEK

Week 6 · Audio, Video & Rewards

Creating HTML elements with code, and rewarding a correct answer with sound and video.