10. Memory Game with Windows Forms! | Intro To C# Programming

hey everybody welcome back today we're going to be making a memory game and if you don't know what I mean by that basically it's why I have running right here this is what we'll be making in the very end you'll have a game where you click on one of these squares and an image shows up you click another square and you keep doing this until you find the pairs of two right so there are two of the same image hidden somewhere in this grid and we have to find it so here's the tamale or whatever that is the pepper I'll see if we can find there's a smoking song okay there's the spider and there's the spider I found that there's the two golf things okay I looked into that and there we go all right and then at the very end it says you match all the icons congratulations you win and it's over with the program exits so let's go ahead and start working on this I've already gotten an empty form set up on Visual Studio let's go ahead and make the size of this form 550 by 550 that's what I use in the earlier example and now we have a bigger form over here and we're going to use a thing from the toolbox called a table layout panel and that's what's going to give us that table of grids that we saw earlier and each grid in the table will contain an image that we will assign to it so let's find the table layout panel right here and this table layout panel will give us a bunch of grids let's go ahead and double click that so you can see now that there's already four little grids in this table but we want to basically make this grid fill the entire form so if we have it selected make sure you have it clicked one time let's go back to the properties window and over here and there is a property called dock and we're going to set that to fill and basically how you do that is once you click this air you get some buttons you can press and we want to click this big one right here in the center because that's going to expand it to fill the entire form see if you look back now that the four grids cover the entire form the next thing I want to do is set the background color of the table layout panel to be blue so here we have a property called back color if you hit the arrow you can go to the web option and these are a bunch of different colors that are meant for the web I suppose and at the very bottom you should find one called cornflower blue I'm going to press that and if you look back to the form now the background color is this nice blue color the last property we want to set is the cell border style and this lets us change the appearance of the borders of each cell so if we let's try let's try inset and you should see back over here on the form now the color of the border is I'm engraved in this white type of color let's go ahead and leave it like that but feel free to play around with the different types of border styles if you want let's go back over here to the form view and if you see this little arrow right here at the very top right I'm going to press that and this lets us do some more things with the table layout panel I'm going to press edit rows and columns and what I would like to do is add two more rows and two more columns into our table okay so see right now we're in the columns view but there's also the rows view let's go ahead and press add two times and let's give each one of these columns 25% of the form because we have four columns so 25% times four is 100s and we want to fill up the entire form okay so let's go here and say 25 25 on the new ones will need to click percent instead of absolute and here we'll say 25 and 25 again all right now let's go to the row view and we're going to do the same exact thing I'm going to add two more rows and then set the percent for everything to be 25 percent each so 25 25 25 okay cool I'm going to press ok and now when you look back at our table we have a 4 by 4 table here looks exactly like the example I showed you earlier and now we need to actually add the images that will occupy each grid so remember earlier we had the spider and the school bus all that stuff and actually what we're going to do for this is we're going to use the font webdings I think it's called I'm going to open up the word pad and show you what this looks like webdings should be I'm actually just going to type it webdings and then see whenever I type like letters here see you get images instead of letters okay so we're going to kind of cheat here and use this font instead of using actual images okay so let's go back here and if you remember from the previous stuff we've done we can use a label from the tool box to display text okay so we can change the font of the label to be webdings to give us these images so let's make sure that the table layout panel is selected make sure it's clicked one time and then we're going to add a label to the table layout panel so go to toolbox and find your label double click let's go over to the properties window and change some things the first thing we want to do is make sure that our back color is cornflower blue mine has already been set to that yours should be too but make sure that's correct let's set the auto size property to false and basically this property will automatically resize your font and we don't want that we want everything to be just a fixed set size let's go ahead and change the dock property to fill just like we did last time and that's going to make the label fill the entire grid space down below there should be a property called text align and we want the text to be centered in each grid so let's make sure the property here is Center which is this middle button here that gives you middle Center and last but not least we need to change the font to webdings so let's go back up here where it says font hit the plus sign and here in the name let's click the arrow and find web deems it should be at the very bottom here okay I'm going to set the size of the font to 72 so it's nice and big and readable and I'm also going to enable bold - true so it's nice and bold for us and finally we want to change the GDI char set to two and that's going to actually give us the correct character set for the web being images to appear so if you notice whenever this is set to zero it only gives us the text l over on the forum but when as soon as we set it to two it gives us an image okay so let's go and actually change the text of this label to be a lowercase C and the lowercase C gives us a square image from the web dings font so if you go back to form view over here you should see this square that is centered inside of this grid I'm going to click to make sure the label is selected and then I'm going to press ctrl C and then I'm going to paste this same label into each one of these boxes okay because we want each box or a grid space to have an image so I'm going to click this this empty grid here press control V click this one press control V right just keep repeating this process until you get all of them filled up and now we're starting to get something that looks like that example from earlier so now let's go into the code view of the form I'm going to right click form one CS say view code and we will need a few global variables here at the top the first thing we need is an instance of random we've used that a few times now in the series so you should know how this works let's say random random equals new random and the next thing we need is a list of the icons that we want to use in our game so remember in the example earlier we had two spiders two school buses we need to actually decide what images we want to use and then assign them randomly to each grid okay so we need a list of the images that we want to use in our game so let's use a list for that let's say list string icons equals new lists and then there's a little trick here if you press ENTER and then use two curly brackets kind of like how we do in functions we can go ahead and set some values inside of this list instead of calling add a whole bunch of times okay so I'm going to I already have decided what images I would like to use in our game so I'm going to go ahead and type the letters that represent those images okay so this is where we're getting like the spiders and the school bus and all that okay is because I have decided to use those here oops so I'm going to say quotation mark explanation mark comma exclamation mark and then we want quotation mark capital in capital M we want two commas two K's - bees - bees - double use and finally two Z's okay so if you decide later on that you don't like the images that are showing up in this game you can experiment with the webdings font and find an image that coordinates to a letter that you like and you can replace them here the only thing is you need to make sure there's two of whatever you select right because we're matching pairs of two so the game can't be won if there's not two of the same thing oh and actually I'm sorry slight typo no comma at the end and then we end this with a semicolon on this last bracket here we need two more variables and then we should have all the global variables that we need so if you remember back to when I was playing the game earlier I would click one image and that image would stay up and then as soon as I would click the second image though both images would stay up for a second and then either stay up if they were the same image or go away if they were not the same image so we need a way to actually remember what the first image was that we clicked because later on we'll want to compare that image with the second image okay so basically just for the sake of remembering what's been clicked we need to store the first image that we've clicked in the second image that we've clicked so let's just say label because all of the images are labels of text first clicked second clicked and that's pretty self-explanatory that's just storing the first thing we've clicked and the second thing we've clicked now we need to assign randomly these images to each label that's on our table so let's go down here and write a new function called assign icons to squares and it's self-explanatory we're going to randomly assign the icons to the squares first let's make some local variables we'll make a label we will just use this to store whatever label we're currently looking at so we have easy access to it and then we will make an integer called random number and this will be the random index into our list we wrote earlier so whatever random number we is set to is the random image that we're going to assign to this label we're looking at and I'm going to say for int I equals 0 for as long as I is less than table layout panel 1 dot controls dot count I plus plus and what this is doing is we are iterating through every single control that is inside of our table layout panel and we know that the only controls that are in our table layout panel are those labels okay so we're basically just iterating through every label that's on the grid so let's say if table layout panel 1 dot controls at sub I so whatever control that we're looking at right now if that control is a label let's go ahead and store it into our label variable and I'm going ahead and making a check here because it's possible maybe you guys want to expand the game later and add different controls on it or something so it's always good to kind of air check for things like this so your game doesn't crash in the future let's say label equals label table layout panel 1 dot controls I so we are just casting the current control into a label because all labels are controls so we're just converting it so we have access to all of the things inside label else if it is not a label we're going to say continue and what that does is basically we're continuing on to the next thing in the loop well it'll just immediately take us through the top here and say I plus plus so we won't execute any further logic now let's pick a random icon to assign to our label let's say a random number equals random dot next and we want to pick something that's between zero and however many icons are in our list so we'll just say icons dot count okay and then next we'll set the text of our label to be icons at some random number so basically whatever we picked here for the random number that's our index into the icons list we wrote earlier and now there's one final thing we need to do it's possible that we get the same random number more than once and we don't want that right we want to use everything that's in our list so the way we can do this is by removing the random number from our list okay and since we're only running this game one time we don't have to restart the game or anything like that we can just say icons dot remove at random number okay so we choose a random number we use that random number to choose a random icon in our list we set the text of this label to that icon and then we remove the random number from our icon list okay so at the very end of this function there will be nothing left in that icons list we wrote earlier because we will have taken everything out of it and thrown it into our grid okay let's go back up here to the form 1 constructor and this is called whenever the game is initially started up so as soon as the game has started up we want to immediately assign our icons to squares so we'll just call that function we just wrote and let's go ahead and press f5 and see what this does we should see something I think ok yep there it is we can see that a bunch of random images have been assigned to our labels these are the same images that you guys saw in the example that I ran earlier feel free at this point if you don't like any of these images to experiment you can type in different letters in our icons list and see if there's better stuff that you like but for me that's good enough I'm going to go ahead and exit out so now if you remember back to the example that we did all the images started up invisible you couldn't see any of the images until you actually clicked on them but when we started up the program just now notice that everything is being drawn to the screen and we can see it so we're going to do a little bit of a trick to make them invisible we're basically going to set the text color of each label to be the same color as the background so technically the text is drawing but because it's drawing the same blue color as the background you won't be able to see it so let's go back to our form 1 design view and I'm going to click and hold ctrl while I click all of these labels so that they're all highlighted and we'll just change the text color of all of them at once right over here we have the property for color right now it's set to control text but we'll hit the arrow there and we'll find cornflower blue towards the bottom yup right there alright and then now you can see that everything is invisible sorta right we can't see it anymore but that's that's what we want so now we need a way to actually run some code whenever we click one of these labels so basically you know whenever we click an empty box we want to either show whatever's behind it if it's the first thing we've clicked or if it's the second thing we've clicked we'll want to show it and then check to see if the two images we've clicked have matched so just like before we'll need a click event so assuming that you still have all these selected I do so I'm going to go ahead and go to the events tab and here in this click text box here I'm going to call this function label underscore click and then just press ENTER and that will generate this function there it is here so the first thing we want to do is convert the sender object into a label so I'm going to show you guys a new keyword here to do that and let's say label clicked label equals sender as label and basically what this is doing is the as keyword is trying to convert the sender into a label but if it cannot do that clicked label will just be no okay so it's basically doing the same thing as this line down here okay it's just a little more cleaner and convenient and actually this is a preference you can code it with as or the other way down here I'm just trying to show you guys multiple ways to do things so you can decide for yourself if click label equals null we will go ahead and return from this function will exit the function and just like I said if clicked label equals null that means it's set to nothing which means we could not convert it into a label and let's think ahead a little bit what should happen if the player clicks one of the icons that have already been clicked so let's say that the icon has been clicked one time it's drawing to the screen we see it and the user has clicked that same icon again we want to basically exit this function and ignore it okay we need to check for that otherwise we could potentially kind of cheat the game if we can just click the same icon two times and that counts as a match you know what I mean we don't want that so let's say if clicked label dot for color equals colored black we're going to return and remember that the for color is currently set to cornflower blue the same as the background and whenever we click one of the icons we'll change the foreground color to be black so if what we clicked has a foreground color of black we know that we have already clicked it and we can use return otherwise if we get to this part of the code we need to check to see if we have clicked our first icon in that matching pair okay basically at this point we're saying is this the first icon that we've clicked or is it the second icon that we've clicked okay so let's say if first clicked equals null that means we have never clicked anything for the first time this is the first icon that we have clicked oops okay so if it's null the first thing we want to do is say first clicked equals clicked label will assign will basically store whatever we just clicked into this variable and like I just described earlier it will set the foreground color of this label to be black that way we can actually see what we've pressed okay and finally we will return from this function because that's all we need to do at this point so if we press f5 and try and run the program we should be able to start clicking on blank grids and see one thing up here we haven't written the code yet for the sec icon that we click but we should be able to at least click one thing yep okay and yeah I can't click anything else so we've clicked this one right here the draw color turns to black so we can see it and then nothing else happens so back to this function here if first click is not equal to null we will not return from the function right none of this code will be executed so we'll continue on in the function and at this point we know for sure that this is the second thing that we've clicked right so let's just go ahead and we don't have to do an if statement we can just say second clicked equals clicked label oops and then just like before we'll say second clicked dot for color equals color dot black so let's press f5 and see if we can click two things this time yep we can oh oops now oh look what's happening yeah I see what's happening all right so basically we can't click more than one thing now but no other logic has been implemented what should happen is we press two of these grids and then after a split second you know we want to have some time where the icons are still up so we can see what we've clicked but then if they're not the same icon they should disappear otherwise if they are the same icon they'll stay up that's what needs to happen right now it's just not doing anything and letting us kind of overwrite the second clicked variable with whatever else we press so let's press let's exit out here and remember what I just said about if we click two of the icons we need to do one of two things we need to either show both of the icons for a second so the user can see what's been pressed and kind of remember them or if they're the same icons we can just leave them up and continue on with the program okay so let's take care of that first case first if we press two icons that are not matching we want to leave them up on the screen for a second and then set them back to the cornflower blue color so they're invisible so to do that we can use a tool called a timer and timers are basically just something you imagine like a stopwatch or something you start the timer and then after a certain amount of time an event will be triggered and that event can basically let us call some code okay and that's that's exactly what we want to do we want to start a timer and after a second or so the event will be triggered when the timer is up and with that event we can do some code that basically resets all of the variables makes everything invisible again to continue the game okay so let's go to the design view to the toolbox and double-click the timer tool and you should see the timer it you can't really visualize the timer but it's here see it down here click that once to be sure it's selected and if you look over here at the properties window we have just a few properties we can change here we have the interval property and this is the frequency of elapsed events in milliseconds so right now every tick is 100 milliseconds we'll set this to 750 milliseconds so every 750 milliseconds this event over here called the tick event will be called so let's go ahead and actually do something with this tick event okay double click that will get this function generated over here before we do anything in this function we should go ahead and start the timer up here in our label click function so after the second clicked variable gets set will just say timer 1 dot start so we're starting the timer and then after that 750 milliseconds the tick event will be called and then this function will be in turn down here timer 1 tick and at this point we can stop the timer will say timer 1 dot stop because we only want to tick it one time if that makes sense okay well we just need the timer to do the 750 will reset the variables and then we don't care about it anymore until more things are clear okay so we need to set both of the things we've clicked to be cornflower blue again so they're invisible so let's say first clicked dot for color equals first clicked that back color and the back color is the cornflower blue background that's in our table let's do the same thing for second click second clicked for color equals second clicked back color so we've set both things to cornflower blue and now we just need to forget about these variables so we'll just set first clicked to null and second clicked to null because now we're starting a new round where the player can click and try to match two new icons so let's go back up here for a second and do a quick error check it's possible that the user can press more than two icons during this timer phase so what I mean by that is after you click the two icons there's that 550 millisecond wait time it's possible that the user can kind of sneak in a third icon during that time and then three things will be displayed and then all the logic gets messed up so we can easily check for that and exit this function immediately if we've already clicked two things so let's just say if first clicked is not equal to null and second clicked is not equal to null will return immediately okay let's go ahead and press f5 and see if it works click click goes away all right so see how there's that brief second where the two things stayed up and then they go back down yep and see I'm also not able to click three times so that's good okay the only thing now is that if we actually match two of the icons we don't actually have any logic to do anything with that so I think the two Chili Peppers or whatever we're okay now I'm not gonna be able to do it I was going to try and make them match so I could show you that but I'm doing really bad okay okay here's two spiders there we go so see they both still went away okay so now we need to take care of that other case where we leave them up if they're matching so exit out and we're just going to do a basic if check down here we're going to say if first clicked dot text equals second clicked dot text if that happens we'll set everything to null so we'll say first clicked equals null second clicked equals null else if the text is not equal will do the timer start and the time when the timer is up will clear the two icons so at this point basically what this does is it just clears out the variables it leaves the text is black and lets us continue playing in the game so let's go ahead and press f5 and see if we can win the game oh well I looked out there okay all right so I've matched everything but remember earlier in the very first example I showed you there was a message box that came up and said hey you win and then exits the game we need to actually check to see if everything has been matched so we can kind of detect that the player has won okay so let's exit out and I'm going to go down here and write a new function called check for winner okay semicolons and basically this is really easy to do so think about how we would detect to see if this game has been won we could get really complicated and see if the number of matches R is equal to what we had in the list but it doesn't have to be that complicated we can just basically check to see if everything is drawing black right we basically we know we've won if there's no invisible icons left on the screen so we're making this super easy for ourselves by approaching it like this so all we need to do is iterate through all of the controls on the on the table just like last time so we'll say for int I equals 0 if I is less than the table layout panel 1 controls that count well I plus plus and then we'll make a local variable up here called label [Music] we'll use this to store whatever label we're currently looking at and let's use the trick we've just learned with the as keyword let's say label equals table layout panel 1 dot controls at sub I so we want to convert the currently the current control that we're looking at as a label right if label is not equal to null and the label dot for color is equal to the label back color we will return so basically we're going through all the labels if we're looking at a label that's valid it's not equal to null and if the valid label that we're looking at has the same foreground color as the back color that means you know remember the background color is always cornflower blue that means that this label is currently invisible and has not been correctly matched so we can return from this function and not do anything else however if we run through this entire for loop and never find anything that has a cornflower blue foreground color we can continue with this function and do one final thing down here we will say message box show you matched all the icons Congrats you put whatever you want here it doesn't matter but just something exciting and then we will let's just go ahead and exit the program so we'll say close it's a function that you call and that will close the form for us and that should be it except that we need to actually call this function so let's go up here and after we detect what the second clicked icon is we have set both of these variables and we can actually do something with them so the first thing we want to do is check for the winner and remember that if we do win the game the program will exit so nothing else will be executed but if we return from this function that means we have not won the game and then we can continue on with the rest of the code here so I think this should be it let's press f5 and see if see if I can win this game one more time all right like spider by I just saw that one or was it now getting messed up I was doing really good at the beginning and then I kind of messed up there towards the end I was trying to have a I was trying to speed run this and see if you guys could beat me but whatever I won all the icons have been matched I'm going to press okay and the program exits so that's it guys good job it's that's actually I kind of enjoy matching games like that I know it's kind of a simple game but I enjoy it I think it's fun so hopefully you guys like playing your memory game there and I will see you guys on the next episode

Channel: Michael Hicks

Views: 73,715

Rating: 4.9247651 out of 5

Keywords: intro to programming, c#, programming, video games, how to, program games, beginner, code, make games, windows forms, memory game

Id: frDKP-A71W0

Length: 36min 1sec (2161 seconds)

Published: Tue Sep 19 2017