Subtitles section Play video Print subtitles COLTON OGDEN: All right, we should be live here on CS50's Twitch channel. Apologies for the delay. I'm afraid our PC actually had a blue screen of death. So we brought in a reserve machine. So thanks to Dan Coffey for helping out with that. But, yes, welcome to everybody who's been patiently waiting in the chat here. First of all, for folks who don't know who I am, my name is Colton Ogden. I work full-time with CS50. And I thought as part of our new Twitch channel, we'd take some time today, about a few hours, to from scratch code a game called Snake, which is sort of an old school 2D game. If you ever grew up having a Nokia phone or the like, you've probably played it. And it was played on sort of older computers back in the day. And we'll take a look at what that looks like. But, anyways, thanks so much for tuning in. Let's dive into what we're doing and start to take a look at everything. So I'm going to pull up my computer here. And now we have a little twitch.tv/cs50tv graphic there. So if you're not following the CS50TV account on Twitch so that you can join the live chat with us and we'll have some back and forth conversation, definitely go ahead and follow that link. Hit Follow. If you're watching this on YouTube after the fact, we will be pushing this video to YouTube later. But there is a 10 minute waiting period, I believe, for if you want to actually chat. And I'll see your chat messages here as we go ahead and program. All right, so what you see here is a text editor called VS Code. This is what I'll be using today to program, but you can use sort of any text editor that you want. You could even theoretically use, like, Word Pad on Windows or whatever. I would definitely recommend getting something like VS Code or Atom any of the free sort of text editors that are out now. I personal like VS Code. And it has some cool plugins, one of which I will use for the framework that we'll be taking a look at today to make Snake. Let's take a look at what Snake actually is, I think, before we go too in-depth into what we're doing programming wise. So Snake kind of looks like this. It's basically a grid, right, where you have this green long thing that goes in various directions. And it continuously moves throughout the sort of grid space in the game. And then every time you pick up these red dots or whatever object that you want to frame in the game, you're a snake creature which starts off with just one piece will actually get another piece at the end of it at the tail, and you'll grow. And so the catch is the longer your snake grows sort of the more you run the risk of biting your own tail or your own body, so to speak, because you're continuously moving. And when you bite yourself, the game actually ends. And so the goal is to essentially grow the snake as long as possible by eating apples or however you want to visualize the red dot in the game. Hello to Bhavik Knight there in the stream. Thank you for visiting the chat today, visiting the stream. But, yeah, the game that we're going to be making will look very similar to this. We're not going to get too fancy with it. I actually haven't done any prep or any research into how we're going to make the game. I figured we'll just kind of dive into figuring it out on the fly. So that's Dan Coffey in the stream, everybody. Say thanks to Dan for fixing our broken machine today and getting everything up and running. All right, so first things first. In order to start programming something visual or to program a game, we'll need to find some tool, some game engine, to do this for us. And I'm a big fan of a 2D game engine, a 2D framework, called LOVE, which uses Lua as its scripting language. What's up, Steve Benner? Good to see you again. Thanks for coming by. So LOVE is a 2D framework. It's an OpenGL framework strictly catered towards 2D games. And it has a very nice API for game programming, which makes it pretty easy, nice and simple to get into. But it does allow you a lot of low level flexibility that some bigger engines kind of take away from you or at least kind of hide behind layers of abstraction. I'm thinking of things like UNITY, where there's a big learning curve associated just with kind of getting the engine right, getting the UI correct, and not necessarily diving too deeply into code for at least a while. Hello, Elias from Morocco. Good to see you. D. McDermott, good to see you. OK. So we're going to go ahead and take a look at LOVE2D and sort of Lua and its syntax and the different functions therein. In order to get started, you'll need to if you want to follow along whichever version of LOVE corresponds to your operating system. Today, we'll be using the newest version which is version 11, or 11.1 rather. I'm on a Mac. I'm running Mojave. If you are on a Mac running Mojave, you might have some bugs with actually running version 11. So make sure in your Accessibility panel, which I'll take a look at here just for those running on a Mac, if you go to your Security and Privacy, rather, and then your Privacy section here, there is a section of apps that basically-- part of Mohave, it seems, allows a lot more apps to have accessibility features. I'm not exactly too sure of the low level aspect of what they do. But they basically allow the apps to have more control over your computer than normal. So in this Accessibility panel here, under the Privacy panel, just make sure that LOVE and Terminal and also whatever text editor you're using are checked. And this is Mac OS X Mojave specific, not specific to Windows per se or Linux. And that's also on version 11. I've gone ahead and downloaded it already. So if I go into my console here, assuming that I've put my executable in the right spot, I should be able to just of LOVE normally. And you'll see this sort of thing with a balloon and a tail that says, "no game" and that's perfectly normal. If you're on a Windows machine or if you're on a Mac or if you're on Linux and you run the binary, you should get the exact same thing. And I have a shortcut to that on my desktop here. Let me just hide everything. That doesn't want to hide. But I have a shortcut to love here. If I double click on that, I get the same exact window there as well. So the reason I'm able to access the binary through my command line is because I've actually aliased it. So if anybody is curious, there's actually instructions for this on the Wiki page. But if I go to nano home directory bash profile, you can see that I've aliased to the command to love to be Application.love.app /Contents/MacOS/love. This is another Mac slash Linux specific thing. But for today's examples, it suffices just to double click the executable that you download from LOVE2D and/or drag your project folder onto that executable. And, again, the instructions available for how to do what I did are on the Wiki. I've got to figure out where the exact page is. I think it's on the Wiki here and then the Getting Started page, yeah. So on the love2d.org/wiki/gettingstarted, you can get some more instructions on to actually pull up LOVE2D, you get it to work by itself, get it to work with files specific to your operating system. Again, I'm using Mac OS X today. Mac OS X is similar to Linux, but Windows will be slightly different. But that's LOVE2D. So once you have that all set up and ready to go, if you've double clicked the executable and you've got that window, then we should be ready. So I'm going to open up my text editor here. And I'm just going to fire up a very simple LOVE2D application just so we can see sort of the backbone of how it works. By the way, sorry, I haven't been paying attention to the chat. OK. So Bhavik says, "I will try Atom. I know a bit of Vim. David uses it. I'd like to useful plugins for Vim." I don't use Vim too often, so I can't actually suggest useful plugins. I know that Jordan Hayashi, one of our alums, uses Vim a lot and has a lot of plugin help. Maybe on another stream, if David gets on, we can maybe ask him what plugins he likes to use. I am not a Vim expert by any stretch of the imagination. But, yeah, Atom is great. Visual Studio Code, VS Code, is great as well. So I'll be using those. But perhaps in the future, we'll take a look. And then Sugo Gruber from Germany, Bhavik Knight says, yeah. OK, awesome. So we're going to go ahead and let's say that I want to create a new LOVE2D application on some location on my hard drive. So I'm going to assume that I have a folder called Dev somewhere. Within that, I'm going to say just for the sake of today I have a stream subfolder. And I'm going to create a new folder called Snake. And in that new folder called Snake, I'm first of all going to open that folder with my text editor. So on Mac, you can just click and drag it onto your text editor. And that will open that text editor in a Project view. I'm going to click and close out the other window that I had available. And I'm going to right click, do a New File. And I'm going to call this file main.lua. Now, in LOVE2D, main.lua is sort of like the entry point of your game. And that's going to be necessary in order to tell LOVE2D where to start running your game. And in C, and even in Python in certain situations, you have the same exact idea. In C, you have this function called main, which the C compiler knows to look for and then bootstrap your application. In Python, you can do this check that says, if name equals main. And, basically, that will launch that Script file as the bootstrap of your application if you have multiple script files. In LOVE2D, the same aspect applies. But it looks for a file called main.lua. And this should be in the root of your project directory. We've got some other people, Blow Into The Cartridge, has a Heart Symbol, love the name, Belacura, Bhavik Knight says, "sure, hello all." Thanks very much for coming to today's stream. Hope you're ready to code some Lua, some Snake. OK. So I have my main.lua file, but it's completely empty. So it's obviously not going to be useful for anything. I'm going to just write a couple of functions here. So function love.load is one of them. And this is using Lua, the language Lua. So we've got Lua syntax. So we have function, the keyword that says this is going to be a function called love.load. Notice the function ends with this end keyword, which is a Lua specific thing. I want to make a function called love.update. Notice that load does not take a parameter, but update does take a parameter called dt which means that love.update will have access to this variable within it. And we'll take a look at what that means a little bit later. I'm going to define a function called love.draw. And this is the function that's going to handle everything related to actually rendering things onto the screen. And then that should be it for now. Oh, actually, one more function, I'm going to do this just out of convention. It doesn't really matter where you define these functions in terms of their order. But I'm going to define a function called love.keypressed. And this one takes a key parameter. So this function, as you might surmise, is used to check whether a given key is input on any given frame. And with that key, we can then do some sort of logic. In this case, very simply, I'm going to do a condition here that says, if the key is equivalent to this string called escape, which means if the user pressed Escape key, then I want to call this function called love.event.quit. And very simply, this will allow us to test whether our application is running correctly. So I'm going to, first of all, make sure where I am. I'm in my home directory. I'm going to cd into that folder that we created. So cd dev/streams/snake and then ls there for list, which means I can see sort of what files are there. I can see this main.lua file that I created. And so if I just type love space dot, what I should see is a black window, because I haven't defined any rendering. But if I press Escape, which I did, the window closes. So everything seems to working appropriately. Black screen is completely normal. Notice that when we open that up, it said sort of this untitled word at the top of the window where the window bar is. So if I do love.window.setTitle to, let's say, snake, or snake50 rather, and if I rerun this as I did before, notice that, oh, it did not work. Did I forget to save it? Make sure I'm in the right place. love.window.setTitle snake50 should work. Huh. Strange. OK. Not sure why that's not working, hiccup, minor hiccup. So this is in the Snake directory. Let me make sure. Oh, LOVE 11 may have changed the function actually. Sorry, LOVE2D v11 or love window setTitle. There are a couple of things that LOVE 11 has changed versus LOVE 10. So LOVE 10 was what I taught the Extension School course, the games course. By the way, I'll plug that here, cs50.edxorg/games if you're interested. This course teaches LOVE2D and Lua with version 10.2. And in the middle of the course, they actually updated LOVE to version 11. And they changed a lot of the functions therein. So part of that is going to be me figuring out what some of these new functions are. But it looks like they didn't change the setTitle function, so I'm a little bit curious as to what's going on here. If I run this-- oh, you know what? Hold on. Let's do a drawing example just we can figure out why exactly it's not working. "What is the name of the software you are using," says Elias. So Elias, this text editor it's called VS Code. This is just a text editor. And it's made by Microsoft. And it's kind of like a simplified version of Visual Studio, hence the VS part of it. And then the terminal here is just a shell that you would use on a Mac or PC. So on a PC, it's called CMD for Command prompt. And on a Mac, it's called Terminal. And I'm actually not entirely sure what it's called on a Linux machine. I think it's called Terminal as well. Dan, do you happen to know? It's called Terminal? Yeah, it's called Terminal on a Linux machine as well. And then, obviously-- Chrome to browse the web. But, yeah, the main two things are just the VS Code and the Terminal there. "Black text on black screens," says Dan Coffey. Oh, did I write that in the love.keypress function? Oh. Pff. OK. Sorry, yes. I thought I was in the love.load function. Thanks, Irene, for pointing that out. The love.window.setTitle wasn't working, because I thought I was writing it in the love.load function. But the logic that I was just writing was that if I press the Escape key, set the title to snake, and then quit the game. So we weren't actually seeing it. So that was a silly issue on my part. If I run the code now, now it's says snake50. So thanks, Irene, for pointing that out. And thanks for joining this stream. I appreciate it. I might need you to keep me in check while I make all these mistakes today. Great. So that was how to get a window up and running more or less and how to test for keyboard input. Does anybody have any questions before we get into maybe doing some stuff related to graphics? Is anybody having issue getting LOVE2D or Lua running on their machine? By the way, you can click and drag a folder onto LOVE if you're not comfy with the command line and you would prefer to just use more of a drag and drop interface. If you have a shortcut on Mac or PC and you have a folder within which is your main.lua, you can click and drag the folder onto the executable. And that will function the same way. In this case, interesting-- OK, hold on. There we go. So if you click and drag the-- I'm not sure why it didn't work the first time-- but, normally, you click and drag the folder itself, not the main.lua. Don't drag the main.lua, because the LOVE executable is going to look for a folder. Click and drag the folder onto your shortcut on your desktop if you have it there. And then that will trigger LOVE2D running the application. Blow Into The Cartridge says, "all good. Thanks for this awesome video. Stumbled upon it and already super hooked. Keep it up." Thanks so much, Blow Into The Cartridge, appreciate it. Thanks for coming by. I'm going to go ahead and start messing around a little bit with graphics. So I know that Snake is generally a grid-based game. It looks like it's mostly just made out of squares. So we can sort of visualize our game space as being this 2D grid, right? And in LOVE2D, we can visualize a coordinate system where on the top left corner is our origin or 0, 0 point. And anything in the positive direction is going downwards-- sorry, on the y-axis is going downwards. And on the x-axis, anything that's going sort of to the right would be positive as well on the x-axis. Inversely, if you were to go to the left side past the edge of the screen, that would be negative on the x-axis. And if you were to go above the screen on the y-axis, that would be negative on the y-axis. So you can always visualize anything that you put in your game world, whether it's a sprite or a shape, as having an x, y coordinate. So I want to start thinking about maybe how I can fill this space with my game world with a bunch of squares that sort of represent, you know, the ground and the snake as well. So there's a function in LOVE2D called love.graphics.rectangle, which takes a mode first of all, so whether I want a filled rectangle, so something like filled with color or just an outline of a rectangle. In this case, I do want a filled rectangle. But we're probably going to want something with maybe an edge as well, so that I can see the individual pieces of the snake. And now I just have one contiguous snake if it's just all a bunch of squares sort of chain together, right? And I'm probably thinking I want some way to visualize where the head of the snake is, too. Because especially as the snake gets really big, I'm going to kind of want to keep track of where it is. Otherwise, it'll get lost amongst all the green squares that I'm seeing throughout the game. So I'm going to just pass in a string called fill, which just tells this function we're in fill mode not in line mode. The other one would be line. And then I'm just going to say, I want to draw a square just in the upper left. So I'm going to say 0, 0. And let's just say my snake is going to be 16 pixels-- this square, rather, is going to be 16 pixels wide on this x-axis and 16 pixels tall as by the y-axis. I'm going to save it. I'm going to rerun it. And then notice that up at the very top left-- it's kind of small-- we do have a rectangle, but it's white which is interesting. So I didn't have an option to specify a color here. It just sort of defaulted to, oh, whatever I draw just make it white. It turns out that LOVE2D, just like OpenGL, is based on a state machine, state machine just meaning that the LOVE2D kind of has any one given state at one time. It has a set of variables internally that it manages that allows us to just change the way that it renders things. In this case, I want to do love.graphics.setColor to some value. And that will change the state of LOVE2D such that anything I draw after that will abide by that state transformation. So any color that I pass into this function will apply to this rectangle that I just tried to draw right afterwards. And this was different in LOVE version 10. But in version 11, all of these variables are now between zero and one that I pass into this function. And it's going to take four variables, a red, green, blue, and an alpha component. And these four variables are what determine the color of something. So in this case, I want a green square, because the snake generally is green. So I'm going to say 0 red, 1 green, 0 blue, and 1 alpha. And what that will translate to is no red at all, full green, no blue, and full alpha. And for those unfamiliar what alpha is, is basically how transparent or opaque that color is. So at 1, it's fully opaque, meaning I can see it completely. But if I were to say 0.1 or 0, it would be invisible or slightly visible. Bhavik Knight says, "my Scratch project for CS50 P set 0 was based on Snake, but tail wasn't dynamically increasing." Well, hopefully, we can demonstrate some techniques for potentially making that work today. And there's multiple different ways we could do it. I have a couple ideas in mind, but we'll see what may be best and what we can figure out live. OK. So I've specified the color of my state. Whoop, sorry. I'm going to save it first. Always make sure you save your project and rerun it. And then when I rerun it, notice that, indeed, we have at the top left no longer a white rectangle, but a green one. So it seems to be working quite well. Now, this isn't all that interesting, because, you know, we can't move the snake. It's not doing anything. It's just a static rectangle at the top left. But we do have something that we're drawing to the screen. That's a good start. But let's say now I want to move my snake to the right. We'll do it continuously, I suppose. And so we've been Messing around with a love.draw function, which is where you can define everything that you draw to your scene. We messed around with love.keypressed. Now, we want to sort of take a look at love.update, because it feels like now I want to actually update what's going on in my game. I want to change something in the scene. So in my love.update, I want to think about how I want this green rectangle to move. And I'm thinking I kind of want it to move to the right maybe just infinitely. I'll just infinitely move it to the right. So since we talked earlier about how everything exists on an x, y plane, sort of like this coordinate system, I know that if I want to move it to the right, the right is positive. And it's a positive transformation on the x-axis. So whatever I draw on this x-axis, which is here, this third or fourth variable in the rectangle function which is this x-coordinate, if I just increase that over time, that will have the result of my rectangle moving to the right, right? And if I were to decrease it, it would move the rectangle to the left and it would come out of view. So let's say I want to make this a variable, maybe call it snakeX. And let's go ahead, first of all, declare snakeX up here. local snakeX equals 16. So it's going to initialize itself to the value 16 which we had before. If I rerun it, notice that it stays the exact same. But I want to change this over time. So what I'm going to do is this variable dt is what's probably one of the most important variables in game programming generally. But specifically here in LOVE2D within the update function, this will allow us to update anything by multiplying dt by some value. Because every frame, dt is essentially the amount of time that's passed from one frame to the next. So between frame one and two, about, what is it, 0.16 seconds elapses, which is 1/60 of a second. And if we define a constant and multiply it, it'll move that constant or manipulate it based on how much time has passed between each frame. SP Vendor says, "isn't that the size of the rectangle you're changing rather than the position?" Oh, yes. So sorry, yes. That's correct, my bad. The x, y is actually these first two numbers, not the last two numbers. And in this case, this would need to be 0. So good call, Steve. Thanks for pointing that out. snakeX should be that first parameter. This is why we do it live, so we can see all these wonderful, wonderful blunders. OK. So, anyway, dt is basically going to allow us to multiply any transformation, any value, by the amount of time that's passed between frame one and two or between two and three. Just every frame, this will be a new value. Let's say I want my speed of my snake to be, oh, I don't know, 100 pixels a second, which it would effectively be. This will effectively be how much that moves per second. And if we multiply-- sorry, if we were to assign snakeX to itself plus the snake speed times delta time, what that'll effectively do, just sort of like plus equals in other languages like Java or C-- unfortunately, Lua doesn't have a plus equals operator which is unfortunate. But we can say take my value of snakeX and then add that speed value times delta time. So this will take place every frame, so 1/60 of a second. So this will be 0.016 approximately multiplying by 100. So over the course of 60 frames or 1 second, we'll have moved 100 pixels. It'll basically just update itself consistently. So now if I were to do that, notice that we are moving, indeed, about 100 pixels every second if you were to calculate it out. And the beautiful thing about this is it'll actually stay consistent between different hardware. So if you're running on a machine that's kind of slow and it can only process one frame for every three frames that another machine produces, the dt will be triple the amount in between the individual frames. And so this will still move it 100 pixels per second. Got a few messages in the chat-- "isn't this written-- yes, that's why I guess he's using the function update for moving positions." That's correct, Zad. We are using update to move positions. We do it so that we have access to this dt parameter. Because if I were just to do it without dt, right, and we're not scaling it by the amount of time per frame, this will run absurdly fast. First of all, you didn't even see it move-- well, hardly. Because it's just moving at an insane rate, basically as fast as my CPU is capable of running this operation. Or I guess, rather, I think, it's hard cap to 60 frames in LOVE2D. Often, with game engines, if you don't cap the FPS, this won't run at a cap. It'll run hundreds of times. But in LOVE2D, I do believe that this actually only runs 1/60 of a second either way. So if we're running at 60 frames, we are moving per second, that would be, 6,000 pixels. So we moved 6,000 pixels in the span of a second versus 100 pixels, which is not what we want, generally. That's too fast for the human eye to see. So we use dt to scale everything based on the time that's elapsed per frame. Time difference, Bhavik Knight, it's short for delta time, so, yeah, effectively the time difference between one frame and another, the delta between frame x and frame x plus 1-- I should say, rather, frame x and x minus 1. Awesome. OK. Sounds like everybody's on the same page here. So I have a moving snake, but it's not really responsive. I can't do anything if I were to run this. And I'm pressing the keys. I kind of want to have control of where the snake goes, right? I want it to move down, left, up, and right if I hit those keys. And I'll just kind of infinitely move in one direction. Moreover, I want it to move in such a way that, if it were to go past the right edge of the screen, it should actually come back-- sorry, reverse, mirror's flip. It should actually come back on the left side. So if the snake goes all the way to the right, it should come back to the left. And if it goes all the way up, it should come back from the bottom going up, so that we kind of have this looping world space. Because, otherwise, we won't see where the snake is if it doesn't come back, right? It won't work that way. So we have a few problems that we need to bite off here. The first thing that I think I'd like to tackle is changing the direction which the snake is moving in. OK. So we're going to need a couple of things here. So if we can move in not only the x direction, but also the y direction, I should probably make another variable called snakeY and also set that to zero, right? Because we're going to potentially not just move the x, but also move the y. Andre, "is LOVE's delta time constant, or will it theoretically be a larger value if the frame rate drops? Is there an equivalent to UNITY's fixed delta time in LOVE2D?" The first answer-- yes, it will be larger value if the frame rate drops. And in terms of fixed delta time, I do believe it does. Let's look up the LOVE2D Wiki, LOVE2D fixed timestep. This is somebody using it, I think, in a project, but not actually-- oh, this is like somebody manually creating their own fixed timestep. It may be something that you have to fix yourself. Typically, you use this sort of thing in physics calculations if you need to apply some physics transformation step by step rather than having it apply to some, have it be like, a multiplicative value. In this case, I don't know if LOVE2D-- I actually haven't used it myself. Or at least I think I did once, but it's been a long time. I don't remember offhand. I think you do actually have to write your own fixed timestep. And I think you can actually mess with a LOVE run function-- sorry, not LOVE runs out, LOVE2D run function-- which, underneath the hood, this is LOVE's function. Yeah, you can see it here. I think this is where you would ideally write your own fixed timestep code where you sort of perform physics calculations and whatnot and do sort of like minusing of the dt off of that larger timestep and then apply the update changes but this is where you can sort of see what the overall sort of main function of LOVE2D, or rather the game loop of LOVE2D, looks like. For those unfamiliar, every game has to have a loop where it runs, like I said, every sort of frame over, you know, usually 60 frames per second, every single frame doing some updating, doing some rendering, all that stuff. This love.run is LOVE's example or LOVE's implementation of this game loop. But, yeah, to answer the second part of your question, Andre, I believe in LOVE2D you have to actually implement fixed time step manually, not as it normally exists with update and dt. Good question. OK. So to move our snake, we have the ability to currently just move it in one direction. Let's test it first with being able to move it left and right. So if I were to, for example, press left, then instead of adding the snake speed to my snake, I should probably subtract it. Because that'll take me from going to the right and increasing my x value to going to the left, decreasing the x value. And I realized, again, that my character on the screen is flipped. So if I do key =, for example, left here, then I should be able to say-- let's say I need to keep a variable of this, whoops. snakeMoving = left, right? And then-- else if key = right, snakeMoving = right. And then up here I'm going to need to keep track of that, so snakeMoving = right. So now I have a variable that it'll at least let me toggle back and forth. It's given my snake kind of this state where I can say, OK, am I moving right or left? And if I am moving right, add the value. If I'm moving left, subtract the value. To do that actual math, that's going to take place here in the love.update function. And then what I can do is basically say, if snakeMoving is equal to left, then taking this statement that I wrote before, I should probably, instead of adding the snake speed times delta time, subtract it like that. And then else, it's going to only be for now left or right. I can say snakeX = snakeX + SNAKE_SPEED times delta time. And if everything is going according to plan here, I'm moving right right now. If I press left, oh, indeed, now my cube is moving to the left instead of to the right. And I can switch back and forth as needed. And it's got this sort of continuous motion. So we've taken a step closer in the route that we need to actually get a sort of snake moving around the screen. Does anybody have any questions so far as to sort of what we've been doing? Looks like you haven't had any questions in the chat just yet. Feel free, ask as many questions as you want. I'll be monitoring the chat. I'm happy to answer, happy to talk about whatever folks are interested in. But if there are no questions, we'll just go, I think, dive into sort of how we might do this by moving the snake up and down as well as left and right. "Would it work to do something like snake moving = key without the if else if?" Yes, in theory. But this key can be anything, right? So if I were to hit A, or Escape, or Spacebar, or Shift, or Return, it's going to get that value. So it would only work in this particular case if I input one of those two keys. Now, we do have an else if key-- oh, actually, it's not going to evaluate either these statements as true in that situation. So it's just going to stay on whatever its last value was even if we tap a weird key. But, generally, that's not an ideal practice if you expect that you can get a lot of other values and if you're sort of parsing those values in fairly complicated ways. In this case, it would kind of work. But I would recommend against it probably. It's all a little bit more obvious to know what's going on here, too. Good question, though. It's a good thing to sort of try and stay conscious of. You know, a lot of like hash map related logic can derive from that sort of way of thinking which can optimize your workflow. OK. So let's go ahead and do the following. I'm going to add a couple more conditions here. So I added two more conditions. And these two conditions are just to take into consideration whether you're moving up or down. So in this case, snakeMoving = up, snakeMoving = down. And also, another thing about this particular instance is we're using strings to test for values. Sorry, we're using strings to assign sort of state to something. Generally, you wouldn't always do this, because are a little bit more weighty to use as state variables. In this case, for the key checking, they've defined a bunch of different states. But if you have a sort of snake class or snake object that has maybe 15, 20, 30 different states, I would probably use an int or some value and not a string just to save memory, just be a little more efficient in terms of actually checking for comparison. Because it is a little bit more intensive to check against a string than it is to check against some integer that we've defined. For example, if I've declared a table up here-- by the way, we'll get into tables in a little bit. If I have a States table, for example, up, down, left, right, now I've actually created-- sorry, and an up in this case. These wouldn't exist. But let's say one, two, three, four. And let's say maybe those are defined elsewhere as up, down, left, or right. Now, I can just, for example, up = 1, down = 2, et cetera. Now, we can actually do a comparison against an integer rather than a string and just save us a little bit of processing power. But we won't worry too much about those kinds of optimizations today, because those are not something that we need to worry about for a project this small. That would be for something a little bit larger scale. But, anyways, the next part of our logic-- so we have, you know, the simple basically take a key, assign whatever direction you're moving to its state, right? We have some sort of state with our snake whether its moving up, down, left, or right. But I want to not only test for left or right. I also want to test for up and down. So we can kind of do the same logic that we did before, else if snakeMoving is equal to right, we can do that. Else if-- whoops, it wants to auto-indent on me-- snakeMoving is equal to up, then do this, whatever that might be. Else if snakeMoving is equal to down, then do the following. Now, these are going to differ, because we are no longer going to add or subtract from our x value. We want to add or subtract from our y value. Because our y value is what's representing our up and down in the game. So I'm going to go ahead, I'm going to copy this. I want to just paste this in here, change snakeX to snakeY. Notice that my editor lets me select multiple things and sort of edit them, which is kind of nice. And then this will function in sort of the same way, except this needs to be plus. So if we're going down, remember y increases as it goes down and decreases as it goes up. And, here, don't forget we're always going to be at zero unless you replace our y-coordinate with the hard-coded zero, to the y variable that we're storing now. OK. So let's go ahead and run this. Whoops. Then expected near snakeX on line 30. Ah, right. I forgot a then keyword right here, very important. So, now, I'm moving left or right. If I hit Down, notice that now we can move down. I can move up. And I can keep moving sort of arbitrarily around the scene, so pretty cool. So we've taken a few steps in the right direction here. Anybody have any questions on sort of what's going on here at all? And if not, we'll go ahead and maybe talk about getting everything working in a grid perhaps. OK. Cool. And this will be where we have to spend a little bit more time thinking about sort of the data structures and algorithms that underlie the game. But right now, we just have continuous movement along either the x or y-axis. But I want to make my game, first of all, a little bit easier to deal with. Because if I can have it in a grid, I don't need to actually worry about continuous collision detection which would be maybe a topic for another stream. But I can just have a very discrete layout of squares and basically check is there a snake piece in this square, if there is, and then do whatever logic I need to do. You know, check to see whether my head is biting the tail of the snake or whether there's an apple in that tile, for example. We basically need to think about that way of looking at the problem. But it's just a little bit easier to also render it and just check for those sorts of things, right? Collision detection, if it's continuous, we have a little bit more to worry about. We have to actually put our snake into a series of bounding boxes. Every single piece of this thing needs to have a rectangle that represents its collision. And we need to check to see whether any of those individual rectangles are overlapping some other rectangles. But, again, we won't worry about that today. Because Snake is a grid-based game, we actually get a little bit of that for free. And the same logic sort of applies to tile-based games, too, thankfully. ""[INAUDIBLE] is used all the time in this context, not a time derivative, which would be an infinitesimally small value, whereas delta time is just a small, but real, value, something like 0.01667." Correct. Thanks, Andre, for clarifying that. OK. So, now, we can sort of talk about tables, because tables are very important. In C, you get these things called arrays. And in Python, you get lists. And in Java, you get arrays as well. And JavaScript gives you arrays. Generally, you see them as arrays or lists. In Lua, there isn't the notion of an array or a list, but rather a table which is actually a combination sort of of lists and things called hash tables or hash maps where you can assign some sort of key with some value and pair them together, and then look them up with a very quick lookup time versus having to traverse a list and look at each individual value. Today, we're going to use the table data structure as a list. So I'm going to say I want a local tile grid. And, again, local, I don't know if I talked about it. Local is basically just saying I want this variable to be exclusively within the scope of where it's defined. For example, if I were to declare a value called local val = 1 in my love.load function-- sorry about that. If I have a variable val that's defined as local within this love.load function, I cannot access val outside of this function. So if I were to try to do val = 3 right here-- well, actually, in this case, because there's no typing, it's just going to override this value. But they're not the same. But if I were to do print val, for example, where it needs to access a value, access of variable that's been defined already, it's going to throw me an error and say, oh, val is not declared anywhere. It doesn't recognize that symbol. In the case of local defined here, because we're defining it at the very top of the file outside of any functions, it just means if I have other Lua files in my project they don't have access to that variable. But if I were to say, tile grid without local, then other files that import this module or make reference to it actually can get access to that value which we don't want. So I'm going to do local tileGrid = and then these two curly brackets here which basically tells me I want an empty table here. And then we're going to fill it with whatever information we need. ""[INAUDIBLE] relatively bigger time difference." Correct. OK. So I have a empty table. And I want this table to be representative of my game space, my game window. And I want to figure out how many tiles we can actually fit within my game window. And so I'm going to, I believe it's, love.window.setDimension-- SetMode, sorry. And then this is where you can actually specify how large your window is when you open it. And I think the default, is it like 800 by 600? I'm not entirely sure what the default size is. But let's just say I want it to be 1,280 by 720. And then what were the other parameters? I think it also has some flags. We could say full screen is false. Resizeable is true, those sorts of things, which allow us just to resize. I'm actually going to set realizable to its default which I believe is false. And then I'm going to run this, make sure I used it correctly. Now, notice that it fills my entire screen. Since my resolution on my monitor is currently 1,280 by 720, the window itself now fills the entire monitor which is useful. Now, that I know what my resolution is, I can say, OK, maybe I want to have all of my squares be 16 pixels. Or, actually, let's do 32 pixels. Let's make our square size 32. So I'm going to say TILE_SIZE gets 32. And then just to have good style, I'm going to say window width is 1,280 and window height is 720. I'm going to come down here, replace this with window width, replace this with window height. And now that I have these values, actually I'm going to put this down here since this is gameplay. Whoops. That was not what I meant to do. I didn't copy it. Copy. Paste. I'm separating sort of the more rendering stuff from the gameplay stuff. So the snake speed is 100. The window width and the tile size are up here. I'm going to go ahead and say I need to figure out, basically, how many tiles can I render on the x-axis and how many tiles can I render on the y-axis. Because I'll need to know this when I start assigning positions of all the individual tiles, right? So I'm going to say tiles-- rather, MAX_TILES_x = WINDOW_WIDTH divided by TILE_SIZE. And MAX_TILES_y is WINDOW_HEIGHT divided by TILE_SIZE. And assuming that those divide evenly, this should work out just fine. I'm actually not sure offhand. I think those divide evenly. Let's figure that out. So 1,280 divided by 32 is 40. And 720 divided by 32 is-- oh, that's not, 22.5. OK. So I need to actually, because it's going to truncate it down to 22, because it's an integer-- recall, 1,280 divided by 32. No. I apologize. No, Lua actually does do floating point arithmetic I believe. So toint I believe is the function plus 1. So now this will take whatever the value of the expression that I'm evaluating here is, assign it to a integer, and then add 1 to it. So it's going to bring 22.5 to 22 and then add 1 Actually, as a sanity check, let's make sure that's correct. I'm actually not 100% sure offhand. Lua, I'm going to say 22-- or I'm going to say, what's 1,280 divided by-- sorry, 720 divided by 32? Print 720 divide by 32. OK. It does do floating point as I thought. sorry so integers and floats, they aren't really separate data types in Lua. Lua has this data type called a number type, unlike languages like Python which do have floats and ints. And C, which actually enforces that you use floats and ints and adhere to it more or less, well, with some type coercion, the number type will just automatically do floating point arithmetic when you divide. So unlike some languages where it just gets turned into an integer, in this case, it'll actually get turned into a float. And actually I'm realizing now it's going to be like half of a tile off of the bottom, which is going to look a little bit weird if we get to the bottom. So what I'm actually going to do is I'm not going to add one. I'm just going to take the int of this, so that it'll kind of come up from the bottom. Because we're at a resolution where it doesn't evenly map 32 pixels divided on both axes, we're going to deal with it. There will be a little bit of black space at the bottom, but that's OK, better than it sort of cutting off the snake when it gets to the bottom of the screen. OK. So now we know how many tiles we need to render on the x-axis, how many tiles to render on the y-axis. I'm going to figure out a way to draw this. I'm going to look at the chat really fast just to make sure it didn't miss anything. OK. Hi, Nimble. Good to see you. Thank you. OK. Bhavik Knights says, "take the greatest common denominator?" Yes. OK. Yeah, we could do that if we wanted to enforce our resolution sort of work. But because, generally, 16 by 9 resolutions are kind of the way that we want-- yeah, yeah tile size 40 would absolutely do it. You don't really see tile sizes that are-- yes. And, Jeffrey, you could use the round function as well. That's correct. But, sorry, the 40 pixel size on the tile it's something you don't really see too often in games. You could absolutely do it and be fine. But a lot of the time, graphics, there's like sprites that you get online or that you have your artist create adhere to-- oh, yeah. Irene, good point. Yeah, I would round to 23. But, yeah, if you are looking to round something, my approach is a little bit more-- oh, wait. Actually, yeah, I would round to 23 which was the same point that I made before. Anyway, what I'm trying to say is 32 pixels, because it's- what is it-- a multiple of two, it's something that you'll just generally see more often than something that's 40 pixels. And it's not necessarily because of any technical reason, although this was more so the case back in the day. But, nowadays, you'll see a lot of retro art is just kind of modeled after that old school approach. And it's more of a convention than it is anything else. OpenGL used to enforce that textures were a power of 2. And old hardware just kind of enforced that blocks were drawn in tiles of 32, just because that's the way the hardware was modeled. Because it was just circuit, you know, binary circuitry effectively. But, yeah, suffice to say, 40 pixels would work here. But it's not a trend that you would often see, I don't think, in games unless you wanted to do it as a creative decision. And it wouldn't strictly map well to changing resolutions to weird other-- like, because resolutions can vary all over the place, too. You kind of just have to take one sort of trend for your art or one size and make these sort of decisions where you maybe don't display half of the bottom row of the grid to make 720P work, basically. So good points all around, though. "True, we will need a custom function that will get a second parameter to specify if we are going up or down? True, yeah. And you can you can also use math.ceiling or the ceiling function and the floor function which they will give you the highest integer around it and the lowest integer around it, respectively, regardless of where the number actually is. "Don't forget to change the tile size in the last function," says Steve. OK. Let's take a look here. Oh, right. The actual rectangle being rendered? Correct. Yes, good point. Thank you for bringing that up. And that is why we defined that up there, so TILE_SIZE and TILE_SIZE, right. So what we were getting at is now that we've defined how many grid spaces we want sort of on the x and the y-axis, we should just sort of like sort of draw out everything. We can make sure that we've aligned everything appropriately. So what I'm going to do is I'm going to use a for loop, a nested for loop. I'm going to say for every sort of column in the game. And then within each column, I'm going to say for every row, right-- I guess it's be backwards. For every column and then every row in that column, I want to render a tile in that x, y position, right, times tile size. And we effectively looking in those increments of 32 pixels. So I'm going to set my color for debugging purposes to blue, actually. I'm going to say RGB to 1, right? So if we render this-- whoops, toint-- oh, sorry. Oh, sorry. Is it to number? Oh, sorry, no. You have to use floor, math.floor in this case or math.round, not toint. Is that correct? Hold on. Oh, yeah. Because, duh, there's no int in Lua. So you can't actually do that. So in this case, I'm going to set it to math.floor. And that should work. OK. So now we have a 32 pixel by 32 pixel blue tile moving around, but we're not actually trying to figure out where the blue tile is. I want to make it cyan. I feel like that's easier to see on screen. So I'm going to do something like this. For y = 1 for the-- what do we define it as-- MAX_TILES_y do for x = 1 MAX_TILES_x do. And what this is doing is it's a for loop. This is Lua's version of a for loop. But we're saying we have our initializer here. For y gets 1 until it reaches the value of MAX_TILES_y do whatever's in here and then the same thing for every x-coordinate, x position. For x = 1 until MAX_TILES_x, do this. And so if our number of tiles that we can fit on, let's say, the x-axis is like maybe 40, it'll go from 1 to 40. And then same on the Y-- 1 to 30 or 1 to 40, what have you. Don't forget to do-- OK-- making sure I'm up to date on the chat. And then what I want to do is, for every one of these positions, I wanted to call love.graphics.rectangle. And I just want a line function right now. I want to see my grid visually. So I'm just going to use lined rectangles. I'm not going to use filled rectangles. And then I'm going to hide that left panel there, so we have a little more room here to work with. I'm going to say, because we need to do a x, y first, I'm going to say x minus 1. And this is an important thing to be conscious of, because normally loops in Lua they start at 1. And, also, array indices, tables, start indexing at 1, which is a kind of a weird Lua-based thing. So we want to actually subtract 1 from x and y, so that it maps to our coordinate system. Because our coordinate system actually starts at 0 just like most things in CS usually do. Lua is kind of a black sheep in that it conventionally and syntactically a lot of its things start with 1. So I'm going to say x minus 1 times TILE_SIZE, y minus 1 times TILE_SIZE. I'm going to then say the size of that rectangle on the x-axis and the y-axis, which should be just that. And if I've written everything correctly, I should now see a cyan grid. And I do. Perfect. So this is an indication of what my grid looks like. It kind of gets cut off at the bottom, because my monitor is not quite tall enough for me to see the whole window. But, clearly, we're moving not only anymore in just the, like, black space. But we've outlined this grid that we're going to start adhering to. Now, if you notice, the square doesn't adhere to this grid in any kind of discrete way. It's sort of continuously moving throughout the world space. And you can see it can kind of get like caught up in between coordinate points and a little bit weird. So what we need to do is lock our square to this grid. We need to hard lock it. And I'm actually going to minus 1 off of the tile size on the y-axis, just so we can see it a little bit better. And it looks perfect. There, now, it maps perfectly to it. We're not going down a little bit too far. But, yeah, again, we're going to need to align this square with our grid so that it's completely locked into it. Let's keep the grid active for a little bit. And so what I'm going to do, actually, I'm going to take this code. I'm going to take it out of here. And I'm going to define a new function called drawGrid. And I'm just going to paste that into there just like that. And then I'm going to define another function called drawSnake. And I'm going to call it here. I'm going to say drawGrid, drawSnake, right? Because I want the grid to draw first, and then my snake to draw on top of the grid. I'm going to paste that bit of snake drawing code into the drawSnake function. And then just so I know the difference, the clear difference between them, I'm going to set the color to green on the snake just like that. So if everything's correct, now I have a green snake rendering. And it might be hard to see on stream, but I have a green snake rendering on top of a blue gridded background. So if anybody has any questions, definitely let me know in the chat. The next thing that we'll tackle I think is sort of aligning our snake with this grid, and then apples, and then eating apples, and growing the snake. Well, we'll start with just eating apples. And then we'll add to the end of the snake. So any questions at all? I'll monitor chat for a little bit just in the corner of my eye while we-- oh, I also kept this local val = 1. Let's get that out of there. Don't need that anymore. And, yeah, perfect. So we have this grid table. In this, we're not actually using the grid table for anything. But we will start using the grid table. I'm going to assume that each grid tile, each tile in my grid, should have some value whether that's a 0, meaning that there's nothing there, no snake, no apple, a 1, meaning that-- or maybe a 1 for the snake just so I can differentiate the color. And then a 2 for the snake and then maybe a piece of the snake body. And then 3 for the apple that I want to eat with the snake. And let's just say that that's the extent of our game, the mechanics of our game. You have apples. You have the snake head, and then the snake body which can move around. Basically, what I want to do is I want to take this table. I want to set all of its values to the 0, 1, 2, or 3. And then I want to iterate over the table, basically, and do the same thing that I did down here in drawGrid. So what I need to do is initialize the table. So what I'm going to do is I'm going to make a function called initializeGrid. And I'm not going to make it take any parameters, because our grid is global in this case. So we'll just assume that it stays global. I'm going to go ahead and kind of just do the same thing. I'm actually going to just take this here, right? I'm going to leave it in there, because we're going to sort of need that same logic. But I'm going to copy this. And then I want to do something in here where I can initialize the table to something. Now, for each column I'm basically going to want a table. In order for this to work, for my table to work as a data structure for this example, I'm going to want what's called a 2D array. I'm going to want a 2D grid of integers, basically. So it's 2D array in C. I get a 2D list in Python, although Python's a very flexible language where you can have lists of tables of all sorts of weird stuff. Lua's kind of the same way, but we're going to have just a bunch of tables within this table. And then those tables are going to kind of represent our rows rather. So I'm going to say table.insert into my-- what did I call it-- a tileGrid. I'm going to insert into tileGrid an empty table. So the result of this is that for every row, I'm basically counting down on the different rows. For every single row for every y value, I'm going to add to an empty table into my grid, my initially empty grid variable or table variable. And then within the x loop of this initialize function, I know that I can index into this table my tileGrid at the index that y is. Because whenever I insert a new table into that grid, tileGrid, I will have, basically, tileGrid 1 if y is 1 equal to a new table. If y is equal to 2, this will exist. This will exist. This will exist every time I increment y. So for that reason, I can go into the tileGrid1-- or, rather, y, which will be 1, 2, 3, 4, or 5, until MAX_TILES_y. And then I can insert some value there, because that's where we're actually going to store the integers, the 0, 1, 2, or 3. So I'm going to set them all by default to 0, right? And I should be a little bit better about this. What I'm actually going to do is I'm going to say TILE_EMPTY = 0, TILE_SNAKE_HEAD = 1, TILE_SNAKE_BODY = 2, and TILE_APPLE = 3. So, now, I'm not using what are called magic numbers, which we teach in CS50. They are sort of constant variables. And I can replace this with TILE_EMPTY-- so a nested loop basically going through our entire grid for the size of the tiles on the y times x effectively and then initializing all of those to 0, all of the tile indices to 0. "I've never had the chance to get into Lua, but I saw you easily control the snake with your keyboard. Is it a code you did, or something the LOVE library allows you by default?" How I was able to control the snake was the keypressed function here. Basically, I'm looking to see-- anytime you press any key in LOVE, it's going to call this function keypressed. And it's going to have some value that this key variable gets. And it's going to be a string. And in this case, I can check, for example, is it escape. Did the user press Escape if they pressed a key? And if it is, I can quit. If it's left, right, up, or down, I can change some value that my code lets me do. So snakeMoving is a variable that I declared, which allows me to move left, right, up, or down. And then in my update function, which is a function that occurs every 1/60 of a second approximately depending on how your computer can handle LOVE2D, which generally it's fine, every frame that elapses love.update gets called with a parameter called dt, which is the amount of time that passed since this frame and the last frame. And the snakeMoving variable will have left, right, up, or down set to it, right? So then if it's moving left, I can decrease this snakeX variable that I declared earlier. The snakeX variable is just my position in the 2D coordinate system, so its value on the left and right, the horizontal axis. And same thing with up or down-- letting me manipulate my snakeY variable, so whether the snake is going up or down. And then in this case, what we're doing is we've defined some speed that I want my snake to move, but this will be sort of relevant still. But it won't work exactly the same going forward, because we're going to start transitioning into a grid and discrete movement. But the SNAKE_SPEED variable here we're multiplying by delta time, which means that no matter how many frames have elapsed between now and the last frame, or sort of how many frames are skipped if you're running on a machine that is a little bit slower potentially, this value will be consistent. It will consistently move you to the left, right, up, or down by some value over time. And so we, therefore, use snakeX and snakeY in our love.graphics.rectangle function call down here when we call drawSnake. And then notice that drawSnake itself is called up here with drawGrid in our love.draw function. So there's a lot of pieces. We've put this all together. This isn't something necessarily that LOVE2D has allowed us to do. But it's made it fairly easy in as much as we can check for user input and how much time has elapsed since the last frame. And we have these nice convenient functions for drawing simple graphics. These are the things that LOVE2D gives you. And it's up to you to take them and program them to fit the needs of your particular game, so good question. "How to do a main menu, like a start, play, or option?" That's a little bit more complicated. You would generally use what's called a game state machine and have a sort of certain object that keeps track of what state you're in. So am I in the main menu? Am I in the play state? Am I in the game over state? And if you are in any particular state, you render a specific set of things, whether it's the interface options, like pause game, start game, continue game, whether it's a character running around a field, anything that you name it. But, basically, you have different things you render upon a different state being active at once. And you toggle some variable that keeps track of what state you're in, so good question. We probably won't do this ourselves today. But in a future stream, I'd be happy to talk about implementing a state machine and going into maybe a menu for a game or something like that. Shayna says, "did you align it vertically to the grid, or it's not necessary when the snake moves?" We did not align it vertically yet. So if we run it, we can actually see that we can sort of move it wherever we want to. And see, now it's kind of stuck between different axes, different grid lines. So it's up to us as our next step to actually do this alignment, which I'll demonstrate how we do very shortly. Irene says, "to draw row by row, otherwise you draw a column by column I guess." Bhavik Knight says, "I don't understand why column is the outer loop and the row is the inner loop." You can technically do it either way, but the trend is generally to do the y on the outside. Because if you were to visualize a table as being like this, for example-- and this is essentially what our table's going to look like. If we have a smaller version of our table, you can kind of see that, if we're iterating over the y, we're going table by table by table. Basically, if we were to look at our table row by row, we're actually looking at this being an element, this being an element, and this being an element. So it's easy to iterate first over y, adding a table, adding a table, adding a table on the horizontal and then, once we've added those tables, to iterate over the x and populate them with these values just like this if that makes sense. It's generally easier just to think about the problem that way, but you can, I believe, just technically do it either way and just have your rendering code address it properly. But this is what you'll see vastly more often is the y first and then the x. Good question. OK. So we have a grid available. Let me just make sure I haven't added any unnecessary code. So, now, we've done a little bit of modularizing our code. We've taken some of these statements out. We've put them into functions. We have an initializeGrid function, drawSnake, drawGrid, all these sorts of things. In the love.load, this is where I actually want to initialize the grid. So I actually have to call it somewhere before it'll actually execute, because all we've done is just initialize a function-- or rather, sorry, declare a function. But we haven't called it. So I'm going to call the initialized grid function here, which will actually run that code and populate our tile grid with all that information. So, now, we have a grid of 0s, effectively, being the size in the x and the y of our game window. So what I want to do is, in our drawing code, this is where now I probably want to-- or rather, for the drawGrid function, this is probably where I want to check to see what exists in that grid, right? What's going to be the value at any particular index in our 2D array? Because if it's a 0, remember, I want to draw an empty tile. And if it's a snake head, I want to draw the snake head. If it's a snake body, if it's an apple, I want to draw different things, basically change the color of my OpenGL state, of my LOVE2D state. So I can do if the tileGrid y, x is equal to, let's say-- how did I have them-- TILE_EMPTY, do-- sorry, not do, then. I always get those confused. If the tileGrid at index y, x-- which, remember, arrays slash tables, they start at 1 in Lua by default. If it's equal to TILE_EMPTY at whatever y, x, I want to call love.graphics.rectangle line. And then I'm just going to draw a white grid, actually. So I'm going to set this up here to be 1, 1, 1, 1, the love.graphics.set color. That will make the entire grid white. So all 1s is white. And all 0s is black. And, specifically, these three, this value here is just the transparency. This has to be 1 for it to be pure white. If it's any lower, it will just be kind of a transparent white. But black will render the same either way whether this is 1 or 0. I'm going to draw the x minus 1 times TILE_SIZE y minus 1 times TILE_SIZE. Remember-- because the coordinate system is 0-based, not 1-based, even though we're 1-based currently in LOVE2D's tables. And then I'm going to do TILE_SIZE and TILE_SIZE, right? So if this is correct, then the grid is only going to draw if that index at that grid is a 0, is TILE_EMPTY variable, which we have declared up here to be 0. So if I run this, notice that it indeed works. We now have a white grid instead of a cyan grid. And if I were to go here, else if love.graphics-- or sorry, if tileGrid y, x is equal to TILE_APPLE, for example, then I want to do this same exact thing. I'm just going to copy and paste it. Actually, no, the same thing is going to happen. Sorry. I have the logic mixed up. This is the important part. We're going to draw this either way. Although that's not technically true, because sometimes we want to draw a filled and sometimes we want to draw a solid. OK. Never mind, scratch that. I'm going to do this. I'm actually going to take this setColor function. That's going to go into the if statement. So change the color to white for the grid. And notice that I'm using comments with a dash dash. So that's how you do comments in Lua is using the dash dash. To do block comments would be dash dash square brackets square bracket. And then now anything within that will be considered a block comment. But I'm just going to use a single line comment for now. So we're going to set it to white and then draw a line rectangle if it's equal to TILE_EMPTY. But if it's equal to TILE_APPLE-- which you don't actually have any in the scene yet, but we will add one just to demonstrate. love.graphics.rectangle fill, we want it to be a solid red rectangle, not a line rectangle in this case. I'm going to the same exact thing-- times TILE_SIZE y minus 1 times TILE_SIZE and then TILE_SIZE and TILE_SIZE, right? And then I want to also make sure that I set the color to red, which is the 1 in the R, 0, 0, 1. So red is 1. Green is 0. Blue is 0. Alpha is 1. Change the color to red for an apple. So just a little bit of commenting, documentation goes a long way. Make sure, as you're writing your application, that you try to comment things that are maybe not super obvious in this case. These are pretty fairly obvious things to comment, but it's still helpful at a glance to know what's going on. Elias says, "do you stream every Friday?" Not yet. This is only our second stream, but the goal is definitely to establish a consistent streaming schedule. And I'll probably be doing a lot of game related stuff. But we have other people that were talking about to maybe do some web development or Python stuff, maybe even get some GitHub stuff. So definitely, if you have any ideas and you want us to stream any other type of content, let us know. Write us here or comment on our Facebook. And just let us know sort of what would be useful. Anyways, the logic is now in place for drawing an apple. So if we run this, notice that it's not going to draw any apples at all. Because we don't have any grid indices in our table that are set to 1-- or, sorry, it's 3 I believe is what I made it. Apple to 3, right? So in order to do this, we can initialize our grid. Let's go down to the initialized grid function. As part of our grid initialization, let's just say I want to choose a random x, y and make that an apple so this is actually pretty easy to do. I'm just going to say local appleX, appleY = math.random MAX_TILES_X and then math.random MAX_TILES_Y. And notice that I'm doing dual assignment here. I have appleX, appleY with a comma. I'm assigning it to math.random MAX_TILES_X and math.random MAX_TILES_Y. This basically lets me create two variables and initialize two variables. And the two will match up, assuming that there's the same number of arguments on each side or variables on each side. And there are certain situations where this won't exactly work if you have variables that equate to multiple return types, return variables. But we won't get into that. But basically what this is doing is it's saying get an x and a y-coordinate for the apple that we want to place. And then give us a random value between 1 and some value, so MAX_TILES_X. So give us some value between 1 and MAX_TILES_X, which will be anywhere on the horizontal plane within our game. And then same thing for the y-axis-- math.random MAX_TILES_Y. And if I go into tileGrid y, x, I can assign it to-- sorry, appleY, appleX, I can assign it to TILE_APPLE, right? So I've initialized these two, this X and the Y. And I've added them. Remember Y comes before X. And then I run it. And then, boom, I get a random apple there or some representation of what an apple is in our scene somewhere. And obviously, if I try to go over to it with my current implementation, nothing's going to happen. I should just overlap it, but that is how you would randomly assign something in your game, very simple random generation. OK. So we've done that. Now, something to think about-- every time I run this, pay attention to where the apple is. Notice that it's going to be in the exact same spot every time. That's not very random, because the random number generator in LOVE2D gets initialized to some value that's consistent every time we run the game. So appleX and appleY are always going to get the same value no matter how many times you run this application, even though it says math.random. In order to fix this, we need to do what's called seeding our random number generator. We give it a seed value. And that seed value is going to influence the algorithm that takes place underneath the hood when it comes to actually generating our random value, our random x and y value. The random number generator does a bunch of stuff where it uses some math that gives us the illusion of a random number It's not really random in the technical sense. But it works well enough for us to perceive it as being random. Elias, "thanks for teaching us. Keep up the amazing--" thank you so much for your comment, Elias, really appreciate it. Thank you for tuning in today. I'm going to go ahead and do what's called seeding this random number generator. I'm going to do it in my load function, because that's where it should ideally take place before I initialize the grid, obviously, so that it doesn't use this default seed and then seed the random number generator, right? So I can do math.randomseed. That will allow us to seed the random number generator and give it some value. And then we need to actually give it a value that varies every time we run this game, right? Because if we seed the random number generator with some 0, 1, 2, 3, value, that's effectively the same thing as just letting it give us a random seed that its pre-chosen, right? And so one of the things that we can do to accomplish this is just give this function, this value, called os.time, which is a function that returns the number of milliseconds that have elapsed since, I believe, it's the creation of the first Unix system, which should be some along value that looks that basically looks like that which will be different every single time we run this application. So the next time it might be like that or, you know, whatever. But it will always be different every time when we run our application. So now that I've called math.randomseed os.time, notice that now the apple's in a different spot. And if I run it again, the apple's in another spot. And if I run it again, the apple's in another spot. And so now we've effectively accomplished actually randomly assigning the apple to some location. It's not consistent across every run of our game which would not be interesting. Although you would want this. You would want this behavior if you were trying to debug something that you see. Let's say your debugging Minecraft. And you have a particular world, and you notice this weird graphical glitch. You might not necessarily run into it if you just allow it to initialize to some random value every time. You want to consistently determine how to generate that world the same way every time. And so you would keep that same seed and then rerun it over and over again to debug. The JP Guy says, "hey, everyone, has the stream been live for long?" We've been live for about an hour and a half. So we've been coding Snake from scratch. I'll put all of this in a GitHub repo, so everybody can take a look at it. It'll be github.com. Let me see if I can log in here. Whoops. It's a little that small, or a little bit large I should say. I want to sign in. It's probably going to make me use two-factor authentication, but that is OK. Yup, authentication. So give me just a second. I'll put this on GitHub, so everybody can download it. Let me just go off of the screen here for just a moment while I get this all set up. One, two, seven, eight , six, da, da, da. Verify. OK. I'm going to create a new repo. What will we call this? Twitch stream-- no, we'll call it Snake 50, screw it, Snake demo talk during Twitch livestream. Make this public, create repo. So I don't know if I have Git actually installed on this account. But if you go to this repo, github.com/coltonoscopy-- here, let me bring up my thing here. github.com/coltonoscopy/snake50, you will see that live. And I'll post all of the code to the repo in real time. I might have it available. So I do have Git on here, but I don't think it's functioning. So I'm going to commit and push everything after we're done, because I think I'll get an error if I try to do that. I'll try. So let's see. I'm in-- OK, blah, blah blah. Git init, git add, git commit add, first commit, git remote add origin. I apologize if this is a little dead at the moment. git push origin master, will it work? Crap. So this is where I run into issues. Yeah. Because I have two-factor authentication enabled to my account, there's a few weird things I have to do to get this working. And I'd rather not take too much time. But I'll do this on my other account that I have that I'll set up on, and we'll be good to go. But for now, I'll just run through the code, I guess, a little bit. I think you can also skim through the VOD if you want and sort look at what's happened. But-- bunch of constants for our tile types, our resolution, how many tiles on the x and y-axis we're going to render in a grid, variables to keep track of whether our snake is moving in a particular direction, the x and the y, the grid itself, a function to initialize everything in LOVE2D. So if you're not familiar, LOVE2D is what's going to be the framework which we're using to do all this game programming. And then keypressed, which will press a key, move the snake left, right, up, or down. Update that snake, edit its x and y based on this thing called delta time, which is a floating point value which will give you the amount of time that's elapsed since this frame and the last frame. Functions to draw a grid, which is just a nested for loop to iterate over our grid and its numbers and then render different squares depending on what we've set in that grid. The snake, which will be a rectangle which has our snakeX and snakeY. And then the function that initializes our grid set it to empty. Sets it to a bunch of 0s. "I'm familiar with using C#, but I recently took an interest in this CS50 into course." Oh, awesome. Glad to have you, JP Guy. If you want, I teach this framework on an edX course. So it is cs50.edx.org/games. And we go through all this stuff and make a bunch of different games based on sort of like famous retro games, like Super Mario, Pokémon, Zelda, all those kinds of games. And we use LOVE2D and Lua for most of it and some UNITY towards the end, which you're probably familiar with if you've programmed in C#. Jeffrey Hughes, yes. JP Guy, thanks for sharing the link to the GitHub repo in the chat there, appreciate it. OK. So let's go back to the game. So the next thing we need to do-- so we got our random apple working fine. So now we have our grid that's being rendered. We have a snake which is moving continuously, which we're going to change. It's going to be moving discretely before long. What's the time? 4:38? Good. OK. We still have an hour and a half about. And then we have our apple, which it's basically iterating over this massive grid here and then just checking each individual spot. What's this equal to? Is this a 0? Then render a white empty rectangle, 0, 0, 0, 0, 0. And then eventually, it gets down to here. And this is actually equal to a 3 I believe. Yeah, 3. And instead of drawing an empty white rectangle there, it draws a filled red rectangle. So that's effectively what we're doing. You can kind of visualize this grid as being a grid of numbers that we've just converted to different types of squares. And that's the overall basis behind Snake. Jeffrey Hughes, ""[INAUDIBLE] I love the way you teach. You sound just like Bob Ross." Awesome, thank you. Well, hopefully, I'll maybe be good falling asleep voice for people then. OK. Let's go ahead and figure out now how I want to take this snake that we have moving around and then, instead of making it continuous, I want to make it discrete. I want it to move sort of grid unit by grid unit, not just like continuously, so that it won't get trapped in between different grid lines, right? It'll always be aligned perfectly. It'll be what's called axis aligned, I guess, in this case. Well, this isn't strictly axis aligned, but discreetly aligned based on some tile increment, which in this case is 32 pixels. So that means that we're kind of going to have to get rid of our snake in the sense that it's no longer going to have just an independent x and a y. It's going to have a grid x and a grid y. I guess we're not really getting rid of it as much as we're going to have to do some pretty significant changes to it. First and foremost, it will no longer do what it's been doing in the update function, whereby the x and the y get updated with the snake speed variable. That's no longer going to be the case, right? The logic is going to kind of be the same. But instead of adding delta time to the variable and then adding or subtracting that from the x and the y, we're going to effectively need to have a timer, which that timer can then see has a certain amount of time elapsed in between each individual tile movement. Jeffrey Hughes, "not in that way, but mostly you help people love what you do." Thanks, Jeffrey, really appreciate it. Thank you, man. So instead of having this continuous value, which is going to be moving very cleanly throughout the space, we are going to move it in chunks. So we're going to need to align it with our grid. And to do that, we're going to have some sort of timer, some sort of amount of time in which we determine exists between each separate discrete movement on the axis. So let's spitball and say, maybe I want the snake to move one increment every half a second for now, 500 milliseconds. So we're going to need a couple of things. So I'm going to define a constant. And by the way, these are being capitalized, because these are variables that I'm basically saying they should never be altered at all. In an actual game that you ship, these will probably get altered, honestly, 1,280 by 720 being your window width and window height. Because people change their resolutions. But most of the other ones are not going to be changed. This MAX_TILES_X and MAX_TILES_Y would also probably be changed if these got changed. But we're going to assume that for the sake of this game, this demo, these are all going to be constant. So anytime you see something capitalized and underscored like this, it's a constant variable that will never get changed or should never get change. There are some languages and environments in which you can declare that something is a constant and can't be altered. But in this case, Lua is a dynamic programming language. It's interpreted. And at runtime, it does not enforce whether some variable is to never be altered or not. it. Will just accept whatever variables you put in your namespace and let you do whatever you want with them. And so I'm going to set a variable that I want to assume I'm not going to edit for now, although this can be adjusted later for gameplay purposes. I'm just going to use SNAKE_SPEED actually. And I'm going to set that to 0.5. Now, 0.5, I'm setting it to 0.5 instead of 100, because, previously, we used 100 to be the number of pixels-- excuse me-- per second that we want it to move. But, now, I'm going to basically say the snake speed or, I guess, maybe-- yeah, snake speed is going to be 0.5. So time in seconds that the snake moves one tile, right? So snake speed-- 0.5. And so, now, I can have sort of a counter, like a timer variable that basically takes delta time, which we're using in update and previously we were multiplying by our speed variable, our speed constant. I can take delta time and just add it to counter every frame, to this counter timer variable, every frame. And then once it's added up to 0.5-- because, remember, delta time is going to be given to you in seconds as a floating point value, so usually point 0.1667 whatever every frame. Once that's added up to 0.5, that means that half a second has elapsed. And therefore, we can move the snake one tile in whatever direction, right? So to go along with that, we're going to need some value. I'm actually going to declare it underneath our other snake local variables, or our variables that actually change. And I'm going to say snakeTimer, I going to set that to 0. OK. So, uh-oh, we have a visitor. Everybody say hi to Dan Coffey in the chat, everybody. This is actually Dan Coffey. He's a man of few words. So we have a timer that we've declared. So we need to actually sum dt to that. So all we have to do in this case is say-- whoops, sorry, got a little lost there-- snakeTimer = snakeTimer plus delta time. Remember, Lua does not have the plus equals. Otherwise, you'd probably use that. So snakeTimer = snakeTimer plus delta time. And so now all we need to do-- it looks like you got a little bit of love there in the chat, Dan. JP Guy's showing you some love. We're going to say if snakeTimer is, remember, greater than-- and then up here we declared snake speed, right? We'll say greater than or equal to SNAKE_SPEED, then now this is where we're going to move our snake. Except we're not going to move our snake along pixel wise. We want to move it in increments of 32, so that it stays adhered to our grid. Looking good, Dan. Got a lot of fans for Dan. snakeTimer is greater than or equal to SNAKE_SPEED. We're going to repurpose the snakeX and snakeY that we had before, except now these are going to be indices into the grid, right? So I'm going to say 1, 1. Because, remember, everything is 1 indexed in Lua. And these are going to map to our grid positions later on. We're going to actually keep a record of where our snake is in the grid as well. If it's greater than or equal to SNAKE_SPEED, then snakeX-- oh, and then here we also have to check to see what direction we're moving in. So if snakeMoving is equal to up, then else if snakeMoving is equal to down, then else if snakeMoving if equal to left, then else-- we're not going to check for the last condition, because it will always be one of these four, up, down, left, or right. So it'll be right otherwise. snakeY equals snakeY minus 1. snakeY equals snakeY plus 1. snakeX equals snakeX minus 1. And then lastly, snakeX equals snakeX plus 1. OK. So now we have our snake moving with some timer. And it's going to move every time this snake timer increases past the snake speed constant that we declared before. "There can only be one Bob Ross, but you are pretty awesome. Thanks so much." Thanks, [INAUDIBLE]. I appreciate it. I'll take being second to Bob Ross. That's OK. OK. Well, there's a couple of things here. So I'm going to run it. It should run. It should not run, main 109 saying-- oh, I think I missed a bit of syntax. Let's see. Else-- oh, right. I forgot the end here. So every if needs to have an end. If you see some EOF issue, then you do need an end statement there. Irene, thank you. Irene, appreciate it. OK. So now it's fine. So now notice, though, we're not moving discretely, because we're still keeping track of snakeX, snakeY, still rendering them. But we did get a bit of a delay, a 0.5 second delay before we started moving. So that part is working. But we don't want to move in increments of one. We want to move in increments of 32. And so this is where we need to go in our update function-- sorry, rather, our drawSnake function. And instead of drawing snake here, the snakeX, we're going to treat x and y as grid indices. So I'm going to say just like we did before-- because, remember, coordinate systems are 0 indexed, but tables are generally 1 indexed. So snake minus 1 time TILE_SIZE. so now we're multiplying it by TILE_SIZE. So this 1, 2, 3 pixels that we're moving before continuously are now going to map to perfectly slotted places in the grid. We'll do the same thing here. snakeY minus 1 times TILE_SIZE. I'm going to bring this down here just for readability. We're going to run this. And now notice, though, we're moving so fast that we can't even see the green square after a certain amount of time. It just moves astronomically fast. But we're supposed to be moving, you know, every 0.5 seconds. So what's the issue here? Does anybody know what the main problem is with my logic? It should be working, right? Remember the end at the end of the if, else if, yeah. "What extensions do you use to code in Lua in VS Code?" I use the Pixelbyte LOVE2D extension which allows me to hit Command L on my MacBook. And it will just run. Rather than having to go back to my terminal, which you see me been kind of doing it hidden. But if I were to instead do this, it does the same thing, right? But I don't have to actually go to my terminal. If I had Command L with the extension I have, it gives me that for free. So that's the main extension that I use for Lua. And I think there's other ones. But, for example, if I were doing C# stuff, OmniSharp is a really good extension which allows you to do sort of a live compilation and debugging, which is pretty cool. But, yeah, there's clearly an issue here with my movement of the snake, right? And that is simply the fact that when my timer gets to be 0.5 and higher, it never resets to 0. So in this case, I just want to make sure that whenever you get to 0.5, I go back down to 0. I reinitialize my timer. So I'm going to set my snakeTimer to 0 in here. So if we get to the point where I've gone up to 0.5 or 0.51 or whatever it equates to on that particular frame, I'm going to be back to 0 on the next frame. So if I rerun this, notice that now we are indeed moving along the x direction. And if I hi Down, which I just did, notice that now I'm moving down. And I hit Right, I go right, Left, I go left. And then Up, I go up. So now it's kind of getting there. We're on the right track. It's a bit slow, though, to be quite honest. So I'm going to bump it down. Let's say 0.1, see if that's good enough. OK. Not bad, right? So now this is more or less a workable solution, right? And so if I walk over the apple, nothing happens. We don't have any logic just yet to keep track of whether we've consumed an apple or not. That's going to be kind of one of the next steps, right? The next thing that I probably want to do is grab the apple. And if I eat the apple, I want to respawn a new apple somewhere, right? And then the next part after that is going to be I need a way to map my snake onto the grid, so that I can check in the grid at any given index whether that's owned by a snake tile or not. So that I can, therefore, do collision between my snake head and any part of my snake body if that makes sense. So anybody, let me know if you have any questions thus far about how this works. Otherwise, we'll do a couple of things to get started on actually getting the apples to work. I thought I had a water in here somewhere. Did I? Did I have a water in here, by chance? That's OK All right. Actually, I'm getting a little bit parched. I think I'm going to grab-- SPEAKER 1: [INAUDIBLE] COLTON OGDEN: It's over-- where is it? SPEAKER 1: I'll get it for you. [INAUDIBLE] COLTON OGDEN: You sure? Oh. OK, thanks. Appreciate it. OK. Oh, thanks. Sweet. All right, it's thirsty work. Oh, sorry. Irene says, "does the square continue moving when you're not pressing? I can't tell from here." Correct, yeah. The square will always move, because in our logic we've just basically said when the key is pressed just change the state. But it's not actually checking an update whether the key is being pressed. It's only checking that state variable. So if it's up, down, left, or right and the timer has gone past a certain amount, it'll move it on its own basically. OK. So I'm kind of getting a little bit tired of looking at the grid I think. So what I'm going to do is I'm actually going to nix drawing the grid. Actually, well, no, that's not true. Because what I need to do is I need to draw the grid. But also, if the grid contains the snake and/or the apple, which eventually it will, I still will need to draw it. So what I'm going to do is I'm just going to get rid of this bit of code here. I'm going to comment it out. I can do command/ on my computer. And so now it's a comment, and so it won't actually execute. So, now, I don't have a grid, but I do have a black background and the snake sort of going around. And I can go on the apples or whatnot, but it's not interacting with the apple. So let's go ahead and figure out how we can get the apple rendering-- or, sorry, get the collision between the snake and apple working, and therefore get new snake components and then maybe even have a score. So the score will be easier to start off with. Adding a new element to the end of the snake is going to be a little bit trickier. Oh, and there's actually one more thing that we should take into consideration. And that is the fact that as it stands, if I go up, I don't actually loop back from the bottom. I have to hit down again, and then eventually my snake will come. So what I'm going to do is a simple set of if statements where I have my snake being edited, which should be here. So in my update function, should I put this all into its own function? Most of it's going to be update code for the snake anyway. As your functions get longer, it's generally better practice to sort of break them out into different pieces. But I'll keep most of it in here unless it gets really unwieldy. So what I want to do is notice that we're just kind of moving the snake minus 1 and snakeY plus 1, snakeX minus 1, snakeX plus 1. We're kind of just moving them without really checking for bounds, for checking boundaries on whether we're at the edge of the screen on the up, down, left, or right axes. So what we should do is do some simple checking. If I want to move up, for example, and I'm at index one, well, I should actually move my snake to the bottom index. And if I'm, for example, moving to the right and I happen to hit the last index in the grid, I should probably move my snake back to the index one on the x-axis. So it looks like I went from right to left. So I looped around, came full circle. So let's do that logic here. So I'm debating whether we should make the snake part of the grid first or whether we should just do it. I'm thinking. OK. So we can get rid of draw snake altogether. So let's do that. So let's make the snake part of the grid first, because this will actually be fairly easy to do. If I go to else if in my render function, else if tileGrid y, x is equal to TILE_SNAKE_HEAD. Then I'm going to just copy and paste the apple code. I'm going to set that to 0, R, G. So I'm going to set it to that. But I'm going to make it kind of cyan colored a little bit and just have that be my code here. So I'm actually not going to draw the snake anymore as a separate function. We're just going to make the grid draw the snake. The snake is actually going to be part of our grid just like the apples are just to keep everything kind of simple. And then that way we can check to see. We can look at any particular index in the grid at y, x and know, oh, that's actually a snake body part, for example. And then, yes. Jeffrey Hughes, "you can create a function to remove the redundancy of that code." Yes. Yeah, you probably could. In this particular instance, these are kind of the same. It differs a little bit if you have this code here, which is drawing it as a line. But you could define a function called draw tile, for example, that takes in the draw mode of this, the x and the y, and then the color and then have it do that as well. Just for the sake of time, we won't modularize things to a super extent. Maybe if we have some extra time we'll do that as a creative exercise. But, yeah, good point. You very much could and should do that in a proper, like, full project. Just for illustration, though, we're just going to use a little simple copy and paste just in sake of time. Because we have about an hour left, and it'd be nice to get as close to the end as we can. OK. So we have TILE_SNAKE_HEAD being here. And so now what we want to do is set the-- we need variables, essentially, to keep track of where the tile snake head is. And we can use snakeX and snakeY to do that. So do we want to do it that way? Because the snake is going to actually have to move. So each individual-- oh, wait. No, that's not true. That is not necessarily true, because, yeah, we will need to keep track of each individual snake piece. So let's go ahead. Like I said, I haven't spent a terrible amount of time working through this, because it'd be fun to I think kind of figure it out on the fly. We're going to make a new variable called snakeTiles, which is going to kind of go hand-in-hand with our tile grid, I guess. And then we're going to initialize the first piece here to be snakeX and snakeY. And actually this should go below this piece here, snake data structure. And then every time we want to add a new piece, we're effectively going to take whatever the last piece is, and then we're just going to add-- well, what we're effectively going to do is move this down to here. And then we're going to take the next position, depending on whether we're moving left, right, up, or down, and we're going to fill it in here. But since we only have one index at the moment, we only are just going to put in the snakeX and the snakeY right there. So that works just fine. We might be able to even just keep track of this snake data structure independent of the grid, but it kind of makes it easier for checking the grid for different y, x if we also just kind of add them to the grid. So we'll try it that way. OK. So we have our snake data structure. So in this case, we only really need to keep track of the head of the snake in terms of moving that. Because we're going to move that. And we're going to take the tail, and we're going to basically take the tail and put that where the neck of the snake is. Basically, where the head just moved, we're going to take the tail and move it there. And that'll have the effect of sort of moving the snake all around the map pretty seamlessly without having to manually move every single one of these snake pieces. Because you can sort of visualize if I can pull up Chrome and have the image here, snake game images. If the head is here-- which is kind of actually hard to see in this particular instance. If the head is here and it moves one up this way, really the entire snake is going to stay the same overall. Excuse me. The vast majority of it's going to stay the same. The only thing that's going to change is this tail right here, right? So we can effectively take this tail, remove it from the bottom, and then plug it here. And then that will have the effect of our snake moving one forward when all we've really done is just move the head forward and taken the tail and sort of made it the neck of our snake. So as a performance optimization, now we don't have to manually move every single tile. If our snake is moving, we don't have to move every single one of them every frame. We can just move one piece at a time. So this is a bit of an optimization and just like an easier way to program the snake as well. So that's the algorithm that we'll take to actually solve this. So this will be my head, right, the head of the snake. And every time it moves, whatever is in our tail-- this is, first of all, the head is basically going to shift to be whatever the next title is in the direction we're moving. And then this is going to come down here and fill in that spot basically, should work. Well, we'll see how it looks when we actually implement it. OK. Just make sure everything is working still. It is not. Oh, right. OK, right. Because we're no longer drawing things. OK. So we're no longer drawing the snake, but let's go ahead and change that by making it part of the grid. We should make part of the grid here first. So I'm going to say actually after the grid is initialized, grid at snakeTiles 1, 0 and then snakeTiles 1, 1. Whoop, sorry. I'm 0 indexing when it's not 0 index. There we go. So the grid at snakeTiles 1, 1-- so the first inner table of our snake data structure. And then the first subelement of that table, so snakeX-- or, actually, this should be reverse. Because, remember, it's y, x, not x, y. Oh, actually. Interesting. So snake [INAUDIBLE] 1, 2. No, sorry. I have that backwards. Sorry, having a mild brain fart here. Let's figure this out. So as an aside, "what retro game do you enjoy remaking the most? What about the least?" Game that I enjoy remaking the most? I really like RPGs, so I like a Final Fantasy kind of game I think would be a lot of fun. I did something similar to that. Well, we started with Pokémon in the edx.org course, the games course. The least? I'm not sure. I like a lot of different games, a lot different game types. I'm not a huge fan of physics-based games, I guess, like Angry Birds. We had to make Angry Birds for the course as well. And I didn't find it super interesting I guess. A lot of that is taken care of for you with the physics framework. And I think it's kind of cool to make the different composite physics objects and whatnot. But the actual-- yeah, I don't know. It wasn't as interesting as something a little bit more from scratch I think. But what about you, JP? What would you like to make, I guess, in terms of a game? In the meantime, let me figure out exactly what's going on here. So grid at-- so streamer game fart. Apologize. I'll figure it out. OK. Oh, right. OK. No, I had it. snakeTiles 1, 2 = TILE_SNAKE_HEAD. That's what we needed to do. So basically, take the x and the y from these snakeTiles first inner table and then map that to our grid by putting-- basically, this is the first table within our table and then the second subelement, so the y here, and then the same thing here, but the first subelement, so then this snakeX variable. And then I'm going to assign that to TILE_SNAKE_HEAD, which we've shown down here, right? And so if I run this, it should start off with a-- whoops. Grid 38-- oh, yeah. Not grid, it should be, what is it? tileGrid. So let's call this tileGrid. Run it. OK. So it did work. So it started off with a green tile at the very top. But it's not moving anymore, because we're no longer editing that grid be the tile snake head or tile snake body, however we want to do it, right? So we're going to need to alter that. So let's go ahead. And in our update function, that's where we're going to need to do it. snakeY = snakeY minus 1. So we do still to keep track of our snakeY. And so what we're going to do is that's still fine. We need to do tileGrid snakeY snakeX is equal to TILE_SNAKE_HEAD here, right? So this is still moving and still updating that x and y value that we had before, which should still be being edited underneath the hood. But now notice that we do get our snake rendering. However, its rendering in such a way that it doesn't actually discretely change position. It does, but it keeps the old previous values being written in our grid for the title snake head, which is not what we want. We want to basically set those values to 0-- not to 0, but to whatever the last element is in our grid, right? Yeah. Because the snake head's going to move forward. It's going to create a gap. And if it's just by itself, it's not going to create a gap. It's just going to be moving by itself. But assuming that we have a full snake longer than one segment, it's going to create a gap where the neck is. And so to fill that gap, recall we can take the tail and we can put it where that gap is. And that'll have the effect of moving the snake. So let's go ahead and tileGrid if. Let's do an if statement here, because if we try to index into the table when it's only a size one, if we're trying to get the tail, it's not really going to work. I guess it would work. It would just use the head, which we've already moved forward. So that would have the result of moving it backwards, which wouldn't work at all, right? Because we want to use a tail or nothing at all if it's one segment long. And we can use this thing called this pound symbol, which is a length operator for tables. And we can say if length of tileGrid is greater than 1, then-- whoops. Actually, what we should do-- we're going to need to cache our old values so that we can take the-- so we have to remember their old value of our neck, so that we can put our new variable into that neck, right? So let's go ahead and say-- hold on, let me read the stream real quick. I haven't been keeping up. Dungeon Siege II. Yup. Dungeon Siege II. I've played Dungeon Siege I. I haven't played Dungeon Siege II. But I liked it a lot. It was a lot of fun. Good question. I think I'm on the opposite side. If I could program 2D games, I'd probably make something physicsy, like some 2D Kerbal Space program or Asteroids or something. Yeah, that'd be a cool idea. I think physics games are really cool. And I don't dislike programming them. I think it was just in comparison to, say, Zelda or Mario or Final Fantasy. Those are the kind of games that I enjoyed growing up. So I might have a soft spot for them. But, yeah I know a 2D physics game-- Kerbal Space Program in 2D would be pretty cool, actually. That'd be really cool to see. Shayna, "but each time the snake eats the apple, will the snake become longer by adding new tiles, or the head tile will go back to the tail?" So we will add a new tile. Basically, we're going to need to-- oh, you know, actually what we can do, we can pop off the tail, right? Because we can just get rid of the tail. And we'll just add a new grid element where the head was, so super easy. Yeah. That's a much easier way to do it. "Why not just cut the tail piece and paste it in front of the snake's current head in the appropriate direction as it propagates?" JP Guy, good idea. That would work, too, actually. That's actually probably better. We just need to then flip the snakeX and snakeY variables that are currently pointing at the head to point to the new head, right? But that should be easy enough, right? I actually think that already happens. "Sorry, I just found this channel. Why are you programming this game in Lua instead of, let's say, C#? Just curious, Salmedo." Thanks for joining the stream, Salmedo. Short answer, because it's easy to get into compared to C#. Because C#, you're presumably using it in the context of either X and A, a 2D framework, or using in the context of UNITY most likely of those two options. And UNITY is something that I would like to start teaching on stream, but there's a bit more overhead with that. And I actually myself should spend a little bit more time sort of getting all the nuts and bolts set right with that in my mind. And X and A is honestly a framework that I'm just not super familiar with, although I think is somewhat comparable to what we're doing here with LOVE2D. But good question. I would anticipate seeing UNITY streams in the future, because it's a game engine that I would really like to teach and get really familiar with. But this is a framework that I taught in the game course that took place this last year, cs50.edx.org/games. All right, so, yeah. So whose suggestion was it? "Why not just cut the tail piece and paste it in front of the snake's current head in the appropriate direction as it propagates?" That's an excellent question. And I think we are going to do that probably. "OK. Thank you very much, Salmedo?" No problem, Salmedo. Thanks for the question. Thanks for tuning in. OK. So pop tail, put it 2x tail behind the head. Pop the tail. Put it two times tail behind the head. Put it two times behind the-- I'm not sure I follow, Bhavik Knight what you're saying there. Would you mind elaborating a little bit? OK. Hopefully, we have enough time to do this. Hopefully, I'm not going to blunder my way too far past 6:00 PM here. But let's say, OK. Let me just get reacquainted here with the code. So if we rerun it, we have just the snake moving. OK. So the thing we needed to do was clear where the head used to be. And yes, JP Guy. "You mean when the snake eats an apple?" Yeah, presumably. I think that's what he's talking about. OK. So basically, let's erase, first of all, where the head was before which we can do. So we will need to store all of these snake pieces together. Because we're going to keep track of all of them as we pop the tail. That's going to be important. So we can't just store the information in the grid blindly and use that. We actually have to keep a record of everything. So we're going to keep the same model that we're doing. And then if the tile grid, number of the length of the tile grid is 1-- so this is where we're talking about if we're just ahead or not. If we're just ahead, then we just erase what was behind us. And if we were not, if we were more than 1, then we need to pop the tail. And if we take JP's suggestion, we can put that in front of the neck. And then that will be our new head, basically. But we need to keep track of where the head was before we actually move it. So I'm going to add a couple new local variables here. I'm going to call it priorHeadX and priorHeadY. And I'm going to set that to snakeX and snakeY. So that is going to let me keep a record of where I had the head before, so that I can do something like this. If the number of the tile grid is greater than 1, right, I'm going to-- well, I'm going to leave that. That's going to be a to-do. Else tileGrid at priorSnakeY and priorSnakeX is going to be equal to TILE_EMPTY, right? And so this should work off the bat in terms of giving-- oh, no, it doesn't. OK. OK. priorSnakeY, priorSnakeX is equal to TILE_EMPTY. If the number of the tile grid is greater than 1, which will be in the case that we have a head, and then we have-- oh, this is the tile grid. Sorry. We need to look at the snake grid, the snake tiles. Sorry, that's my bad, snake tiles. So the length of the snake tile is not the tile grid. The tile grid will always be the x times y number of tiles on the screen. Oh, index a nil value, main 78. tileGrid priorSnakeY priorSnakeX is equal to TILE_EMPTY. If snake is moving, so snake will be moving right. OK. Now, this should work. That's interesting. OK. Let's figure this out. This is some live debugging. This is why we're here. So priorSnakeY at priorSnakeX is equal to TILE_EMPTY. And it started to render, but it stopped rendering as soon as we tried to move to the right it looked like. So if that's the case, then snakeX priorHead-- oh, because I called it priorHead, my bad-- priorHead, not priorSnake. OK. That should work. There we go. So, now, notice that we have our snake moving around. And it's part of our grid. Now, what happens if I try to move it beyond the bounds? It doesn't work. And the reason that it doesn't work is because, if it gets to be 0 or some negative value on either axis or a value that exceeds the bounds of the grid, remember we haven't programmed to bounds check for these things. It's going to try to access index 0, or index negative 1, or index, like, 60. And that's not within the range of the game, exactly, out of bounds error. So what we need to do is start checking for bounds. If we're trying to move up, down, left, or right and we're at an edge, then we should accommodate that. So we're going to go to snakeY is snake minus 1. So this is all where we actually update the snake in its position. So if it's up, snakeY is snake y minus 1. Now, let's do an error check with that. We're moving up, right? We need to check to see if we get to be 0. If we're at 0 or less than 0, then we need to loop back down to the bottom of the map. So if snakeY is less than or equal to 0, then snakeY is going to be equal to MAX_TILES_Y else snakeY is going to be equal to snakeY minus 1. And so this will at least check for an out of bounds error going up. Now, if we want to check for down, left, and right, we have to do essentially the same thing just with a little bit different logic. So if snakeY is greater than the MAX_TILES_Y, then-- whoops-- else. So this is if we're going down, right? So if we go down to the bounds, if we go down and our index is at MAX_TILES_Y and we try to go one past that, we're just going to set our snakeY to 1. Because, remember, everything is 1 index, not 0 indexed in Lua. And then this is the same logic as before when we're moving up, but it's on the x-axis. So if snakeX is-- oh, sorry. Actually for less than or equal to 0, we need to check to see if it's less than equal to 1, not less than or equal to 0. Because we don't want to set it to 0 to begin with. We want to make sure when it's at 1 that we loop back around, not 0. Sorry. And then if it's greater than or equal to MAX_TILES_Y, then set it to 1. If snakeX is less than or equal to 1, then I'm going to set snakeX to be MAX_TILES_X else. Whoops. And then I'm going to just copy that, bring that over there. And then we're going to do the same thing here. If snake is greater than or equal to MAX_TILES_X else. And then snakeX equals 1, rather. Now, if I've done this correctly, my logic isn't incorrect, I should be able to go out of bounds and loop back to the bottom, which it looks like I do. I go down as well. Awesome. So, now, we have that basic functionality. So whenever we reach the left, right, bottom, or top edge, we're appropriately moving to the other side of the screen-- so a fairly simple problem to solve. That's a big thing that we needed to correct, but now it's been corrected. "Snake tiles in the tile grid." Yeah. Thanks, Andre. Yeah. Those kinds of things are so easy to miss when you're actually programming it. And then I know how frustrating it is to see someone else miss something so obvious. So apologies for that. JP Guy, sweet. Thanks for the support. OK. So we have now our bounds checking and, also, setting our head on the snake or whatever it previously was to TILE_EMPTY, which is great. Now, we need to go through and write the logic for actually eating the apple. So once we eat the apple, let's also have some score variable, right? And let's monitor that. So we can check how many apples we've eaten. I'm going to create a new variable here called score set to 0. And then down here in the draw function, I'm going to call love.graphics.draw-- or, sorry, just print. I think that should be fine, score: tostringscore. I'm going to draw this at 0, 0. Yeah. I'll draw it at 0, 0 for now. That's easy enough. Rather, I'll draw it at 10, 10. And that should be it actually. So let's draw that. Score is 0. So you see it in red there, because it's actually technically after I've called love.graphics.setColor to red for the apple. But that's at the end of drawGrid, right? That's the last thing it drew in this case. So I need to actually reset the color, so love.graphics.setColor 1, 1, 1, 1. So for white there, we got score 0. So we know that we haven't eaten any apples yet. It's a little bit small. And actually, offhand, I know you used to create a new font. But if we don't have a Font file, love.graphics.new font. Let me just make sure that we can create a new font without a font file type. Can we do that? OK. Cool. Yeah. We can create a new font with a default size using-- it's called I guess-- Vera Sans is the default font in LOVE2D. So let's go ahead and do that. So the font was way too small. In order to draw something at a larger font size in LOVE2D what we need to do is up here, I'm just going to-- actually, I'm going to make it a global font up here. So I'm going to say-- let's do it up here-- local largeFont = love.graphics.newFont size 32. I believe the default size is 16. And then in here, we can say love.graphics.setFont largeFont, because you have to actually set the font. We've created a font object up here, this large font. But we have to actually set it in the actual UNITY, the state machine aspect of UNITY. Sorry, I keep saying UNITY. I just had a UNITY workshop yesterday, so part of it is still kind of in my mind. But in LOVE2D, we need to specify the creation of the font object and then the actual using it, setting the font for the LOVE2D state machine. So this is what we're doing here. And if I'm correct in my programming, we should now see score is 0. It looks actually pretty nice and clean I will say. So cool. So now we have a score meter always visible on our screen, perfectly functional inasmuch as it renders text, not functional in as much as we're actually keeping track of score. "If there's no Comic Sans, I'm unsubbing." JP, I'll get you some Comic Sans in there next time. If we've got to make this stream legit, we're going to get some Comic Sans. We'll get a nice a nice Comic Sans "This is CS50" as well just for fun maybe. But, anyway, I'm going to think about now how we want to start detecting whether we've reached an apple with the snake. And if we have, we should increment our score, right? I'm going to be kind of bummed if we don't get this full thing working by today, by 6:00. But I'll put it on GitHub if not. And then we'll do a follow-up stream maybe on Monday just to finish it off and then maybe talk about some other stuff, and then maybe next Friday start making another game that's maybe a little more complicated. But I'll do my best to see how far we can get. Games take a long time. Anyways, OK, so we have a snake head. We have variables snakeX and snakeY that point to our snake head that are keeping track of where it is at all times. So what I'm going to do is, in our update function, this is sort of where we need to check to see whether we've reached an apple, right? So before we actually set that place in our tile grid, that's where we want to do the check. We want to say, OK, so if tileGrid snakeY, snakeX is equal to TILE_APPLE, then-- and this will be the same either way. We'll still need to update the head location. But check for apple and add to score, right? And this will eventually be where we also add a node to the head, right? "Love me some sans serif font." Yeah. Me, too, Shayna. Excuse me. OK. So if in the tileGrid at snakeY, snakeX, which is where the head currently is, we're going to-- sorry, we're checking it. If it's equal to TILE_APPLE, score equals score plus 1. And then we're going to overwrite it down here. So we don't actually need to change the tile, but we do need to initialize another apple, right? So what we need to do here is say-- and this is kind of where we need to be a little bit careful. We need to basically say if-- or we should rather say, local newAppleX, newAppleY equals math.random MAX_TILES_X and math.random MAX_TILES_Y, right? We're going to get new random variables to be our x, y for our apple, because we want to place in a new random spot. And then we're going to say tileGrid newAppleY, newAppleX = TILE_APPLE. And what this will do is it will blindly look throughout our entire level. Or it won't look through the level. It will just blindly choose two random variables between the limits of our level and set the apple to that value. But there is going to be an issue with that, especially as our snake gets larger. And that's the fact that it could just overwrite one of the snake body parts, right? So we want to be careful with that. We want to make sure that we're actually checking for whether a snake body part exists in the grid at that location. So we can do that. We can absolutely do that. For now, we're just going to blindly do this and make sure that it works, the score and everything else. So I have a syntax error. Oh, right. I'm doing a novice mistake. If tileGrid snakeY, snakeX double equals TILE_APPLE. OK. So now we're moving around. So if I eat the apple, if I can, boom. Cool, we increased our score to 1. And the apple moved to a new location. Awesome. Boom, did it again, did it again, did it again. So it works. It works perfectly well. And it's not an issue that we're not checking for whether it's in the snake's location, because, well, our snake's head is only one segment long at the moment. So it's very unlikely that it'll actually appear in that location, but it's possible. So we're going to add some bounds, or rather, some error checking here soon in order to make that work. But the next piece of the puzzle is going to be how do we start adding segments to our snake, because that's very important, right? If we don't check for segments, we'd never run the risk of ever losing the game. So that's something that we need to take into consideration. And another thing to take into consideration is the fact that we shouldn't be able to move in the reverse direction which we're already moving. Because if we do that, then we'll collide with ourself instantly, right? Because we'll have had a segment in the past direction that we were moving from the last frame, right? So-- two things that we should take into consideration. Snake is a surprisingly complex game when you get down to it. I mean fairly simple and straightforward, but there's a lot of little things you've got to pay attention to in order to get it working just right. All right, so let's think about how we can start getting new segments added onto the snake. So the new segment, the actual part where we add a new segment is going to take place here between lines 96 and 101 where I actually have the snake data structure look at its tail, right? And then put the new piece effectively onto the front of the-- "snake is going to be huge." Yup, that's correct. Well, if I'm good at Snake, it will be. If I'm terrible at Snake, maybe not. So in here, once we have consumed the apple and we've placed it in a new location, we want to actually add a new component to the snake. So what we can do is I'm just going to kind of code through this. And we can figure it out. But I know that I'm probably going to want to insert where our-- I mean, for the sake of ease, I guess I can probably do an error check here first, actually. If the length of the snakeTiles is greater than 1, then do this. Otherwise, it's just going to add to the snake tail, right? So take tail and add to head if greater than one segment. Otherwise, we want to just add a new head segment effectively, right? Because if we only have one segment, then we have no tail besides the current segment we have to add to the front, right? Otherwise, it's kind of like an infinitely recursive operation at that point. So if the number of snake tiles is 1, OK, else. Do that, OK. So if it's greater than 1, I'm not going to worry about that case for now. I'm going to worry about adding a new head segment if we are just at one segment. So our snakeTiles, snakeX and snakeY, is going to be here. And we aren't actually editing the snakeTiles table if I'm not mistaken. All we're doing is we're editing the tile grid. And so what we need to do is actually edit the tiles within the snake itself, too, right? Because that's how we keep track of the tail that's how we pop the tail off the snake. We take the tail. There's going to be a new tail after that. And then we need to put it to the front-- rather, is that true? That's it we're moving. Sorry, that's if we're moving. Then we're going to do that. We take the tail, put it to the front. If we're eating an apple, then we actually keep the tail, we keep the head, and we just add a new snake element to the front. I believe that's correct. Yeah, that would be correct. I'm trying to remember in my head actually how it works when you eat a new segment. Does it add it to the tail, or does it add it to the front? I think it adds it to the front. Let's see. So open a new incognito window. Go to snake game play. And then, oh, it's looking for like Snake classic game play. OK. Snake game. Let's see what it does. So it moves. So the tail's being moved, added to the front. Oh, interesting. OK. So it moved. And on the next frame, it just added a new head without popping the tail. OK. So it doesn't pop the tail on that frame. So that's how we're going to do it. We're just going to keep the tail and not pop it when we add the new element. And that'll work. Cool, easy enough. OK. So priorHead, priorHead is TILE_EMPTY. Whoops. No, this isn't where we need to be. OK. So if we're at just one segment-- and apologies if I'm going a little bit slowly. I just want to make sure I think through this correctly. We're going to move forward. And then we're going to keep the head where it is. So snakeX and snakeY is still going to exist. And table.insert at index 1, the new snakeX and snakeY, correct, and the-- oh, actually what we need to do is snakeTiles-- oh, sorry-- at index 1, this is going to be table.insert into snakeTiles at index 1. I believe this is correct syntax. table.insert takes a optional parameter to tell you where to insert. I have to remember exactly where. table.insert A 115-- OK. So it takes the table, then the index, then the value. Got it. I had that backwards. Table, index-- so we're going to insert into snakeTiles at index 1, so at the beginning of the 2D array, or, sorry, at the beginning of the-- yeah, at the beginning of the table, not a 2D array, just the Snake table. A new element, which is going to have our new head, right? And then the snakeTiles at index 2 is going to be equal to snake-- what is it? snakeTiles 2 is equal to snake-- sorry. I keep having a couple of brain farts. I might need to drink some coffee or something. Let me read the stream for a second. "Add to the front." OK. "It would be cooler if the snake's body had to travel all the way until the original apple tile was right behind this snake's tail-- cool if the snake's body had to travel-- oh, you mean in order for it to fully eat the apple? Like it goes through the entire snake? Because that'd be really difficult. That'd be like expert mode Snake. Expert mode Snake, got to basically draw the snake with the apple kind of. Oh, prior. We got to use prior X, right? So it'd be priorHeadX, priorHeadY. And then it would be we have to erase as well the old-- yeah, see, down here, we're setting it to empty. Oh, but then this case, we're actually going to be at greater than 1. OK. Oh, but that we do still need to-- yeah. This is part of the equation. Part of the actual algorithm for moving the snake is that when it's greater than 1, this is where we actually have to do the thing where we pop the tail, and then we add that to the front of the snake as well. So it's a little bit more complicated than what we did down here, whereby we took the priorHeadY, priorHeadX index of the tile grid, and then we set that TILE_EMPTY. If we're greater than 1, then we need to basically do the pop operation every time. "Will it be easier if you create two apple tiles, one when it's eaten and second one each time it disappears? Example, when the snake eats apple one, it disappears and apple two appears. And it goes on vice versa." Yeah. Oh, wait. "Create two apples, tiles, [INAUDIBLE]." If I'm understanding correctly, I think what we're doing is what you're asking, whereby we just have the single tile apple and its indices that are being-- well, rather, it's being stored in the grid. And then when that happens, we just overwrite the tile with the snake head. And then we just generate a new random tile for the apple. I think it functions kind of similarly to what you're asking if I'm understanding you correctly. Shayna, thanks for the question. OK. Sorry, getting a little distracted. Let's see, tileGrid priorHeadY, priorHeadX. So this part was working fine. And it's this part when we need to start popping and adding. OK. So first of all, let me see if this is even correct. So part of this is the snake tiles itself is just a data structure that we're using to keep track of, effectively, where the tail location is at all times. But it needs to maintain a history of where all the tiles are so that we can change the tail accordingly. So table.insert snakeTiles 1 snakeX, snakeY, so that part is adding the new head to the front, so the snakeX, snakeY variable that we created before. And then snakeTiles 2 is going to be our priorHeadX, priorHeadY. So now that's going to be the new tail, basically, where our previous head used to be. And then once we have a new tail, what we're going to do is we need to set that in our grid. We need to say tileGrid at snakeTiles 2 index 2. And snakeTiles 2 index 1 is going to get equal to TILE_SNAKE. Because it's not going to be TILE_SNAKE_HEAD at this point. It's going to be TILE_SNAKE. And to make it a little clearer, I'm going to also have to change the drawing function for this. Where do I do that? In love.draw, which is-- sorry, rather, the drawGrid function. So else if tileGrid y, x is equal to TILE_SNAKE-- oh, it's body, sorry. Rather, we've defined it to be body. Whoops. Then I'm going to do basically all this same stuff, but I'm going to change the color a little bit. I'm going to change the snake head to be a little bit more cyan color. And then the body is just going to be green. And then I need to go up here where I actually wrote that, so TILE_SNAKE_HEAD and then TILE_SNAKE_BODY right there. And then that will have the effect of basically making the grid reflect where the snake body is. So let's go ahead and see if this actually works first of all. OK. So it is working. So, now, it's registering that we have a body, but it's not moving. So what we're doing is we're effectively doing what we did before. Whoa, that's going to be impossible to get. Oh, yup. I think I screwed myself. Oh, yup. See, I did. That's fine. So we kind of have a step in the right direction where we now recognize, when we eat an apple, we add a new element to our body. But the snake head is overwriting all those other variables-- or sorry, those other tiles in our grid. And it's not sort of keeping track of where the tail is, which was part of this last piece down here. Was it down here, the updating the head location? Because if our snake is only of size one, then our head location is just going to be wherever snakeY, snakeX is, which we do here. We update it in the tile grid. But to erase it, what we did before is we just set the tileGrid at priorHeadY, priorHeadX to be TILE_EMPTY. The logic is different if we have greater than one element. So what we need to do is basically erase wherever the tail was, right? And by setting tile grid, for now we'll just assume that we're of size 2, right? Ba, ba, ba, ba. In this case, we'll assume we're working just with a 2 unit snake, and then we'll move up to multiple. But we're going to need to set tileGrid at snakeTiles 2, 2 and snakeTiles 2, 1, equal to TILE_EMPTY. And then we need set snakeTiles to-- we need this to update basically. So we need to set TILE_SNAKE tiles 2 be equal to priorHeadX and priorHeadY. And so that should work. Let's run it. Let me make sure I'm not crazy. Yup, perfect. So now we have 2 unit snake, but it's only going to work for 2 units, right? Whoops, if I can pick it up. Whoop. OK. So it's still 2 units, right? We've made progress, though. We've basically said, OK, in our tile grid we want to erase whatever the tail tile was last time. In this case, we're hard-coding 2 in, because we're only experimenting with the snake of size 2. And then we want to set that last unit to be equal to whatever the priorHeadX and priorHeadY was equal to. But this isn't going to work for a snake of size, you know, 3 onwards. Because this is hard-coded just for 2. We need slightly different logic in order to handle that use case. OK. "I mean, essentially having an object pool of two apples, it'd probably be harder. You'd have to keep track of which one is active. The tiles here are being rendered on the fly. It's not like, say, UNITY, where you can deactivate the mesh renderer and make objects not be rendered." Yes. Often, object pooling is very good use of-- excuse me-- resources, but typically only when you have a ton of different objects that you need to keep instantiated. And in this case, per Andre's point, yeah, they're being drawn in real time with the size of the grid and not being actually stored necessarily in memory. Although the grid itself is being started in memory, but it's not consuming more memory by having the apples there. There's going to be an integer, a 0, 1, 2, or 3 regardless of what we're doing. "I'm assuming there will also be a bug where an apple spawns onto a tile that's already occupied by a snake tile." Exactly. Yeah, I mentioned that previously. And that's something that we'll have to sort of take into consideration. When we spawn the apple, we want to basically look and say, OK, is tileGrid y, x = apple? Sorry, is it equal to snake head or snake body? And if it is, we need to generate another random x, y value basically. Just keep doing that in a loop until we find a value that actually works. OK. So we have a two part snake here. Let me take a sip of water, little bit parched. How much time we have left? Oh, we have 12 minutes. Oh, well, I'll go a little bit over just because we were a little bit late to start. But now we can sort of think about, OK, I have a two part snake. But let's take the problem to the next level. Let's take it to where we have three parts to my snake. And let's actually do the logic where we take the tail of the snake and then put it in front, essentially keeping the head where it was. And then let's write to the grid those two new locations, right? We're going to need to erase our tail location. That needs to get erased from the grid. And then we need to write our new sort of head location, which will be an empty tile presumably. OK. So let's go ahead and do that. So the first thing I said, we need to pop the tail of the snake. Also, am I actually adding the last piece appropriately? Let's see. Take tail and add to head if greater than one segment. Oh, you know what? We're not actually going to take the tail. We're going to just add a head and keep the tail where it is, right? Because this is in the context of eating an apple. Because we don't want our snake to get smaller. We want our snake to actually increase in size. And so it makes sense for us to take a brand new tile and add it to our snake, not the other way around that we did before. So if the length of snakeTiles is greater than 1, let's go ahead and, first, we need to add to the table. So table.insert into snakeTiles at 1 snakeX and snakeY, right? Because we're going to basically keep what we had before. And then in the case of having a new head segment, we didn't have a tail. But that honestly doesn't really matter. Like I said, yeah, I think we can just add a new-- I think I might have gotten this confused with the actual code with moving. But I think we should just be able to tileGrid at-- sorry-- snakeX-- rather, snakeY, snakeX. We can set that to tile TILE_SNAKE_HEAD. And then at tileGrid where we had priorSnakeY and prior-- whoops, sorry, priorHead. I did the same exact typo before-- priorHeadX. We can set this to TILE_SNAKE_BODY. And this should accomplish the same thing if I'm not mistaken, right? And then the only thing is the head location needs to change. So this is a hard-coded use case where we have a snake of size 2. "That's not a bug. It's a worm." Yes, correct. "I'm assuming [INAUDIBLE]." Yeah, that's true. Very clever, Shayna, very clever. OK. So when we're moving, remember, we got to take the tail. So table.insert-- remember, we're going to insert a new head location, right? Or actually it's going to be the tail. So what we're going to do is we're going to say we're going to say tileGrid priorHead-- oh, whoops. OK. So we're already doing it up here. We're already adding the head location. And then we're going to-- oh, no. This is updating the head location in the actual grid itself. And we need to do this in the snake data structure as well. So snakeTiles, because the head's moved, right? So the head doesn't really need to move I guess. Oh, actually, yes, it does. Does it actually? Because we're always going to look at the tail. And. if the snake is greater than 1, the algorithm kind of changes. So I guess we don't really need to worry too much about checking if we're only a size 1. Or rather, I don't think we have to update the snake's head automatically. OK. So if we're greater than 1, let's take the tail. So local tail gets snakeTiles at length snakeTiles. So this will be our last into the-- do we even need a reference to it? Because we're just popping it, right? Well, I guess we do, because we want to set tileGrid tail 1-- or 2 rather. Did I do that correctly? Yeah. Tail 1 to TILE_EMPTY, right? Because, remember, we're taking the tail and we're making that empty. And then we're going to take the head, and we're just going to add another element to the head, right? So in this case, table.insert into snakeTiles at index 1 a new head called-- because we don't actually necessarily need to move the head to the-- do I need to move the head to-- or, sorry, we don't need to move the tail to the head. We just need to add a new element to the head. Because the tail element is going to have different x, y coordinates than the head element is going to have x, y coordinates. Because the tail is way over here. And the head is over here. By moving the tail up to here, all we've done is basically just added another table with some random numbers that aren't terribly useful if they're completely disparate from what that actual nodule supposed to represent. So I'm just going to add another unit to the front of the head, snakeTiles at index 1. And I'm going to say this gets snakeY, snakeX. This is where our head is right now. So we popped the tail and then added another element to the front. It'll have the result of growing the snake fairly seamlessly. Let's see if I have all the pieces in play here. I'm guessing I probably screwed something up. Yeah, looks like I did. OK. So I'm not actually growing the snake in this case. So why are we not growing the snake? Oh. I don't have an else statement here to grow the snake. Oh, actually because, remember, we basically separated this out. We don't need an if statement. So I can just copy that out, whoops, paste that into here. Make sure these are indented the same way. Let's try that. Does that work? Whoops. Oh. No, crap. It's still not completely working, because we're not erasing. Notice that whenever we get an apple, it's adding a body element, but it's not moving around which is kind of an issue. Because that's another thing, too. We do need to move the snake. Well, actually, we are doing that already. But we're not reflecting the correct tile when we do that. We're drawing the head instead of the body. So let's figure out why that's happening. snakeY, snakeX is equal to TILE_SNAKE_HEAD. And then the previous one-- oh, right. Because if there is a previous one, then we need to draw the body at-- like, our last location needs to be the color of the body, right? So the tail is going to be empty. And then the location of the prior head needs to be the body color. So tileGrid at priorHeadY, priorHeadX is going to be equal to TILE_SNAKE_BODY, right? And if I'm correct, this should at least draw the snake body, the green color that we're looking for, which it does perfectly. I'm noticing, though, that the head is still kind of hard to see relative to the body, because the color's a little bit too similar. But it works well enough. It works well enough. I can make probably make it a little bit easier if I set the body to be something like this, maybe 0.5. Oh, sorry. Yeah, that might work actually. Let's try that. Yeah, there we go. That's good. That's a good color. Now, unfortunately, the snake isn't actually moving. And we can still collide with ourself which isn't ideal. But it's a step in the right direction. So let's go ahead now and figure out why the body is still rendering. Clearly, the tail is not being taken away and not being erased from the grid. So we kind of need to fix that up, right? So if I go to updating the head location, so tail 2, tail 1 is equal to TILE_EMPTY. Now, presumably, this is the case, because tail 2, tail 1 is not getting updated I'm guessing. So let's figure that out. Let me look at the chat and make sure I'm not mentioning it. "Strange, it worked earlier when you limited the total length to two tiles." Yeah, it did. I had a slightly different hard-coded logic in there. That made it a little bit simpler, because we weren't messing with like taking a tail and appending a new element to the table. I think I just kind of added a new element to the thing. And then I was keeping track of them. But we'll figure it out. We're here. We have a few more minutes. It's 6:00 now, but I'll go for a few more minutes so maybe we can get a little bit closer. And then maybe on a Monday follow-up stream we can finish this up sort of live and then have a completed game to at least look at. And then by putting this on GitHub, maybe if everyone wants to experiment on their own and try to figure it out, it'll be a nice cool exercise. We'll come back together on Monday and figure it out. But before I adjourn, I would like to try and make a little bit of leeway. I won't keep folks for too much longer. We'll maybe give another 10 minutes or so. Let's go ahead and-- by the way, the risk of live coding is you never know what to expect. And like I said, I did no research into all of this, but that's part of the fun of programming and problem solving is, you know, sort of trying to figure things out on the fly, figure out a problem that you've never tried to before. It's kind of interesting, right? I get to embarrass myself a little bit live in front of everybody, you know? OK. So the head location is working fine. We can see that by seeing the game and seeing that the cyan sort of colored square is updating. But the tail isn't erasing what's behind it, which is the important thing. And so tail, get snake tails, snakeTiles, priorHeadY, priorHeadX is equal to the TILE_SNAKE_BODY. So we're moving that. So we could see that working. It just needs to erase what's at the end of the tail, which is what this line was intended to do, which was take the last tile sort of in our grid and then edit the-- what is it? Sorry, brain fart. In the tile grid, change the number from 3 to 0 effectively. "Maybe figure out where the head should be after delta time and add tail. There we're making it head color. Make head a part of the body. Live coding's like a box of chocolates." That's true, Andre. There's very true. It is. I think it's fun. I could see why someone might get frustrated watching, hopefully not. "Life's just a huge p set that with a lot of subproblems--" very true, very true, a ton of subproblems. Every problem you solve sort of just adds new little problems. And you know, there's people online that make this game. And they live code it in like 10 or 15 minutes or whatever. So they are a lot more impressive, I guess, to watch. But I guess the point of this more is to kind of illustrate like live problem solving, and to take questions, and to sort of have a conversation about it and facilitate back and forth communication. "Thank you, Colton. I will join you again on Monday. Have a great weekend." Thanks, Steve, appreciate you coming by again. Yeah, we'll, do it again. We'll do a follow up on Monday, and we'll figure it out. "[INAUDIBLE] it's really good, though." Yeah, thank you, appreciate it. Yeah. It's a work in progress for sure. But I would say it's 3/4 of the way there. And on Monday, we can get it to 100%. "Am I the only one scared by the amount of figuring out this requires?" Nowanda 3333. Yeah. I mean, that's kind of, I guess, the point of doing this sort of thing is to kind of have like a demonstration of what coding and solving a new problem feels like. I mean, some people might be better at this than I am. And I'm certainly not the greatest programmer, but I've definitely programmed a bunch of games. So I kind of have a general idea more or less of how to do stuff. But a lot of it, especially if you've done no research, is just kind of figuring out like, OK, what works? What can I guess would work? How can I structure my data to make it work? There's a lot of solutions to every problem, like when we're talking about taking the tail and appending it to the head, adding a brand new head element. Replacing the neck was my initial inclination rather than adding to the head. The head is probably a much cleaner way to do it. There's so many different ways to do it. And even simple games like this-- games are particularly difficult, because they have a lot of stuff going on. You have things occurring over time. And you're messing with graphics. And you're solving abstract problems. It can be difficult. But I find it a lot of fun even if we didn't get 100% of the way there today. I think we can close the loop and do a lot more fun stuff in the future as well. "I couldn't make it work for my Scratch project either, making the snake dynamically grow." Well, we'll definitely get it to work. We'll get it to work on Monday. And I don't know. I guess maybe I can in advance take a look at some algorithms for this kind of stuff. But the figuring it out live kind of feels a little bit more authentic. And I guess it allows us to also have this sort of like two-way conversation which I kind of like, like taking suggestions from everybody and being able to say, oh, maybe this solution is actually better. Maybe this suggestion could be changed in this way. You could do it this way. And then we actually end up making a project together versus me just kind of saying, oh, here is how I figured out how to do it. This is how you do it. Let's do it and kind of like me talking to a wall almost. Not really a wall, but, you know, you get the idea, sort of idea. So I don't know, I personally like it. But let me know what your thoughts are. "I'm a bit confused as to what the difference is between the blocks between 112 and 119." 112 and 119, OK. So this is updating the head location. And 102 and 107, excuse me, 102 and 107. In this case, when we have an apple and we want to add it to our score, we want to not take from the tail. And we're just going to add a new head element to our snake. Because our snake is growing at that point. If we're just moving, the goal of moving is to take the tail element and think about putting it at the front of the snake. So we're kind of like constantly doing this shift operation with the snake. But in reality, we don't really need to take the tail and put at the front, because the front should kind of have the information about where that head element is. And if we take the tail, the tail element has the x, y of the tail. So it doesn't really work. So we kind of just have to pop the tail and then push a new head element with the new x, y information to the front of the snake, so good question. "Thank you for your time. See you Monday. Time in Morocco is 11:00 PM. I need to go to sleep." Thanks, Elias, appreciate you tuning in. I'll see about maybe starting a stream a little bit earlier, maybe like at 12:00 my time, noon here, which should be ending a little bit more around 7:00 or 8:00 your time. We'll see. So thanks for tuning in even though it's really late, appreciate it. JP, "the code's also been writing to look and read intuitively. The movement's pretty straightforward. Drawing the snake is also straightforward." Yeah, Lua's a great language. I really love Lua a lot for that reason. It's pretty easy. It's kind of almost C-like. But it also has a lot of readability. And it's just kind of clean and nice. A lot of the things about it I find-- or not a lot of the things about it. But a couple of the things about it I find a little bit questionable, like the do and then the end keywords and stuff like that. I'd probably change that about it if I were redesigning Lua from the ground up, but it's a good language. I like it. It's fun. Shayna says, love the live coding session. You did a great presentation, very interesting and authentic." Thanks, Shayna, appreciate it. Would have preferred it be a little cleaner, but, you know, we'll get there. This is only stream number two. We got a lot to go. So on Monday, hopefully, we can fix everything up. Nowanda, "it's very fun. I forgot about my tea. And it got cold while watching you twice." Thanks, Nowanda, appreciate it. I hope you get to drink your tea. I hope it's not too late. "You're streaming on Monday is the same time, 3:00 Eastern Standard time?" I think it might be, Elias. I'm going to see about the logistics of getting it up and running at 12:00 Eastern Standard time instead, so it's a little bit easier for folks that are overseas to maybe tune in. You know, we'll see. We'll see what I can do. "My gut feeling tells me that keeping track of the snake's body coordinates in an array or list would actually make the code less readable, but more abstract and most likely more editable." Yeah. Yeah. That's effectively what we are doing. We just need to store them, because we need to keep track of where they all are at any given time. But we also need to edit them. And that might be part of the thing that we're not doing is actually going back through all the snakes. Well, actually, is that true? We don't really need to edit them. Or do we? That might be part of the problem. I think we might actually have to edit them, because the tail information is constantly changing. I don't know. I have to think about that a little bit more. I have to think about that a little bit more. But we do need to keep track of all of the different nodes, so we have the tail from which to, I guess, pop off. I have to think about a little bit more to be quite honest with you. My brain's a little bit fried after the three hours of programming. So I'll spend like an hour or two looking at this and figuring out a plan of action. And then on Monday, we can come take a look at it and finish tackling it. "Great job on the stream." Thanks, appreciate it JP. Thanks for coming in. I guess here is where we'll cut the stream. Again, Monday I'll set up an event. I'll set up a stream to finish this up. I'll look at it over the weekend. We'll get it all sorted and situated. Get it on GitHub as well, so that all of you can download it and mess around with it. If you have suggestions on a next game to implement next week, maybe starting on like a Thursday or Friday, let me know. Someone suggested Pac-Man. So Pac-Man might be fun. That would be a little bit more complicated. So that one for sure would probably take I want to say like four or five streams to fully implement. I could be overshooting it, but it's a bit more complicated than this. And this took more than one stream. So we'll see. But, yeah, let me know on Facebook and on Twitch, wherever. Let me know your suggestions for more games to make. I'd be happy to create some new ones. Thanks, Irene. "It's been great fun today. Thank you. Will probably not be able to catch it on Monday, but we'll watch later." Yeah, we'll post to VOD, so you'll be able to see what's up. Thanks, Irene for tuning in, appreciate it. OK. So I think with that, we're going to call this stream. So, again, this is part one of Snake. We got the snake sort of rendering around, moving around, consuming apples. We have a score. We have a grid. But we do not currently have the snake moving correctly. And we do not have collision with the snake and itself. But those will be the things that we tackle in the next stream. So thanks again so much, everybody, for coming. I will see all of you at some point soon. Good bye.
B1 snake grid tail tile lua apple SNAKE FROM SCRATCH (PART 1) - CS50 on Twitch, EP. 2 10 0 林宜悉 posted on 2020/03/30 More Share Save Report Video vocabulary