Pygame Tutorial - Creating Tetris

Key Takeaways

hey guys and welcome to a new tutorial series so I was talking about doing this tutorial series but we could go and I finally got around to doing it so this is gonna be Tetris in Python with PI game now this is a pretty advanced tutorial a lot of the stuff I do in here assumes that you already have a basic knowledge of Python and you kind of know some of the syntax and you're not a complete beginner that being said if you are a complete beginner feel free to watch through C what you might understand you're probably gonna learn something along the way it just might be a little bit confusing because I'm kind of gonna speed through a few things that are I would consider like trivial right now okay so first step for this tutorial series is you guys have to download and install Pi game because that's the module we're gonna be using so I will put a link in the description and a card in the top right hand corner here to go and do that I have a video it's pretty quick and it kind of goes through any areas you might run through when installing PI games so watch that first and then come back here okay so let's just give a quick preview of what our game is going to look like so this is Tetris I didn't go too fancy with the graphics I pretty much just want to make sure that we get everything functional here and then you guys can play around and change stuff later on if you want to but yeah this is a fully functioning game you can see it's just like standard Tetris we have different colors shapes are falling down the screen shows us our next shape and there we go the road just cleared so that's all I'm going to show you for right now because I want to get into actually coding okay so pretty much what we're gonna be doing in this first tutorial is we're gonna be working a bit in the main function we're gonna be creating the grid we're gonna be talking about formatting shapes all the basics of just setting up for the rest of the tutorials so with the first step and what I need you guys to do is you're gonna download kind of like a starter file okay and that's just because if you see here I scroll through my file I got a lot of lists I got a few things set up here and you know what I could go through and type them all out but that's just a waste of a video because it takes a long time so to save yourself time and to save me some time what I'm gonna do is just put a link in the description it's a pastebin link click that link and download this code it's just gonna be all this it just has all the functions that we're gonna need for this and then it has these shape formats which I'm going to talk about in just a minute so go do that if for some reason paceman is not working let me know in the comments and I'll find another way to give it to you but I'm also going to put it in the pinned comment so that you can just copy and paste it from there as well I do recommend you check the indentation on it though because sometimes it messes up on paste bin and in the comments ok so now that you've got that downloaded we're working on that I'm gonna be working in pie chart if you don't know about pycharm don't worry about it you can just use ID ideally but they're just gonna save me a bit of time because it autocompletes variables it does some cool stuff so that's what I'm gonna be working in feel free to work in PyCharm feel free to work in whatever text editor you want just know that that's what I'm using it doesn't make a difference but some of the stuff I do in here you might not be able to do in ideally or sublime text or whatever you guys are gonna use okay so we've got that all the way we've got everything set up and now we're ready to actually start coding and understanding what's gonna be going on so Tetris is a fairly complex game you have shapes moving down the screen they're rotating around they're moving left and right when they hit the bottom they freeze in whatever position they're in and then if you have a full row complete like cubes they're not real clear and you keep going and obviously you lose the game if you stack up too many blocks and it goes up or above the top of the screen okay so this first variable is we need to set up is our screen width and our screen height so we got 800 700 here the next ones are play with and play height now this is the actual red box that you guys saw that's what these are representing so since in Tetris we have a 10 by 20 grid we need to make sure that our play with is exactly half of our play height so that we have perfect squares right so doing the math here that makes it 30 width and 30 height per block so that's our block size of 30 okay so now this top left and top left X and top left Y this represents the top left position of our actual play area that's so when we start drawing blocks and we start checking for like collision and stuff like that we just have these already set up and we don't have to deal with that so the math is pretty straightforward you guys could probably figure that out you don't need me to explain that okay shape formats so these and this is the longest part is why I got you guys to copy everything is this is what's gonna represent our shapes in Tetris now you see that I have multiple lists inside of in most cases this is because each shape has possibly more than one rotation right so this is the standard rotation of the S shape and that's actually what they're called in Tetris like si oh whatever and this is the second rotation and these are the only two rotations or whatever that s can have so that's why we have them in here we have a 5x5 grid of periods and then whatever there's a zero that represents where the block actually exists okay so Zed you can scroll through you can kind of look at them and you can see for some of them for example the square well it doesn't have any rotation if you flip it it's gonna look the same so we only have one list here for J however the hope we have for right because we can rotate in different ways l we also have for T we have four as well okay after this I create a list and it just holds all of my shapes so s said I just so that that way I can really easily select shapes just by indexing them in the list like 0 through 6 and shape colors here is the same thing it just corresponds like for example if I did shape 0 and I did shape color 0 then that's gonna be the color of shape 0 okay same thing with like 6 so shape 6 well color list our shape color 6 is the color of that shape so it just makes it really easy we don't have to deal with dictionaries or anything like that okay alright so now we've kind of gone through the like starter file I'd say and you can scroll down here you can look at the function names I'm not gonna explain them because most of them are pretty straightforward and I'll talk about them when we start coding them anyways but we do have a class here now this class is gonna be the main kind of data structure if you want to call it for our game and this is gonna represent or this class is going to represent different pieces so the reason we have the class is because we're gonna call this a bunch of times and it's pretty much just gonna hold the information like X Y width height for our piece so let's actually start coding this now so I'm just going to create my initialization function or method and this is actually the only method that I'm going to have so I need another underscore just butchered that and pretty much what this is gonna have is gonna have an X of Y and then it's gonna have a shaker okay and let's see on the information we need for this and I'll show you why so we'll say self dot X Exce self-thought y is equal to Y self dot shape is equal to shape and then what we're gonna do here now is we want the color and we want the rotation so a self taught cover well I was already talking with this self doubt color is just equal to whatever the index of this shape is in this color list so what we can do is we do shape under short colors square brackets and then shapes dot index and whatever shape we were given so if we're given the shape s well let's just find it in the shape list whatever index that is well that's the color of our shape pretty straightforward and then we're gonna do a rotation so rotation this set default to zero and this is so that whenever we click the up arrow key we can just add one to this rotation and that will represent what shape were actually gonna be showing because again remember the shape list is a multi-dimensional list it has more you can see here in this case for lists within it okay alright create grid I don't know if we want to do this one yet you know what actually let's go let's go ahead and do this one it's not too complicated so the way that I'm gonna represent the grid in Tetris so that 10 by 20 grid is just by creating a list full of colors okay so we're gonna have a two-dimensional list and within that second dimension it's gonna represent a bunch of colors okay so I'll show you just by coding and kind of talking about after say grid is equal to and then another square bracket here for X and range 20 and or I'll explain this in one second and I will say for X and range ten okay except here I just go to 0 0 0 okay so what I've just done here this is pretty this is like the Python way to create list K list comprehension we're gonna create one list for every row in our grid so since we have 20 rows we want to create 20 sub lists and each of these like sub lists or whatever two-dimensional list is going to have a bunch of colors in it how many colors is gonna have well it's going to have ten colors because we have ten squares in each row we have 20 rows so that's the way it works these X's you could replace with underscores because we don't really care about the actual variable we just need to do this that many times now zero zero zero zero or zero zero zero yeah I think that's right anyways that's just black it stands for block and the way we're gonna draw the grid is simply by looping through this grid which we're going to return and just drawing each color so it makes it pretty straightforward okay now the only thing that we have to do here though is we have this locked position argument now locked position well right now we've created a blank grid what if there's already blocks that have been placed in our grid so like they've already fallen they're static now they're not moving well we need to also draw those so to draw those we're gonna check if any of the positions in locked position are not like or whatever positions are in locked position we're gonna get that color and we're gonna change the corresponding value in the grid I'll show that just by kind of cooking it here so for I in range let them do the length of grid and again this is gonna give us 20 because the length of grid well that it's 20 of these right okay so for I in range Len of grid for J in range and then we'll say the Len of grid I because now we're in this list so now we're gonna do whatever the length of that list is okay I say if this so if J comma I because J is our x value I is our Y value because rows are represented by I and the columns are represented by J in locked position and just you know locked pause it stands for locked position it's also a dictionary so you can see that it's a blank dictionary here and each position so like for example if I had like 1 1 is gonna be set equal to a color and the color could be something like 255 0 0 okay and we're gonna talk about that and create that later but that's just somebody needs to know for now okay so J I in locked position so if that key exists let's figure out what that key is so that key is gonna be equal to well locked position and what the value is sorry associated with that key ji now we're gonna change whatever the current grid position is here so for grid I a is equal to C okay I know this might seem kind of complicated but pretty much we're just looking through this grid and we're gonna find the corresponding position to the locked position and just change the color in the grid so later when we draw it we get an accurate grid okay and you guys will see how this all is kind of plays out later if it seems a bit confusing now okay and then we're gonna return that grid to wherever we're calling okay so that that's one part done now we can move down and we can go into draw window which is then actually let's do get shaped this one's really easy okay so this is literally a one-liner returned random dot actually what is it called here I gotta have a look I get some random dot choose random dot choice that's where this random dot choice and then we're gonna be giving a shapeless so say shape actually let's just go cold up here sorry guys shape random dot choice shapes all this is gonna do is is gonna pick one of these shapes and it's just gonna give it to us so that when we need to create like a new shape falling down the screen ever ever that that's all we have to do k so get shape random dot choice that one's really easy okay next one draw a grid all right so what we're gonna do is we're gonna be passed a surface and a surface obviously what we're gonna be drawing on so we're gonna start by just changing the surface surface not win service dot fill with color this case the colors gonna be blocked okay I serve your stuff failed as yours ever do alright next thing we're gonna do is we're just gonna draw like a title on the thing so the way we have to do this would be first up to start by initializing the font objects link we do then PI game fonts don't an it okay this means we're setting up font and we're getting ready to draw to the screen we're gonna create a font it's gotta say font is equal to PI game taunt font dot sv s capital SOS font and then we need the font name I'm the Comic Sans guy somebody's at Comic Sans size of the font to move yeah size of the font Randy sixty okay so the way you want to set up your own font you want to change this just change this to any font you can look up fonts on the PI game website and then just give it a size if you know the name of the font type it in here it probably exists in in pygame alright so now we're gonna need to set up a label so I say label is equal to font dot render and then in here we need the text that we're gonna render in this case I'm going Cola Tetris we need our anti-aliasing of one and I believe we need a color in this case I'm gonna make it white okay so text anti-aliasing just set this one I don't know why you need to set this one but just set it one and then whatever color you want your label to be okay now that we've got the label we need to draw this label on the screen so lets blend it now when I'm used to typing when surface double its and then in this case we're gonna put the label where do we want to put it well now we want to figure out where the middle of the screen is so we could just hard code this in but if we ever want to change the dimensions of our screen we want this just automatically kind of adapt to that so we're gonna do top left X plus play width / - okay and that's gonna give us the middle of the screen if you don't understand that let me know when I can explain it to you in the comments down below okay now we're gonna subtract this sorry this isn't actually done yet by the width of the label because this is gonna matter um depending on how long the label is we it's going to determine where we place it on the screen so we're gonna get the width of the label and we're gonna divide that by two okay so now we need to do the Y well the Y is pretty easy we can just statically type this in because it's from the top of the screen so I'm just gonna give it I think like 50 is what I typed in 30 okay and that should put it in the middle the screen and I can explain that to any of you guys that might not understand it if you just leave a comment because I don't want to waste too much time because I a lot people might understand that so for I in range now the Len of grid because now we're gonna start drawing all the great objects onto the screen so we created a grid we know how that kind of format works we're gonna say for J and range be Len of grid I same as before and we're gonna do pygame dot draw dot rectangle and then this guy's been drawn the surface and then we're gonna go create i J okay and then top underscore he left I need to put this in what do you call brackets your top underscore left so I just need to scroll over top left underscore X plus j x 30 and I'll talk about this one in just a second how this works and then top left y plus i x 30 another bracket and there we go now we just got to deal with this grid thing so that means that we just now need to pass grid as well into our drop grid okay way this works we're gonna loop through every color within our grid so this is the color grid I J all right this is the surface we're drawing it onto and this is the position in which it's being drawn now we also just need to add two things here that I realize I forgot because we need the X Y we need a width and we need height so for width and height well that's go to the block size and block size once again and you know we can even multiply this instead of by 30 by block size in case we ever decide to change that so let's do that just to keep this nice and dynamic and then if we keep going over here the last thing we need is a fill so we're just going to put comma zero to make sure that we fill in the shape we don't just draw like a border for it okay way this works we add our top left X and we're gonna figure out wherever we are so which column were in multiply that by block size and that's our x position same thing works for the y with a starting Y position plus whatever row we're in x the block size will give us the correct position to draw our Cuban okay after we've done all that we just need to update the screen so pygame don't display to update and there we go so there's actually one last thing we want to draw and it's that red rectangle that you guys saw in that kind of represented like the play area so to draw the a video pie game dot draw dot wrecked and then surface and then in this case we're just gonna actually let's see here do we want do i want to dynamically type this in or do I want to statically draw it so let's give it a color first of all of red 0 0 0 okay and we're actually gonna type it in dynamic just in case we decide to change anything later so top left X and top left Y and then the width oh we actually already have all these variables so we have the play underscore with and you play underscore height and in this case we're gonna give it a border size four okay and that's all for drawing the grid we might come back to this later but for now that's it okay so this just draws the actual grid ah draw a grid and I've added this okay we're just gonna copy this part of you guys that says draw a grid so sir first up put this label and I'm just gonna move this in because I realize I have another function called draw window so in draw window what I'm gonna do is surface top fill whatever okay so I take surface and a grid so I just copied some of it from there and then instead of updating the screen here we're gonna update the screen over here and we're just gonna call our draw grid what do you call function like this okay so now what if we want to draw the grid and we want to use this in another program we could just copy and paste this function we wouldn't have to kind of take it out of here we do enough like dissected alright okay subtract rid again this takes surface and this takes grid and there we go I believe that's working well okay now that we've done that we're gonna start coding in the main and in main menu and this is what we're gonna finish off with this tutorial because I know we're almost at the 20 minute mark great so what we're gonna do in Maine now is we're gonna set up a few variables so the first variable we need is this locked position locked positions guy and again this is what we're passing up here in to create grid it's equal to a blank dictionary just a set in case we don't pass it then we don't need it okay so locked positions equals blank we had to say grid is now equal to well create grid because we already created that function with locked positions passed to it and create a variable called change underscored peace it's gonna be equal to false we're gonna make run equal to true this is just for our while loop that we're going to use we're going to say current peace is equal to get underscore shape okay we're going to say next piece is equal to get shape as well where I set up a clock object and clock is equal to PI game time dot clock and we're gonna set a variable called fall time equal to zero and those are all the variables that we need in our main function already coded for us okay so now we're gonna set up our while loop that's our main game like you're say well run first thing we need to do in our loop is sorry for event in in PI game dot event dot get let me say if event dot type equals equals PI game don't quit well that means we need to quit the program so the way that we can do that just simply hitting run equals false it's gonna break us out of our raw loop and then we can deal with that afterwards we're also gonna add another event this is a keydown event so if event type equals equals pi game dot keydown like that then we're gonna check what specific key is actually hit so let's go ahead and do this now I can I get it over with so I'm just going to type all the different keys and then we'll go in and code that after so we'll say if what do you call it PI game key equals equals I believe that's what it is our event key I'm not plugging ducky tonight bad guys event ducky equals equals PI game dot K underscore capital okay okay underscore left let me say if event key equals equals PI game dot K underscore right like that and then same thing up and down so if event don't key equals equals PI games do it okay underscore down and last one can screw up okay okay I don't know why that keeps happening okay okay underscore up like that okay so painfully after typing that left right down up now we can go in here and we can kind of code what each of these is gonna do so if we're hitting left we want to move our block left if we're coding right well if we're hitting right you want to move our block right and run down we won't move down we're going we want to rotate our shape that's what the main things are gonna do in here so if we want to move our piece left well we should change the wat the x value left wise okay so the way that we can do that inside current piece dot X minus equals one now I know you guys are looking at this right now you're saying okay well what what the heck man so current piece is equal to get shape and that's all it's equal to get shape well what is get shape and it's just returning random choice shapes now this actually just made me realize the fact that our get shape thing needs to change a bit that's because we need to actually create a piece in here so we set up this lovely class up here we weren't even using it so piece random noise shapes is the last argument takes it also takes an x and a y value right so for the X and the y well the Y is pretty straightforward is just going to be 0 the X has to be the middle of the screen so di gave me 5 and for y we're gonna give it to you okay and actually for y we'll leave it 0 for now but we might want to make it negative so that it kind of starts above the screen and then starts falling down okay so we have let's make sure this works it looks right X Y shape yep okay great okay so that makes sense now on how we can change this x value same thing for right I'm gonna do Trant piece Y or X plus equals 1 like that and for down we're actually just gonna take this in for now but this is not exactly what's gonna work y plus equals 1 to move downwards and for up well we need to rotate the shape so to rotate the shape this is actually pretty easy over induced Ava's current piece rotation plus equals 1 okay because when we change that rotation well that changes the actual image of the shape okay now this is all great but the thing is what if we're moving off the screen or what if this is not a valid position well that's why we have a function called valid space now valid space we haven't yet coded but I do have it in here somewhere valid space and what valid space is gonna do is it's simply going to return if the current position that we're in is a valid space so the way that I do is in this case just make life a lot easier if we're moving left let's simply just change the pieces ex move it left one and then check if that's a valid position and if it's not well then we can just add one and move it back to where it was so I say if not and then valid space and valid space again take two arguments can take the current piece it's gonna take the grid okay then let's just simply subtract or add one to our piece so all this is saying is we're gonna move left but if for some reason moving left results in not a valid space well let's just add one and pretend like we didn't even move there so we're not drawing it we're not changing anything so this is perfectly fine and it's actually a really easy way to check things that happen to checking if if it's below this or above this or whatever okay so now next next one here I'm gonna say if not valid space and same thing current piece with grid well now in here instead of adding one we're gonna subtract one because we were trying to move right and there we go same thing with moving down okay so we're literally just gonna take the exact same thing if not valid space current piece and grid well now let instead of adding one we're just gonna subtract one and this is from the Y value this time so we'll set current piece Y - equals one okay so now for up so when we change the rotation we are changing the shape okay so it doesn't show this year Yeah right now look how we change the shape we're gonna do that later so we actually just call the exact same thing on rotation because think about it if we're fully on the right side with like the straight piece and we try to rotate well that could result in our piece being moved to the left or to the right or like there could be positions where it's on the left or it's on the right and it's not in the grid so we do have to check for rotation if it is a valid space we'll say current piece and then what else are we doing great here okay and then in this case again we'll just we'll just subtract one from rotation so minus equals one and that should all work pretty well okay so after we do that we're gonna make sure that we remember to draw the grid so in this while loop will so say actually draw window I'm gonna give it surface and we're going to give it grid now this reminds me that I haven't yet created a PI game surface that's great so let's do that so here I'm gonna say win equals PI game dot display don't set underscore mode in this case I'm gonna give it what is it screen width and screen height so s width and s underscore height and that's it for display you want to give this a caption though so let's say a PI game dot display dot set underscore caption yep so let's just call this Tetris like that and now we're gonna just pass when into our main menu will put win here and then in main menu we're gonna call me okay and we'll deal with main menu later I don't feel like coding it right now and it's not really important to like the main functionality of a game so we can simply just do this okay main win like this and if I put win here then everything should work out this says surface change this to say when in little cases okay so now you've effectively done draw a grid or draw window draw a grid get shape create grid we've created a piece we've gone through what all this stuff and the starter file does and we are now at 27 minutes okay so I think this is a good time to take a break kind of digest everything that we've just done here I know a lot of it doesn't make sense yet because we haven't actually coded a lot of the functions but trust me as we go through the videos things are gonna start to make sense you're gonna see how all this stuff works again as I mentioned it's pretty complex so until I kind of go through everything at once and explain it all at the end like how all this stuff kind of fits together and works it might seem a little bit confusing anyways that's it for the first video if you guys are excited about this game you want to see the rest of it please make sure you leave a like and subscribe and I'll see you again in the next one [Music]