Learning Python by Creating Hangman

Hello everybody and welcome back to another brand new Python tutorial series.

In this next three videos, what we're going to be doing is working towards creating our

very own version of Hangman.

So you can see Hangman on the screen and what we're going to be doing here is learning

more about Python, learning about a popular module called the Pi Game which allows you

to create 2D games and then of course applying all of those skills to our own project.

I find that the best way to learn is actually working towards an end goal which is a project

and learning a little bit about the theoretical concepts about why and how things work and

then immediately applying them into some kind of project like we're going to be doing here.

So this series is going to be well suited for people that have a little bit of experience

in Python but that maybe aren't too confident, maybe they don't know how to set up a

a large program yet and I think there's going to be a lot of lessons and things that

people can learn just by seeing the way that I'm actually going to go about setting up

this program.

So this is going to be about 150 in lines of code.

It might be a little bit longer, a little bit shorter but in that range and I think that

if you're a beginner being able to see how you can actually set up a program of this

length, how you can declare things like constant value, some best practices is a really

valuable skill and of course I'm going to be trying my best to teach that to you as we

apply these skills to our own Hangman game.

So with that being said, let me give a quick demo of this game and then we're going to

talk about the online coding platform I'm actually using and then of course we will get

into the code and talk about everything you need to download and anything you need to

do to get set up.

So the first thing we'll do is actually look at this game Hangman.

So I've made this.

This is a demo version.

Our final version may look a little bit different depending on if we change anything

and of course as we go through this series, you're welcome to modify anything you like

and I would encourage you to do so.

So you can see Hangman, I assume all of you know how Hangman works, but essentially we

have a bunch of letters here.

This is the word that we're trying to guess and we can pick these letters and if we get

them corrected, we'll fill in these blanks, otherwise another part of the man on this

whatever we want to call it will pop up.

So let's have a look here if I type C, we can see that that apparently was not in the

word.

So we got ahead if I type B, we get the torso and now let's put a letter that is there

D.

Okay.

Can you guys guess what the word is?

I'm going to go V, that one was there, J, that's not there, K, no, E, okay.

Let's go with an R, all right, G, let's go with an L, let's go with an O.

And I know what this word is, I'm going to go with a P.

So the word was developer, we got that correct and then the game ends.

So that is the basics of this Hangman game.

Of course, we may or may not add more things to it and I will be showing you near the

very end of this series how you can kind of customize this, make new words and all of that

fun stuff.

So with that being said, let me talk about this online coding platform that we're actually

going to be using, which is called Ripley.

So for this series, I wanted to use a platform that requires pretty much no setup for

us and that anyone will be able to use regardless if you're on a phone, if you're on

an iPad, if you're on a laptop, it doesn't matter what machine you're using.

So long as you have internet access and a browser, you will be able to follow along with

this tutorial series.

And that's because we're going to be using a website called repel.it, otherwise known

as replet.

So the URL is reppl.it.

You can see I'm on it right here and this is an online collaborative coding environment.

Now what this means is that you can hop into your browser, you can type in this URL and

immediately you can get brought into this coding environment and start writing code.

So you don't need to download anything.

You don't need to set anything up and it's a bunch of really cool features on this

website that I'm just going to walk you through slowly because I think they're really

valuable and that you guys will find a lot of value from them.

So replet has sponsored this tutorial series.

I'll be clear here, but these are some of the features of replet that I want to discuss.

So there's an in browser IDE.

This means that's kind of the online coding environment you were looking at before.

It has real time collaboration, which actually means if you wanted to, you can invite your

friends, you can invite other people to modify your code in real time.

That's actually a really cool feature that I don't see on many other platforms.

It has GitHub integration, which will become important as you work on larger projects in

the future.

50 plus languages, including support for pi game, which is the module we're going to

be using.

You can host and deploy your code.

There's a bunch of learning resources and tutorials right on the website that you can follow

along with.

There's team plans and then there's API and plugins, which probably aren't that relevant

to all of you.

So this is the platform we're going to be using.

So the first step for us in this series is going to be to head over to repel.it.

Again, otherwise known as replet, URL is repl.it and of course, that link will be in

the description.

So once we head over there, what you're going to need to do is start creating account or

log in.

I believe you can sign in with your Google account.

That's what I've done.

And once you do that, you should be asked to enter your favorite programming languages.

And then you'll be brought to a page that looks like this.

So I would recommend selecting a Python is one of your favorite programming languages.

Not a huge deal if you don't, but just wait until we get to a page like this.

Once we're here, we're pretty much ready to go.

So I'm just going to give you a quick walk through of this website.

The first thing I want to talk about is actually this tutorials pane, which I think is really

cool.

So here on the sidebar is kind of all of the main menu features that you can look at.

You can see if we click on tutorials.

There's a bunch of different tutorials we can scroll through.

For example, there's one here in C++.

We can look at the new ones that have been posted.

There was one that was posted two hours ago.

And then there's all these other options we can look at as well.

So we can look at challenges.

We can ask questions.

There's announcements and all of that fun stuff.

And then if we go over here to templates, if this loads, what we can see is there's

actually a bunch of templates that are already created for us.

If we wanted to do something like make a website, if we wanted to, let's see here, make

a game.

So they have this p5.js thing.

Really cool and just makes it really easy to kind of hop on here and quickly experiment

with things and start working on code.

Next we can go over here, which is actually to our profile section.

So if you click on your little icon or your little person and what you'll see here is you

can actually have all of your games that you've created on a public profile.

This means if you want to share your work with someone, all you have to do is have your

repel be created on your public profile.

You can share the link with someone and that means you don't need to send them a zip file.

You don't need to download anything on their computer.

They can just come to this website, press run on your code and be able to see what you've

actually worked on, which I think is a really cool feature.

So other than that, there is the My REPL section.

This is where you can organize all of your code.

When you make a new project, we're going to call that a REPL and that's what the website

is calling it.

And then you can see all of the projects here, you can organize them into folders.

And that is pretty much the basic walkthrough of this website.

Now to actually get started here, what we need to do is click on new REPL at the top

and we need to select pi game.

So go ahead and search for pi game here and you'll see that that's popping up.

Again, this is a module in Python that is supported on replet.

So we select pi game and that's going to automatically set up our environment.

So we're ready to start using this module.

Whereas if we were doing this on our local machine, we need to install a bunch of things

and get some stuff set up.

So I'm going to go ahead and put pi game here and I'm going to name my project hangman,

feel free to name yours, whatever you'd like.

Notice that it says your repels will appear on your profile.

If you didn't want that to happen, you could upgrade your account and you would have access

to private repels.

So let's go ahead here and click create REPL.

And again, keep in mind all of this is free.

I haven't paid for any of this.

Only if you want the upgraded features, what you need to do that.

So we're going to give this a second to boot up here.

You'll see that it's starting to install some things on the sidebar here.

And while this is happening, I'm just going to go through the different panes on this

website.

We're all clear on the different things when I discuss them.

So here on the bottom right hand side of my screen, my face can't might be covering some

of it.

We have what's known as the console.

Now the consoles where we're actually going to be running our Python code.

So this will kind of automatically be working and updating for us.

And what we do is when we're ready to actually run our pi game project when we set that

up, is there's a button up here and we'll press run.

And then the actual pi game window will pop up here where right now it's just a gray square

because we have, we haven't yet put any code in this middle pane here.

This is actually where we're going to be writing all of our code.

And this is what's going to be rendered and showed on this right hand side here in the

console when we go ahead and click that run button next.

We have the files pane here.

This is where we can make new files at images, all of that.

And then we have the version control tab, packages tab and settings.

You may want to go in here to the settings tab and modify, for example, your theme from

light to dark.

I do like working in the dark theme, so I'm going to leave it like that.

And then of course, there's a bunch of other things you can change like the font size,

which I'll make mine a bit larger.

So it's easier for you guys to read and I've made my indent size four instead of two.

So with that being said, we're pretty much ready to go.

The next thing we need to do is actually download some images that we're going to be using

in this project.

So if you click on these three dots right here, there's something that says upload folder.

We're going to do that in one second, but I need to tell you how we can actually download

the images for this project.

So there's actually going to be a URL that I'm leaving in the description.

So go down there and look right now.

And it says image download.

You're going to click on that and it should immediately download a bunch of images from

my website, which are going to be the six hangman images we're actually going to be using.

So let me go ahead and open these up.

I just need to find them.

Let's go here and I'll just show you what one of them looks like.

You can see it looks something like this.

So that's hangman image one.

This is hangman image two.

It has the torso and what we'll be doing is actually drawing these images on the screen

when we want to show the different hangman states.

So download those images that will actually be in a zip folder.

Let me go here.

So you can see if I go here.

It says images.

It's all zipped up.

What you'll need to do is right click on that and click extract all there might be something

called decompress.

I don't know what operating your system you're on.

But either way, you can also click in.

You can grab this image folder and you can cut it and you can paste it somewhere else.

So you can see that I can I'm just going to replace because there's already this image

folder.

And then what we're going to do is we're going to go to these three dots on this website

once you have your images folder extracted and somewhere on your computer and we're going

to upload those images.

So we're going to click here.

We're going to go upload folder.

We're going to go ahead and find where that is.

So for me, I believe that's on my desktop.

I have hangman and I have images.

So I'm going to upload all of these images.

It's going to say, will you allow this?

I'll say yes, I will allow all these images to be uploaded.

And now we have six images right beside our main dot pi file and we're actually ready to

start drawing and loading these into our program.

So I hopefully that made sense, but download the images, extract the images so extract

that folder, upload all of the images here to REPL.

It will stay here.

They will be saved and now we're pretty much ready to actually start writing some code.

So now after that long introduction, which I do apologize for, we are ready to start writing

some code.

So the first thing we're actually going to do in here is we're going to import two modules

that we need to use, which is pi game and OS.

So whatever we're using, something that's not built into Python by default.

So for example, we're not using a for loop or an if statement or something like that,

then we need to import these modules because they're going to have some new syntax and features

that now we're able to access.

So we're getting these green lines because we have not used these modules yet.

Don't worry about that.

That's not an error.

That's just a warning trying to tell us, hey, you might not need this module because

you haven't used it, but we are going to use them.

So the first thing we do after we insert import pi game is we need to initialize it.

So this is kind of a necessary step just to make sure we don't have any errors or any bugs

or anything that happen immediately.

This just sets up pi games that were ready to go and actually start using the pi game module.

So import pi game, import OS, pi game dot init, and next what we need to do is define

the dimensions of our script.

So we need to pick a width and a height in pixels that we want our game to be.

Now this is going to be a little bit different than we might usually decide because we're

going to be working on this website and maybe a little bit of a smaller box here, but

I've just determined that a good width and height for our project is going to be 800 by 500.

So I'm going to say width comma height if I can type this equals 800 by 500.

So notice if you haven't seen the syntax before, we can define multiple variables in the

same line simply by separating them by a comma and then just making that many items on the

other side of the equal sign separated by commas.

So width obviously is 800 and height is going to be 500.

Now to actually tell pi game that we want our width and height to be this, what we need

to do is go pi game dot display dot set underscore mode.

And then inside of a set of brackets, we're going to put width and height.

This is because the pi game accepts a tuple for the width and the height.

So we put inside of brackets where we want the width and the height to be now.

The reason I've defined these as capitals is because these are constant values.

These are values that do not change.

And since there's no notion of a constant in Python, what we do just to have some kind

of good practices and understand that these should be treated as constants is we make the

variable name all capitals.

So that's a good habit to get into whenever you declare something that you don't plan

on changing anywhere in the program, make it in all capital letters so that people know

and yourself knows that hey, this is a constant, I should not change this and it's not

going to be changing anywhere.

So now that we have this, we have pi game dot display dot set underscore mode, we have

actually created the dimensions for our pi game screen.

I can't run it yet for you because if I do, it'll just open and immediately close and

we won't see it.

But the next thing we're going to do is actually was it defined what we want the name of

our game to be.

So pi game dot display dot set underscore caption and then inside of here, we're going

to put a string that defines what our caption should be.

In this case, I'm just going to make this hangman game, hangman man, hangman game like

that and now you'll see when our screen pops up and this will happen in a minute or two

when I run this, that we actually have hangman game as kind of a little label on the top

bar for our game.

So we've set the mode, which is pretty much just defining the dimensions and then we've

set the caption.

The next thing we need to do is actually create what's known as our game loop.

So whenever we make a pi game program, we need a loop.

So some kind of looping mechanism that's going to constantly run, it's going to be doing

things like checking for collision, checking if we clicked something, checking if time

has ran out, doing anything that you would normally do in a regular game.

That's what our game loop does.

So we need that so that we make sure that we're constantly running the game and we don't

just open it once and then close it.

So what we're going to do is we're going to set up what's known as a while loop, but

the first thing we need to do is define actually the speed at which our game is going

to go at.

So this is also known as FPS, right, frames per second.

If you play the game like Fortnite or you've played any shooter game, you've probably

seen that you have some kind of FPS.

Now in pi game, it's not really FPS, but it's a very similar thing.

We're going to define what we want the maximum FPS to be so that we don't have games that

are running way faster than other games.

They're all running at a very similar speed.

So we're going to say FPS and all capitals is going to be 60.

So I want this to be 60 frames per second.

That will be what the maximum FPS will be.

Then what we're going to do is actually create a clock object in pi game that will make

sure that our loop is going to run at this speed.

So what I'm going to do is I'm going to say clock equals pi game dot time and then dot

clock with a capital C and inside of here, I'm going to put FPS.

So I'm pretty much saying I want to set up a clock object that's going to count at

60 frames per second.

So we're just going to keep track of the time for me essentially using this FPS.

And again, I define the FPS up here.

All right.

Now I'm going to make a variable.

I'm going to call this run and I'm going to set this equal to true.

And this is going to be what controls our while loop.

So I'm going to put a while loop right here.

And what this essentially says is while whatever is on the right hand side of this,

so while the variable run is equal to true, do whatever is indented inside this while

very simple, while this variable stays true, keep running this loop.

So essentially we will run this loop until we set this variable to false.

And we'll only set that variable to false once we've lost the game or once we've

quit or we're exiting the game essentially inside of here,

what I'm going to do is I'm going to write clock dot tick.

Now this is necessary just to make sure that our while loop runs at that speed

that we set up here.

So we made the clock object, we're going to have the clock object tick.

And then that's pretty much saying, hey, tick at this speed.

And that's pretty much all we need to do.

And in fact, I've realized I've made a mistake, this FPS that's inside of line 10

here on the clock, we need to actually put that inside of the tick method here.

So clock dot tick and that will make it run at the proper speed.

My apologies about that.

Now inside of this while loop, what we actually need to do in the first thing we

always set up is we check for events.

So in pi game, whenever something happens like pressing the mouse,

pressing a keyboard button, pretty much doing anything an event is triggered.

And to be able to look through all those events, which we're going to want to do

because we want to see, for example, when the user presses the mouse,

when they click the exit button, there's a few events we want to check.

We need to grab them and we need to look at them.

So we're going to use a for loop.

We're going to say for event in pi game dot event dot get like that.

We're going to put a coin and then we're going to go inside of here and

we're going to actually start looking for the events.

So essentially what this will do is any event that's happened will be stored inside

of here.

You can think of it almost like a list.

You can think of it as some whatever data structure you want that just has a bunch of

events.

We're going to loop through all of the events and every loop, one of those events

is going to get thrown into the variable event.

So what we can do inside of here is we can say something like if event dot type

equals equals, so we're checking if the type of the event is equal to and then whatever

we want to check.

So in this case, the first event I want to check is actually pi game and then in all

capitalist dot quit.

What this means and what this event is is when we click that red X button on our window.

So you know, you can kind of see even here, right, there's an X at the top.

That's going to be the same thing that's going to show up for our pi game window to be

able to close it.

And well, this is the event that happens when we press that button.

So inside of here, what we should do is we should stop running this while loop and we

should quit pi game.

So what I'm going to do is I'm going to say run equals false.

And what that does now is mean that the next time we hit the top of this while loop,

we are no longer going to run, we're going to stop and we're going to quit pi game.

And in fact, what I need to do at the very bottom of my program is say pi game dot quit

like that.

And what this will do now is essentially say, okay, as soon as we pass this while loop

and we get out here, we're going to quit pi game, which just means close the window.

And that is as easy as it is.

So let's actually move this over here now.

Let's do run and let's see if this works properly.

Sometimes it does take a second to boot up.

So I will be back when this boots up.

All right.

So I had a small trouble running this program and maybe that's actually good because

I can tell you guys what I did to fix it.

So for some reason you can't seem to press run and get this to work.

It's probably just because pi game is quite difficult to run from the web.

What you need to do is just change the name of your project.

You can change it back after, but I just changed it and that forced a refresh and then

that way I was actually able to see this project.

So anyways, you can see that I just press run and now we get hang man game popping up.

And well, you can move this window around a little bit and if you press the X button, it

quits the game.

So that is pretty much what we were trying to go for here.

You can see that now it's no longer running anymore because I pressed quit and now we're

pretty much good to continue coding.

So that's kind of the first run and I'd also added this line of code here.

You don't need that.

Let me get rid of that.

I was just troubleshooting.

But that is how you get your first kind of initial window set up and the first event which

is pressing on that X button to actually register and work.

So the next thing I want to show you is how we can actually register mouse events.

So since we're already doing this, let's see how we can actually get the position of

our mouse when we're pressing it on the screen.

And this should hopefully tell us actually how the coordinate system works in pi game,

which is going to be an important thing to understand for the next step, which is going

to be to start loading in some images and getting those displayed on the screen.

So let's go ahead and do that.

What I want to do is I want to check what my mouse is at when I actually move my mouse

and when I click down.

So the event to check where mouse press is if event dot type equals equals and then

we're going to say pi game dot and then all capitals mouse button down like that.

If that happens, let me zoom out a tiny bit so that we can zoom like that.

Okay.

So we can see this whole thing.

So if event type equals equals pi game dot mouse button down, then what we're going

to do is just print to the console pi game dot mouse dot pause with brackets like this.

So in fact, let me throw this into a variable.

Let's go pause equals pi game dot mouse dot pause and let's print out pause.

So pause just stands for position.

And what I'm trying to do is just get the xy position of my mouse in the window.

The reason this is important is because later when we start adding those buttons to the

screen, we want to check if they were pressed.

And we'll to be able to do that, I'm going to have to compare the mouse position of my mouse

to the position of where those buttons are to check if I actually hit one of them.

Then if I hit one of those buttons, we're going to do something on the screen, right?

So this is how you get the position of the mouse.

You say pause POS equals pi game dot mouse dot pause.

And then if you want to check to only get that when you press the mouse button down, you

use this event right here.

So let's go over here.

Let's make our console a bit bigger.

Hopefully you guys can see all this and let's run this one more time.

All right.

So it comes up.

And now let me start pressing down on the mouse.

And what does it say here?

Pi game dot mouse has no attribute pause.

Ah, my apologies guys.

I do make mistakes as well.

This should be get underscore pause.

Okay, that makes more sense.

Get underscore pause.

This is essentially get position.

So let me run this one more time.

You notice I did get an error there because I had some wrong code.

So let's run this.

And now let's press down and notice that we get the position of the mouse showing up down

here in the console.

Now let's actually see what the position of my mouse is.

So really we would imagine that based on our kind of understanding of coordinate system,

the middle of this window should be zero zero, right?

But when I click on this, I'm getting 397 to 46.

That's not zero zero.

And in fact, what happens when I come down here, I'm getting 386 496.

So it seems as though as I go up, the y position decreases.

And as I go down, the y position increases.

This is actually the first thing to understand about pi game is that the top coordinate,

so zero zero coordinate is actually in the top left hand corner of the screen.

So notice I'm clicking here and I'm at one one pretty much right at the top left hand

corner.

If I go to the right hand corner, I'm actually at 796 three, which is pretty much the

maximum width and the minimum height.

So just note that when we talk about coordinate systems in pi game, when we increase

the x, we move further to the right.

And when we increase the y, we move further down.

And this is actually really good to understand as well, because when we start drawing

things on the screen, we actually draw them from the top left hand corner, which means

that say we're drawing some image that's like, you know, 50 by 50.

Well, when we start drawing that, we start drawing it from the top left hand corner,

which means the far right edge of that image will be 50 pixels further than where we decided

to draw it and will be 50 pixels lower than where we decided to draw it as well.

So if I click here, really, it will be like a box like that.

It's hard to show you with my mouse, but hopefully that makes kind of sense.

Just understand the top left is zero zero.

That's very important to understand in pi game.

All right.

So now that we have that, the next thing I want to do is actually load in these hangman

images and show you how we can start drawing and putting some things on the screen

because right now it's kind of boring, right?

We don't like what are we doing with just, you know, clicking the mouse.

That's not very fun.

So what we're going to do is first of all, actually, I'm going to go up to line six

here.

And I'm going to put a variable to store my display.

So I'm going to say win.

So W I n equals pi game dot display dot set underscore mode.

I forgot to do this earlier.

This is just because we are going to need to use this variable to draw some things on

the screen.

So we'll just set it up and say win equals that.

All right.

Next, we're going to load in a bunch of images.

So I'm going to do something here.

I'm going to put a comment and I'm going to say load images.

A lot of the times what I like to do is kind of separate my program into a few small blocks.

So up here, I would say something like set up display, I'm going to say load images.

And I would say set up game loop here.

Just so that if I come back to this later, I kind of have a really easy way to see the

clear separation between the different parts.

So that's what I like to do.

But anyways, let's load in the images.

So what I'm going to do is I'm actually going to make a list of images.

And a list is essentially just a structure that can hold multiple items.

So a list could look something like this, we're going to have 5, 6, 7, 8, you get

have a string in here like this.

It's just a collection of elements that we can store inside of this kind of structure.

And a few small things you need to know about lists, I'll go through them quickly because

I assume many of you have probably seen this before, is that to be able to access an

element from a list, so say here, all of these different things like 5, hello, 8, these

are all what we call elements, and they're a part of the list.

And inside the list, they have an order, right?

5 comes first, hello is last.

Well, if I want to access the first element in the list, what I do is I type images 0 like

this.

So I use the square brackets.

I put what's known as the index or the position of the element in the list.

And the first position of all of our lists is always 0.

So 0 would access 5, and then 1, 2, 3, 4 would access hello.

So that's kind of the basics of lists and what we need to know.

And then if we want to add something to the end of the list, what we do is we do dot

append like that, and what this will do is take whatever we put in these brackets and simply

add it to the end of the list.

Those are the basic operations, and I just want to show you those because we're going

to be using them a lot in this series.

So what I'm going to do is I'm going to say 4i in range.

And here I'm actually going to put 6.

Now what this is going to do is essentially loop starting at 0, going up to, but not

including 6, and give me the value i on every loop.

So this is going to say, OK, we want to loop 6 times, and we want to have this counter

variable i that starts at 0 and counts up to 6, but doesn't include 6.

So essentially this loop will run whatever's inside of these indented blocks here.

So whatever would be where pass would be, this will happen 6 times, and I, every time

this happens, will increment by 1.

So it will start the first loop will be 0, then it will be 1, then it will be 2, and so

on.

And you're going to see why that's important because look at the numbers that I have for

my images.

Because what I'm going to do, and sorry actually, this should be 7, my apologies.

I'm going to do is I'm going to loop through all of these, the numbers from up to 7, but

not including 7, and I'm going to load all of these images because we go hang man 0, hang

man 1, hang man 2, hang man 3, and so on, and add them into this images list.

It'll make more sense in a second, but essentially what I'm going to say is images dot

append, and let me say pi game dot image dot load.

And in fact, I'm going to split this up into some variables just so that it's a little

bit easier to see.

I'm going to say image equals pi game dot image dot load.

This is how we load an image, we write this, and then inside of the brackets here, what

I do is I actually put the name of the image that I want to load.

So I have to put the exact name, so hangman 0 dot png.

But since I don't want to just write this 7 times for each of these images, I'm going

to use this for loop to help me out.

So what I'm going to do is I'm going to say hang man, like that.

plus the string equivalent of the value i, which keep in mind, is this variable right

here, which will be going from 0, and then it will be 1, and then it will be 2, and so on,

and so forth.

And then I'm going to go plus dot png.

So essentially what I'm saying is let's make a string that is hangman whatever this

number is, which will be in the range of 0 to 7.

So it won't be 7, but it'll be 0 up to 6, including 6, and then plus the png.

So it will go hangman 0, hangman 1, hangman 2, and so on, and then we'll add that

into images.

So I'm going to say images, dot append, image, like that.

Now I actually don't need this OS module here.

I was going to use that, but we're not going to use it anymore.

And now let me actually go ahead and just print out what images looks like for you, so

that when we run this, you can see that what happens is we immediately load all of these

images into this list.

So let's go ahead and run this, let me move this up here, and let's go run.

Let's give it a second to boot up here, and we can see that right down here, hopefully

my face cam is uncovering it, we get all these different surfaces.

So this is telling us the width, height, and color depth of this image.

Believe that's correct, and it's telling us that we've loaded in a surface.

The reason for that is because all of these images that we've loaded get turned into a bunch

of pixels that we call a surface, and then we can actually draw that surface onto our

Pi Game window.

So everything in Pi Game kind of works with surfaces.

So if you see the word surface, or you hear me say surface, that's what I'm talking

about, just some collection of pixels that I want to put onto the screen.

All right, so now that we have all of that, let me close this here.

Let's actually show how we can draw some images and refresh the display, and I think

that will be a good place to leave off this first tutorial.

So we have all these images, right?

When I print out images, I get a list of all of the images, all of these different

surfaces.

Well, how can I actually go about printing, or sorry, displaying one of these images?

The first thing I'm going to do is I'm actually going to make another comment here, and

I'm going to say Game Variables.

Because I have all these images, right?

So, you know, Hangman Zero, which is this one, Hangman Six, which is the final guy, and

he's fully hung up, right?

And I need to know which one I want to display when this game starts, right?

Because I want to show that image, and then as soon as we press a button that is wrong,

so there's a letter in the word that we press a letter that's not in the word, we're

going to, you know, make the next body part appear.

So I actually need a variable that I'm going to call Hangman Status, like that, and

I'm going to set this equal to zero.

So this is pretty much going to tell me what image that I want to draw at each point

in the game.

So I'll start it at zero, and that means I'm going to draw a Hangman Image Zero, and

then Hangman Image One, well, that will happen if I make this one, and of course, if

I make this six, then we'll draw the sixth one.

So we're going to say Hangman Status, but that's not all we need to do.

Inside of this while loop here, what I'm actually going to do is I'm going to update and

refresh the display, and then draw the current Hangman Image.

So to actually put some kind of background for our display, because right now we can see

that it's just black, right?

Maybe I need to actually make this while you're going to, maybe I want to make in another

color.

What I do is I type win, which is the name of my window, which I defined right here, and

I'm going to say win dot fill.

And inside of here, I'm going to put a color that I want to fill the window with.

So when we define colors inside of Pi Game, what we do is we pick an RGB value, so red, green,

blue.

Essentially, how much red, how much green, and how much blue do we want this color to

have?

And the way we define that is by putting brackets like this.

And then we just set three numbers.

Now these numbers have to be in the range of zero and 255, where zero is none of that

color and 255 is as much of that color as possible.

So using red, green, blue, we can create any color we want to actually do white, which

is what I want to use.

We do 255, 255, 255, 255, because that's a combination of all of the colors.

So let's see what happens when we actually type win dot fill 255, 255, 255, and we put

that right inside of the while loop, because that will happen every frame, right?

Every time this while loop runs, this will fill.

So let's actually go ahead and run and see what we get.

Well, it seems as though it's not going white.

Why isn't it going white?

We're filling the screen every second with white, right?

What's happening?

Well, that's because we've got an important step, which is to actually update the display.

In Pi Game, we need to manually tell it when we want to update.

So whenever we draw something, what we need to do is say, hey, update the display with

all the stuff we've drawn.

So we're going to go ahead and go Pi Game dot display dot update.

And this will update the display with any of the most recent things that we've drawn on it.

So we can draw a bunch of different things.

And then all of a sudden, when we want to actually display them, we do Pi Game dot display

dot update.

So let's run this now and let's see if our background color changes.

And there we go.

Now our background color is white.

Awesome.

Perfect.

Great.

Now, the next thing I want to do is draw that hangman image.

And in fact, I'm actually going to clean this code up a little bit.

I'm going to take this color white and I'm going to put this into a variable because

I think I might want to use this later on.

So up here, I'm going to go and I'm going to say, colors like that.

Oops.

And then down here, I'm going to say white in all capitals because it's going to be a constant

is equal to 255, 255, 255, 255.

And now I'm going to put white inside of here in case I ever want to use this color again.

I have it.

I defined it and now it's way easier to read that, hey, this is white.

I'm drawing white.

And sorry, that doesn't go in there.

That goes in there.

And that goes like that.

Okay, white.

Awesome.

Next thing I want to do is actually draw the hangman image.

So what I'm going to do is I'm going to go and I'm going to say win dot blitz.

Blitz stands for draw image essentially draw some kind of surface.

That's what it's saying.

Whereas Phil is just filling the entire screen with a color.

So I start by filling the entire screen with a color.

This will in fact actually override anything that was previously on the screen.

So we don't see multiple images being drawn.

Then I'm going to bullet the image that I want to draw.

And in this case, it's going to be images hangman status.

Because remember that to access the different images inside of this list, we use numbers

from zero up to six, right, where six is the last image in the list and zero is the first

image.

So whatever hangman status is, that's the image that we'll get.

So if we put hangman status here, then that will automatically index the correct image

from the list.

And then all we need to do here is tell it where we want to draw the image.

So we need to give an x, y position for the top left hand corner of this image.

Now I'm going to look on my other screen here to figure out where we want to draw this.

And I think where we want to actually put this is going to be 150, 100.

So this is where I want to draw it.

This is the top left hand corner of where I want to start drawing this image.

And then of course, it will be wider and it will be longer.

So we'll fill up more of the screen.

So let's actually have a look at what happens when I blitz this image to the screen.

So let's run this and we see that now we're getting this hangman pop up.

And let's actually see what happens if I change this hangman status to say four and I

go ahead and run this now.

Well, there we go.

Now we're getting a different hangman image popping up on the screen.

So I think with that, I'm going to wrap up tutorial one here.

Of course, there's a lot more to cover, but I think we did a decent job and we want

through enough.

And we've covered kind of the core concepts on how pie game works, how to display images.

And in the next videos, of course, we're getting to some more complicated logic and start

doing some more fun things.

So with that being said, if you enjoyed, make sure you leave a like, subscribe and hopefully

I will see you in the next hangman tutorial.