Main content
Course: Computer programming - JavaScript and the web > Unit 4
Lesson 5: Making a memory gameMemory 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:
- We iterate through our array of tiles, and check to see if
isMatchistruefor all of them. - 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?
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?(57 votes)
I agree, I have done beginner JS, SQL and HTML on KA and didn't really have any problems but now that I'm doing advanced JS I'm really struggling.(57 votes)
For the tic-tac-toe challenge, how do you make it exit the function?(29 votes)
Just say this:return;
without anything inside parentheses connected to return, it just exits the function.(14 votes)
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();
}
};(13 votes)- this.onclick(); should be this.onClick();
give that a try.(21 votes)
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....(20 votes)
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.(4 votes)
- 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();
};(7 votes)- A bit late mate.
Your code is all good just a small mistake.
In the Tile.prototype.onClick = function()
you wrote "label" as lable.
Hope this helps.(4 votes)
- 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;
}
};(6 votes)
Remember thatvar SYMBOLS = [];is different fromSYMBOLS[]. The first is a statement that declares an array. On line 4, when we have the codevar SYMBOLS = ["X","O"];we are declaring the variableSYMBOLand assigning the array["X","O"]to that variable.
In step three of the challenge, after the variable has been declared, we are asked to addthis.label = SYMBOLS[blank];We are now assigning a value tolabel.
In this code the[]are being used to index the existingSYMBOLSarray. We are looking for a single value that will access one of the elements of theSYMBOLSarray.(10 votes)
In the Tic-Tac-Toe challenge, why is there an emptycheckWin()function that doesn't get used in the challenge? Is this a mistake or will we be using it later or something?(7 votes)- 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)- It works the same way as this:
for (var i=0; i<tiles.length; i++) {
tiles[i].handleMouseClick(mouseX, mouseY);
}
Test it out in a new program to convince yourself that it works.(2 votes)
- in challenge tic-tac-toe i need help this is my code
var playerTurn = 2;
var NUM_COLS = 3;
var NUM_ROWS = 3;
var SYMBOLS = [,];
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 the tile is not empty, exit the function
// Put the player's symbol on the tile
// Change the turn
};
Tile.prototype.handleMouseClick = function(x, y) {
// Check for mouse clicks inside the tile
};
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();
};(3 votes)
For var playerturn, put zero
For var symbol, put ["X", "O"](2 votes)
- 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)
