main.js

index.html

style.css

Run

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const canvasRect = canvas.getBoundingClientRect();
const borderWidth = 2;

let cardSize = 75;
let spacing = cardSize + 25;
let startX = 60;
let startY = 150;
let numCardTurned = 0;
let turnCount = 0;
let matchCount = 0;

const one = new Image();
one.src = "one.jpg";

const two = new Image();
two.src = "two.jpg";

const three = new Image();
three.src = "three.jpg";

const four = new Image();
four.src = "four.jpg";

const five = new Image();
five.src = "five.jpg";

const six = new Image();
six.src = "six.jpg";

const imageList = [
    one, one, 
    two, two, 
    three, three, 
    four, four,
    five, five,
    six, six
];

const gridImages = [];

/**
 *  Status: 
 * 0 - turned over
 * 1 - revealed
 * 2 - matched
 */ 
const gridStatus = [];

/**
 * Creates an intial grid with a status of 0
 */
function populateStatus(rows, cols) {
    for (let i = 0; i < rows; i ++) {
        let row = [];
        for (let j = 0; j < cols; j++) {
            row.push(0);
        }
        gridStatus.push(row);
    }
}

/**
 * Populates a grid of images in a random order
 * from the imageList array.
 */
function populateImages(rows, cols) {
    for (let i = 0; i < rows; i ++) {
        let row = [];
        for (let j = 0; j < cols; j++) {
            let imgIndex = Math.trunc(Math.random() * imageList.length);
            row.push(imageList.splice(imgIndex,1)[0]);
        }
        gridImages.push(row);
    }
}

function click(event) {
    let mouseX = event.clientX - canvasRect.left - borderWidth;
    let mouseY = event.clientY - canvasRect.top - borderWidth;

// Check if over a card
    for (let row = 0; row < gridStatus.length; row++) {
        for (let col = 0; col < gridStatus[row].length; col++) {
            if (mouseX >= startX + col * spacing && 
                mouseX <= startX + col * spacing + cardSize &&
                mouseY >= startY + row * spacing && 
                mouseY <= startY + row * spacing + cardSize) {
                    if (gridStatus[row][col] == 1) {
                        gridStatus[row][col] = 0;
                        numCardTurned --;
                    } else if (gridStatus[row][col] != 2 && numCardTurned < 2) {
                        if (gridStatus[row][col] == 0) {
                            gridStatus[row][col] = 1;
                            numCardTurned ++;
                            turnCount ++;
                            if (numCardTurned == 2) {
                                checkMatch(row, col);
                            }
                        }
                    }
                    drawCards();
                    printStats();
                }
        }
    }

}

populateStatus(3,4);
populateImages(3,4);
drawCards();
printStats();
canvas.addEventListener("click",click);

Console

Click RUN to execute project