Placeholder Image

Subtitles section Play video

  • 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.