Coding

How to Program Connect 4 in Python! (part 4) – Game Animation & Additional Features

  • 00:00:00 what's up guys and welcome to the fourth
  • 00:00:02 video in my program in Connect four in
  • 00:00:04 Python series in the last video we
  • 00:00:07 implemented the background graphics for
  • 00:00:09 our game but if I click around on this
  • 00:00:11 screen nothing actually happens so in
  • 00:00:14 this video we'll finish implementing
  • 00:00:15 this graphics we'll implement the piece
  • 00:00:17 dropping and then a nice little peace
  • 00:00:19 follower up here just a few quick notes
  • 00:00:22 before I begin if there was a feature
  • 00:00:25 you wanted to know how to implement but
  • 00:00:27 that I didn't actually cover myself in
  • 00:00:28 these videos feel free to leave a
  • 00:00:30 comment down below and I'll try my best
  • 00:00:32 to get back to you as quickly as
  • 00:00:33 possible
  • 00:00:35 also if you enjoyed this series please
  • 00:00:38 please please leave me some suggestions
  • 00:00:41 for future programs that I can write
  • 00:00:42 make tutorials on I'm always looking for
  • 00:00:44 new content alright let's get started so
  • 00:00:48 to start this video navigate down to the
  • 00:00:51 main game loop before when we are
  • 00:00:54 selecting which column we wanted to drop
  • 00:00:56 a piece in we mainly typed in a number
  • 00:00:59 between 0 & 6 to specify this now that
  • 00:01:04 we have a graphic we want the column
  • 00:01:06 that we drop the piece in to be
  • 00:01:08 dependent on where we click so if I
  • 00:01:09 click on the left side of the screen we
  • 00:01:12 want it to drop a piece in the left
  • 00:01:13 column if I click the middle the middle
  • 00:01:15 column etc so where we drop the piece
  • 00:01:18 depends on the x position of our mouse
  • 00:01:22 pointer so luckily for us PI game makes
  • 00:01:26 using the getting the x position of your
  • 00:01:29 mouse super easy so if you go to the PI
  • 00:01:33 game documentation under the events it
  • 00:01:36 lists all of these events and then it
  • 00:01:38 lists the properties you can get on
  • 00:01:40 these events so for us we care about
  • 00:01:42 mouse button down and we care about the
  • 00:01:46 position so position gives us an X comma
  • 00:01:48 Y tuple of where we clicked and I can
  • 00:01:53 use that as follows so I can do print
  • 00:01:56 event dot position and then I can rerun
  • 00:02:01 our game and so as I click on the screen
  • 00:02:04 you'll be able to see in the bottom left
  • 00:02:05 the positions where I'm clicking so if I
  • 00:02:08 click in the top left of the screen
  • 00:02:10 it's about 0 comma 0 that's where our ax
  • 00:02:13 starts if I click on the bottom right of
  • 00:02:15 the screen that's the full dimension of
  • 00:02:18 our game and we specify that to be 700
  • 00:02:21 700 so these are the pixel values of
  • 00:02:23 where we're clicking to develop a kind
  • 00:02:29 of way to select the column based on
  • 00:02:32 where we click we need to try to find a
  • 00:02:33 pattern on clicking in these different
  • 00:02:36 columns so I'm going to do that real
  • 00:02:38 quick and if we look at all of these
  • 00:02:41 clicks I just made we can see the first
  • 00:02:43 click is between 0 and 100 second click
  • 00:02:46 is between 100 and 200 200 and 300 etc
  • 00:02:50 so the last column is between 600 and
  • 00:02:53 700 so we can somehow round these
  • 00:02:55 numbers down to just give us 0 to 6 or
  • 00:02:59 back at where we were when we mainly
  • 00:03:01 typed in those numbers so we're gonna do
  • 00:03:04 that real quick so let's we can go ahead
  • 00:03:06 and uncomment all this code and actually
  • 00:03:09 this is supposed to be a comment so we
  • 00:03:11 can uncomment this code right here and
  • 00:03:14 we can just comment this out for now so
  • 00:03:18 column so we want that to be will say
  • 00:03:23 that the X position so this is a tuple
  • 00:03:25 and the X values first so the position
  • 00:03:28 of X is equal to event dot position and
  • 00:03:32 then it's the zeroth element of that the
  • 00:03:38 column now is going to be so this is
  • 00:03:40 between 0 and 700 so the column we can
  • 00:03:45 get using what we're gonna also just to
  • 00:03:47 make this our life's easier we're going
  • 00:03:49 to import a library called math this
  • 00:03:51 comes default in any Python installation
  • 00:03:53 so we are going to get what we want to
  • 00:03:57 drop it by doing
  • 00:04:04 position X then we're gonna divide
  • 00:04:08 everything by a hundred because this
  • 00:04:10 would give us a range between zero and
  • 00:04:12 seven instead of zero in 700 so the
  • 00:04:16 first thing we're going to do is divide
  • 00:04:17 it by 100 and 100 remember is what we
  • 00:04:21 define our square size is so to make our
  • 00:04:22 code a little bit more robust to changes
  • 00:04:24 we're going to do position X divided by
  • 00:04:27 square size and then we want this to be
  • 00:04:31 a whole number an integer value so we're
  • 00:04:33 gonna have to take the floor of this
  • 00:04:35 division so that we'll round it down to
  • 00:04:37 the nearest integer so we're going to do
  • 00:04:39 math dot floor and then the final change
  • 00:04:44 we're gonna have to make is we just need
  • 00:04:47 to make sure that the column is an
  • 00:04:48 integer because we don't we can't take
  • 00:04:51 the index of a float value a decimal
  • 00:04:54 value so we'll just ensure that it's
  • 00:04:56 integer by just surrounding it with it
  • 00:04:58 int and now we should be able to see
  • 00:05:02 when we click on the screen we should
  • 00:05:05 see our board building up and we can
  • 00:05:07 copy the same thing for player two and
  • 00:05:10 we'll income at this time with that
  • 00:05:16 uncommon all of this and then we'll make
  • 00:05:19 player to be able to select a piece in
  • 00:05:21 the same way so we'll say position x
  • 00:05:24 equals event then top position 0 and
  • 00:05:27 then the column now oh my god and messy
  • 00:05:37 okay we'll delete this line cool so
  • 00:05:41 let's see what happens when we build the
  • 00:05:43 game so now we have this where's the
  • 00:05:47 actual game window what happened oh it
  • 00:05:49 liked in pop up for some reason so click
  • 00:05:52 down the middle if you can see over here
  • 00:05:55 in the bottom right our game did pick up
  • 00:05:57 that click so I click in the middle
  • 00:05:58 again keep clicking on the middle and it
  • 00:06:02 keeps reading that I'm dropping the
  • 00:06:03 pieces in so that looks really good now
  • 00:06:05 we actually have to just represent that
  • 00:06:06 on the screen so to do this we'll just
  • 00:06:10 make a small change to our draw board
  • 00:06:13 function that draws the graphics
  • 00:06:16 so we navigate to draw board and we'll
  • 00:06:20 just do a if statement here just say so
  • 00:06:23 the rectangles always drawn the blue
  • 00:06:26 rectangles that make up the board the
  • 00:06:29 black circle represents the empty square
  • 00:06:31 so if board I mean now board row column
  • 00:06:40 equals equals 0 then we want it to be a
  • 00:06:43 black we want it to be empty if else if
  • 00:06:49 board our row columns so this is just
  • 00:06:54 indexing our matrix equals equals 1 so
  • 00:06:57 that's what we see here player 1 dropped
  • 00:06:59 it in the mid hole then we want to draw
  • 00:07:03 a circle so we can just copy this line
  • 00:07:05 because we know that this is in the
  • 00:07:06 right position but we're just gonna have
  • 00:07:08 to change the color up so we don't want
  • 00:07:13 it to be black we'll just use red and
  • 00:07:15 yellow player 1 will be red so this is
  • 00:07:17 gonna be red and this is not a built in
  • 00:07:20 thing we're not to define red so we'll
  • 00:07:23 define red right below black these are
  • 00:07:26 RGB values so our needs to be have a
  • 00:07:29 value and the other two can be zeros so
  • 00:07:32 this will give us a nice bright red and
  • 00:07:35 then while I'm up here doing this I'm
  • 00:07:37 also going to define yellow yellow is
  • 00:07:40 both red and green as the combination of
  • 00:07:42 both red and green in RGB so 255 2 3 5 0
  • 00:07:45 so now we have red and yellow for player
  • 00:07:49 1 and player 2 where was that
  • 00:07:55 okay yeah shred and then one last line
  • 00:07:59 which will be the else condition LV if
  • 00:08:06 board are common or are C is 2 so that's
  • 00:08:11 gonna be PI game well actually I'll just
  • 00:08:13 paste this in again PI game and then
  • 00:08:15 instead of black we'll make this one
  • 00:08:18 yellow
  • 00:08:22 and then one thing that might not be
  • 00:08:25 intuitive is that whenever we make
  • 00:08:29 changes to our game board after this is
  • 00:08:33 all done this loop has been iterated
  • 00:08:35 through we're going to want to call PI
  • 00:08:37 game dot displayed on update that will
  • 00:08:39 re render to the screen with the new
  • 00:08:40 changes so let is let us and also we're
  • 00:08:44 gonna have to add the draw board we use
  • 00:08:47 the word we were printing board on every
  • 00:08:49 turn but we're gonna have to draw a
  • 00:08:50 board here as well okay moment of truth
  • 00:08:55 clicking right here
  • 00:08:57 no what happened so it looks like it's
  • 00:09:02 populating it's just populating it in
  • 00:09:04 the wrong spot and the reason for this
  • 00:09:06 is because of how our axes is set up so
  • 00:09:11 as you recall when I click down on the
  • 00:09:14 top left this is the 0 0 and this is the
  • 00:09:19 700 700 space so in our game though this
  • 00:09:25 is the 0 of 0 piece but it just kind of
  • 00:09:28 flipped so when we printed the board we
  • 00:09:31 call that n P dot flip function so we're
  • 00:09:33 just gonna have to figure out a way to
  • 00:09:34 offset this to actually be on the bottom
  • 00:09:37 of the screen as opposed to the top so
  • 00:09:40 to do that we can just use our height
  • 00:09:44 smartly so what we really need to do is
  • 00:09:47 we're starting at the bottom so we need
  • 00:09:50 to subtract whatever we're actually
  • 00:09:51 trying to build up from the bottom from
  • 00:09:53 our height so height minus this height
  • 00:09:59 minus this let's try running this what
  • 00:10:05 is happening all right so we're still
  • 00:10:09 having our issue and the reason we're
  • 00:10:10 now having an issue is because this
  • 00:10:13 piece right here is still filling in the
  • 00:10:15 old fashioned way so they're kind of
  • 00:10:17 like filling in black and red and yellow
  • 00:10:19 tiles all on different axes so what
  • 00:10:22 we're going to do make our lifes easier
  • 00:10:24 is we're going to take out these two
  • 00:10:29 lines into another loop so when you're
  • 00:10:33 going to leave those real quick
  • 00:10:35 and we're just gonna do a whole nother
  • 00:10:38 loop of so just try to bear with me here
  • 00:10:42 I'm gonna copy this stuff we're gonna
  • 00:10:43 iterate through everything again this
  • 00:10:46 might not be the smartest way but it's
  • 00:10:48 just gonna be very clean for us to deal
  • 00:10:50 with because we're always going to build
  • 00:10:54 our we're always going to build our
  • 00:10:57 background and then fill in the piece
  • 00:10:59 afterwards as opposed to like try to
  • 00:11:01 fill in our pieces as we're building the
  • 00:11:02 pack round so I'm thinking this will
  • 00:11:05 work well this spacing is just messing
  • 00:11:09 me up and these lines are so long there
  • 00:11:12 you go
  • 00:11:13 okay so if board RC is with one we're
  • 00:11:17 gonna fill it with that and then we can
  • 00:11:19 just delete this line bring this back
  • 00:11:25 okay
  • 00:11:26 so now we have two loops running but
  • 00:11:28 this will kind of fix our problem of
  • 00:11:31 them building our board out on different
  • 00:11:34 accesses so let's try running it again
  • 00:11:36 what the heck if board RC equals one
  • 00:11:42 we're gonna that make this an else–if
  • 00:11:43 otherwise it's gonna fill out the board
  • 00:11:48 for all the empty spaces at the start of
  • 00:11:51 the game equals two all right cool let's
  • 00:11:55 see what happens now it looks like it's
  • 00:11:59 working properly but it's just offset by
  • 00:12:02 one square size and that's because of
  • 00:12:05 this right here we are initially
  • 00:12:07 accounting when we were building
  • 00:12:08 downwards we're initially accounting for
  • 00:12:10 this but now that we're building upwards
  • 00:12:12 we can delete that from it from the
  • 00:12:14 height so we're gonna delete this square
  • 00:12:16 size here we're gonna delete this square
  • 00:12:19 size here and we should now fully have
  • 00:12:22 it working build yeah it looks pretty
  • 00:12:28 good huh
  • 00:12:30 all right cool so now that we've pretty
  • 00:12:33 much fully implemented a game with
  • 00:12:34 graphics we're gonna add a couple
  • 00:12:36 additional features so the first feature
  • 00:12:38 we're going to add is add this little
  • 00:12:40 scroll wheel so that before we drop a
  • 00:12:42 piece we can see what color the piece is
  • 00:12:44 and where we're going to drop it so to
  • 00:12:46 do that we're gonna add a new event
  • 00:12:49 we're gonna
  • 00:12:49 tract a new event and that's going to be
  • 00:12:51 the event type equal to PI game mouse
  • 00:12:55 motion and once again all of the
  • 00:12:58 different events you can use are listed
  • 00:13:00 in the pie the pie game documentation
  • 00:13:02 and just like mouse button down the
  • 00:13:06 mouse motion also has a position
  • 00:13:11 property so I can do position x equals
  • 00:13:17 event dot position 0 so this is going to
  • 00:13:20 get me a lot more events though because
  • 00:13:22 it's always tracking whenever I'm making
  • 00:13:24 any motion so this is going to be
  • 00:13:25 constantly updating so now we're going
  • 00:13:28 to use this position and draw some
  • 00:13:31 circles based on where that position is
  • 00:13:33 so if the turn equals equals 0 that's a
  • 00:13:38 player one's going then we're gonna do
  • 00:13:39 PI game dot draw dot circle screen the
  • 00:13:45 surface color is red because it's player
  • 00:13:48 1 the next thing we need to put in the
  • 00:13:52 circle is the position so the x position
  • 00:13:54 this is the center of the circle it's
  • 00:13:56 gonna be at position X wherever our
  • 00:13:58 mouse is then we just want it to be
  • 00:14:00 offset enough so that the full circle
  • 00:14:02 can draw so we'll just make this square
  • 00:14:05 size divided by two and then finally we
  • 00:14:09 need to specify the height of or the the
  • 00:14:12 radius of the circle and that's just the
  • 00:14:13 radius we've been using for all the
  • 00:14:15 tiles else this means it's turn equals
  • 00:14:18 equals one its player two's turn and
  • 00:14:21 we'll just copy this and draw it and now
  • 00:14:26 it's going to be actually yellow
  • 00:14:27 so let's look what that looks like if we
  • 00:14:30 build that all right build okay I forgot
  • 00:14:39 to get the display update just like we
  • 00:14:41 did in the draw function so pi game
  • 00:14:45 about display dot update build oh it
  • 00:14:50 looks good but it's just not ever
  • 00:14:52 deleting the circles so what we're gonna
  • 00:14:54 do to fix this is right before we
  • 00:14:57 actually draw the circle we'll just draw
  • 00:15:00 a rectangle that's black
  • 00:15:03 we'll blackout any previous circles that
  • 00:15:05 we have drawn so pygame dot draw dot
  • 00:15:07 rectangle surfaces the screen color is
  • 00:15:11 black position is gonna start at the top
  • 00:15:15 left so that's zero zero it's gonna have
  • 00:15:18 with the whole width of the screen and
  • 00:15:20 then the height will be a square size
  • 00:15:23 because that's how big that buffer bar
  • 00:15:25 kind of at the top is and that should be
  • 00:15:28 good I think I might have one extra no
  • 00:15:32 yeah I have one extra parenthesis there
  • 00:15:36 yeah it looks good so now we have this
  • 00:15:39 game over drop drop drop drop drop that
  • 00:15:47 looks good
  • 00:15:48 cool and so one thing that you also
  • 00:15:50 might want to change is that if I win
  • 00:15:52 the game so when the game real quick
  • 00:15:54 with red it automatically closes right
  • 00:15:58 away so one thing we can do is we can
  • 00:16:01 add a weight PI game has a built-in
  • 00:16:03 weight function so what we can do is if
  • 00:16:07 the game over condition is true so if
  • 00:16:09 game over will call pi game time dot
  • 00:16:12 wait and this is the milliseconds you
  • 00:16:15 want to wait so 3,000 would equal three
  • 00:16:17 seconds so if I run this again one two
  • 00:16:24 three and I'll shut down automatically
  • 00:16:27 cool and then right before it shuts down
  • 00:16:30 we want to some notification that the
  • 00:16:31 player actually won so initially we were
  • 00:16:33 printing it but now we'll actually
  • 00:16:35 render the print function on our screen
  • 00:16:37 so that will look something like as
  • 00:16:42 follows so we're going to delete the
  • 00:16:46 line this is player one wins and we're
  • 00:16:49 gonna shil eyes a font up top so that
  • 00:16:53 will look like we'll do it right below
  • 00:16:56 that the first update so we'll do my
  • 00:16:59 font equals PI game dot font dot system
  • 00:17:03 font this is all in the documentation
  • 00:17:05 I'm just copying some previous code I
  • 00:17:07 wrote and the last time I wrote this I'd
  • 00:17:10 use a font called mono space but there's
  • 00:17:13 other options you can look at the
  • 00:17:14 documentation for all the details and
  • 00:17:16 we'll
  • 00:17:16 fontsize 75 that's just an arbitrary
  • 00:17:19 number that I found worked and then if
  • 00:17:22 we go down below to actually render that
  • 00:17:25 on the screen horizontally I can type
  • 00:17:28 the following I can say label equals my
  • 00:17:31 font dot render player 1 wins activation
  • 00:17:38 and then I believe this one right here
  • 00:17:42 that i just put in specifies the axes
  • 00:17:44 that it's on I'm not actually sure I
  • 00:17:47 might play around with that to check and
  • 00:17:49 then we want the color to be red because
  • 00:17:51 it's red and during that text red
  • 00:17:53 because player 1 1 and then what we have
  • 00:17:56 to do to get that on the screen
  • 00:17:57 do it quickly we could also use the PI
  • 00:17:59 game display it on update function but
  • 00:18:02 I'm going to do something a little
  • 00:18:02 different here I'm going to do a screen
  • 00:18:05 dot blit and that just updates that
  • 00:18:07 specific part of the screen and I toyed
  • 00:18:11 around with these values before I found
  • 00:18:13 that the XY pair where this will start
  • 00:18:15 at the top left of corner of this text
  • 00:18:17 starting at 40 comma 10 worked pretty
  • 00:18:19 well so let's see what happens when I
  • 00:18:21 run that we're gonna have red win player
  • 00:18:26 1 wins and the one thing is that tile
  • 00:18:37 gets in the way what we could
  • 00:18:40 potentially do we could potentially draw
  • 00:18:41 another black rectangle if we wanted to
  • 00:18:44 I don't know I'm not too bothered by I
  • 00:18:48 will fix it in one sec we're going to
  • 00:18:49 copy this for player 2 and I will say
  • 00:18:55 player 2 wins and the color is gonna be
  • 00:18:57 yellow now build so what happens if
  • 00:19:03 yellow wins I'm making this so hard on
  • 00:19:09 myself player 2 wins yay alright and
  • 00:19:17 [Music]
  • 00:19:18 maybe what we'll do is at the start of
  • 00:19:21 the mouse button down we will draw that
  • 00:19:24 black rectangle as well so we don't have
  • 00:19:26 that up annoying
  • 00:19:28 annoying tile getting in our way so
  • 00:19:30 right what every when we click the mouse
  • 00:19:32 button down that will make the thing
  • 00:19:33 disappear or not one more time player
  • 00:19:40 one wins it looks good and you can mess
  • 00:19:42 around with that as you see fit okay I
  • 00:19:45 mean that's like a pretty good game I'm
  • 00:19:48 pretty happy with it if you have any
  • 00:19:49 questions about it leave a comment below
  • 00:19:51 if you learned anything in this video it
  • 00:19:53 would mean a lot to me if you subscribe
  • 00:19:55 to my channel I'm gonna make a bunch of
  • 00:19:56 videos like this in the future also if
  • 00:19:59 there's enough interest I might make a
  • 00:20:02 Kinect for AI tutorial so how do you
  • 00:20:05 make your own AI to play connect four
  • 00:20:07 against you so that if you don't have a
  • 00:20:08 friend to play against in this connect 4
  • 00:20:10 game you can play against the computer
  • 00:20:12 that you design so I might do that in
  • 00:20:14 the future but let me know if you'd be
  • 00:20:16 interested in that alright thanks again
  • 00:20:17 for watching this whole series peace