Subtitles section Play video Print subtitles COLTON OGDEN: Hello, world. How's everybody doing? My name is Colton Ogden, and this is CS50 on Twitch. So today, we are going to be putting together a game that was actually suggested by somebody on our Facebook. So shout out to Asli Tumorkin. Hope I'm pronouncing your name correctly. So last week, we implemented-- well, last week and this week, we implemented Snake. Last week we did the first part, where we had the Snake moving around. And then on Monday, we fixed it up. Added a bunch of the bells and whistles, and had a great time. And then early this week, we had a few other streams. Next week we'll have a few other streams. But today, we're actually going implementing what's called concentration or the memory card game, and so let's take a look at-- I've been doing a little bit of research here on potential sprites to use, but let's take a look at what the memory card game, or as it's called, concentration, actually looks like. And shutouts to Asli, there, in the stream. She says Hi, Colton. Thanks for taking my suggestion. Asli Tumerkan, that was a very good pronunciation. Thank you. Hopefully I didn't butcher it too hard. But this is what that game looks like in one of its many incarnations. It's a game that you can see in a lot of other games, a lot of video games. And for example, what I think what comes to mind-- I think I saw it in Mario Party a long time ago. For the N64, they had a version of it. But essentially, it involves a bunch of face down cards or other surfaces with some sort of picture or unique iconography on the other side of the card, and your goal is to match pairs of these cards that are alike, as by flipping over only two at a time. If you flip over two cards that are the same, they get to remain flipped over. So you can sort of see what cards that you've successfully matched. And if you flip over two cards that are unique-- they're both different images or whatnot-- then they get flipped back over, and you sort of have to remember which cards you flipped over erroneously, such that later on, if you flip over one card that you happened to also flip over somewhere else, you can sort of remember where the two were so you can flip them over permanently. Drnkjawa says hello, random Twitch people. Hello, Drnkjawa. Good to see you. And hello to Ilyass as well, who spoke in the chat before the stream began. And so that's going to be today's goal-- implement a version of this in Lua and Love2D. So recall Love2D or Love is the framework that we used on Friday and Monday of this last week, and it's a really nice, simple 2D focused framework that allows us to code in Lua, which is also a lightweight, fast scripting language used extensively in game programming and throughout the industry. And today, we'll use the same framework. Next week, actually though, we'll start taking a look at Unity and C sharp, which is quite a bit different, but I know many people are interested in Unity, and I myself am very interested in Unity. And sorry, I might have hit my mic. I myself am very interested in Unity and improving my skills there. So it will fun to do some live coding in that. So let's go ahead and dive right into the implementation of concentration, or pairs, or the memory card game-- however we want to name it today. I'll call it concentration just because on Wikipedia, that's the official name of it. And if we go to Wikipedia, just so that we can tie it all together, this is where I initially looked it up to see what the game was officially called. And it's here-- concentration the game. And so there's many different iterations. You can play in a circle-- oops, the chat is there. So we actually can't see it too well, but yeah, you can play it in a circle. You can play it in a sort of rectangular arrangement. An important thing to take into consideration when playing pairs or concentration is that if you have an odd number of cards laid out, as by maybe having three by three rows of cards on your table or whatnot, then you're actually going to need some sort of joker card or some other wild card to fill in that extra slot because the game does rely on you making pairs of cards. So if it's a not even number of cards, it won't work. But just by having that wild card and maybe making that an instant game over, or an instant sort of flip back over, you can sort of mitigate that. So you can have a three by three. Today, we're going to focus on having at least one of our axes of our cards be even so that no matter what, we'll always have an even number of cards to flip over just to avoid that issue. But that would be an interesting way to introduce a new game mechanic. OK, so anyway, that aside, I'm going to go and make a new folder in-- I have a folder called streams on my hard drive. I'm going to call this concentration. This is going to be my Love2D folder in my project folder. I'm going to drag that into my editor, which is VS Code. I'm going to open it up, close the window that was behind it, expand this a bit so that it takes up the whole screen. And notice that I have nothing in here, so I'm going to create a new file. Remember, main.lua is the file that Love2D will look for to actually begin execution of your game. I'm going to, as best practice, go ahead and just give it a top level comment. So remember, a dash, dash, open bracket, open bracket. The square bracket lets you start a block comment so that you can comment over multiple lines of code, as opposed to just one line of code. I'm going to give it my name and game where the goal is to match pairs of face down cards. So pretty simple. Not going to have an official super hardcore top level comment block, but this is, I think, something that we didn't do on the last game-- the Snake game-- which is something that you probably should do, just so all your information and the gist of your game or application is there, located at the very top. So remember, in Love2D, there are a bunch of core functions that are necessary in your main.lua in order for Love2D to read your game appropriately. Those functions are, if we remember from last game, load, love.load, love.update, love.draw, and there are a few other ones like love.keypress, which we'll go ahead and write in here. And one of the things that I'd like to do today is given the fact that concentration is a card based game where your goal is to sort of select whatever card you want to flip over, I thought it would be good to introduce maybe some mouse movement. So we'll go ahead and we'll do that. And for that we'll need-- I believe it's love.mousepressed, and it takes a button. So we'll use that. We'll implement that in a little bit, but that'll essentially be when we left-click our mouse to select a card, when we're going to check a button, it should be equal to one because the number one-- love2D assigns a number to each button on your mouse. So some mice have only two buttons, a left and a right click. Some have three, a left, a right, and a middle. And then some have like 10 buttons, like the pro-gaming mice, but we're only going to assume the use of the left click for this game. All right, so this is sort of the scaffold of our application. We have all the core functions that are needed in order for us to build upon. We're going to do a little bit more in terms of engineering this time when we're making the game. We're actually going to develop what are called classes to represent a couple of things in our game. I think, really, what we're only going to need is the card class. So that instead of having to have a bunch of functions like draw card, or draw Snake, draw grid, like we did last time, we'll be able to say I'm going to create an object called a card that's going to have its own draw and its own update function. And then in the code where I want to actually do all of the logic for rendering and updating, I can just say card colon update, card colon render, and so forth, and save my main file from getting super bloated. Because remember, last time, our main file was like 300 lines of code long, which is not ideal when shipping a game like this. Depending on the complexity of your game, maybe your main module is 300 lines, but we put all of our logic in main.lua, and that's a bad practice. You want to avoid doing that as much as possible. Mahjabin says hi, Colton. Thanks for sharing this with us. My pleasure. Thanks for joining us on the stream. Good to have you. I'm also going to put this on GitHub. So if you're unfamiliar, we also did it GitHub live stream this week with Kareem Zadane, one of CS50s core staff. So go ahead and check that out if you haven't watched that already. I'm going to create a new repo on GitHub, and I'm going to call this Concentration50. I'm going to say a card game where the goal is to match pairs of face down cards. And I'm going to make this a public repo, so anybody can go ahead and clone it. I'm going to get this link here, copy that, open my terminal, clear my terminal. I'm going to cd into the directory that I just created to store my game. I'm going to make sure I'm in the right spot first. I'm not. I'm in the GitHub repo, I think. I'm going to go into concentration. I want to git init, git add dot so that I add all the files in my repo, git comit dash m initial comit, git remote add origin. That link that I got from my GitHub repo so that now I know that it knows to push this code to GitHub storage of my project, and then I'm going to push dash u origin master. And what happened? What happened here? Git remote at origin. Repo not found. That's weird. Not found. What happened here? Oh, is it because it's-- I didn't do it over. Wait, that's weird. I'm not sure-- this is another account. Let me see if I did it correctly. Git remote add origin. Yeah, I did all that. Dash u origin master. I might figure this out later, but this is weird. Get status on branch master. That's weird. Why did it do that? Hold on. It 404'd my repo for some reason. OK, let's figure that out. Oh, it's because somebody-- wait, no. No, that couldn't be possible. That's fascinating. The repo just deleted itself right as we were doing that. OK, let's try that again. Concentration50. Already exists on this account. OK. Sorry, it's really strange. That was a strange bug. I've never seen that happen before. I'm going to go into my repositories. It said it already exists on that account, but it's not on here. OK, GitHub is being weird for some reason. Let's ignore that and let's assume that I'll figure this out later, and push to the repo. But you saw I added the repo, and then it deleted itself, which was very strange. And it claims that I have access to that repo, but I'm doing a search for it, and it's not coming up in my repo. So I don't know. Yeah, that's fascinating. I don't know if that's a GitHub bug or what. Probably because of the credentials. Oh, Kareem's in the chat, everybody, if you want to give a shout out to Kareem. He and I did a stream on Tuesday-- when was it? Yeah, Tuesday. Probably because of the credentials. No, because I-- no, I added the-- what was it? On setting up a new account, you get a-- what's it called? What's the thing? What is it? I forgot. Profile. Not profile. Account. Settings. The developer settings. It's a personal access token, yeah. And I enabled my-- I set up a personal access token on here and it was working perfectly last week. I don't know.