Placeholder Image

Subtitles section Play video

  • What's up, guys?

  • In this video, I'm gonna show you howto program Connect four in Python.

  • By the end of these videos, you have built something that looks like this.

  • It's a simple two player connect four game with graphics.

  • I think this is a really good exercise for your beginner to intermediate level python programmers who want to build their skills.

  • I'll just finish up a game real quick just so you can see how this fully works.

  • As you see I the diagonal and it's those player one wins school.

  • We're gonna do something a little bit simpler and then build up to that graphic based Connect four game.

  • It's a command line.

  • Connect four game, where you actually mainly type in numbers to drop your pieces so you see the one there to cetera.

  • All right, so let's start building that just quickly.

  • I want to mention that I'll be programming and Python three and then using sublime text to is my editor.

  • I pushed a link to a video on how to set up these things in the description.

  • So one of the first questions I asked myself when I was writing this game is what is the best way to represent the board.

  • So by dragging a connect for Bordeaux quick, you can see that it is six rose by seven columns.

  • And to me, this looks like the perfect structure to represent as a matrix and python.

  • So that's what we'll d'oh!

  • So to find a function called create board and that's not gonna accept any inputs, then we're gonna make a a matrix of all zeros with the Dimension six by seven.

  • And to help us do this, we're gonna import a package called Numb Pie.

  • And if you haven't already installed this, you can open up a terminal window and just type in pip install numb pie and, as you can see already have it.

  • So we're gonna use this as followers and say, board equals numb pi dot zeros.

  • And that's gonna make a matrix of all zeros, which is good for our initial state.

  • And then the dimensions six rose by seven columns.

  • Cool.

  • And then we just need to return that board and we can test to make sure that worked by doing the following create board and then Prince board.

  • And as you can see if I don't know what happened.

  • As you can see, if I run that, um, we we do in fact, have this six by seven matrix of all zeros.

  • So that looks good.

  • We can begin writing the mean game loop now.

  • So gonna raid a loop that says while not game over.

  • And so our life is gonna be running as long as this game over variable is false.

  • And the only way it becomes true is if someone has a foreign row.

  • So we need to initialize the game over to be false.

  • To begin with, goes falls.

  • And the only way that's going to switch to true is if someone got a four in a row.

  • So now we're gonna need to We're also gonna want a real quick make our board initialized before we start the game.

  • Just so we have something to put pieces into.

  • So we have our board, we have a game over variable.

  • And now we're gonna want to be ableto ask player one input, and then we're gonna want to eventually be able to ask Ah, ask for player to input.

  • So this kind of leads us to the problem of Oh, how do we differentiate between whether it's player one or player two's turn, Israel's gonna define another variable appear called turn That's just going to initialize to zero.

  • So what we're going to say is, if turn equals, equals zero, then we're gonna wanna ask for player Want input?

  • All right, so in Python, there's a function of built in function called input.

  • As you can see, it highlights Pollux for May.

  • So we're gonna say selection equals input.

  • And then we're, say, player one, make your selection.

  • So this is what the player one's going to see, and then the way we're gonna initialize this game is we're going to just say they can type in between zero and six.

  • So this is what the player one should see.

  • So if I build this you see, we run to this error.

  • So this is because, um, sublime text doesn't accept this input function.

  • So my work around for this was I installed a package and sublime called Supply Mari pl I'll put a link in the description of how to install this, and I can run the input function through that.

  • So now you can see player one make your selection three, and it doesn't do anything with that input right now, but you can see that it's asking me that and I can type in enter.

  • All right, cool.

  • So we also just want to make sure that it saves our selection properly.

  • So when a print selection, I also just want to see, you know, if I'd have been a number, does it actually give me the number?

  • Or does it give me a string that represents the numbers?

  • I mean, I also print in type of selection.

  • I just want to see what we're getting.

  • So I'm gonna run that again, as you can see ever again, but we're gonna go to supply Mari pl and the link is in the description, as I just said, Run current file.

  • So two.

  • And as you can see, it gets too.

  • But it says it's a string.

  • So we're gonna want to make sure that it's actually a integer so we can just surround this with aunt input on this should work.

  • So let's see.

  • Run that again.

  • And you can also run this through the command line.

  • So if you run this in your terminal, go to the directory that the file is in and type in python and then file name.

  • It will also run.

  • Justus.

  • I'm running it in this sublime Ari.

  • Pl ah, player one make your selection.

  • Three cool and nice is it says three, and it says the class of that is an int.

  • So that looks good too.

  • May.

  • So now you can save some sort of selection from the user.

  • And you can also edit this so that it, um, requires you to make a specific number, type in a specific number, but we'll just leave it as like, well, imagine our players air following the directions right now.

  • All right, cool.

  • We have that.

  • And then we're always gonna want to be able to ask for a player to his input.

  • So that's gonna happen else.

  • Otherwise, if the turn is not equal to zero, um, then we want to ask for player.

  • Two inputs of selection equals it will just copied this from above.

  • And we'll just have the changes to say, player to make your selection.

  • All right, Cool.

  • And now, at the end of the turn, no matter whose turn it is, we're gonna want to increase.

  • Um are turned by one.

  • So turn plus plus equals one.

  • So make it in committed by one and then we're also What we're gonna also want to do is we'll just make this odd Even so we're gonna use Ma division so it's gonna be turned mod to turn equals turn mod too.

  • And this is just basically making it go, uh, take the remainder of whatever our turn is divided by two.

  • So this is just gonna alternated between zero and one, so it will alternate between player one's tearing and player Tuesday.

  • So let's just see if this works properly.

  • So we're gonna run this build python current file player will make your selection to player to make your section for player one.

  • Make your selection to that.

  • Looks good.

  • It's alternating between our player one our player toe Cool.

  • Okay.

  • And now we're gonna want to start building our actual functionality.

  • You're gonna wanna be ableto make this selection right here.

  • Actually drop a piece and to our board.

  • So I want to find another function up here called definition drop piece, and we might to find a couple function, so maybe have ah drop piece and I'll just do pass for now.

  • Maybe we'll also have, like is valid location.

  • So that would check whatever number that the player typed in.

  • We'll check to see if that's a valid location.

  • We'll also define a function called Get Next Open Row, and how old these functions are gonna work together is as follows.

  • So it all begins with the player making a selection.

  • 0 to 6 year represents the column that they want to drop their peace.

  • And so maybe a more appropriate title for this would be see a while.

  • Representing Column.

  • See you.

  • Well next.

  • Gonna take this column and the current board we have and pass it into this is valid location functions aboard.

  • Calm, individualized.

  • How we can check to see if the columnist selected is a valid location.

  • We will print out the board real quick.

  • So as you can see, imagine this is the zero throws the first row, second row all the way up to the fifth row here.

  • And then this is the zeroth column.

  • First column second column, etcetera.

  • We're starting at zero as our first index, so if we wanted to check if the column that the user selected.

  • Let's just assume that the user always types in a valid number 0 to 6.

  • We wanted to check to see if it's valid.

  • All we need to do is make sure that this top row for that specific column is not been filled.

  • So let's imagine that we're putting one's in for player one going and twos in for player to going.

  • So if this top row is still zero for the specific column we selected, then we know that it's okay for us to drop a piece in that row are in that column.

  • It hasn't been filled all the way to the top.

  • So do that.

  • So this is the fifth row.

  • That's all I'm going to do is just check to see whether or not the position at the fifth row.

  • And let's say, you know, whatever calling we select is zero.

  • And if it is, that means the calm is still free.

  • If it's not, then that's not of allocation.

  • What have the user try something else, So to do that, that's just too bored.

  • So we're gonna return board and then the the row is five, and the column is whatever the user selected.

  • So here so and we're gonna make sure that's equal equal zero.

  • So if that's true, then we're good to go.

  • We're good to let them drop the piece there.

  • If that's not true, then that means the column has been filled up all the way.

  • And one thing I'll note that will probably change in a future video is that it's kind of getting messy my coat a little bit with just throwing these random numbers here all the way all over the place.

  • And programming is that called magic numbers.

  • You kind of don't know where they come from, so I'll clean those up in some of the future videos in the series.

  • So Return Board five column equals equals zero.

  • And that is just checking to make sure that that column has an empty slot.

  • Okay, so now that we've gotten the valid location, let's get the next open row in that column.

  • So if you think back to our board, that's just checking to see when we drop it in that, say, the zeroth column here on the left, checking to see which row of these the piece will fall on.

  • So to do this.

  • We're gonna write a quick little loop so we're going to do for and we're gonna start the past in the board in the column into this one.

  • So the loop we're gonna right here is for are in range and I'm actually gonna start Ah, getting rid of some of these magic numbers.

  • So I'm gonna initialize a global Vario called ro count.

  • And often Global's are capitalized just to serve that are static variables that don't change or capitalize just to show that they're non changing variable.

  • So the number of rose, we have a six, and the number of columns we have is seven.

  • So I'm gonna do for our Sofer row and range.

  • So the number of rows we have so, ro count, we're going to check the board position.

  • We're gonna see if board are position.

  • First of the column equals equals zero.

  • Then we want to return that row.

  • So basically, if the row is equal to zero, so imagine we're filling this whole board up with ones and twos.

  • If the slot is still zero, that means it's empty still, So we're gonna return the first instance that it's empty.

  • So this ours an account from zero to, uh, row count minus one.

  • And we're gonna return that first case where it equals zero.

  • Okay, so now we got the next open road, and then finally, what we're gonna want to do is drop the piece.

  • So this is gonna take in the board, the row and the column, and then we'll also add something.

  • We'll just call it the piece.

  • So whether it's player one or two going So all this is gonna dio is go forward row call him.

  • Equals equals peace.

  • So we're gonna make it fill in the board with whatever piece that the player just dropped.

  • So let's put this all together in our loop.

  • So first we got the column, and now we're gonna check if is valid, location of the board in the column, and then we can start getting the next MP.

  • Rosa Ro equals get next open row, and that takes in the board and columns.

  • Well, so get next time put in row board column, and then we're gonna finally drop piece.

  • We're taking the board, the row, the column, and then for player won the pieces.

  • Just the one and we're gonna copy this in to player to as well cause player one player to the functionality of what they're doing is the same.

  • But we'll just have to change the peace here to two.

  • So now and then finally after the player goes would probably want to print out the boards.

  • I will print the board here and let's see what happens now.

  • So tools build shoot.

  • Sorry.

  • Supply Marie Pl Python run card file.

  • So, player one selection, we're gonna drop our piece right in the middle.

  • Is that 0123 is the third calm.

  • So three.

  • What happened?

  • Why did it not fill in?

  • Let's figure out what exactly went wrong there.

  • So should have updated the board, but for some reason, it did not.

  • Um So let's see.

  • Okay, I see what I did wrong here.

  • So I accidentally put in two equal sign here.

  • And what we're really trying to do is an assignment we're not trying to set.

  • See if the board row calm position is equal to that.

  • So I didn't assign it.

  • So now it should work.

  • So will rerun this.

  • The tools by Mari pl Python on current file player won't make your selection Will say go to the middle three player to make your selection will do three as well.

  • Player won't make your selection.

  • And as you can see, one issue we're having right now is that the pieces are starting at the top and going downwards.

  • And so the reason for this is our convention was to say that this was the 00 index.

  • But in the actual numpty, they represent this right here as the 00 index.

  • So I'm just gonna add additional function or a quick called print board.

  • You know, that's gonna d'oh is change the orientation so that what we're seeing is actually that they flipped over the way.

  • We're expecting to see a connect four board kind of be building from bottom up.

  • So print board and we just need a pass on the board.

  • And what we're gonna do is there's a command and dumpy.

  • So the command is I mean, just remember it.

  • It is NPD flip I wanted to board, and then you have to flip it over yet to specify the axis of a zero the access We're gonna flip the board over the ex access so that should get it upside the right side up again.

  • So instead of doing print board here right now, call our new print function.

  • So prints board on board.

  • And we can also do that down here if we want to print it.

  • Doesn't matter, I guess to start, but pretty bored.

  • Okay, now let's run it again.

  • Tools Primary, Vo Python.

  • One can file player will make your section three, 33 And as you can see now, it's building up from with ones and twos.

  • Um, just how we expect the one problem with this is that if I actually won this game so as you can see, I just won with player one down the bottom.

  • The game doesn't let me know it all that I want.

  • So we need to implement that functionality.

  • So we're gonna find a function called winning move, and we're gonna have that taking the board and then the last piece that was dropped.

  • So winning move.

  • There's a bunch of different ways to implement this, and the way we're going to dio is not the most efficient method, but it's probably easiest describing a video.

  • So that's kind of why I'm selecting it, but we're gonna mainly check all the different possible places You could win in connect force all the horizontal CZ, all the verticals and all the diagonals and check to see if there is a winning combination on the board.

  • And because we're doing this after every turn, we're gonna pick up the first instance of that winning combination so we'll know who won.

  • Probably more practical way would be to just check around the spaces where the last piece was dropped, but that Cody got a little bit messier when I was doing it before.

  • So I'm gonna just do it this way.

  • So we're gonna first check all of the horizontal locations.

  • And to do that, we'll have a loop that generates over the columns.

  • So for C in called range column count.

  • And so we defined a column count up here above in that seven.

  • And one thing ah, I think would be a cool challenge for you guys to try.

  • That I don't think my game is going to be able to do at this point in time is a very well designed, like connect four game.

  • You would be able to change these numbers.

  • So, like, I could change it to say, like, 12 or something and this toe like eight and the game would still be able to work.

  • You still have, like, a connect four game, but just a bigger board.

  • And so that's what kind of a cool way to make sure.

  • Like you've designed things a smart way where you don't have just these random, like magic numbers popping up all over the place and actually gonna change this real quick toh roh account and column count Just cause I wouldn't try to eliminate the magic numbers where I can and we'll clean this up too.

  • Row account minus one.

  • So this is the last row, the index of the last real OK, getting back to winning move.

  • So we want to check horizontal locations for the wind.

  • So we're gonna first loop over all of the columns, and then we're also gonna have a loop over all of the rose.

  • And what this loop is gonna be over is not every single position, but over all of the possible starting positions for a horizontal win.

  • So if we think about our board, horizontal wind can start this spot.

  • This bought this, but in this spot, it can't start here because you can't go four over from this location.

  • So this is our last column.

  • The third column.

  • In terms of indices and then upwards, we can go all the way to the top vertically because it's so this half sorry, you can't really see, but we're making ah, box around that half is where our starting locations can be for this first, um, this first check.

  • So we're iterating over the columns, so it can only be the number of columns, and we have to subtract three because three of those columns couldn't actually work.

  • So we're subtracting three off of that one, and then all the roads could work, so that's totally fine.

  • So now we're gonna check all the foreign replication.

  • So is gonna look like something like that.

  • So if board row column So this is just indexing the matrix equals equals peace and bored row C plus one.

  • So this is taking the next one to the right.

  • So we're checking horizontally.

  • So we're only changing the columns equals equals peace and bored r c plus two equals equals peace.

  • And finally and board.

  • This is the fourth piece and no Ford C plus three equals evils piece.

  • Then we're gonna return.

  • True.

  • So we want to return to you the first time this happens.

  • We're not going to return this expression because that would return.

  • That would break out of this loop before we wanted it to.

  • Okay?

  • And so what?

  • Right, Right again.

  • This is not the best way, probably to write it.

  • You know, we have these magic numbers popping up, but it's just a very simple way to check for all those horizontal locations.

  • Right?

  • So let's do the same thing with vertical locations, vacations for when and actually, before I do that.

  • Let's just check to see if we can get some functionality on this.

  • So if Val education, we're going to write a If Stephen says if winning, move.

  • And so we're gonna say board and then the pieces one.

  • So if it's winning move, we're gonna just print out.

  • Ah, player one winds, Congrats.

  • Hey.

  • Okay, let's just see if that works with the horizontal real quick.

  • And then we're also gonna want to set this game over variable too.

  • True, because the game is in fact over if the movie is winning.

  • So let's just run that real quick.

  • Python on current file.

  • Okay, Clear Won't make your selection three.

  • Hey, it says player one wins, and we, I guess, accidentally printed the board at one extra time.

  • But, you know, we did get that functionality.

  • It did check that horizontal win.

  • So I think that looks good.

  • Obviously, um, you want to test these, like, very thoroughly, But for the sake of the time of this video, I'm going to just start going to the horizontal and the vertical location.

  • So think about where vertical locations can start.

  • Um can start.

  • We need four up so I can start.

  • It's pretty much the opposite of the horizontal.

  • So vertical could start all of this bottom section because we need four up, But it could be in any column, so it's gonna be pretty similar to the last loop, but we're gonna have to change the row.

  • Um, so you'll see in a sack shift.

  • Run out the change instead of the column count doing for seeing column count minus there.

  • Ever have to do road count minus three because we can't start at the top row, and then we're gonna have to add these pluses.

  • Toothy Rose.

  • Actually, Gro plus one row plus two.

  • And the last one is real Plus three and then read it.

  • And once again, like see if you could figure out how to manipulate this.

  • These equations toe work for any length of aboard.

  • And also, let's say, may we wantto make again those, like connect six.

  • Like, would be a cool challenge for you guys to try to build these functions so that they could be any number of columns, any number of rows in any number of pieces for the winning length.

  • Okay, so let's check to see if the vertical locations now we're gonna run this again real quick.

  • So tools both on current file three.

  • Cool.

  • It works again.

  • So we see have the four in a row with one's right here, and it's those player one wins.

  • Congrats.

  • So that looks good.

  • Now we have to get to the little bit of the trickier.

  • Um, things were not the check for the first.

  • We'll check for the positively slopes diagnose here.

  • I was gonna make a separate method to check for the negatively sloped and you'll see why we need to do this in a sack.

  • Diagon knows.

  • All right, so let's think about it.

  • We're gonna think about it the same way.

  • Where are possible starting locations that we could have a positively sloped diagonal.

  • Well, we could start here and go up.

  • We'll start here and go up here and go up.

  • So I think the last piece we can start here and go up.

  • So this is gonna be the top row, and we can't go any farther than this piece right here.

  • So that looks like we're doing row count minus three and column count, minus three.

  • So All right, so then I will just copy this code C.

  • I don't know what happened, see, and I'll paste that in right here.

  • All right, so we're gonna have to subtract three from column count and from row account.

  • And then how this is gonna increment as you start with that initial starting location, and then we need to plus one toe pull things because it's ah, slope.

  • It's not just a horizontal or vertical now.

  • So with that, do the addition step for both of these.

  • Okay, Cool.

  • And as we've been doing.

  • Let's just check to see if we can get a diagonal.

  • When Here, player one.

  • Make your selection.

  • I'll just start in the all right.

  • We're almost there s so close.

  • Don't screw this up now, Keith.

  • Okay?

  • And we'll check here.

  • Cool the diagonal, their work.

  • So that looks like it's working too.

  • And then finally, we need to do the negatively slope diagonals.

  • And so if we think about negatively sloped agonal sze, they can start at the top and go downwards.

  • But they couldn't start any lower than this right here.

  • This is the last one.

  • They could start it because they have to go down for so that looks like it would be the top rose.

  • And then also the call mes minus three.

  • So we're gonna start the rose at three, and we're gonna have to start the columns in the normal normal location.

  • So is gonna start from three to the row count.

  • And so it's three.

  • Because if you think about it, Z, this is zero throw.

  • This is the first row, second row, third row.

  • So even though it's actually the fourth up, its third index So that's where We're starting at three.

  • And that's gonna go all the way to the top.

  • And the column counts, actually, good as it ISS.

  • And so this is gonna have to Now go.

  • It's gonna go positively over in the column direction.

  • What's gonna go down routes and negative one here native to here.

  • And this is just a negative slope.

  • You you know, you have one and direction positive.

  • One direction.

  • Negative.

  • This will be native three.

  • So let's test to see if this works.

  • Come on.

  • More of you Python current file.

  • Okay, Just build up the left side first.

  • Okay, too.

  • Okay, Okay.

  • Okay.

  • Okay.

  • Rose to the native diagonal there.

  • So, player one, you can go three, then player to two, then too cool.

  • The native diagnose work now, too.

  • Okay, so that looks like we have all the possible winning directions.

  • You should more thoroughly test to make sure the all the edge cases work, but to me, that looks pretty good.

  • So we're also going to implement the functionality for player to in this main game loop.

  • Okay, so this is a player too player to win.

  • Some grads came over true.

  • Okay?

  • And if you wanted to, you could just break out of the the loop.

  • Um, if you didn't want to see this board and the turns changing at the end, Okay, so that's we've now finished the command line version of the game.

  • So we're gonna take this game, and we're gonna expand on it to actually make it look nice.

  • So the first thing we're gonna do to do that is import a library called Pi Game.

  • And just like the num pie library.

  • If you don't have pie game installed, just open up a new terminal window and type in pip install pie game.

  • As you can see, I already have it.

  • Cool, I And now what we're gonna do is we're not to start out by initializing pot pie game.

  • So this you have to do in any pie game project.

  • So before game loop starts, gonna do pie game dot net.

  • Okay.

  • And then what we're gonna have to do is define our screen size.

  • How big we won our game to be.

  • So if I really quick, just build the finishers and I have you can see that, you know, it's pretty.

  • You know, you can kind of break this game down into squares.

  • I would say you have squares that represent each column in each row, and then I had this one extra row at the top.

  • So we're going to find each one of those squares as, ah, 100 pixels.

  • So the sizes we're gonna talk about right now are all in pixels.

  • So the square size it could be 100 pixels, and then our with for our screen is going to be the number of columns.

  • So the column count times the square size cool and the height is going to be the row count times square size.

  • And actually, if you saw my the game, I just dragged in.

  • I'll drag it in overtime.

  • I actually added one additional row because I wanted this spot where I could display this circle that I'm dropping so we'll actually make this row account plus one times square size for the height and that will be packaged together nicely in a variable called size, which will be a to pull of with comma height and then to get pie game to actually read that we need to type in the following screen equals pi game dot display got set mode and then will have it read in the size.

  • And if you're wondering where I'm kind of just magically getting these functions from, I'm looking at the documentation on the pie game site.

  • So if you go to pie game dot org's slash stocks, you can find all the kind of functions that I'm using.

  • I'll post a link to that in the description we're gonna real quick test to see.

  • Our screen is actually working so you can just run control B.

  • And as you can see, the window popped up and then it disappeared.

  • Will handle why it's disappearing in a second.

  • So it looked like, though is reading in that screen.

  • Cool.

  • So let's now create a function called We'll Do a Couple Things.

  • So I think First will define a function called Draw Board, and this will just be like print board that we defined up here.

  • But now we're actually gonna draw it with, uh, pie game graphics.

  • So Draw board is gonna have to take in the board, and that's about it.

  • And I actually passed this for now because we're gonna make some changes to our loop before we do this drought board.

  • So the first major change we're going to do to our loop is pi game is an event beast game library.

  • So my game kind of works and allows you to function in the game by just reading all of your movements of your keys.

  • You press the mouse buttons, you click the mouse like how you move your mouse.

  • It reads those all in as individual events.

  • So that looks like something like that.

  • So for event in pie, game dot event taught get.

  • And as I just said, events are like mouse motion mouse button down, key down, et cetera.

  • So we're gonna read in, We're gonna drop a piece by clicking down, So that's one of the important events will have to get.

  • So we're gonna first do just kind of follow me on this one event type.

  • If the vent type equals equals pi game dot Quit.

  • So this is just something you wanna handle in all of your games that you make just allowing your game to properly exit out.

  • If you click the button here in the top, right, that X out ex is out of it.

  • So if that happens, we have to do a system exit just so it properly shuts down.

  • And to get this sis right here, we're gonna have to import that into our project was Well, that means system.

  • And that comes to fault in any python installation.

  • Okay, System makes it now to get to the more interesting stuff.

  • The event that we really are going to care about to start is, um, mouse button down.

  • So if event dot type equals equals pi game dot mouse, button down and all of the different events you can also find on the pie game website under the docks, the game is gonna run by us clicking down on a specific spot in the screen where we want to drop the piece.

  • So instead of reading in the calm, we want to drop it in, as we did previously.

  • Now this columnist would be populated by where we click.

  • So I'm gonna really quick put all of this all of this behavior into this mouse button down event type because now the events of us dropping the peace always happen when we click the mouse button down so we don't want it to happen.

  • otherwise, we don't want it to be asking for this.

  • Input writes a column equals and this is gonna be where we click on the screen.

  • So just for now, I'm going to just kind of comment out this stuff just so it doesn't run on us while we're testing troll.

  • And that's just real quick.

  • See if this fixed our error of the screen disappearing right when it pops up.

  • Uh, what happened?

  • Uh, prince.

  • And as you can see now, we have the screen, and it's not, you know, it's staying here.

  • So that's because we actually added in this event loop here and knows the kind of continue while these events are happening and the exit out will be handled properly by this.

  • The system exit.

  • Cool.

  • All right, so we have our screen looking pretty good, but doesn't have any graphics.

  • Obviously, Um, so we're gonna implement the drop award function now, so if you think about it, I'll drag in the finish one I have again ruin a draw, some sort of rectangle for each of these slots and then a black circle inside those rectangles.

  • And then we'll have to draw this afterwards.

  • This piece that we drop.

  • And then whenever we do drop a piece.

  • The one or two that's in our command line based game want to become like a red circle or a yellow circle based on what we're doing.

  • So let's ah, implement this.

  • So first, we're gonna illiterate through kind of every spot in our board.

  • So for are or for will say Sian Range column count and then we'll do the same thing for are in range row count, just as we did above here.

  • When we're getting through all the spots, well, we need a initially just dried as like an open, you know, Ah, blue blue rectangle.

  • And then in that blue rectangle we want a black circle So we're gonna do ah pie game dot draw function.

  • So first we gonna draw a blue rectangle.

  • Um, so that looks like kind of our game board.

  • And then the black circle inside of that will be the open slot.

  • So we're gonna draw that on the screen, and I'm gonna drag in again the the lie, the library so I can see exactly what I'm doing.

  • So I was going to see here pie game about drywall wrecked We need to take in the surface the color the rectangle we want to draw and then the with So the screen is the surface we're in a drought on the color is we want a blue color So I'm gonna define blue as a global variable Global static variable up above This is gonna be an RGB value.

  • So we're gonna say it's 00 comma 200 that means 2 55 or so.

  • So it's gonna be a very blue, um, rgb about because this means read this means green and this means blue and only color that's actually has some value.

  • Is the blue here?

  • So the color we're gonna say is blue.

  • We just defined that.

  • That's the RGB value.

  • Now we didn't define our rectangle, So our rectangle is going to be.

  • You need to have four different things to define your rectangle.

  • You need tohave the size of the width and height and then also the position.

  • So the position is going to be This might be take a little playing around with to get this, but it's going to be school, see time.

  • So these air number zero toe you know the column count and zero to the row account.

  • There's gonna be C times square size because we want the actual This is the top left corner of it, and that's going to the And then our position on the Y axis is gonna be our times.

  • The square size and our heightened with are going to be other two parameters of this.

  • What?

  • That make up, Ah, rectangle object.

  • And that's just gonna be It's gonna be a square.

  • So it's wear size, square size, heightened with are the same and the with up argument that I showed was in the documentation.

  • As you can see, it defined a zero.

  • So that's optional and think that's just the outline, like the line that surrounds the square.

  • So we don't need to implement that.

  • All right, let's test to see if just these rectangles draw properly.

  • So down here, we'll just do a draw board taking the board a CZ we did here and then what we have to do whenever we want to update our display is du pi game dot display dot update and I will make sure that we actually see what we're supposed to say so we'll build that real quick.

  • Oh, and as you can see, we have this just giant mound of blue.

  • And the one problem I see right now is it's not actually opening up.

  • The I wanted the top to be open so we could have a piece that ah, swings around it.

  • So it shows us where we're dropping it.

  • So I think the problem with that is because our access starts at 00 We actually need ah to shift down by one square size to kind of account for that offset that we left for that space.

  • So we'll have to add a square size here.

  • Now I build this again, and as you can see, it looks proper.

  • Now we'll need a fill in some circles to represent the the slots.

  • We'll do that by drawing a circle on pie game, and that's also in the documentations with pie game dot draw dot circle and that's gonna take in the surface of a screen.

  • And now we need ah color.

  • So I think a good color would be just black, so well defined, black up above two and black and RGB is just zero.

  • Everything zero 00 Okay, so this is black.

  • And then let's drag in.

  • The documentation were quick to see how we're gonna finish off this circle.

  • Circle, circle, circle.

  • Okay, position and then radius.

  • So this is gonna be the position of the center of the circle, as you see in the documentation.

  • And the radius will probably want to be a little bit smaller than our square size.

  • Just so there's, um the circles aren't touching, so let's define a radius too.

  • So our radius is going to be I'm going to find that under the width and height or not.

  • So our radius is going to be a little bit less than the square size, so well, D'oh, I'm gonna make this also, they have the energy values, I believe.

  • So once we start getting into division, they might get a little bit messy.

  • So, to me, in square size, divided by two because it needs to be, the radius is half the diameter, and the diameter would be the full square size.

  • Then we'll just minus an arbitrary like senator value off of that.

  • So now we can draw our circle with that radius.

  • We'll have to do the position first.

  • So the position Where is it?

  • I forget.

  • Oh, it's in drop board.

  • The position's gonna be so if this the top left of the rectangle, Our position for the center of the circle is going to have to be that then, with some offset so square size than our times square size plus swear size.

  • And the offset is going to have to be like half of it because we're talking about the radius.

  • So half of the rectangle is going to be adding an additional square size divided by two, adding a square size divided by two.

  • All right, let's see what happens now.

  • Oh, and then I actually went to do the actually specify the radius.

  • So the radius is what we define.

  • Just a second ago, build What happened?

  • Ah, yeah.

  • Interviewer Argument expected.

  • Okay, so it looks like this division caused us to have some floats on our code.

  • So we're gonna have to actually make this end a pie game.

  • It seems like only accepts imagers, so make sure that everything you every position and radius value you make a editor.

  • Come on, baby.

  • Let's go.

  • Cool.

  • Yea, we got aboard, we'll finish implementing this graphics will implement the peace dropping and then a nice little piece follower up here.

  • So to start this video, navigate down to the main game loop before when we're selecting which calm we wanted to drop a piece in.

  • We mainly typed in a number between zero and six to specify this.

  • Now that we have a graphic, we wanted column that we drop the piece in to be dependent on where we click.

  • So if I click on the left side of the screen, we wanted to drop the piece of the left comfort Click the middle, the middle calm, et cetera.

  • So where we dropped the peace depends on the X position of our mouse pointer.

  • So, luckily for us, pie game makes using the getting the exposition of your mouse super easy.

  • So if you go to the pie game documentations under the events, it lists all of these events and then it lists the properties you can get on these events.

  • So for us, we care about mouse button down, and we care about the position.

  • So position gives us an X comma y to pull of where we clicked and I can use that as follows so I can do Prince Prevent dot position, and then I can rerun their game.

  • And so, as I click on the screen, you'll be able to see in the bottom left the positions where I'm clicking.

  • So I click in the top left of the screen.

  • It's about zero commas here.

  • That's where actually starts.

  • If I click on the bottom right of the screen, that's the the full dimension of our game, and we specify that to be 707 100.

  • So these are the pixel values of where we're clicking to develop a kind of way to select the column based on where we click.

  • We need to try to find a pattern on clicking in these different columns.

  • So I'm gonna do that real quick.

  • And if we look at all of these cliques, I just made you see the first click is between 0 102nd Click is between 102 100 203 100 cetera.

  • So the last column is between 607 100 so we can somehow around these numbers down to just give us 0 to 6.

  • We're back at where we were when we mainly typed in those numbers.

  • So we're gonna do that real quick, so that's we can go ahead and uncommon all this code.

  • And actually, this is supposed to be a comment.

  • So we an uncommon this code right here.

  • And we could just comment this out for now.

  • So column So we want that to be I will say that the exposition.

  • So this is a to pull in the X values fair.

  • So the position of acts is equal.

  • Thio event dot position.

  • And then it's the zero element of that.

  • The column now is going to be so this is between zero and 700.

  • So the calm we can get using, we're gonna also just to make this our life's easier.

  • We're gonna import a library called Math.

  • This comes to fault in any python installation.

  • So we're going to get what we want to drop it by doing position acts.

  • Then we're gonna divide everything by 100 because this would give us a range between zero and seven instead of zero in 700.

  • So the first thing going to do is divide it by 100 and 100 remember, is what we define our square sizes.

  • So to make her coat a little bit more robust to changes, we're gonna do position X divided by square size.

  • And then we want this to be a whole number and energy value, So we're gonna have to take the floor of this division, so that will round it down to the nearest imager.

  • So we're gonna do math thought floor, and then the final change we're gonna have to make is we just need to make sure that the column is an integer because we don't We can't take the index of, ah, float value of decimal value.

  • So we'll just ensure that it's an injured by just surrounding with it in't.

  • And now we should be able to see when we click on the screen, we should see our board building up, and we can copy the same thing for player, too.

  • And we'll uncommon this becoming that uncommon.

  • All of this, and then we'll make player to be able to select the peace in the same way.

  • So well, say position X equals eventually vent opposition zero.

  • And then the column now.

  • Oh, my God.

  • and messy.

  • Okay, will delete this line.

  • Cool.

  • So let's see what happens when we build a game.

  • So now we have this.

  • Ah, where's actual game window?

  • What happened, like, didn't pop up for some reason.

  • Click down the middle.

  • If you can see over here on the bottom, right, our game did pick up that click.

  • So I click in the middle again.

  • Keep clicking on the middle and it keeps reading that I'm dropping the pieces ends.

  • That looks really good.

  • Now we actually have to just represent that on the screen.

  • So to do this, we'll just make a small change to our draw board function that draws the graphics.

  • So you never get to draw board and we'll just do, Ah, if statement here just say so.

  • The rectangles always drawn the blue rectangles that make up the board.

  • The black circle represents the empty square.

  • So if board I mean ah, board row column equals equals zero.

  • Then we wanted to be a black wanted to be empty if else f board Our row column.

  • So this is just indexing our matrix equals equals one.

  • So that's what we see here.

  • Player one dropped it in the middle.

  • Then we want to draw a circle so we could just copy this line because we know that this is in the right position.

  • We're just gonna have to change the color up, so we don't want it to be black.

  • We'll just use red and yellow player.

  • One will be red, so that's going to be read.

  • And this is not a built in thing.

  • We're not defined red, so we'll define red rape.

  • Aloe Blacc.

  • These air RGB values so our needs be have a value, and the other two can be zeros.

  • So this will give us a nice, bright red.

  • And then while I'm up here doing this, I'm also going to define yellow.

  • Yellow is both red and green.

  • Its combination of both red and green and RGB.

  • So to 55 to 350 So now we have red and yellow for player one and player, too.

  • Where was that?

  • Okay, Yeah, it's red.

  • And then one last line, which will be the else condition L b If board are coming, R r C is too.

  • So that's gonna be pie game or actually almost basis it again by game, and then instead of black, we'll make this one yellow.

  • And then one thing that might not be intuitive is that whenever we make changes to our game board after this is all done, this loop has been iterated through.

  • We're gonna wanna call pie game.

  • Don't display that update that will rear ender the screen with the new changes.

  • So let is let us.

  • And also we're gonna have to add the draw board resort.

  • We're printing board on every turn, but we're going to draw board here as well.

  • Okay, moment of truth.

  • Clicking right here.

  • No, what happened?

  • So it looks like it's populating.

  • It's just populating in the wrong spot.

  • And the reason for this is because of how our axes is set up.

  • So as you recall, when I click down on the top left, this is 00 and this is the 707 100 space.

  • So in our game, though, this is the 00 piece, but it just kind of flipped.

  • So when we printed the board, we called that n p dot flip function.

  • So we're just gonna have to figure out a way to offset this to actually be in the bottom of the screen as opposed to the top.

  • So to do that, we can just use our height smartly.

  • So what we really need to do is we're starting at the bottom, so we need to subtract whatever we're actually trying to build up from the bottom from our height.

  • So height minus this minus this.

  • Let's try running us.

  • What is happening?

  • All right, So we still having our issue.

  • And the reason we're now having an issue is because this piece right here is still filling in the old fashioned way.

  • So they're kind of like feeling in black and red and yellow tiles, all on different axes.

  • So what we're gonna do, make our life easier, is we're going to take out these two lines into another loop.

  • I'm gonna leave those real quick, and we're just gonna do a whole another loop of, So just try to bear with me here.

What's up, guys?

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it