 So hey guys, and welcome back to another Python tutorial. So in today's video, we're gonna be creating a easy and simple horse racing game using Python. So to begin with, I'll give you guys a quick demo of what the games looks like. So let me run the program quickly and here it is. So it's a basic UI and there's basically two horses like they usually is. You can obviously add more horses in once you learn about the implementation. You can play it with two people. So each person selects a horse for themself and when you have selected your horse, you will click on play. Now, when you click on play, you'll see a trashy animation because it's a beginner tutorial and one of the horses will win at random. So each time we run the game, we can expect a different horse to win. Sometimes the same horse may win, but this is at random possibilities. So as you just saw the implementation of the game of how it works, we are now gonna jump into the code. So to start with, I'm gonna close this off and we need a folder structure. So we're gonna create a new folder and I'm gonna call the folder horse racing, quite appropriate for what we're creating. And then I'm gonna open up the folder real quick. Inside the folder, we need another folder called images because we need the red horse and blue horse images that we just saw on screen before. And the images folder is where we're gonna be putting the red and blue horse images. So I've got them on my desktop. I will be cutting them and pasting them into my images folder. Now I will obviously put a zip file with all the scripts and images that are required to run this game in the description. So if you guys need that, you can head over to description and download it as well. So first things first, let's create a new file in VS Code. And before we do that, if you're using VS Code, what you wanna do is I'm gonna close this folder right now and what you wanna do is drag this folder into your VS Code screen. That way it will load the folder in as sort of like a workspace. So you don't have to type in full image links and stuff when you're importing images, which is great. So now that we've got the folder in for horse racing, we see our images directory that we created earlier. We wanna create a script file or a new Python file in the horse racing directory. So you just click on this icon for new file. And I'm just gonna call this horse racing.py Quite rightfully. Now that we're done with that, what we wanna do is we wanna actually import the modules that we're gonna be using, okay? So I'm gonna zoom in a little bit and so the modules that we're gonna be using for this tutorial are tick enter. So from tick enter import star, which means we're gonna import everything from tick enter. If you guys are new to tick enter, I will be linking a playlist for tick enter beginners, which is quite fun to learn from in the description. So make sure to check that out as well. So let's import tick enter. We will also be needing time because we would wanna sleep during our animation so that our frames play out smoothly. And we will also need to import a module called random because we need the horses to move at random speeds or steps. Cool. So now that we're done with that, we wanna actually create the main screen using tick enter. So let's create a comment and we'll say setting up the main screen. Now to start with, we're gonna create a new variable called main screen and we're gonna equals that to TK. Now that initializes the tick enter TK object and it will create like a window. So if I run this now, you give it a quick second and nothing happens. That's because it actually shows up but we need to put the main screen into a sort of loop so that it keeps running until someone clicks on the exit button in the UI. So you always want to do main screen dot main loop without the snake case in the middle to make sure that the screen doesn't just close off straight away. So we run this again. We wait for it to load up and my little window has loaded up on my first monitor which I'm gonna drag in right now and this is what you'll see. So successfully created a tiny window. Cool. So that's the first thing done. What we wanna do is everything that we're gonna add onto this screen is gonna go between the initialization of the screen and the main loop because we want it to run sort of because obviously code runs from line one to line 10. We wanna make sure that the rest of the stuff that goes on the screen is in the middle of the main loop. Otherwise it will get excluded. So first things first, we're gonna change the title of our screen. So we're gonna do screen main screen dot title and we're gonna call it force racing and then we are also going to change the size of our screen because it was quite small as we saw. So I'm gonna do main screen dot geometry and 600 by 500. Now, obviously these numbers are familiar with me because I've already programmed this stuff so I already know what size I wanna go with and what positioning I'm gonna use. So if you wanna follow through that you're more than welcome to or you can experiment with your own numbers as well. So I'm also keen on changing the background of the main screen to white because by default it is gray which is sort of boring for the game. So I'm gonna do main screen dot config and then in config I'm gonna provide the background to be whites. Now at this stage we're gonna quickly run this program to see what it looks like. And as you see right here, first thing we did was change the titles. The title up here has indeed changed towards racing. We set the geometries to the screen size to 600 by 500 pixels. That's reflected as well and it's all white right now. So perfect. Everything we done has worked successfully. The next thing we wanna do is we wanna create a canvas on our screen. So the canvas is where we can add stuff like images and objects that basically move around. And Tecanza basically allows us to do that. So we wanna create a new canvas and we wanna attach that canvas to our screen. So we create a new variable called canvas just like we did for the main screen. And then we equals that to canvas with a capital C which is part of the Tecanza library and then we need to provide where it's gonna be sitting on, so it's gonna be sitting on the main screen. We need to provide a width which I'm gonna assign it to 600 and height which I'm gonna say is gonna be 200. Now we also need to provide a background. Well, you don't have to but I'm gonna provide a background of white. And then lastly, you need to position it on your screen as well. So I'm gonna say canvas.pack basically which means put the canvas in the middle of the screen and I'm gonna add a padding on the y-axis of 20 pixels as well. Now when we do this, we will see that we have a canvas in the way we asked it to be positioned and in the size that we asked it to be positioned as well. You'll see these little borders which are sort of the canvas at the minute. So this is gonna be where the two horses are gonna be and they're gonna do the moving stuff in the canvas. Cool. So we've created the screen, we've created the canvas. We're doing great so far. Now what we wanna do next is actually import the images that we're gonna use for the different horses into our program. I'm gonna quickly expand the images folder to see what I called the names of each file. Obviously feel free to use your own images as well but then you're gonna have to use different sizes and dimensions to what I'm using. So to import the images, let's make a new comment and say adding images to canvas. And I'm also gonna make a comment up here saying that we are setting up the canvas. Okay, so to add the images to, actually this is wrong, we're gonna import the images first and then we're gonna add them to the canvas. Okay, so we have to actually import the images into variables, sort of first, resize them next and then we add them to the canvas. So we create a variable first, so red horse image and then we equal that to photo image. And then the file, we need to basically provide the link to the file. So I'm gonna say it is in my images folder and it is called redhorse.png. As we can see right here, it's called redhorse.png. Now we copy and paste the same line over again and I'm gonna change red horse image to blue horse image because it's a different image now and I am going to change the link to my file. I'm gonna change red horse to blue horse because I've named my images sort of with the same conventions to make it easy on myself. Cool, at this stage, if you run your program, you will not see any change because obviously you haven't added these images to your canvas just yet. You have only sort of imported them into your program and assign them to variables. So we actually need to resize these images first. So let's resize the images, so resizing the images. Now first we're gonna resize the red horse image. So we're gonna do red horse image is equal to and then red horse image dot zoom 15. Feel free to play around with this number because I have played around already and I find that it's a perfect size for me to use. Now we also need to do something else to it. So we need to do red horse image equals red horse image dot subsample. That will make sure that the image has been actually reduced in size because initially these images are quite big. If I show you the blue horse image is quite big, so is the red horse. So I'm reducing it to the size I need it to be. We're gonna do the exact same thing with our blue horse image. Gonna overwrite the previous one with the resized one. So we're gonna do blue horse image dot zoom. And for this one we're gonna do 50 as well. But for the subsample, we are going to use 90. Now I remember tinkering around with this a little bit because the blue horse image is bigger than the red horse image when it's initially downloaded. So it needs to be shrinked more than the red horse image so that they're sort of the same size. Once again, feel free to play around with these numbers that will actually help you learn. So once we're done with that, what we wanna do next is, we wanna add these images to our canvas because we've imported them, we've resized them. Now it's finally time to add them to our canvas. So adding images to the canvas, cool. So to add them, we need to actually assign them to a new variable because when we add these things to our canvas, they're sort of objects that you can control. So the image is attached to this sort of object that you can't really see that you can control. So we create a new variable called red horse because this is the actual red horse and not an image. So red horse equals canvas dot create image. And then what we're gonna do is we're gonna provide an x-axis. We need to provide an x-axis, a y-axis. We're also gonna provide an anchor, which is gonna be set to North West. That's just where the anchor of the image is gonna be. And then we need to provide where to pick this image from. Now the image is obviously stored in our red horse IMG variable up here because we resized it as well. So we use that image, but for the x and y, we are actually gonna create dedicated variables for this. So let's quickly create variables for our x and y for the red horse and the blue horse. Now I would suggest that we go all the way up in the file. And just after we import random, we create a new file and then we put the x and y-axis for these horses up here. So I'm gonna create a new variable called red horse x. I'm gonna assign that to zero, red horse y. Assign that to 20, blue horse x. I'm gonna assign that to minus 28 and blue horse y. I'm gonna set that to 110. Now you might say, how do I already know this? That's because I've already got them written up and tested and these are the same sort of numbers I used for the x and y positioning for the program I demoed in the start of the tutorial. So if you wanna follow along with the same numbers, feel free to do so. Otherwise you can pause and then quickly figure out what numbers you wanna go with as well. That's fine too. Cool, so now that we got these variables set up, what we wanna do is actually use them over here. So since this is the red horse, we're gonna use the red horse x. And since it's the red horse again, we're gonna use the red horse y. Cool, let's quickly run this to see if our red horse will actually appear on our canvas. So I ran it at this point and wonderful, no errors and it actually shows up where I positioned it, which is to the left of the screen and sort of to the top. Perfect, let's do the same thing with the blue horse. So I'm gonna close this again and let's do blue horse is equal to canvas.createImage. We need to use the blue horse x and y this time, which we created a second ago, blue horse y. And we need to set the anchor to northwest again. This is the easiest one to position in my opinion. And the image is gonna be blue horse image, which was previously resized as well up here. Cool, cool, cool. So let's run this again and we will see that we have two horses nicely positioned. The blue one is clipped off a little bit, but the winning criteria will make it fair enough, which I will explain later. Cool, so let me close this down, close this as well. Now that we've got everything set up, we mainly need to design the labels that will tell the player what to do. Basically the text is what is referred to as labels and we need to create the button that will allow the player to start the game. So to create the labels, I'm going to create a comment first, say adding labels to screen and text in brackets because obviously labels is just text in a way. So we're gonna do L1 is equal to label, which is gonna go on main screen. So L1 is just a variable that we create just like we use a variable to create a canvas image and all the other stuff. So label, which goes on the main screen and the text is gonna be equal to select your horse. Cool, now we're also gonna use a custom fonts, which I'm gonna use Calibri. You might need to look up the documentation to see what other fonts they have. And I'm gonna go with 20 pixels of basically the how big I want my font to be. I'm also gonna specify that the background on my label is gonna be white because by default, once again, it's gonna be gray and it's not gonna match with a white background of the overall main screen. So we want that to match. So once I'm done with that, I'm gonna place this on my screen. So I'm gonna do L1.place. Now instead of pack, I'm doing place because I specifically wanna mention the X and Y axis where this is gonna sit. So I want it to sit on X 230 and Y 280 units. So let's run this quick to see if that looks okay. And indeed it looks okay. It's sort of centered and it's where I want it to be. It's got the custom Calibri font and it's 20 units big. Cool. Let's move on to creating the next label which is just gonna say click play when ready. So L2 is equal to a new label. Just gonna go on our main screen. Text is gonna be equal to click play when ready. Once again, we're gonna use my favorite font Calibri with a font size, I believe of 20 as well. Again, just to keep things consistent and we're gonna set background to white. Now I'm gonna do L2.place and this time we're gonna have to use a different X and Y axis because we want it to be placed below the previous label. So X is gonna be 200 and Y is gonna be 330. Now obviously I have these values written once again, guys, so feel free to use your own after experimenting. Okay, so let's run this again just to make sure the second label has showed up and it indeed has showed up. Now the only thing we have to do is create a button that says play and then we will be good to program the main sort of logic of the game. So let's create a button, create a new variable called B1 and assign that to button which is part of the Tecinta library. Once again, it's gonna sit on our main screen. The text is gonna be set to play. Feel free to change that if you want. I can set the height. So I'm gonna set that to two units and I'm gonna set the width to 15. Once again, feel free to play with these. I will change the background of the button to white because by default I believe it is gray. I'm going to change the font on the text of the button to Calibri and this time we're gonna go with just 10 as the font size and I'm going to then place the button. So I'm gonna do B1.place X is equal to 250 and Y is equal to 390. Cool, cool, cool. Let's run this quickly and let's see if that worked. Okay, so there is an error and I'm just trying to see where the error is. Okay, let's see. Calibri B1.place B1 is equal to button. We've got the text, we've got the height, we've got the width. I'm pretty sure it's something really tiny. I can't seem to spot it at the minute. Unknown option, wait. Let's try it again. Unknown option, wait. Okay, oh, I typed in wait instead of width. Sorry about that. I'm not sure how I managed to do that but okay, let's run this again and if I look at it now, we have a button but obviously it's a dumb button because we click on it and it literally doesn't do anything. So what I'm gonna do with this is we need to assign this button to a function. So whenever it's clicked, a function is run and the game can actually do something. So we are gonna go to the button again. So where we created the button, we're gonna use comma and then we're gonna use something called a command and a command basically lets us assign the button to a function. So each time this button is clicked, a function will be run. So we will assign this button to a function called start game. Now the function start game doesn't exist just yet because we haven't created it. So that's what we're gonna be doing next. So this is all really that we need to do on the decoration side of things and the GUI. So that's all the tough bit out of the way I would say. Now the next thing that we need to do is actually create the functions that's gonna sort of be the main me of this program. So I'm gonna go at the top where I last declared my blue horse Y, create a new line and we create the function start game that we assigned to the button. Now in here we wanna make the blue horse X a global value. You wanna make the red horse X a global value so that the function can see it. And we wanna also create a new variable outside just under random called winner and we assign that to false. So this winner variable is later gonna help us find out which horse won. So I'm gonna create winner as a global variable in start game as well because it needs to access it. So these variables will make sense in a bit but we just need them in this function at the minute. So what we need to do first of all is we need to create some helper functions for this function to actually work. So helper functions are just gonna help this function do some tasks with ease and make our code a bit more readable. So the helper functions we're gonna need is we need a function that will help us move the horses. So let's create that first. So def move horses. Now this function will take in a two parameters. So red horse random move and blue horse random move. Random move, cool. So basically red horse random move is gonna be how many steps we want the random horse to move and blue horse is how many steps we want the blue horse to move at random. So what we're gonna do is we're gonna use the canvas variable we created below before right here and we're gonna use that to move our images. So we're gonna do canvas.move which is an inbuilt method again and then we wanna move the red horse and we wanna move it by on the x-axis we wanna move it by red horse random move and on the y-axis we don't really wanna move it we just keep it the same. We don't move the y-axis at all because we don't want it going down we just want it going from left to right. We do the exact same thing for the blue horse so we do canvas.move, blue horse because we wanna move the blue horse and we wanna move it how many steps on the x-axis is gonna be told to us by the blue horse random move parameter and we don't wanna move it any steps on the y-axis we just want it to be consistent. Perfect. So that's the move horses function ready which is good. Now we can just whenever we wanna move any horse we would literally just have to do move horses and then we provide how many steps we want the red horse to move and how many steps we want the blue horse to move but obviously these will be generated at random. Cool. So that's the tough bit sort of done and then we need another helpful function which is gonna help us check consistently check whether a horse has won. So we will call this function check winner. So we create another function called check winner and we're gonna say if the blue horse x which is up here if the blue horse x is greater or equal to 550 which I calculated and it was the end of sort of the end of the canvas if it's greater or equal to 550 and the red horse x is greater or equal to 550 then we return a tie. So basically that means both horses won at the same time because obviously they're both the x-axis equal to 550 which is the finish line. We need to do two more conditions. We're gonna say if blue horse x is greater or equal to 550 then we return blue horse because blue horse wins and we need another one which is gonna be if red horse x is greater or equal to 550 we return red horse because obviously in this case the red horse wins since it's x-axis is greater or equal to 550 and if none of these if conditions are satisfied then we just return false which means whenever this function is run if any of these positions so if none of these horses have won the function will just return false so we just carry on the game. Cool, now that we have all these helper functions ready it's time to make sense out of this so we'll go to our start game function. Now we globalized a few variables in here which was the blue horse x and the red horse x we're gonna be updating these as well to keep track of where the horse is at the moment so that we can use the check winner function as well. So first things first we have to run a loop so we wanna keep running this game until a horse wins and when the horse wins is when the loop should break basically. So we're gonna say while winner is equal to false we're gonna keep running obviously that means that there's no winner been declared yet so winner is just at false consistently. So when we run our loop what we wanna do first is sleep for a fraction of a second I would say so 0.05 and then we do the sleep because every time we move a horse we wanna actually see it move if we don't do a sleep it'll be so quick that we can't actually see it. So we do the sleep to basically for us to you see the movement. Now that we've done our sleep we're gonna actually create a variable called random move blue horse. Zoomed up accident blue horse and we'll assign that to a random number. So we'll do random.randint which is a method of the random library and we're gonna pick a random number between zero and 20. We will do exactly the same thing we'll create a random move red horse this time because we want both horses to have random moves and we use the same thing again we use zero and 20. Just to keep it fair we keep it between the same ranges. So our program will pick at random between zero and 20 for each horse. Also I just realized that I use a single equal over here it's meant to be a double equal because we're not assigning we are checking. So we have our random moves ready so we can actually update update the X positions of both horses. Now we globalize the blue horse X and red horse X so we will update them with whatever random move they just received. So we will do blue horse X plus equals which means it's gonna update it with whatever it was previously it's gonna add on to it the random move that was just produced. So random blue horse move and red horse X plus equals red move red horse. Cool. So at this point we are doing great. We have a random move for the blue horse and the red horse and we're updating the X axis as well with whatever move they have. So now that we have done that we actually need to move the horses on the screen. So we're gonna use our move horses function that we previously created down here and we're gonna provide it with the red horse random move and the blue horse random move which is up here. So we're gonna say random move red horse first because look at the parameters we're asking for the random move for the red horse first. So we do that first. And then secondly we do blue horse, sorry, random move blue horse. Cool. So we're gonna use the move horses function to randomly move the red horse and randomly move the blue horse based on the numbers we get but when zero and 20 over here. Perfect. Now when you move these horses you need to do something called you need to update the main screen because otherwise once again the movement is gonna be too swift and we won't be able to see it. So we're gonna actually update the main screen every time we move the horses. So we're gonna do main screen to update. Now we are gonna use the winner variable which we created up here and we're actually gonna assign it to our check winner function which we created earlier. Now this is gonna be false until a winner has been picked because we said we're gonna keep returning false unless one of these conditions were satisfied. And if one of these conditions were satisfied it would mean that it was either a tie or the blue horse one or the red horse one. So we will update the variable with whatever the check winner function basically returns. In most cases it will return false until it's either a tie, the red horse wins or the blue horse wins. Cool. So that is the main bits of the game done really. Now the only bit that we need to update or do is once the loop finishes or after the end of the loop which means the game has finished there has been a result in the race. We go one and then back and we're gonna say if winner is equal to tie which means there was basically a draw then we're gonna create a new label on our screen. It's gonna be set on our main screen. The text is going to be winner which means it's just gonna say tie and then we're gonna use a font of Calibri 20. We're gonna use a foreground which is a color for the text. I'm gonna set it to green because obviously it's a positive outcome and we're gonna use the dot place function. Now obviously you don't have to always use variables to use dot place. So I'm gonna use dot place on the label itself and I'm gonna do X is 200, Y is 450. Now that's if we have a tie. If anything else happens which is usually gonna be either the red horse wins or the blue horse wins we create another label that sits on our main screen as well. Actually I might as well just copy and paste this over because everything remains the same. So I'm gonna copy the same label, paste it down here. The only thing that changes is we say winner plus space wins and exclamation mark if you want to. So that's because if the blue horse wins then our function returns blue horse. So the text is gonna say blue horse and then we're adding more text that says wins. So it's gonna say blue horse wins. If the red horse wins is gonna say red horse and we're adding more text which says wins. So it's a red horse wins. And if it's a tie then it will just say tie. We don't add anything onto that. Now obviously you might have, I might have moved a bit too much there. You might have noticed that we didn't change the X and Y on this one. And that's because we don't actually need to change it because the outcome is gonna be one or the other. It's never gonna be a tie and blue horse and red horse wins. So it's either gonna be a tie or the red horse wins or the blue horse wins. So at this pace, I think we are ready to actually run this program and check if it works. So fingers crossed we don't have any errors and let's run it. Okay, cool, no errors so far. Pick your horses guys. I'm gonna say I'm gonna go for red. Click on play. And it's looking like, oh it was going in favor of red for a bit. Okay, cool, red did win. Now obviously sometimes it may look like the other horse won but this is very accurate because it uses the X axis of both horses which is being updated. So I hope you guys have enjoyed this tutorial and I see there's a little bug in our coding. When it says red horse wins, the background still remains gray. The challenge for you guys would be to figure out this bug and make it blend in with the background. So the background for this label should be white. Let me know if you guys managed to figure out the challenge and I will feel really good about it because I would feel like I taught you something. If you guys are interested in more of these tutorials, please drop them down in the description. I mean, comment box. I also have a discord server guys where we are trying to build a community of junior and senior programmers. So if you feel like you want to join that, feel free to do so. Apart from that guys, please help me grow the channel by sharing the content, liking for the algorithm and subscribing for more such tutorials. And guys, I will see you beautiful faces in the next one. Peace out.