If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Memory game: Scoring and winning

Our "Memory" game is almost complete! It's only missing one thing: the scoring. Here's a reminder of that part of the game rules:
The goal of the game is to get all the tiles flipped face up (i.e., find all the matching image pairs) in the least number of tries. That means that lower number of tries are better scores.
How do we track the number of tries? Well, a "try" is every time you've flipped over two tiles, which corresponds to our if block that checks flippedTiles.length === 2. We can add a new global variable, numTries, that we increment inside that conditional.
if (flippedTiles.length === 2) {
  numTries++;
  ...
}
We want to display the score when the game is over- when the player has matched all of the tiles. How do we check that? I can think of two options:
  1. We iterate through our array of tiles, and check to see if isMatch is true for all of them.
  2. We use a global variable to keep track of how many matches the player found, and then check if they've made the total number of possible matches.
We had a similar debate earlier, and I went with the option where we don't have to iterate through the whole array every time. Let's go for that again, option 2.
First we initialize numMatches to 0, in the same place where we initialize all our other global game state variables:
var numMatches = 0;
Then inside the if block for matched tiles, we increment the numMatches variable:
if (flippedTiles[0].face === flippedTiles[1].face) {
  flippedTiles[0].isMatch = true;
  flippedTiles[1].isMatch = true;
  flippedTiles.length = 0;
  numMatches++;
}
At the end of our draw function, we check if the player found all the matches and then display some congratulatory text to the user:
if (numMatches === tiles.length/2) {
  fill(0, 0, 0);
  text("You found them all in " + numTries + " tries",
       20, 360);
}
You can try it out below, but it might take you a while to get to the win state (no offense to you, of course, it also takes me a while!).
Here's a tip for whenever you're testing out parts of your game that are hard to reach - modify your game temporarily so that it's quicker to get there. For example, in this game, change NUM_ROWS and NUM_COLS to be smaller numbers, and you'll be able to finish much more quickly. Now, try that below!

Want to join the conversation?

  • aqualine seed style avatar for user Suresh Korada
    For the tic-tac-toe challenge, how do you make it exit the function?
    (29 votes)
    Default Khan Academy avatar avatar for user
  • piceratops tree style avatar for user bjohnson
    On the second step of the Tic-Tac-Toe challenge, I can't get the second step to work. This is the code I have, but it says it's wrong.



    Tile.prototype.handleMouseClick = function(x, y) {
    // Check for mouse clicks inside the tile
    if (x >= this.x && x <= this.x + this.size &&
    y >= this.y && y <= this.y + this.size)
    {
    this.onclick();
    }
    };
    (11 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Armanterrell7947
    Is it just me or did these lessons go from simple to understand to extremely complex with little explanation as to some functions? Some of these examples have code that was never mentioned before....
    (18 votes)
    Default Khan Academy avatar avatar for user
    • piceratops ultimate style avatar for user ankurec01
      I agree. The basics were easy to understand but these advanced courses are very hard. Some the functions in these courses are taught in the basics course but we might have forgotten them. I think they expect us to learn the function by ourselves, which is great as we can start to learn by ourselves.
      (3 votes)
  • winston baby style avatar for user Max Fang
    The courses in this section are to hard. I don't understand most of the concepts and it's starting to become very confusing for me overall. However, I love to computer program. I do not want to give up just because the courses are to hard, but I have so many questions and not enough answers that I don't know what to do. Is there a course on javascript that's more difficult than the beginner JS section, but not as hard as this?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • mr pants purple style avatar for user Giant Squid
      I agree! This is all very complicated! I was struggling myself, until I found a technique that helped em understand the material. Instead of simply reading the articles, I open a new javaScript program in Khan Academy, and make the program with the articles. It takes a lot of time, but at least I am starting to understand everything!
      Wish you luck!
      (8 votes)
  • duskpin ultimate style avatar for user mtollefson
    i am so stuck on the tic-tack-toe challenge i sooooooooooooooooo need help on the 3rd part this is my code can someone help me

    var playerTurn = 0;
    var NUM_COLS = 3;
    var NUM_ROWS = 3;
    var SYMBOLS = ["X","O"];

    var tiles = [];

    var checkWin = function() {

    };

    var Tile = function(x, y) {
    this.x = x;
    this.y = y;
    this.size = width/NUM_COLS;
    this.label = "";
    };
    Tile.prototype.draw = function() {
    fill(214, 247, 202);
    strokeWeight(2);
    rect(this.x, this.y, this.size, this.size, 10);
    textSize(100);
    textAlign(CENTER, CENTER);
    fill(0, 0, 0);
    text(this.label, this.x+this.size/2, this.y+this.size/2);
    };


    Tile.prototype.empty = function() {
    return this.label === "";
    };

    Tile.prototype.onClick = function() {
    if (!this.empty()) {
    return;

    }

    this.lable = SYMBOLS[playerTurn];

    playerTurn++;
    if(playerTurn >= SYMBOLS.length)
    {playerTurn = 0;}};

    Tile.prototype.handleMouseClick = function(x, y) {
    // Check for mouse clicks inside the tile
    if (x >= this.x && x <= this.x + this.size && y >=this.y&&y<=this.y+this.size){this.onClick();}

    };

    for (var i = 0; i < NUM_COLS; i++) {
    for (var j = 0; j < NUM_ROWS; j++) {
    tiles.push(new Tile(i * (width/NUM_COLS-1), j * (height/NUM_ROWS-1)));
    }
    }

    var drawTiles = function() {
    for (var i in tiles) {
    tiles[i].draw();
    }
    };

    mouseReleased = function() {
    for (var i in tiles) {
    tiles[i].handleMouseClick(mouseX, mouseY);
    }};
    draw = function() {
    background(143, 143, 143);
    drawTiles();


    };
    (5 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Josh Claydon
    Please could someone help with my Tic-Tac-Toe challenge. I have inserted the following code as per the hints, but I keep getting oh noes guy saying X, or O is better written in dot notation? the hint says it should be an array. Thank you

    Tile.prototype.onClick = function() {
    // If the tile is not empty, exit the function
    if (!this.empty()) {
    return;
    }
    // Put the player's symbol on the tile
    this.label = SYMBOLS["X", "O"];
    // Change the turn
    playerTurn++;
    if (playerTurn >= SYMBOLS.length) {
    playerTurn = 0;
    }
    };
    (5 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user AD Baker
      Remember that var SYMBOLS = []; is different from SYMBOLS[]. The first is a statement that declares an array. On line 4, when we have the code var SYMBOLS = ["X","O"]; we are declaring the variable SYMBOL and assigning the array ["X","O"] to that variable.

      In step three of the challenge, after the variable has been declared, we are asked to add this.label = SYMBOLS[blank]; We are now assigning a value to label.

      In this code the [] are being used to index the existing SYMBOLS array. We are looking for a single value that will access one of the elements of the SYMBOLS array.
      (6 votes)
  • orange juice squid orange style avatar for user Emma See
    In the Tic-Tac-Toe challenge, why is there an empty checkWin() function that doesn't get used in the challenge? Is this a mistake or will we be using it later or something?
    (7 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Garrett Nouchi
    var drawTiles = function() {
    for (var i in tiles) {
    tiles[i].draw();
    }
    };

    How does var i in tiles work? I can't find documentation
    (5 votes)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user KingKingGreat
    How do you make the win function in the Tic-Tac-Toe challenge?

    Because when the step 3 done, it doesn't have the win function step.
    (4 votes)
    Default Khan Academy avatar avatar for user
  • starky ultimate style avatar for user Giovanna Metteer
    i'm trying to pass step 2 but the oh noes keeps saying, "x is not defined" and "y is not defined"
    (3 votes)
    Default Khan Academy avatar avatar for user