Pygame Tutorial - Tetris (Part 3)

Key Takeaways

hey guys and welcome to part three of coding Tetris in Python with pygame now up until this point I actually have not tested my code now I know some of you probably think I'm insane because we've already written like three enter lines of code we haven't tested any of it the reason I haven't done this is because I wanted to test this in between videos figure out what the errors were so that I didn't waste too much time fixing all of them so I'm gonna go through a few errors that we have now and show you what happens when I run the code so I'm just complete that cuz that was the fix that I made and pretty much you can see that we crashed right away and we actually get a 4-iron range none type has no length now the reason we get this and this happens down in the main it's because in convert shaped formats somehow I managed to forget to return positions so this is really important because the whole goal of this function well was to generate this list of positions and we did that fine but we forgot to return them so pretty easy error to fix or return positions now again we run this way okay everything looks good no there's another issue all right so just watch if I try to go off the screen you can see that we get a unsupported operant for current piece because I forgot to put a Y or an X here so let's go down to main let's fix this what line are we on 260 to 262 current piece X yeah that would be important okay now I know there's a few other errors so this one current piece mimes equals let's change this to an X current piece - equals wow I really messed up on this a lot okay dot rotation minus equal one okay so this is rotation and let's see anything else let's run the program see okay we're getting another issue here so if we have valid space crap okay so I just messed up and a bracket here so let's go lying 265 here we are so we're gonna take this quotation mark or Y my saying condition might bracket and just put it there and all should be good now let's see we go down to the bottom of the screen okay we got another and let's just play this role on sexy if we can run into any errors okay so we're rotating fine we can't move off the screen and all looks to be doing okay all right so that's a good sign for now let's leave that so it doesn't look like there's any issues if you find any I'd probably end up fixing them in future videos so don't stress about it okay so now that we've done all this what we need to do next is a few things all right so we need to deal with this draw next shape clear rows draw text middle what other functions to have and I think that's about it and we're also gonna deal with main menu' kind of starting the game finishing the game and all that stuff so what I first want to do actually is I want to deal with draw next shape anatomy undo clear roads just cuz clear rows is kind of complicated so draw an X shape what this is gonna do is they're just gonna draw the next shape kind of off the screen and show us what it is because in Tetris typically it shows you like the next shape the next few shapes so yeah now this seems pretty straightforward like just draw the shape it's actually kind of long because we have to once again get this list turn it into positions that we can use and yeah it just it gets a bit complicated so what we're gonna do is we're also gonna set up a font in here it's gonna say font equals PI game dot fonts dot sys font here we're gonna do Comic Sans again because you guys know I love Comic Sans Comic Sans sighs stick 30 and let's render this font okay so label equals font don't render text for this is gonna be next shape okay feel free to add a colon or something if you guys want anti-aliasing one text color white 255 to protect you okay basically already been through that okay now we need to figure out where we're gonna draw this this label okay so let's see the same thing we've done before you say SX is equal to top left X plus the play width and I'm going to say s Y is equal to top left Y plus the play underscore heights actually I'm gonna play 100 we're gonna say play height divided by two okay now what we're gonna do is this is going to give like to the right maybe I can just run this and show you guys it's gonna give us where my mouse is right here like a position kind of similar to here so we are actually here so what we want to do is we want to add a constant to this so we move to the right a bit so this constant we're just gonna hard code in and we can change this and play with it if we want it to be like moved more to the right or more to the left so to move more to the right rear now add 50 and then to kind of make this look a little bit better where you can actually subtract a hundred from the site so we can move a bit higher up on the screen play with these constants if you guys want it to look a bit different okay so now we've got that what we're going to do is we're gonna once again we're gonna formats were in say format is equal to shape.com thing we need the actual shape so not just like that main list a shape dot rotation modulus the length of shape dot shape like that okay so this is the exact same thing that we did in format whatever Kay you guys know is know what function I'm talking about and I've lost myself here okay just to get the actual like sub list that we need okay so now on you might say well what do you what are you doing here we already have like a function that does this for us don't worry about it just follow along because this is a bit different the way that I'm gonna do thing case when I say 4i comma line in enumerate all right and then row or actually before I'm not sorry I'm gonna do the same thing here we're gonna convert row it into list is really similar to the other function except we're gonna do one major change and you'll see that for row equals list line we're gonna say for J comma what do you want to call it column in enumerate row this time and exact same condition if column equals equals zero what we're gonna do here instead of adding some position to list is we're gonna draw something and this is why I didn't want to use the other function that gives us a list of positions because I don't care about the position within the grid I just care when we should draw something or not because this doesn't matter it's not gonna be moving we just want to draw like a constant image on the right side of this or a static image on the right side of the screen that week and just look at okay so what we do here is we're gonna say Pike and draw rect so don't draw dot correct we need a surface we passed the surface in I need a color it's going to be the shape color okay and then we need our position to draw on so SX and that in this case we're gonna have to do since we're drawing each cube right we're not dressed wrong the whole shape plus J multiplied by 30 and then we're gonna do the same thing with y so sy + I multiplied by 30 and we actually just changed this to let's change the block size to be a bit more dynamic okay so it's a 30 block size just in case we decide to change the dimensions of our screen later on and then we need width and height and that is gonna be a block size and block size and we want this filled in so comma 0 okay so what we've done here is really similar to what we've already done we're just gonna be drawing these blocks according to where they show up like in this list based on the initial x position plus like a changed kind of position or whatever okay anyways I think that's about it for this oh we need to actually bullet the label now so we created this label we havein actually drawn on the screen yet so let's do this I suppose a surface dot let's label change this to a period okay and then we need a position what's our position going to be well we're actually just give us X plus 10 and s y minus 30 okay again play around with these constants guys if you want your thing to look a bit different be more centered whatever I again I don't go like too crazy on cosmetics here I just want everything to work and look decent I assume you guys can mess around with it all right okay so now we've done that we've drawn the next shape well we actually need to call this function so within draw window we're gonna call draw next shape as well so where should we call this let's see what's called before we draw the grid draw an X shape or actually we can't call it in here where we need to call this is in the main because we only have next shape within the main symbol right when we're drawing draw window we're actually just gonna call draw next shape because we need to give it the next shape so it's gonna be next piece and then the grid does that wood takes it takes a surface yeah surface okay so let me just go check this to make sure and our surface is not called surface is it it's called win okay so in draw next shape you haven't take a shape and surface okay so that that should work fine you know what let's actually just test this now and see if this working and we're not showing up we're not drawing this surface hmm I believe it is because ah draw windowed Renick okay so what we need to do actually it's this draw next shape we're gonna draw after draw it now and we're just gonna update the display in here so pygame display it dot update and then if we go to draw window just remove this display update and this should work there we go so now we're getting next shape on the side the reason that wasn't working is because we were pretty much drawing over top of the next shape every time that we drew the window so now that's working fine we have our next shape showing up and what else do we need to do I'm really delaying trying to go to this clear rose function because it's really complicated but I think we're gonna have to do this next okay so clear rose and tetris obviously if we create a full row we need to clear that row and then so that's the only way the user can win obviously yeah so way to do this is probably a lot easier than the way I'm gonna do it but try to follow along because this is the only way I could kind of get to work and this is probably the hardest part of the actual game okay so we're gonna take grid we're going to take locked positions and we're going to do is we're gonna set up a few things here just follow along if try to explain as I go so I'm gonna say Inc which is an increment 0 for I in range the Len of grid negative 1 negative 1 okay and we're actually just going to subtract one from this to what this is gonna do is go look through our grid backwards so it's gonna start at the 28th row and it's gonna move up to the 19th row okay I'm going to say the current row is equal to grid I all right I'm going to say if the color 0 0 0 is not in our row let's clear okay so we're gonna add 1/2 Inc don't worry I'm gonna explain this after guys just follow along okay say IND equals I I'm going to say 4j in range the length of row what we're gonna do is we're gonna try to delete locked square brackets current position which gonna be ji and then if this doesn't work and I accept and continue okay okay so let's just talk about what I just did here because I kind of went fast and there's another ParticipACTION don't worry so the way this is gonna work these we're gonna say we're gonna loop through the good backwards we're gonna set row equal to every well bro in our grid so what that we're looping through and the way that we know if the row should be cleared is if 0 0 0 doesn't exists because if 0 0 0 does not exist that means there's no black squares in our row which means it's completely filled with shapes are completely filled with cube objects or whatever okay so we know we can clear it so the way to clear it now and don't worry about these variables I'll talk about that a second is to get every position in that rail to do that we need to loop through J in the row and we're already out the current row so we know that I is just gonna stay static change J and try to delete this from locked positions because now what we're doing is the lock positions need to be removed so when Mandela bees since locked position is a dictionary and it's mutable we can actually just change it within here and that's how we delete those keys and those colors from the grid okay so after we delete that all what we need to do is we need to shift every row so what's happening now and I think I'm actually just gonna pull out a little I have a drawing tablet and just start using this to kind of explain some things because it's pretty complex so just give me one second all right so what we need to do is we need to shift every row so if we delete like a the bottom row every row above that row needs to move down by one so if I go to let's see this and delete this okay so you can see if I have a grid alright and it looks something like this we're just going to be like a very basic like 3x3 grid okay just to save us some time let's say that we want to clear this road down here so these are full of colors right so if we clear this row and what happens is we get rid of all these and that any positions that we're above it so let's draw something like this now this is here well currently this is floating right because if we've cleared all these positions down here so we got rid of those this is floating so this needs to move down one so how can we go about doing that and the thing is every other row needs to shift down by one as well but now let's talk about like a potential issue you might run into so if I delete all that and let's say we have a grid that looks like this okay and there's a color here if we delete this row the grid actually now in our memory only looks like this all right it's only this top portion because we've deleted an entire row out of the grid so yeah we can shift everything down by one but now we're left with the grid that's one less than the other one so what we want to do is we need to add another row at the top here so that our grid stays the same size because if you delete an entire row well you're deleting the row right so you need to add back the other positions at the top because everything's shifting down by one so really the way it works is you delete this and then this whole thing moves down and then you add a row at a top like this okay so that you're back to your continual grid I hope that makes sense that's kind of the only way I can really explain it to you guys in terms of how we shift things and I'm going to do it in code right okay so leave a comment if you guys confused about that cuz I'll try to explain it in a better way but it's just kind of like a confusing topic in chair okay so now what we're gonna do and say if I on C is greater than zero okay we're going to say so this means that we've shifted and we've removed at least one row and I'll talk about the case in which we move two rows in one second okay I'm gonna say four key in and just follow what this is this is gonna be kinda confusing list of locked positions so locked because we're just we just passing locked there okay and then when you say key equals lambda I'll explain what this does in a second X x1 and I think that's about it and we're actually just gonna reverse this negative okay so for every key in our sorted list of locked positions based on the Y value is what this does so given a list that looks like this if you have like zero one zero zero okay given a this a very busy basically this could be apple of locked positions list okay what we're gonna do is going to sort this list and the way we sort it is based on this number here this Y value and this is what this key equals lambda X x1 does you don't have to understand that this is just a really kind of complex way to sort of list what we're gonna do is we're gonna now make it look like this is your zero zero one the way we do that is so that we get all the positions that have the same y value in like the core the correct order okay and you'll see why we need that when we start coding okay so I'm gonna say X y equals key because again remember key is a tupple and I'm gonna say if Y is less than IMD we're gonna say new key is equal to X comma y plus I MC and then locked new key equals locked top key okay let's let's dissect this now alright cuz this is I told you guys this was kind of confusing so what we're doing now if we want to shift every single position in the grid down because when we delete a row everything above that needs to move down so the first part is pretty straightforward okay so XY equals key so we're something getting the X&Y position of each in locked positions and remember locked positions has a key and then a corresponding with that is a cover okay straightforward now what we're gonna do is we're gonna say if Y is less than int and what that means is if Y is if the Y value of our key is above the current index of the row that we removed so if we remove for example row 17 then only things that are above that are gonna move down we don't need to move anything below row 17 down because we didn't remove anything after row 17 right and I'm gonna show this in a drawing in just a second okay so if that happens what we're gonna do is we're gonna change a key we're gonna get a new key we say it's equal care next value but we're gonna increment this by a certain value so we're gonna add I had to the Y value to shift it down and then we're gonna do is we're going to rewrite we're gonna create a new key in locked position which can have the same color value as the last key begin this one this gives us the lost current color value but it's equal to this position right so I'll explain why this works now kind of withdrawing and why I needed to look at this backwards okay because when we're looking at from bottom to top there's there's a reason for that all right and I might butcher the explanation but just kind of bear with me here for a second because this is important to understand why this works and this is the most complex thing and this is actually very useful you might want to use this a lot like shifting positions in a dictionary or in a list okay so if I go back to my little drawing thing here and I go like this okay so let's create a grid over here let's make it a few more rows this time just for a better explanation so one two three four okay I make it a four by four okay and you guys can see my fancy drawing skills let's make this a row so let's say we have a row like this guy so it's green make orange the orange didn't work okay so green can stay there orange like this like this and like this and then we'll add some more colors let's do like blue up here and up here okay so obviously this is the row that needs to be cleared that mine going over right now okay so this is the road that needs to be clear what happens when we clear this room okay so we've looked from the bottom of the list up and we found if we're looking at row like for now looking at Row three and we say Row three needs to be clear okay so it's cleared so we delete everything out of Row three right this row is now gone so our grid in memory just looks like this and this so what we need to do now seem to shift these position positions down but we don't want to shift these positions so that's why we're getting that int so we know which position push the positions in our grid to shift so we delete that row and then what we're doing is we're adding one and shifting all these positions down okay that's the straightforward example let's get rid of this and let's do this okay so let's say when we add our I don't know shape whatever to our grid we end up getting something that looks like this okay two rows that need to be shifted down now what we have to do is we have to delete this row and this room now here's the thing we delete this row we delete this row how many rows does this now need to move down well this needs to move down two rows so how do we know how many rows to move this down how how many rows some of everything else above it down well that is based on our what you call it increment here and that's why whenever we delete a row we add one to increment because we know that we have to now shift it down another row okay and that's kind of the way that this works if that makes sense now the reason then we go through and we look at things backwards so we don't overwrite existing rows now this is another complex thing okay you probably don't have to really understand this that much but anyways okay so let's just it's not gonna let me undo okay that's fine so we have this right now here's the thing we started looking at it from the top down to the bottom what would happen is we would just so let's actually have to add another row for this example to make sense okay so if I add another row and I say well okay mmm it's out of color let's pick yellow all right let's say we have a position here and we have a position here right so that means this position this position and this position only to move down so here's the thing if I move this one down by two all right or if I move it down by one or whatever it could possibly overwrite this existing position and we don't want that to happen so why why we have to start looking at it from the bottom is that when we start moving everything down we move the lowest most things down first so that way when we then change this there's no possible way we're gonna overwrite this right here okay because remember if you in a dictionary if you change a key and the key already exists well you're just gonna overwrite that key so that's what we started looking at it from the bottom if that doesn't make sense don't worry just that's for any of you that's why okay because I want to make sure I explain everything and you guys understand at least on some level why I'm doing what I'm doing okay so that's it for the explanation of clear rows now let's call it function so when are we gonna call clear rows now this is actually an interesting call we could call this function every loop but we're only gonna call this when our change piece hits the ground now the reason for this is because you could possibly be moving down the screen and at some point the grid would have a full row before your shape actually hit the ground now we obviously know the way in Tetris when you're moving down the grid until you like lands or you stay static we're not clearing anything so that's why we're only gonna call this if we are about to change the piece so clear rows what does clear rows take again I'd say it probably takes grid in locked positions maybe yeah grid and locked positions okay so passive the grid will pass it locked positions okay so then we're checking whenever we're changing the piece if we should clear a row and this can clear multiple rows at once okay so yeah now I do believe this is a little buggy in some instances but this is the best way I could get and I'm gonna work on making like a fix for it later on but yeah okay so I believe that works let's test out the program make sure we haven't made any critical errors yet [Music] let's go and see what happens boom and there you go the road clears and that seems to work okay and then I mean you guys can play around with this and see if everything's working if there's like a ton of bugs of this let me know guys cuz I will try my best to fix it this is the best I could do for now and it seems to be working fairly well okay so you can see it's only clearing the roads that are above what we need to clear okay so with that being said I think I'm gonna end the tutorial here and in the next video what I'm gonna do is I'm gonna go through more cosmetic stuff so like this draw text in the middle any other functions I need to do no we just need to work in main menu and then I'm probably gonna fix like a few different bugs that we might have found add a few stuff main menu is definitely something I'm gonna do and this is useful so you can have like click to start and I'm also going to add score so that we can kind of save score and track who's doing the best or what not okay so with that being said that's it for this video hopefully you guys enjoyed it if you did please make sure you leave a like and subscribe and I'll see you again in the next one [Music]