 Welcome to Easy Matching Game using HTML, CSS, and JavaScript. So let me show you what we're going to be building today. So this is the matching game. And it is just HTML, CSS, and JavaScript. It's vanilla. There's no modules, no plugins, no nothing. It's just straight right off the top of my head. So basically you are trying to match some playing cards. And if you get it, you know, once it's not a match, you hear that sound. And if you get one that is a match, that sound. It's quite nice. So yeah, that's what we're going to do. So we're going to start with this. So I will put a link down below to the actual starting code. And what that looks like is this. When you download it, you'll get a zip file. Once you unzip it, you'll get a folder that says matching game. So if you open that folder, you'll see two other folders, two subfolders, one called cards. And this is where all the different images of the cards are held. And then you'll see a folder called sounds. And there's the sound that we play when there's a match. And there's a sound we play when there is no match. And then there's a file here that says matching game.html. And we're going to go ahead and open that. I'm using Genie, which is a really nice free and open source text editor. And this is what we're going to do. So let's get started. Now I should probably point out that I made this for my students who are learning HTML, CSS, and JavaScript. So I assume they know some of these things already. And that it's simple. It's at a level for beginners. So if you haven't done a lot of this type of stuff before, this is your chance. So you can see so far that we actually already have one card, which of course is the Ace of Spades. And Lemmy would be proud. So we need, if you recall, we need four rows of four cards. So what I'm just going to do is I'm going to go ahead and copy this and paste it. And I'm going to put a Br tag here. And then I'm going to go ahead and copy. So that's going to be one row, two rows, three rows, and four rows. I am a very big fan of copy and paste. Because as I like to tell people, I'm kind of lazy. So let's go ahead and take a look at that and see what it looks like. Now if my voice sounds a little scratchy, it's because it is. I'm just getting over COVID. So I'm going to go ahead and refresh that. Okay, so you can see here we got Ace, Ace, Ace. And if I scroll down, there's my fourth Ace from the first row. And Lemmy, keep going. Now I could zoom out here and you can see what it looks like a little bit better. Now obviously we don't want to have to do that. So let's go ahead and fix that with a little bit of CSS. So I'm going to go back to Genie. Now you can use whatever you want. Visual Studio Code, Brackets, whatever works for you. I like Genie. It's lightweight, it's fast, it's open source. So these are going to be the only images I have in the program. So I'm going to use this image tag. And I experimented with the numbers already. So I'm going to say the width of this is going to be 8%. And I found that number works really, really well. And so I saved it. Let's go ahead and go back and take a look at it and refresh. There we go. So with the normal, how do you put it? The normal magnification, zoom, I should say. Let me pull this down a little bit. Now you notice because it's percentage, as I resize it, the images are resized. So it'll match whatever your basic screen size you've got there, which is quite nice. Let me go ahead and see if I can put these side by side. That might make debugging and stuff a little bit easier. That's a little small there. So I'm going to go ahead and... No, I can't because it's percentages. So let's go ahead and move. Ooh, it's even smaller. Yeah, you know what? I don't like that. So let's undo that for now. So the first thing we're going to need is we're going to need different sets of images. So we need pairs. Now I've got Ace of Spades and lots of Ace of Spades. So I'm going to go ahead and keep it real simple. And I'm going to go ahead and do King of Clubs. And you can fast forward to this if you already know what you're doing. We've got to do Queen of Hearts and we'll do Jack of Diamonds. Now what I might do here, just to kind of save some time, is copy this and maybe put this down here. So I know I've got two sets of the same thing. And then we'll mess this up in a minute. So then let's do a 10 of Spades. Let's do 8, 6, and let's do 4. So we've got Spades. And we'll do the same thing. We'll do Clubs. We'll do Hearts. And we'll do Diamonds. Again, I'm just going to go ahead and copy this and paste it. Let's check that out and see what it looks like. It's refresh. And you see a couple of the images didn't come out. So obviously I did something wrong. And this is just the process. So 6 of Hearts, 6 of Clubs. I should have paid attention to which one it was, but I didn't. I spelled Diamonds wrong. There we go. So I'm going to go back again. Notice I keep testing it. Students have this unfortunate tendency to not want to test things. I don't know why. So if I do it this way, I know it's working. The only problem is it's too easy to guess. So what I would probably do at this point is I would just kind of go ahead and do some cutting. Cutting and pasting. Cut some of these out. Plot those in there. And you just kind of see what I'm doing here. It just kind of mixes them up just a little bit. And, you know, you could be a bit more precise with it if you have time. But for sake of brevity in the video, I will just go ahead and leave it wherever it is now. So you can see there, it's pretty well mixed up. I mean the 10 and 8 are next to each other still, but that's random enough. And so is the Queen and the Jack. But you get the idea. So let's go back to our matching game. Now when we start the game, you notice that the cards are, of course, hidden. Because that wouldn't be very challenging of a game if they weren't hidden. So to do that, I'm going to use a little bit more of CSS. So in this case, I can't use a regular HTML tag. I have to make a CSS class. So I'm going to make a class called hide. And I'm going to use a filter. And this is going to be the brightness filter. And when I start the game, the brightness should be zero, meaning that we can't see anything. So let's go ahead and take a look and refresh it. Nothing happens, which is what I expected. So as a reminder, again, this is something that beginners often do. Well, I put this here. Why aren't they hidden? Well, the computer doesn't know that you want all these cards hidden. You know you want them hidden. The computer doesn't know that. So to fix that, we do class equals hide. So again, I'm going to test it. I'm going to refresh it. And now you can see I have a hidden card, which is exactly what we wanted. Pretty cool, huh? So now that I've got one that's working exactly as I expected, I'm going to copy this. I also copy this space here. And let's go down through. Boom, boom, boom, boom, boom. I'm going to save it. And of course, I'm going to do what? Hopefully you said test it. And OK, so we're at the starting point. So we're making quite a lot of progress here. So let's go ahead and start working on getting the cards to flip over. And then once we can do that, then we'll add the game logic. Now this is where we start doing the JavaScript part of the game. So I'm going to go back to my code. And what I'm going to do is I'm going to use CSS again. OK, so I have a class called hide. So what I'm going to do is I'm going to make a class called show. OK, in this case, the filter is going to be a brightness again. I'm going to change it from 0 to 1.0, which means that it is fully shown. So what I need to do, and I already added this for you in case you were curious, where it says when a card is clicked, do this. So I'm going to create a function. And I'm going to call it clicked. And I'll talk about the card thing in a minute. So what I want to do is card.classname. Note the capitalization. JavaScript is pretty strict about that. Equals show. So what that says is when we click on a card, we want to take that card and show it. So we add this class to it, which changes the filter to brightness 1. So from 0 to 1, it goes from not visible to visible. So let's go ahead and test it. And don't forget to refresh. And I'm clicking images, and of course, nothing happens. So just like before, you know what you want it to do. The computer doesn't know what you want it to do. You have to tell it everything. This is one of the challenges of coding. It can't read your mind, just like another human can't. So we have to connect this function to each of these images. To do that, I'm going to do on click. So that means when I click on this image, I want to call that function clicked. And this is probably a new thing, at least for my students. I want to put this in there. And this is a special keyword in JavaScript. What this will do is it will tell this function which of these images I actually clicked on. So it could have been this one, could have been this one, could have been this one. So let's go ahead and test it. Refresh. And now you can see it flips over. Now if I click this, nothing happens. So as you know, probably guessed by now, I'm going to do my favorite thing. Copy and paste. So notice how it still says this, because it knows that when I click on this image right here, it's going to send it to the function. Alrighty, so let's go ahead and test it. And again, you do need to test all 16. We could have made a mistake when we copied and pasted. So if we don't test them all, we won't know. And so far, success. Okay, I'm pretty happy with that. So let's go ahead and refresh it just to get us back to the base, the beginning. And now this is where it gets a little bit more complicated in the sense of coding. Okay, so, so far, all it does is when we click on something, it flips that card over. But there's no logic as to, you know, is it the correct card or do we have a match? And, you know, so we got to figure out how we're going to do that. Now, I've already walked through this exercise with my students where we talked about, we actually played this with cards. And we talked about, you know, the fact that at most we have two cards that we're keeping track of. So I'm going to call it card one. And I'm going to call it card two. I know very original names, but they're logical. See, you know, if you're not a programmer, you should understand what card one means and what card two means. So when I start the game, so the question is, have I flipped over any cards? The answer is no, I haven't. I haven't chosen card one. I haven't chosen card two. So in JavaScript, we represent that with none. Sorry, null. Sorry, I get confused. So what null means is I haven't chosen to call card one yet. I haven't chosen card two yet. So now we're going to take the same idea and code it. So I click on my first card. Does it go to card two or does it go to card one? Well, it goes to card one because card one is null. We always choose card one first. So if card one equals null, notice there are two equal signs. So we're using this if statement. So if card one is null, then I say, then I'm basically going to go ahead and do this. I'm going to take this, put that in there. I still want to flip the card over. So I'm going to use that. And then I'm going to add one more line. Card one equals card. So let's go ahead and test it and refresh it. So I'm going to click on a card. Card one right now is null. Okay, card one is null. I flipped it over. Now card one is this queen of hearts, this particular queen of hearts because there's two. Now I'm going to go ahead and try and click another card and see what happens. Nothing's happening. Because if we look at our code, card one is no longer null. So nothing happens. Now, to make it logical, maybe a bit more easy to understand, I'm just going to say else if, I don't actually have to add this part of the code, but I think it'll make things clearer for beginners. So now we check, so if card one is not null, hey, let's check and see if card two is null. Okay, so now if card two is null, we're going to do the same thing. Except we're going to say card two equals the current card. So now I should be able to flip over two cards. Let's go ahead and try it. So card one and card two. Let's go ahead and now I got to test it. Card three doesn't work, doesn't work, doesn't work, doesn't work. Nothing's happening. Okay, so again, I'm just kind of building this up piece by piece. I don't necessarily know how to program everything from the get-go, but I know what parts I have to put together. Let's go ahead and reset that. So now I've flipped over two cards. Now this is where we need to check and see if there's a match. And to do this, I'm going to put this into a separate function. So that's why it says here check if there is a match. So I'm going to make a function and I'm going to call it, check match. I don't need to put anything in there this time. I'm going to leave that blank. Now probably what you're tempted to do, okay, so see if card one is the same as card two. Probably what you're tempted to do is something like this. If card one equals card two, then you'd say something like, you know, alert, we'll use alert for now match. We're going to change this later, but for now it's what we're going to do. This is what you're probably tempted to do, okay? And this won't work. So let me go back and refresh this and see if I can find a match. So ace, king, okay, brilliant. Ace, ace, there we go. Notice the match did not pop up, okay? The reason is that these are two of the same thing. They're not the same thing. They're two of the same thing. So just like, for example, my school students wear uniforms. So I might have student A and student B. Student A and student B have the same uniform on. Doesn't mean they're the same student. Just means they have the same uniform. So these are both cards and they have the same design, but they're not the same card. So we have to think about how we're going to do that. And what I came up with was a simple way. So we're going to look at the source of the card. And if you recall from our HTML, okay? Our source is this path to the image. So it's in the cards folder and it is the ace of spades. So cards folder and ace of spades.png, of course. So this and this are actually the exact same thing. Even though they decorate two different cards. Let's go ahead and test it and see what happens. So two ace of spades and ace of spades. And we did not get a match. Did I refresh it? And did I save it? Oops. Okay, let's go back to the code and figure out what I did wrong. Ah, I know what I did wrong. Okay, actually, rookie mistake. So after I click that second card and show it, I need to call the check match function. So check match. So my explanation was still correct. I just, you know, the demo wasn't quite doing what I was supposed to. So once I get to here, my code jumps down to here and then does this. Okay, so let's go ahead and test it again. So I'm going to do that. And you can see we got a little pop up here. It says match. Now notice this didn't flip over. We're going to fix that in a few minutes. It's going to flip actually now. You can see that. So let me go ahead and try. Okay, so you know, see I can't flip anything. I should have done this part earlier. I can't flip anything over. Okay, so it's kind of stuck at this point. And this is part of the process. This is why we test things. The problem is, if we have a match, I need to reset card one and card two. Okay, so I'm going to do card one. That's our one equals null. I'll put this here. Reset cards. So card one equals null, not null. Card two equals null. Let's go ahead and test it. And hopefully if you're thinking ahead, you realize there's also another problem we got to fix. Boom, boom, match. Okay, all right. Now I don't have a match. I can't continue anymore. Okay, so this is the process. Again, it's not a lot of code, but there's a lot of logic involved. So else. What else means? In this case, we have two possibilities. Either the cards match or they don't. So if the cards match, we show, hey, you matched, we reset the cards. If they don't match, we still have to reset the cards. So I'm going to go ahead and copy that and paste it. But we also have to first flip the cards back over. So I'm going to say card one dot class name equals hide. Card two dot class name equals hide. Okay, and then we still have to reset card one and card two. Let's go ahead and put a little space there. Okay, so we reset. Well, we flip them back over. I'll say flip the cards back over and then reset the selected cards. Let's go ahead and open it up. Okay, make sure this still works. Okay, we got a match. Let's go ahead. Now this is going to be not a match. Now watch what happens. Okay, let's do it again. Notice how the second card, oh, I got a match. The second card is not appearing. Okay. So as a beginner, you might think, well, the code's wrong. The code's doing exactly what you told it. The problem is it's happening too fast for your eye to see it. Because the computer's very fast. So as soon as it's not a match, it's flipping it back over. So what we need to do is we need to come up with a delay. And this is also the reason why when you have the alert, you're not seeing the flip over first. So here's how we're going to fix that. Where we have check match. We're going to do something called setting a timeout. So there is a JavaScript method, function whatever you call it in JavaScript. Timeout. You tell it what function you want to call. And then you tell it how long to wait. Okay. In milliseconds. So one second would be 1,000 milliseconds. Okay. So what this means is I've chosen card one. I've chosen card two. I'm going to show it. And then I'm going to wait for one second. After one second, I'm going to jump down here. And then that will avoid all the timing problems we just saw. Okay. So let's refresh it. Okay. Now we see it. About a second later, we got a match. Let's try one. It's not a match. Oh, that is a match. Okay. Let's try one. It's not a match. Notice that one second later, it hit itself. Oh, that's a match. Okay. One second later, it flips over. Now you might want to make it two seconds, whatever that number is. But I found one second is pretty effective. And it works pretty well on different browsers. That's another thing you have to deal with. Okay. So basically at this point, we have a functioning matching game. We can match. Okay. We can not match. We can keep going. And then we're pretty good to go actually. Which is, yeah, I'm pretty happy with it so far. The only thing I wanted to add to the game at this point is sound. Okay. So if I go back to the folder, you know, we had this cards folder. And then we also have the sounds folder. So what we're going to do is we're going to create a sound. And I'll be honest, I just actually forgot the code for it. So I'm going to have to go back and look at the complete matching game. And this is something I do tell my students. I don't have all this stuff completely memorized. I sometimes do forget things. And it is new audio. That's what I want to know. Okay. So what I'm going to do is up here. I can do it up here. I want to make two variables. Match. And that's going to be new audio. And the path is sounds. Match.mp3. Okay. So I call it match. And yeah, let's call it match sound. That probably makes a little bit more sense. Call it match sound. And again, it comes from the fact that I've got the sounds folder and match.mp3. So the names are consistent. It's pretty logical. Can I not see that? Match sound equals new audio sounds match. And I make a variable called no match sound. And that's going to be no match. So very simply, instead of alert, I'm going to go ahead and do match sound.play. And then over here, I'm going to do no match sound.play. Which should do what I want it to do. Okay. So yeah, I'm going to refresh it. I hit a match. It's the match sound, which is what we wanted. And we'll try a non-match. Okay. And there's the non-matching sound. And that, my friends, is that. So you can actually go through and play the whole game. There. This is here. Or it was here. Queens are here. So there you have it. Now again, this was a very, very simple game. There's no scoring. There's no keeping track. There's no way to shuffle the cards. That gets a bit more advanced in the coding side. Again, I made this for my students who have only been studying this for a very short time, but they're doing an excellent job. And so we're trying to kind of use the skills they already have to build a simple little game like this. So again, just a quick review. We've got a little bit of HTML. So we added some images. That was just basic HTML. We used a little bit of CSS to get all the images on the screen. We used a little CSS to hide the images. We used a little CSS to show the images. And that was controlled by clicking on each of these images. And we had a couple of different functions here. One was clicked. So when we click, we check and see if the card is null. Have we selected a card yet? If we haven't, then we show that card. And then we set the card one equal to the current card. Otherwise, we check and see, OK, well, is card two null? I mean, we haven't selected it yet. If so, we show it. We set card two equal to the current card. Then we wait about a second and we check. Do we have a match? And so if the source of card one and the source of card two are the same, we play the match sound, then we reset the cards. Otherwise, if they're not equal, again, those are two equal signs, we play the no match sound. We hide both those cards because they weren't correct. And then we reset the cards and then we can choose again. And that, as they say, is that. Thanks for watching and keep on coding. Take care.