Hello, world.

This is CS 50 on Twitch.

My name is Colton Ogden.

And, uh, today we're going to a little bit of game development.

So last week we looked at a C T f.

Which was a capture the flag thing with Nick, which was super cool.

We're actually into apart to event next a week.

Nick is currently on spring break right now.

Um, and then later on this week, we're gonna actually take a dive into something completely different.

Spark a R.

Which Connor Doyle, one of CIA cities producer, is going to sort of lead.

So thanks, everybody who's in the chat right now we have a ton of people already socialist.

Everybody.

I have been chatting with them before break here or before the while.

We had the music sort of coming in, but it feels like it's been a little while since we've done a game from scratch.

I think by myself, I might be misremembering, but let me go ahead, and I'm actually gonna switch over to my laptop over here, which is I'm realizing, not plugged in.

Only crap.

I didn't even like my laptop whips.

Um, well, while while we get that set up?

Um, I want to shout out.

Actually, my dad who suggested that we do today's stream, so I think he was considering potentially making a slot machine himself in, um, in Java script.

Here we go.

My laptop is all set up.

Thanks.

I appreciate it.

Um, and so he was like, how would you implement a slot machine, You know, in rah Java script?

And I, uh, not asked, really, with javascript as I am with, um, Lou and love to D and stuff like that.

Um, but, you know, I sort of have the mental model as a game programmer what I would do to get it working in Java script, and I think I'd have to find an A p I or something to get it working.

You know, I probably use something phaser.

If I were doing it in Java script or maybe even with raw Java script, I could figure out ways to do it with the dibs and whatnot in images and maybe Jake weary.

But you're gonna do a stream on.

Actually, I think next week, next Friday.

Um, but we're going to implement it in love to D, which is a framework that I am more familiar with to see how you would use it in the context of something like a proper to D game development framework.

Um, and as Lee T.

Who has popped up in the chats Asshole, Everybody under one and that's a rule.

Points out that last time we did a game was actually on my birthday.

Was that cookie clicker?

If I'm not mistaken, I think it might have been, um so I'm going to pull up a actually, let me go ahead.

And I'm going to just switch my screen off here for just a second because I realized that I need to grab the images off of my email.

So give me one second here.

So you have my dad suggested that, you know, let's do a slot machine example.

Because you know, he's learning how to do drop a script.

You wanted to a slot machine, and actually, he was kind enough to put together the artwork for today's game.

So shot us to my dad for doing that as well.

Im going thio, pull those up here and whips.

I am just messing up all over the place here.

Um, what we get that up and running house Everyone's day.

Let me know how what people are doing and what they're working on and what they're interested in seeing you know in the future, for for the show, Binary warrior says, Isn't Jake weary kind of dying out at this point?

Um, and to a to a degree, I would say, Probably, Yeah, um, it's definitely not quite as used as it used to be, but the reality is that it's still used in a lot of applications, is still very much used in legacy.

And things like bootstrap, which are very much in use now, still use Jake Worry underneath the hood and as they're active as an act of layer for, um, interfacing with the more dynamic widgets within the library within the framework.

So I would say kind of probably it's dying out, especially with things like React doing a lot of making, taking care of a lot of the things that Jake worried was really useful for in the past and things like the Fetch a P I, which Jake where it was really used for a lot of Ajax related stuff, but it still very much used, um, still and probably will be used for a long time.

But I think that I think the transition that I'm sort of feeling is that people are moving, um, towards a less j query focused.

Certainly at least unless Jake we focused approach to the front and it used to be a major component of front of applications and now react a sort of saw planted, that react view angular, those types of frameworks.

Um oh, I'm sure asks what is a slot machine, and actually, that's a great point.

We're going to bring up exactly what that is, and I have just finished downloading the images.

Let me.

I think it's now.

I could bring my computer back onto the screen like that Boom.

And then I'm going to just go ahead and downloads, Grab my pinks folder here and drag that over to a new folder.

J.

Harvard Dev Streams slot machine.

So here, I'm just gonna make a new folder.

We're gonna bootstrap this application the way we do with all of our love to the applications with a new folder, and I'm gonna show you the tools that we're using here in just a second as well.

I just wanna make sure all the files are in the right location.

Slot machine graphics.

Let's go ahead and bring those PNG files over here like that.

And then now, now, let's go ahead and talk about, um, what a slot machine is, because that's actually a valid point.

So slot machine is something like this.

You might be familiar if you've seen a casino.

Where've you been?

To Las Vegas.

If you played any games that might have a gambling sort of aspect to them, a slot machine is essentially a box that you put a coin inside of.

Or so however amount of money that the machine takes might take chips might take paper, might take coins.

And, uh, I think traditionally used the lever toe actually get it to work in this day and age.

Most slot machines or just digital see, press it while they're not purely digital, but they're typically mostly digitized in that you press a button the button, will fig fire off some bit of code that will either scroll virtual wheels or physical wheels?

These three things here and, um actually, maybe we can go.

We can see, like a slot machine Example on YouTube or something.

Goto a slot machine.

Example.

Um so something like this where you have ah, you press a button and I'm gonna make sure I don't know what the audio is going to sound like.

Um, where do we have actual gameplay of it?

So you have.

It's hard to tell in this example.

Um, you think that there would be like, a nice, really easy like ho?

Here's what a slot machine is.

Let's see this work.

Okay, so let's get it to go.

The problem is that slot machines these days air so complicated they have, Ah, like a billionaire.

There's a perfect example right there.

So you press the button, you have all these rows of things that move, you know, vertically, right.

You have different rose, and if you match any row in your slot machine, and in today's example, we're just using a single rose.

But if the all these symbols are the same, you'll get a different reward, depending on how, like how rare that symbol is in your pool of symbols, for example, you might have a ah selection of different types of fruit, which is what we're actually gonna be doing today, and maybe you want oranges to be really rare.

Maybe you only want one orange and every row of symbols, but maybe you want pineapples to be more common, so maybe you have two pineapples in your row, so maybe a pineapple orange pineapple.

So therefore, you're twice as likely to get your wheel to end in a pineapple as it is to end in an orange.

And then you could do the same thing by may be adding three apples to your roast.

You have apple, pineapple, apple, banana, apple, orange or whatever.

The ratio is so more apples equals more chance to get apples, which means that you get less reward for matching a row of apples versus matching a row of pineapples versus matching a row of oranges or whatever you want.

Thio.

However, you want to structure your your reward system, but this is how casinos typically look with their slot machines.

Now they're very complicated.

They have a lot of rose, but the sort of I guess, more iconic illustration of what a slot machine looks like.

How I think they traditionally looked before, you know, Vegas blew up and there's a 1,000,000 different slot machine vendors is something that looks like this.

This is the archetypal, archetypal sort of iconic slot machine.

And actually, it's very iconic for there to be sevens as sort of the jackpot symbol.

So a jackpot just means you get a ton of money when you when you match all three sevens, right?

It's way more than any of the other rewards that you get today.

We're actually gonna be using not seven, but more appropriately 50.

That'll be our our jackpot number.

And we may not have time necessarily to get into, uh, actually implementing it.

I mean, it would be fairly easy to implement a jackpot.

It's a little bit tougher to test because it's all luck based, and it's statistic statistical rat.

But, um, the code behind actually detecting matches and choosing you know what's what's more rare versus other things.

That's all stuff that will have time to cover today.

So this is what a slot machine looks like, and this is sort of how we're going to be going around implementing it.

Um, now, there was a, um, graphic, actually, that I had set up in advance.

So actually, I'm going to cut my slide up off of Sorry.

I'm going to get my computer feet off of there for just a second and grab some images that is sort of prefabricated.

Um, in the meantime, I'll answer some chat questions.

Bab ignite asks.

Is this based on total probability concept?

I'm not entirely sure I have to maybe recently Google What?

That means Slot machines are based on probability.

So you have, you know, by waiting which symbols are in each pool in each sort of really on your machine.

You do therefore influence the odds off.

Whether you get you know, the sevens will usually be very rare.

There only be 17 per row.

There used to be 20 symbols per slot, so you'll have 2020 and 20 all vertically oriented or in a wheel you can sort of think of and, um, by having 17 versus having maybe five apples or four oranges.

You make the seven very rare to match, especially if you multiply that factor by three, you know, going 17 out of 20 times 17 out of 20 times 17 out of 20 on.

I think that adds up to being what whatever 20 to the third power is, which I think is what What would that be won over 80,000?

Something like that.

Or one over 8000?

That's your chance of getting a jackpot, I think in that model, although the numbers might be, it might be slightly different because you're especially when you start getting into choosing random offsets after you end up actually slowing down the wheel.

We'll see how that all works out.

Um, but oh, yeah, nice as they kindly plug a lever based slot machine there in the chat.

So I'm just I'm gonna separate account.

I'm grabbing all the images that I put together in advance.

I'm just going to grab that go down tear.

So apologize.

Just give me one second.

If anybody's been working on their own games, Definitely no, because I'm very curious if anybody's doing their own game development.

Like I said, I think it's been two or three weeks, three weeks, maybe since we've done game any game development streams, um, with microprocessors now ubiquitous the computers inside modern slot machines a lot manufacturers to assign a different probability to every symbol on every real right.

Yeah, yeah, because you can get fancy with your algorithm and shift the influences that it will end up spending the wheel in a certain way and waiting.

You know where it ends after it ends up spinning.

That's certainly possible to dio ours is gonna be a little bit more of a naive, random approach, which I think does go down to what a detail was saying of 8000 1 and 8000 Probability for the for the three sevens actually aligning.

So, yeah, that's you can flub the absolutely can flood the numbers, whoever you want.

And I I wouldn't doubt that casinos actually end up doing this in practice quite a bit.

Um, I'm just make sure that I have this all set in the right place.

Uh, J R one's just about done here.

Copy these.

Over.

This will save us a little bit of time on stream rather than rather than cutting all these images, finding the images, etcetera.

We get sort of right into the coding which I think will save us, save us some time.

All right, do that.

I think we're just about ready.

Just switching uses one more time.

Oh, and thank you.

Also to Matley 333 Hara Theresa and Raw Leo for the follow is much appreciated.

We'll get to some very interesting visual step here in just a second.

I recently made a very basic version of Brick Breaker in, JavaScript says by near Warrior 76.

That's awesome.

The game course that I teach teach is how to make brick maker or break out as we as it's called.

Um, it's a very good game that you can really actually taken a lot of directions in the game course.

We end up using procedural generation well, sort of procedure generation, random ization of the game grid for a more interesting layout to the game so you don't get the same grid every single time, and I think you can.

You can go and get him to see it.

If you're if you're interested, um, it would be the, um, actually one of the game's course.

CS moody dot net x dot org slash game If I plug that here, which I might be able to do that sees $50 fedex dot org's slash games.

Go to that game scores.

We teach brick breaker as the, um, assignment to zero.

Wait.