JavaScript project Learn to create a memory Game and more | Laurence Svekis | Skillshare

JavaScript project Learn to create a memory Game and more

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 26m)
    • 1. Promo Video

    • 2. 2 JavaScript Setup Array

    • 3. 1 JavaScript Game Course Introduction

    • 4. 3 JavaScript Game Functions

    • 5. 5 JavaScript Game innerHTML

    • 6. 6 JavaScript Game concat ararys

    • 7. 7 JavaScript Game onclick

    • 8. 8 JavaScript Game Image switch pass this

    • 9. 10 JavaScript Game Flip limits

    • 10. 12 JavaScript Game Tile Comparison Check

    • 11. 13 JavaScript Game Set id flip back

    • 12. 14 JavaScript Game remove double click

    • 13. 16 JavaScript Game setting clearing intervals

    • 14. 18 JavaScript Game score end game

    • 15. 19 JavaScript Game addEventListener restart

    • 16. 21 JavaScript Game Message User

    • 17. 22 JavaScript Game Adding a Timer and Score

    • 18. 25 JavaScript Memory Game Update


About This Class

JavaScript project Learn to create a memory Game and more

Step by Step how to create your own game using JavaScript. See how JavaScript works application building project.

One of the best ways to learn is to work on a project. We start with a blank page and build the application step by step. All of the source files are included.

Do you want to learn JavaScript working on a real project?

We show you how to use JavaScript to create an interactive game, everything from creating the game board to messaging, text, timers, and game setup.

We build this game in bootstrap, show you the HTML CSS and JavaScript.

Learn to Create your own JavaScript GAME!!!

Within this course we show you how to add JavaScript functionality when building out projects and use JavaScript to achieve your goals.

We have designed this course to optimize practicing JavaScript coding.

Try the code after each video lesson. PDF copy and paste code that we use within the course and TRY FOR YOURSELF.

Everything you need to learn about JavaScript is provided within this course.

quick lessons get right to the point
source files downloadable to work along
challenges and lessons
30 day money back guarantee
new course material added regularly
trusted name in education since 2002
full HD easy to read source coding
Learn how Javascript works and it's fundamental concepts when it comes to creating games and interactive projects. Learn to build your own Javascript code to make your own JavaSCript memory game


1. Promo Video: within this JavaScript course, we're gonna be working on a real world. We're gonna building out a memory, starting with a blank page. We're gonna add CSS, html and JavaScript in order to build out a fully functional memory came by the end of the course throughout the course. We're gonna explain step by step, why we're adding the JavaScript and how it's gonna function within the game. And by the end of the course, you should be able to build out your own memory team and use the functionality that you've learned in order to create and add to your own job. Working on a real project start to finish is a great way to learn jobs. We've been developing online courses since 2000 and two. We've also included all the source files and resources that you need to know and to have in order to get going. Are you ready to learn? Let's begin 2. 2 JavaScript Setup Array: So right now we're starting out with just a bank blank page, so there's nothing on the page yet. We've set up our bootstrap links or linking to the bootstrap Cdn because we're gonna be using bootstrap in order to frame this project and within the course, we're gonna be showing you how to develop a JavaScript game. We're also linking out to the styling here, and we're gonna be coating the JavaScript right on page as well. Of course, you could always link out to a source file. But just so that we don't have to do is much clicking back and forth. And I can just scroll back up to the rest of the HTML content and show you how we're connecting the HTML content to the JavaScript in creating that interactivity with the JavaScript. And one of the first things that we need to do in order to set up our game is we need to get some images in there. So I found some images on my computer and actually, these air gonna be image tiles of actual courses that I have s So I'm just going to use those and I found this other one this happy guy. So I'm just gonna use this guy for the background of the tile. So these are the images that I'm gonna be using. And, of course, when you're setting up this game on your computer, you can use whatever images that are available to you. And so one of the first things that were going to do is we are going to start by setting up that array with all the images so that we contain the image names in an array. So we're just gonna go variable and we're gonna call it tile name. We're tile images and equals, and we're not actually going to be setting the path of the images because we wanna have the dynamic ability to update the paths as needed. So we're just gonna be calling them tile one J peg comma. And this is how you set up in a Re and JavaScript. So this array is just gonna contain all of these different names that we have for the images. But it's quickly finished those up, and I'm gonna console, log out my array and we'll be using console log as well quite a bit within this tutorial. So and as well the browser that we're gonna be using is gonna be chrome, and it's got its console here. So when we Consul logged them out, we see that we get our list of all of our items, and these are consistent with the image names that we have available to us that we're gonna be using within this game. 3. 1 JavaScript Game Course Introduction: welcome to our JavaScript tutorial. Within this course, we're gonna be going through all that you need to know in order build out a JavaScript game . What better way to practice JavaScript than to build out a fun memory game? Memory games are very popular and a lot of the functionality that we're gonna use within this course. And within this game, build can be used across other JavaScript projects. And that's why working with JavaScript projects is a great way to practice and learn more about JavaScript. My name is Lawrence, and I've been a Web developer for over 14 years, and I'm gonna be sharing my knowledge with you were going to be starting with, ah blank Web page. And we're going to be building out all of the's JavaScript function, functions and functionality in order to achieve our JavaScript game. As we go through all of this different functionality that's gonna be required for the game , we're gonna be also talking about the JavaScript and commenting on what it can do. And there's also various components that you can take and reuse within your own projects as well. All of the source files are going to be included. So it is encouraged that you work along with your own editor or non online editor, where you can practice the JavaScript as you go through the course after each section or section of lectures. We're going to include one of these functions or some of the code that we've talked about within the lecture. And again, it's gonna be encouraged that you take the code, work with the code and test out the various functionality that we've been discussing within the lecture. And at the end of the project, you're gonna be able to build a game just like this one with full functionality, where we've got our timer at the top. We've got messaging, Doc and forth from the game back to the user. And then also the ability to restart the game and play the game over and over again. Come again to our JavaScript memory game building course. 4. 3 JavaScript Game Functions: I'm gonna go ahead and continue to set up our game. So we're going to create a brain, you tive and we're just gonna give it the I d. Of game board. And this is where we're gonna be setting up the game inside of the stiff. And the way that we want to do it is that we want all of these tiles to load dynamically in the game board. So every time you restart the game, you're not actually gonna know where they're positioned. Eso We're going to do this by dynamically loading in the code within with that, using JavaScript, loading that into the HTML, And we're also going to go ahead and create a function that we're just gonna call function start game, And so this is gonna be the function that's gonna initiate the game to begin, and it's going to set up our we're gonna have all of these elements here when starting the game. So we're gonna first. What we need to do is game board it. So every time the game is starting, whenever anyone clicks to start the game, we've got to create a brand new game board. So the best way to loop through. All these items in the ray is we're just going to do a regular four lives, so we're gonna set up our variable. It's gonna call it I. So I set it to zero then while I is less than or equal to, and this is where we're going to get actually the length of the re. So this is a function within JavaScript where you can do list the A re name and to length. I was see there that Dreamweaver is giving us that suggestion there. So we're gonna finish up that loop, so we're gonna increment by one, and we create a brand you function in order to display the images because we don't want to have our functions get too complicated. And we want to really try to break up all of this functionality. So we're gonna have another one called display image, and from there we're gonna be passing over the value off I because here we're going to get value anywhere from zero all the way up to six. And actually, we need to do one more adjustment here because we need to actually have each one show up twice so I'm just gonna add in the length and I'm gonna multiply it by two. So I'm going to get a number all the way up from zero all the way up to 11 for all the items within the Saray Times two. And then when I go to display image and maybe we could just console log that out for now, just to make sure that everything is working according to the way that we want it to work. So going back to the page, we're gonna refresh that. And actually, we need to initiate this function. So I'm just gonna do, start game there and go back out and initiate it, and we can see that we've got all the way from zero all the way to 12. And so I have to do one more minor adjustment here, so I'm just gonna do minus one and go back out. Refresh it just to make sure that we're counting for all the items within the race or doing 012345 all the way down. So now going back out to here. So we've got all those numbers incremental all the way up from I or from zero all the way up to account for all the values that we're gonna have within this array times, too, because we do want to find matching pairs. 5. 5 JavaScript Game innerHTML: So now we're going to be using the Dom a little bit, and the first thing that we want to do when we start up the game is we actually want to clear out any content that's available within the game board. So it's gonna do clear game for it. And the way that we're going to do that is that we're going to get this element by D and then we're just gonna do the inner HTML and we're just gonna clear that up as nothing as blank. So all we're doing is get element by I d. We're identifying that I d and we're clearing out all of that inner html and maybe actually , a better way is to actually identify this element because we're gonna be using this over and over again. So we're actually gonna make set up a variable for it in order to be able to access it a little bit more easy. So all we've done here is I've added in some content there just to show you that it is actually gonna clear that out. I've set up a game board and done document, get element by I D and picked up that game board and now I can use it where A lot simpler and a lot simpler format where Just do game board dot eight inner html eso also here I'm going to do on a pending of the content in that inner HTML eso The way that we're going to do that is we're just going to do Ah, plus So we're gonna do game board in her HTML and we're going to do this plus equals and here we're gonna set in some new content within their planet. Just do div. And I keep it really simple for now where I'm gonna just set up the div there and close up that def and we'll just see what that looks like. So we actually get a whole bunch of dibs and it's just listed out the numbers eso We want to do a little bit of styling there cause we are using bootstraps. So do you want to take advantage of the ability of bootstrap and the grid system? So the way the grid system works for bootstrap is that you can set there's a grid of 12 and you can set various classes like this. So if I wanted to do on medium screens. I want to be four and maybe I want to do even smaller on on extra small screen. I just show you how that looks. So when I refresh it, we see that we do have this grid system and what I resize it. So it's gonna shrink below. On the smaller side, eso we see that we get all of these numbers and these essentially are going to be the cells that we're gonna be working with. And so now we're gonna have to add some additional styling to those cells to really get them to come out. And maybe what I'll do is here. I'll just add in style and close it up so that we still have it all on one page. Typically, I would just link out to it, but because we are working with, um, within this course, I just want to keep everything on the single page. So we're just gonna call this something like tile or game. So I just created a brain you class there and then within here, I'm going to do something. Votes the height. Me bacon set it at 400 pics and then we can. We can always update that later. And just to show you that this is how it's setting up the game board for us. And maybe another thing that we want to do is we want to just this to be three, and this to be force that we do have more tiles within the game board and maybe we don't want to go that big, stick it out 200 just put a border there. So you go to a block border and we're gonna do one picks really solid and just see what that looks like now. So see that we are beginning to get that game board. It's starting get set up there, and in the next lesson, we're gonna be ready to start building out these tiles and make them clickable and make this game actually interactive and do something 6. 6 JavaScript Game concat ararys: So within this lesson, we're gonna talk about setting up on a ray a brand new array. But this time we're gonna have a solution. So we're just gonna call it solution for Ray, and we're gonna have it equal to the tile images. And we're gonna come Katyn eight, it actually with itself. So when you do Kam Katyn ating, you're actually joining winery to another. So if we had two separate Aries, we can concur. Katyn eight, they're raised together. But since we've only got that one array and we want to have duplicates for each individual item within that array, so we're gonna just can Katyn ate them together. So we're gonna have essentially Honore with all of these items from this original rate, but we're gonna have it twice. And now we can actually do this where we can eliminate out that multiplication of two and now should actually console. Log that out. I'm gonna remove out this one here, and I had a console. La goat. That solution arrays that we know what? That what? The contents of that one are going back out to there. Well, here we do see that this is our solution array here on the right hand side. So now that we've built out the Solutionary, we're actually going to need a way to randomize it and to shuffle the rain. So, unfortunately, with JavaScript, there is no built in solution in order to stop Hillary. So I've got this handy function where we can do on a re shuffle. So essentially, it's gonna take in that array. It's gonna check the length of it minus one. And then it's gonna do set up a couple variables here that we're gonna work within their rate and it's going to do a flat, uh, math floor math random. It's gonna multiply it by C plus one eso Here, we see that we're setting up that value of see is the D length minus one eso here, we're just doing plus one. And so basically, this is counting down and looping down from the length of the rate decreasing. And essentially it's returning back a shuffled version of the rain. So also over here. So in order to use that, all we have to do is do that solutionary put into the shuffle arrange. And here we're just gonna do solution array again. Just you can be able to see that it is actually shuffling. And it's random izing the order of the items in their way. So basically, if we did want to display out all of these images just in a random type format, there's gonna show you quickly how to do that. So we could enter in something here where we could do image and we do source. And so now we just need to set a source. So all I'm going to do here is I'm just gonna enter in that image path and because we're gonna have actually those values already present within their range because we had we just copied out that original Ray that we used. So we're gonna have all of those values actually present within their range. So I'm just gonna do plus and solution array. This is only to demonstrate that we're actually going to be having all of the's. The's images on this is how we're gonna be able to pull them through into the game board and was gonna put a class in there. This is a bootstrap class in order, make the images responsive and just go back out here and see how that turns out. Eso we see that In fact, we do have all of these images they're loading. We've got two of each. And maybe that image responsive probably isn't the best one. So we're gonna do I'm just gonna call it flip, flip image and bring that back up to the styling and at some additional styling to there. So we're gonna do with equals 100% right? It's 100% and we're gonna do over flow, and we're just gonna hide the overflow there. So in case there's anything that's overflowing that cell, we can hide those that So this fits a little bit better within the frame that we have to work with. And you can see that every time I refresh it, we get this collection of images and now we're going to be able to hide thes, And when that cell gets clicked on, we're gonna flip them over and see if they actually match. If the two images that are flipped over, if they match and if they do, we're going to continue with the development of the game to develop oats scoring and so on . 7. 7 JavaScript Game onclick: within this lesson, we're gonna add some functionality into these images, so basically, just make them clickable. So we're gonna use the on click option that we have for Java script, and we're just gonna call it call to a function pick hard, and we're going to just pass over this value, and we're gonna do a return. False. Nothing else past happens fair. That's what we usually include that returned false eso that this action gets taken in. There's no additional action, so usually don't need it on an image. This is more for our If you've got an actual action noble event that can happen with the click eso here we now we have to actually create that function. So we're gonna do another function, and we're gonna call it pick a card, and I'm just gonna put a value there off a and what we're gonna do is just gonna console log out and again this is gonna be pulling that information that were retrieving when this card gets picked. So if I call back out here and I refresh the page, my images should now be clickable and should actually tell me which image is being displayed here. So when I click on to or that are the same, they're actually gonna be matching images. So now we can continue to build out some functionality as well. Eso We're going to keep these images here for a little bit longer, and then we're eventually gonna change this over to the tile image, and we're gonna have to actually pass this this solution, I maybe we could do that. Now we're past that over into the card that gets picked, so may be weakened. Do that now. So unfortunately, I don't think that that, uh, that option will work for us right now because we need people to pass through this value. So we're just gonna move that and go back utes and refresh it. And once that page reloads something I guess, went wrong there, I gotta put the quotes there because we want to pass it as a string value there. That's why it's not, says whenever it says not defined. Usually that indicates that that's a string value. So, again, I guess we got some kind of issue there unexpected token, and I just realized that we have to actually box slash those quotes because we're already using them there. So that's one of the issues when you've got multiple quotes. So I've got single. I've got double have already used um, and I need another additional quote in there, so have to box slash that. So hopefully this time we actually do get the result that we want. And actually, one more thing I need to make thes single quotes when I'm back slashing it because you got to make sure that you are back slashing it with one that is actually encapsulating that particular item in JavaScript. So this time go back out one more time and hopefully we get that value that gets passed. And now we see that we do get that value that gets passed over when we click on the tiles. 8. 8 JavaScript Game Image switch pass this: so besides, this actually want to pass some additional information over to the pick card, and this is gonna be allow us to build out some or functionality eso. What I want to do here is I want to pass some more information, and one of them is just gonna be passing that value off. I and also I wanted to pass over just going to just do this. And if you're unfamiliar with this is it just passes the information that is available within this element, something that's gonna do A, B and C and just how that comes out. Refresh the page and look at the code. Now when we click it, you see that on click? We get this whole image source here, and all we're doing is we're passing those numbers of this to go inspect element. We've got tile force. We've got that tile number. We've got the I number. So this is the 3rd 1 So we know which number that is. Eso It's going to 0123 on all the way down. And so we know if we want to block that out, we can lock that out and then we're just passing over the element information. And the reason that we're passing over that element information is because we want to ultimately be able to change what is actually visible there. So the way that we're gonna do that is just could use that other, that other item there. And I'm gonna just refresh this page again and just show you how that's gonna work. Eso again. Now we have to just lock it out and keep it at a limit of two, and then we can put our time or on their once two images have been picked. Maybe this might be a good time where we could reverse this information out. And I can just change these two around so that we're actually when we're making our pick. We actually have something different happening here. I don't need those two quotes and it's going to refresh it. So it's gonna build out the board with these happy faces. And when I click it, something went wrong there. So I is not defined, and that's cause we're passing over I as bees. That's the one change that we have to make so going back over. So hopefully this time we can see that we are getting information passed there, So that should be working. And we can see now when we click it, we actually do get the new tiles showing up. So now what we need to do is we have to build in a timer with to build in a comparison of the picked tiles. And we have to limit Teoh Only the two tiles that could be flipped over at once. Swift run a limit there that we can't keep clicking the same tile. And we also wanna have that functionality that it does that comparison to check if the tiles are the same and if they are the same, then we're gonna leave them flipped over, and we're gonna allow the user to go on to flip tomb or until they're solved. And if they're not the same, then we're gonna flip them back over to this happy face guy after a certain period of time . So probably one second or two seconds. So depending on what we want to set this to 9. 10 JavaScript Game Flip limits: So here I'm gonna initiate cards, lift over value and set up 20 And alternatively, once the card gets picked here and if it's gonna be a new one, I'm gonna actually add two cards flipped over. And I'm gonna do just like this to add one value to the cards flipped over, and then here, I'm gonna do a conditional statement. So there, in order to make sure that I'm actually not flipping over more than two cards to really toe limit that it s so I'm going to do if cards flipped over is greater than or equal to two. Or I should say, is the less than or equal to two. So just toe go back out there just to make sure see if that works so actually were able to flip over three. So again, maybe this too less than two. That makes a little bit more sense. So that gives us that value of zero in one, and then that locks us out from flipping over any additional tiles. What we need to do is we need to have a comparison of these tiles in order to check to see if they are the same. So we need a way to store these values into the tiles. And probably the best way to do that is because we're gonna have to values here. Maybe we can just create a brand new array and just store those values within their rates. We're gonna have an array of two values, and we're going to store the cards in there like it flipped over. So we're gonna just set up this new array and we're just gonna call it Flip Flipper Re, and we're gonna equal it to new three. And now we're gonna take Flip Parade down here and we're going to do setting a value to it and what we're gonna do, we're gonna set this value here. And then after this function, runs was gonna list out that where Consul Lagos the value that's contained within flip a rate. And now when we go back yard here, we should actually get the two values of the tiles. So remove that. But so we've got a tile three in a tile five and were not able to actually add any more values. Now we can begin to do that comparison, So I'm going to get rid of some of these other console logs that I have popping up here because it's adding to a little bit of confusion there on what's what's happening out here . So again, just refreshing that. And here we can see that we are in fact adding those two items into the rape. And then what we're gonna do is we're gonna clear out that array. We check if it matches that matches that we're gonna leave it. But then we're gonna also still clear at that array and allow the user to start flipping some tiles again. 10. 12 JavaScript Game Tile Comparison Check: So what I want to do is I want to add in another condition here that to check if and this is where we're gonna check to see if our card flipped is equal to and we're going to see that if it is equal to two, then we're just going to do a console, log out that we're doing a check here, and I'm going to get rid of a few of these here. So that adding to a little bit less of the confusion on what's happening here eso when I refresh it back again eso I should just have that comparison and I can't really click anything else. Um, but we do have that comparison there. So you see that we're able to now compare to make sure to see if value zero and value one are equal. And if they are, then we're gonna just reset it and move along. Teoh give the use of ability to pick mawr cards eso the way that we're gonna do that, we're gonna do another conditional statement within tier. And we're gonna do this condition that if this flip ary value zero equals flip ary value one so the difference between having to equal signs and three is that this is also comparing the type. So technically, we don't need that. We can go with two. But if we had a value of five string value of five in an interview value of five and we didn't want them coming up equal, then we would need to have three within that comparison there. So pull that out. Same and else do different. And I think what I'm gonna have to do is enough to flip this back. Just remove this out for a little bit because I'm actually not going to be able to see which cards are they Actually, the same s that's gonna present a little bit of a problem for me when I am trying to test this out. So bring it back into their and I believe the value was I do that I should have those images actually need. Just check that and refresh it. And this should give me all of those images back up again on this is going to really help with testing so we can see that that does come up the same and this comes up different. So that's exactly what we wanted on the comparison part, and now we can continue to build up the logic and do that comparison and then also were in a building out that that timer in order to flip those back. And within this comparison check, we have to just be able to check fully, if so, if they are the same or if they are different. So if they're different than the cards need to flip back to their original background, and if they are the same, then they can stay flipped up, and we're just going to give the user. Regardless, we're going to give the user the ability Teoh continue to flip to additional cards. 11. 13 JavaScript Game Set id flip back: So for this step, it looks like we're gonna have to set some ideas here dynamically in order to be able to access these individual tiles via JavaScript. So what I'm just doing here is I'm just gonna call it cards and here I'm gonna add in. So this is going to give me that ability in order to pull back and see which particular cards I flipped over. And also, I'm just gonna use this flip array again in order to add in. So I'm gonna just do flip array, and I'm gonna place that into still a bracket here just to be safe, and it's gonna add to to it that's going to give me the ability somewhere to actually put this. I see I devalue. So this is the I devalue that we're gonna need in order to be able to identify that particular card. So when I refresh so now I should have been a re with the title. So initially, zero, the first item is gonna hold the first card, value the image value, and then So we're leaving slot number one, Item number one empty until we have the ability to fill it and then slot number two is gonna hold the I d of that particular element. So I see here when I go to I d I've got cards, too. So now I'm gonna go ahead and click that, and it does come out the same. So we've got tile five tile, five on cards one and cards to. So this is going to give us the ability to reset those cards when they are different. Eso here. What I'm gonna do is I'm just going to reset that that image of this particular I element with this i d. I'm going to reset the source image back Teoh, toe happy Jay Pek and I got actually create a new function for that just to break this up a little bit more and just calling that function area school kyd card. And we're gonna pass through a value that we're gonna use who's gonna call it A for now. And it's gonna pass over to hide card and we're gonna do so we're gonna do flip or a two and we're in a hide card flip are three or actually probably don't even need to to do those because we know that they're consecutive there with the foot card, so we don't actually even need to pass that over. So now all we have to do here, it's do it, get element by I d. And reset that source their off, not element. Get and actually do the document. Don't get element by i d. And sort of who used the flip card, too. And put in that source there. And we're gonna set that source to be equal to image happy. And we're just gonna do the 2nd 1 just like this. So now when we go back out here, we should see that it should flip back over if they're not the same. And now what we can do here as well we can just get rid of this. We don't need to be able to see this anymore in order to complete what we're trying to do here. So now we should be able to flip over two cards, and once we do flip those cards, it does that check. So because they are actually different, we're actually not able to see it cause it's doing it really, really fast. We have to put some kind of mechanism in there to slow that down and so I can see that this one and this one are the same. So if they are the same, then they're just going to stay up like that. And if they are different than they're actually gonna flip back over. So it was doing it really fast. You have to put some kind of mechanism and their to do an interval and actually to to do a reset of that in clear those out. So we're gonna be doing that end up coming lessons. 12. 14 JavaScript Game remove double click: so setting up this interval. So we're actually just going to make it Wait a few seconds and this is going to be really easy to do. We just do set interval, and then we just have to put up that function. So it's going to use that hide card function that we had created earlier and within the intervals, this is known to be a function so you don't have to do those those brackets brackets, and so this is gonna be in milliseconds. So what I'm gonna do, I'm gonna set it to three milliseconds. So that gives that user that feeling that there's some kind of comparison going on and they get that ability to kind of look at those images, and I studied them So before they flip back over eso Now, we have to actually reset our counters and allow for the user to pick some additional cards eso because because we found out that their difference some actually comment, dotted a swell. And I'm gonna create a brand you function that I got here and I'm just gonna do function. Um, and we're gonna call it pick again, and we're just gonna run that here after the hiding cards. So we're gonna do that pic again there. Actually, maybe we can set that over here because regardless of the fact that if we flipped it over or not, we're gonna have to run this function here. Eso regardless of the result here, we're gonna wanna have that ability to be able to pick again. So all we have to do is clear out this value here. Cards flipped over, and we're gonna just set that to zero again. And that should give us the ability to pick those cards again. And now we just have to empty with theory. And in order to empty out the ray, it's gonna be over here and in order entry it out. We just said it to this and just going to go back cute and try this to see what how that works. So now we pick two cards, we see that they're different, so they should flip back over. And it looks like we did have an issue here. Just going to quickly take a look and see what that problem is. But it looks like that that interval, because we did reset it. There s So we're gonna have to actually do that here. And I'm just gonna do that here swell and go back cute. And hopefully that should fix that and says it's different. And now we should have the ability to pick two more cards and that they're different again . And so that was one of the bugs there that we had that if you click on the same image, it's gonna come up the same s. So we have to actually just make sure that the user is picking up different images or different values here that they're before they're able to actually add that into the solution there. We're gonna have to have some way to store the previous numerical value of I and just to make sure that we're not actually having that same value, So we're just gonna create a brand new variable, and we're gonna call it loss card, and we're not gonna have any value to it at all. And so now when we do this select, that last card picked was gonna be be because this is gonna be the cell number that we're using. So the values here that we're passing are actually gonna be the cell numbers that were looping through over here. So actually, we could probably even eliminate this on. Bring this. Eliminate this function. But maybe we're going to do that at a later time. So last card picked is gonna be whatever value is here. Actually, what I'm gonna do here is I'm gonna set this to negative one s so that we can make sure that we're never equaling that, um And do last card picked over here at the end and then here, going to make a check and last card picked does not equal to be See if that works. It appears that it is working, So we're not ableto actually DoubleClick anymore. And that stuff should help us avoid that air. So that's the same. All right, so it looks like they're still in error existing, but we can still pick through and looks like something has got caught up there within the source there. So just gonna take a look at that in the next lesson. 13. 16 JavaScript Game setting clearing intervals: lesson I was looking at and we're seeing that we've got this air that keeps popping up whenever we're clicking really fast. It looks like there's just something that's not going right here with how we're setting this slippery. And that's probably because we don't always have a value for this, uh, this item if we're clicking through really fast So somewhere along the way, the calculation is getting messed up. So this type of thing is fairly common when you're using the interval. Because javascript doesn't always know that you want to clear out this interval for other times. So what I'm gonna do is I'm gonna create a variable call it timer, and I was going to set it to nothing. And then here, I'm gonna do timer equals set interval, And then down here, I'm gonna do a clear, clear interval. And because now I've named that interval, I can actually do a clearing of it. Eso This should take care of that interval. That might have been lagging behind amount of clicks that we were sending through. And with this now we're going to be able to clear out those intervals. So, in case there is a bunch of clicks there. It's not going to interfere, and it's not gonna cause those errors and issues anymore. So we try to click through a whole bunch of times and see if anything breaks. And so far, so good. And we're just going to make sure that if we get some that are the same and so far I'm not very good at the scheme. But so there we've got one the same, and we can see that we can immediately go to click some other ones. And nothing seems to be breaking eso. Everything looks pretty good and that it is working. So now we can start building up and touching, scoring and do some more customization ins in order to check to see if the users actually won the game. Ah, and again because its built in boots drops, it does resize, so that's pretty cool. Eso that will work on mobile as well 14. 18 JavaScript Game score end game: So now what we're gonna do is we're gonna enter in score zero, and we're gonna clean this up a little bit because it doesn't really make sense to have this one function just going out for that s o. We're gonna just move that out there. They don't just make sure that we're still working properly and go back out to it and click on the images. In fact, it does look like everything is still working. Okay, Eso It's a good thing. Now you can go back to our code and continue to clean things up. So when it's the same we wanted do score, score, plus one. And now we also wanna have something built in here where we can do a check to make sure to see if actually everything has been completed and what we could do, Probably the easiest way to to do this and to set this up is once we start the game, maybe we could set the score 20 And so every time we restart the game, the score is going to go back to zero, and we can do a check here to see if just gonna do, plus one this way, it's a little bit neater. And so here we're going to check to see if if we've actually reached the number of items within the Serie and if we have, then we're gonna know that we've actually solved everything. So if they're equal or if it's longer so Thai items length and the supreme check Yes, over. I'm gonna do if And then this is where we're gonna run. Are finishing are finishing options here. Eso here. This is just gonna be length and just gonna put that back into here. So if this length is equal to just to greater than or equal to score, uh, then we're just gonna do endgame. And so now we're gonna go back. You'd here and just a test to make sure that it works so much they're gonna pause the video and play through the game and just to make sure that everything is working properly When I did solve it, we did have this endgame popped up, so everything does look like it's working correctly. I did have to change this to less than the score in order for the endgame to show up, but yeah, everything does look like it is working properly, and now we can add in some more mechanics into it and give the use of ability to restart if they want, Ah, and build up a brand new board again with a new set of tiles and the tile positioning. 15. 19 JavaScript Game addEventListener restart: so I'm gonna add in a brain. You'd if here and I'm just going to give it an I d of game control. And this is where we're gonna add in clickable buttons that if want to restart the game, it's gonna create actual button here to a div. And I'll do a class off bt end 10 default solos are boots, drop classes to make it look like a button and start. And so what I want to do here is I want actually hide this so it's not visible. Eso What I'm gonna do in the styling is I'm just gonna go display none. So this should not be visible when we go out and refresh the page. So I've added in and you, def, here, that saw that's not gonna be shown. And when I finished the game, what I want to do is I want to show this hidden div. So what I'm gonna do is I'm gonna do get element by D, and I'm just gonna do show that one eso maybe what will do for now? We're gonna show it all the time saying that I just remove that out there and again, depending on how you want to run your game. Maybe you wanna have this game restart button here all the time. And actually, I'm just gonna take this off here because I don't need tohave separated for that. So I'm gonna just remove that out and I'm gonna have a div with the i d. That's just says game restart. Eso should have our button here to restart the game and and a style it in bootstrap, actually. So that's now when we go out here, we've just got this button. I just wanted to center it a little bit. It's even when we re size, we do have it centered. And still, right now, it's not doing anything. So I'm gonna add some event listeners in JavaScript in orderto listen for a click on that button. I've added in this event listener for a game control and when it gets clicked, then it runs this start game, and that actually just resets all of that functionality there. And there's a few other things that we need to do here s o need to do that shuffle array. And we have to set that up within that start game. So now when we go back out here and run the game, so I actually have to find a couple that are going to be the same here. Hopefully it doesn't take too long. So I've got those ones that are the same. And now when I hit this game restart, hopefully we should have and I think we gotta probably clear that that interval as well. So hit game restart. We could see that it actually is resetting the game and it's bring it all. Should be bringing the score back to zero when we do the restart. And maybe just gonna do the clear of the interval from case there is an interval, they're set up so it doesn't throw any errors if we don't have an interval set up. No, it doesn't look like it. So I think that we're able to set up this game restart button and that gives us the ability to maybe after the game is completed, we want to give the ability to restart it. Or maybe we wanna have that there the whole time. Eso again. Depending on your preference, you can add this game restart button and this is done through on event listener through JavaScript. And one of the questions you might have is why didn't we set up event listeners for all of these? And quite honestly, it's a little bit easier if we're just doing it on click. And another thing, too, is that we're loading this after the dawn has already loaded eso you. Sometimes you do get these issues where you set up the i d. Afterwards, dynamically, and you're not able to connect into it with an event listener that you've tried to set up before you set up this I. D. S. So it won't actually ableto listen to it because we haven't set up these ideas yet. Eso that's why the ideal way to do it this way it's just to have that on click and calling over to the function. In order to do that 16. 21 JavaScript Game Message User: a few more finishing touches in order to make this game a little bit more playable by users . So I've updated some of the CSS. They're removing that padding. So those images now go across the entire cell that's available. And also, we need to update something for when the game finishes. So we're just gonna have another function here and we're going to call it game done. And this is something that we're gonna invoke when we actually end the game s O. That this is where we had that calculation there, that conditional statement to check if we had ended the game. So we're just gonna dio game done and we're also gonna create another. Or maybe we can just use this one's We're going to just get element by i d. And maybe we'll just change the text there on the button, Teoh, instead of game restart to play again. So going back to here, we're gonna do document get element by i d. So the idea is gonna be I believe it was game control that we're gonna be using And maybe we can just set that inner html to be please again. And also we probably need some kind of message here that's gonna just maybe hover over that game board or something like that to indicate that the game has been completed. So maybe we can just put a message here at the top, give I d. And we're just gonna call it a message. This is going to give our game the ability to communicate back and forth and then over here , actually gonna put some of the some styling into the message. So does stand out a little bit more. So I'm gonna do and I know set the fart sized 1 25 pm and I'm gonna do color. Uh, so just so it stands out, maybe we can do red color and maybe just do a background as well. So it stands out again a little bit more. And, of course, depending on what you're styling is probably have to update some of these s O. This is going to give us that ability to send over a message. And so we're gonna create another variable here for message so that we don't have to keep studying those doing those get elements by i d. And over here we have to remember when we start the game, we want to clear that message. So we're going to keep that in line with the game board, so inner HTML equals and now we can. So these console logs we're gonna do probably have to set another interval to clear the message. So I'm gonna do another function of So actually, maybe we're going to just send over the messages into this function, and that might work a little bit better. So we'll have another message text. And here we're just gonna have value that we would be passing fourth that we're just gonna call message and then within years where we're gonna set that inner HTML applying message and then go back to here and and we're also going to set an inner interval in order to clear that message eso when we no longer want this message being passed, maybe we're going to send something Teoh Just have an interval so that we're not always having this message so up. So in order to get this message to pop up and then disappear again, we're going to set another interval. Eso I'm just gonna call one mess and I'm gonna just equal to nothing so that it's blank or and then just over here in the message press game for us. Play. Start what? And I'm gonna change this to play and then when we go over to the actual message here, So here, I'm gonna first set up that interval eso We're going to set up this interval within the function itself so it will actually call to itself and run through its own its own function here. So we're gonna do message text, and I had to change this function. So it's different than the message that I'm passing here or the argument that I'm passing here. Eso I'm just gonna put it up for one seconds and I just gonna push a default message, click two more or find a much andan Also. Now we still have to do one clear of that interval, and we're just gonna clear out that interval that we've just created S O. This was going to avoid having that that issue that we had before we had multiple intervals running in the background and that was causing some issues with the browser eso here, we're gonna refresh this. So we've got our initial test there and we see that we do have messages not found. Find a match not found. And now all we have to do to call over to this function to send this message, we just do message text. And we could actually do that here when we're setting up the game as well. So we're gonna dio uh, quick a tile start. And actually, we gotta change what? This The game control the inner HTML there is because we don't want it to be play anymore once the game is in play. So maybe we're gonna have to actually create another and we'll just call it button message and get that element by d and now Weaken Do enter html to the button message and we're just into inner HTML equals restart game. And now we can We can also we have to reset this message eso when the game is in play and when the game finishes. So here we're gonna do but message and to way. And that way we can get rid of this part over here. So it looks a lot cleaner and a lot more simpler and street forward, and also so We got to send another message here as well, and we're gonna just put game over. And so we're using HTML because we are putting in our html eso now. We should have some messaging up there, find a match not found, match found, find a match and will keep playing through. And we've got this messaging up here, and this is providing us that communication back and forth between us and the user. And then this will reset. Once we finish the game, we're gonna have the ability to to play again, and we're gonna be completed on that. And it usually is important to add in this additional communication back and forth between between the game and the user. That's playing the game. Eso messaging is really good addition to to your JavaScript game. 17. 22 JavaScript Game Adding a Timer and Score: So I noticed one thing that our interval was kept counting and we kept having these messages counting s. So I had to add a conditional statement to check to see if this message actually equals to this. Then we're not going to reset that interval so we don't have this interval running in the background. One of the things we do want to set is a timer. So we're gonna set up all the values that we need for the timer. And we're going to just set these variables up here. Eso What we're gonna need is seconds equals zero. Also do. Maybe Miller second or just to end seconds equals zero and will do minutes equals zero and hours equals zero and one more for the time. And so that's going to set up all of those values that are gonna be ready for us. Eso Now we have to add in a function of a timer. So again, we're gonna use that that seem. And so we're going to create a function called timer and we're going to use that t variable that we set up. And this time we're gonna set set time out and we're just gonna have something odd time recreated you function for that as well. And we're gonna set this time out every second or every every second, so every 1000 milliseconds. But the difference between set time out and set interval is that set time out, Mr. Function on Lee one time after the time out. Whereas interval runs the function in intervals with the length of the time out between them. Eso that's what the difference is. And that's why for this one, we just wanted to time out because it's going to be a time out counter. We want to run this function at a time, and this is gonna add time onto the function and within this function. So we did set up the seconds and we're gonna actually change that to the milliseconds afterwards. But for now, we're just gonna run it as seconds and we're gonna add into the seconds. And now we're going to do a check to see if seconds is greater than or equal to 60 has 60 seconds in a minute. And if it is, we're going to do seconds equals zero, and we're gonna add to the minutes us we're gonna do minutes on one to the minutes, and now we're going to do another check. Here s so hopefully so they aren't playing the game for this long. But we have to do a check here to make sure if the minutes are actually running past on our we've got actually 60 minutes, we're gonna have to increment that our Valium And I mean this timer you could probably use for other things as well. So now I'm gonna do minutes equals zero. So to reset those back to zero and we're going to do hours equals hours plus one. And actually, we should, um we should reset all of these when we when we set that new value and swell. So I'm just gonna bring that into here where we've got we're starting the game and just so that we are setting these all over 20 once again probably write a function for that as well . And now we have to actually add that timer. So maybe we're going to do something here beside change this into a span span. And here we're gonna have a div. And so if you remember that spans are different than dibs cause spans are just gonna be in line, so actually could have multiple spans here. So I'm gonna have another span for the time itself and given I d of my time and close that up and then just have that span opening and closing s So this is where I'm gonna actually right to, uh, when we do start the timer. And that means that I have to set up set this up within the get element by i d. So I'm just gonna have my time. And I just got a copy this over so that this way we can actually write to the time within the function there. It's now, we're gonna go back to that ad time, and once we do these calculations up here, we're actually ready to write to that my time that we just set up and we're gonna try something a little bit different than Inter html. We're gonna use text content, and so this is going to set that value off this particular I'd element and were instead of value for their And I'm just gonna copy this in because this is gonna actually do that. Where ads in that extra zero. If so, if ours is greater than nine on, it's going to do all of that lodging here. So once we hit a nine and if it's not less than nine, then we're gonna have that zero in front of it. Eso same thing with seconds and same thing for minutes. And now we're just gonna run that function, that timer function, bringing back that set time out. So every second, we should have an increment within those seconds value. There's when we refresh it and it should show up just before there and actually think we got a little bit of styling issue there be. What I would do is just actually gonna put this in a separate road there just to separate these. I would a little bit better, and I'm gonna remove it that span as well. And I'm gonna do the same thing for over here. I think that we have some boots, drops, styling, taking place there. We'll just see how that turns out. And I've just added in some placeholders here as well and restart those dips. And then lastly, of course, we have to start this timer. So when we start the game. We're actually in a and I believe that we do have the dysfunction called timer named twice . So I'm just gonna have to put gonna put an X here for now because we had that time or here on that message s We wanna just make sure that we're not duplicating that function. And I think that's why we're having some issues there. So when I refresh it now, it should start that time, which it did, and now we can click through and we can actually get a time when we're playing here. So this is amount of seconds that we've played, and this will help with the scoring of the game. We're gonna just do some little additional styling there just to make that look a little bit more, better a little bit better. So I'm gonna do more of a great color there and as well, I'm going to do some styling for that. My time. And we're gonna just sent her that text there. And I think we're gonna do that as well for that message and the same font size. So when I go back out here, we should have it styled a little bit better. We should see the time in the middle there. And yeah, that looks a little bit better than it did before. So you can see that now we have an incremental timer and we do have it set up so we can set up for the milliseconds as well, so that can be very easily added into the functionality. And you can also take this value of the timer and we can apply that to the score as well. So we can have something about a score that increases according to the times so we could add into our values here. And I'm just going to do something like s games for, So I'm gonna create a brand new value there of game score. And again when I reset it, I want to set this back over 20 So quite a lot of variables now. And so what I want to do is I want to the ideally I guess the game can be played that we try to score as little responsible eso it works going down. So maybe we could have a countdown of the score. So initially it could be Maybe you give the person 100 seconds and you're gonna count down from there. So every time we go through this timer, we can do the game score can just minus one, and then at the end of the game, we can show with the score on. So just going back here, give over. Thanks for playing you scored. And like this, we could add in that game score. So when they finished playing, we're going to show them a score up here, so it's gonna be decreasing score, and maybe we're gonna do one more check. So if game score is less than zero, we're just gonna set it to equal zero. So that way we don't have a negative value. And again, that doesn't really affect the playing until you get to the end and then you're gonna get the score there 18. 25 JavaScript Memory Game Update: as an update to the course. One of the students had pointed out that there was an issue with actually clearing the time out. Eso I've added this into the start game function and what it's going to do now is it's going to run that clear time out when we're restarting the game and it's gonna clear the value off T and this is going to be different than Clear Interval because we're actually setting this as a time out instead of an interval. And we've got that over here within the function timer X s or setting t here and we've got that set time out loop where we're adding in time and then it's going through and looping through. So this was a quick update to fix the glitch with the start, game function and the time of the start gate front function. And I also want to take this opportunity to go through the shuffle array in a little bit more detail. So what we're doing here is we're actually incremental through and we're reorganizing the array output eso it's gonna continue toe loop through all the elements of their Ray Ah, using the loop here and it continues toe loop through at the remaining elements. So that's why we're doing. See, we're subtracting from the total of C, so we're decreasing sea because it's the length it's originally set to the length of the ray and we're constantly decreasing it because we want to work with whatever remains remaining elements of the rate. And we're also doing a random number off the remaining elements of the rate. And we're studying that to a value of B and then all variable A is doing. This is allowing us to actually swap the variable d bracketed see with with it S o with d and B at the end. And just to outline what s O. A is just being used at the temporary placeholder and B is where we're setting the random number and the value of sea is always going to be the current index value