Hello, welcome to another coding rainbow coding challenge this challenge has no time constraint. [I've] got a stopwatch going We're to see how long it takes. I'm not Gonna I'm Gonna Go move quickly, but not going to rush and we're going to feel relaxed and meditate on what [we're] going to program here So today what I'm going to program in Javascript using P5 gs. Is the game space invaders classic Atari game? I believe you can see some images from the original game I'm going to be using simple shapes to represent The things in the game and actually I'm going to create a different version of it I'm going to call it [flour] invaders and instead of aliens [there] will be flowers and instead of bullets, you will shoot water To water the flowers because that's how I feel today in my world of rainbows and programming okay? So I have to just get started so the first thing that I need to do is I have a blank Canvas here of code and I'm going to add whoops. I'm going to type it here [I'ma] add function setup, and I'm going to add function draw and I'm going to say Create canvas 600 400 and I'm going to say and I'm going to say background 51 so I'm using the p5.js framework which has a set up and draw function set up starts the program draw loops Over and over again for animation, and I'm in a ups I minimize that I'm going to go back to the browser here hit refresh and you can see there's my canvas, so Let's think about this let's come over here for a second and think about how we're going to [organize] the code for this so in my flower [invader] program, [I] need to have a bunch of flowers I Need to have one Watering can and I need to have water things and maybe I need [a] bunch of those so I need an array for flowers, I need an array for the water and I need on one object For the ship. We're just gonna call that a spaceship. It's a watering spaceship what I'm doing today Okay, so let's do this spaceship first That's probably the easiest thing and what I'm going to do for that, and I'm just going to go right ahead I'm using so the sublime text editor I'm gonna make a new file, and I'm going to call it shipped [jas] and I'm going to write a constructor function Which gives an x value and I'm going to say with divided by [two] So this ship is automatically going to start in the center of the window. What does it need it moves left and right? so Although I guess I'm going to move it left and right with the keyboard, so this is really all I need I just now I also need a function to show it and Why I'm going to make it a rectangle because I'm lazy and I'm figuring out how to draw a triangle to bottom it's Gonna cost me too much of a headache, so I'm going to make a rectangle At this dot x and where does the rectangle need to be at the bottom of the window? height, but maybe the rectangle is going to be like 20 pixels high so it sits at the bottom but 20 pixels up and then maybe it's 20 pixels wide and 20 pixels high and it's going to be white and Now so this is a very simple [idea] of a constructor function I can make a ship object, and that ship object has a show function If you're wondering why I'm using a constructor function rather than making just like an object literal I just like constructor functions, and I've made a whole video tutorial about them Which I will hopefully link to somehow if you're watching this okay So now I need to go back to [my] main sketch. Ooh boy. I lost that oops. This is like a irrelevant file Sorry about that. I need to go back to my main sketch, and I need to create [a] variable I'll call it ship and now I can make an instance of that object new Ship, and then I can say ship Show and now I added that code. I should be able hit refresh we spent about [3] minutes doing this so far I can hit refresh and boy. I have some sort of error. So look ship is not defined So why is ship not defined? I certainly defined it right here in this particular Javascript file well one thing you can't forget to do is when you add a new Javascript file is to also make sure a Reference to that [Javascript] file is included in [your] htML. File itself That's what the browser is actually loading to know what all the Javascript it should look at now we can see there's the ship it's right there at the bottom and Now I need to do is figure out a way to move it left and right So a one way to do that here in if since I'm using p5.js is to add a function called Key pressed and So in key pressed I can check this is an event that's triggered [anytime] a user presses a key on the keyboard and I can check if the key code is right arrow, I Can say ship dot left? else if the key code is Left arrow, [oh] boy, so I gotta get my equal signs right sure so first of all I how many equal signs should I be using here a hundred [percent] not one one equal sign is for assignment x Equals five Vona ask the question does x equal five [I] can use two equals. I want to be really really serious about it I would use three equals. That's a little off-topic [here], but I'll [just] point out what I mean, this is true This is not true. So whoops The first one is true the second one is not true Think about that for a little bit and come and ask me in the comments that that doesn't make sense to you, okay? So coming back here. [I'm] going to then now say a ship dot right so if Amusingly, I'm moving the ship left when I hit the right arrow and right when I move the left air But actually I don't like this first of all what it left and right? oh This is some magic automatic thing that happens on a computer when you call a function called left thing moves the left No, this is the idea of something. I'm going to make up That's part of the shift, but it would ship But it would make much more sense for me to have [one] Single function that moves the ship and then I could give it an [argument] to tell it whether to go [left] or right? So I'm going to just say ship dot move one meaning move to the right ship dot move Negative one meeting move to the left and now I can go into the ship object and add that function move equals function I'm going to make a variable [called] Dir that's the argument getting the one or the negative one and I can say this x plus equals dir So when I press left or right the ship moves left or right so now if we go [back] hit refresh click in [here], and you can see it's really moving can I hold the keyboard down we've got some issues here interaction wise let's Let's let's at least let it move five pixels the other thing. I want to do is draw the rectangle Via its [center] And then make it a little bit maybe make it a little bit taller, so [you] can see this is my Watering can thing so I don't know why it's interestingly enough So I boy all these little details that you don't think about when you start these projects out if you so it's simple but now actually do I want it to permanently move to the left and the right how do I stop [it] if I want to hope I'm holding down the key maybe we'll Solve those problems later, but I'm going to just keep moving for right now So I need to improve the interaction here about actually when I'm holding it down, and there is a way to do that Okay, I know what to do but I'm going to hold [that] off till later. I'm gonna come back and fix that because the next thing I want to do is add the add that add the flowers, so If you recall the flowers are things that live above And I need an array of them, so I'm going to make a flower object Come back over here. I'm going to make another new file and Whoops I'm going to make another new file. I'm going to call this a flower [J/S] And I'm gonna make a function isn't going to take a long time, right? It's seven minutes, but you know we'll see how long it takes I'm going to make a flower object and the flower object is also going to have an x I'm going to give it some Arbitrary location [know] why and it also is going to have and you know what I'm going to do I'm just going to Duplicate this because so much about it is going to be the same and then I'm just going to rename this to flower And I'm going to also give it a [y] To start it somewhere and this is good, but I want it to be an ellipse. [I] want it to be purple Because I'm thinking about purple today. [I] think that's about purple and This should save this dot y You know anybody who? Hopefully if somebody will watch this video and make a really nice pretty flower design or a good download a flower image I'm going to take out the move function for right now so we can see now aha now I have a flower object basically the same idea and what I want to do in sketch. Now is make to test that this is working make a single flower object, so I'm going to say new flower and I'm also going to say flower. Dot show so now I made that new flower object. I've got this now I'm going to Refresh and we can see our flowers not too. Fine boy. I cannot remember this I can never remember Index.htmL we've got to add a reference to flower [jas] now here. We go. Look I've got a Watering can ship and a flower, and I can move my ship and I have it no But I but one flower is not enough I want to have an array of flowers [so] this is a by the way with the ship I probably didn't really need to use a Javascript constructor function But I'm going to make the case that it really makes a lot of sense to use it with the flower because what I'm going to do now is say actually what I want is to have an array called flowers and instead of having One flower, I'm going to write a loop I starts at 0 I is less than 5 I plus plus and I'm going to say Flowers Index I equals a new flower And then here I'm going to take this and I'm going to put all this in draw and I'm going to say flowers Index I Show so now and let me move this key pressed out of the way because we can come back to it later So this is the structure. I have a single ship. I have [an] array of flowers aliens if you're really programming space invaders, and I'm making Five flower objects and showing them all so let's run this again. It looks like there's only one flower Why because they're all being drawn in exactly the same place because here. I have hard-coded the location of the [flower], so What do I need to do this is good right? [I] actually need to use constructor arguments, so if I add an x and a y there those are different x's and y's than the [disk] So this that y that are part of the actual flower object and these temporary? variables that live as arguments to the constructor that receive a value and then I can fill say this dot x Equals x and this dot y equals y and now I can go back to the main program and say? Make me a flower at you know with 20 and If I refresh you [can] see oh, I got a bunch of flowers at random locations [but] maybe I want to space them out evenly [so] what I can do a little math [to] do that [I] can say like and where did I have it. I had it like 60, and I can say I I Times I Don't know how big are the flowers the flowers are 60? [I] times 80 Plus 80 I'm making up some math, and that's why they're kind of spaced out right so the first one I times 80 is 0 and looks like I could fit easily like a couple more on here So let's like let's make 6 that one more see whoops oh Oh, you know what this is terrible look what I've done here I made add an extra one But this here I should never hard code the value 5 here I needed to hard code the value 6 here because I'm ray is empty when it starts, but here I really should be using flowers dot length so good thing I found that let's hit save and now I refresh okay, so this is a pretty good start I have a bunch of flowers I have my watering can so what I'm going to do now is I need To [oh] boy [12] minutes in we're making good progress [here] what I need to do now I'm just checking the chat to see if everybody have looks the timer's a bit small. Oh boy You can't see that. Whatever. I got to work on my timer. I shouldn't look at the chat. You keep like that, okay There's a live chat I'm doing this live, but you'll be what some most of you watching this not live sorry to have to say that okay so now I need to add the water this is going to be the trickiest part right because I Dynamically need to make objects that emit from this one And I don't know how many they're going to be like I know I have one ship and I know I have six flowers But I don't know how many particle water particles. I have water droplets droplets so first let's just make the drop So once again, I'm basically doing the same thing I'm going to make a new file, and I'm going to call it a drop [J/S] Whoops and [I] to rename that sorry everybody drop [J/S]. And okay, I've got to delete this sorry everyone [and] now what I'm going to do is I'm going to go into the flower which has A lot of stuff that's useful for me, I'm going to make the water a kind of Bluish color [and] make it a small circle And I'm going to call this a drop and I'm going to remember right [now] to add that to the hTML file Oh-hoh, not forgetting this time Yeah in your face HtML file that [was] very rude I don't want to be [b] to the hTML file I'm very sorry [you] are my friend, and I'd like you [and] I just was trying to make a joke But then I said something a little bit mean and I don't like that guy edit that out of this video Don't actually edit it out I don't know who I'm talking to anymore Okay um so now I have the drop so the tricky thing [about] the drop is oh for sure We can be a little bit advanced about this and we can probably say we know that [the] drop when it moves it should the [y-value] should - one right - one moves it up right the Y-value should change so I kind of know [the] drop has an x and a y it's a small little circle probably 20 pixels is Even too big it's a small little bluish circle, and it's going to move up, so this is my drop object So let's just get one drop object here just to test that it's working so I'm going to make add a Drop object and then I'm going to say drop show and drop move, so I'm just adding There's a ship that's showing a drop that's showing and moving and flowers that are showing, so if I refresh this sketch now I don't see that drop anywhere Why not, so let's think about this we got [to] debug this one thing that I would do to debug This is let's not look at the ship or the flowers to just see the drop They want to see a drop anywhere. I don't see a drop anywhere. Let's go back to the code and into drop touch s ah okay big problem I the drop needs values to give it a starting location [well] that's That's something I clearly forgot so I want to make the drop Let's just put it in the middle right now just so we see that it works There we go. There's the drop and you know I don't I don't I don't like how this drop is looking so I'm going to say a no stroke and Make it a little bit bigger and also a little bit brighter Because it's a bright day today okay, so there's the drop moving moving kind of slowly Probably this kind of thing would move a lot faster. This should be a variable, but you get the idea. [that's] working now Let's put the ship back in I'm going to show the ship again Now how do we get that drop to start from where the ship is? Okay, so first of all. What are we doing here? The drop does doesn't exist the drop only exists Maybe if I hit the [spacebar], so I've done this before I think I can kind of skip a few steps here and know that what I want is an array and in the same way That I'm going to leave that there I'm going to comment this out in the same way that. I am have this loop to go through all of the flowers What I want to have is a loop to go through all of the drops and say drops index I show drops Index. I move so now I'm saying However many drops there are if there's zero drops don't show or move any if there's five? Sure move all five if there's ten show and move all ten however many They're all are call the show and move function. So when this program first starts There are none How do I add them I need to add drops? the moment the user presses the spacebar so now we're coming back to our key pressed, and I can also say now here if Key equals space is probably another way to do this But I'm going to just say if the key equals the space then I'm going to say [var] drop equals a new drop with [divided] [by] [two] height divided by two and drops dot push drop So whenever the user hits the spacebar make a new drop object and add it to [that] drops array And that drops array will just expand magically okay, so let's run this and now if I hit the spacebar. [oh] drops is not defined What happened? What did I miss? always with an error Line 37 Drops is not defined. [oh], I called it drop I want to call it drops and this should say drops and that should say [drops] [oh], I was just being inconsistent about my typing, but I fixed that now okay here We go ready and spacebar spacebar spacebar spacebar [so] you can see every time I hit the spacebar I get a new drop But I need to do something more I need to connect its starting location where that ship is and you know what this is going to actually be the Easiest thing in the world to do because all I need to do is say Instead of hard-coding in width - height - all I need to do is give it the Ship's start that drop at the ship's x location, and you know maybe the bottom of the screen and Now I'm going to run this again [and] you're going to see right the water droplets are always coming from the ship no matter where the ship [is] and I really want to fix the way. I'm moving the ship [but] right now. I'm going [to] leave that you can see whew Drops, and you know I could there's so much more I can do with this But this is the basic idea [ah] we got to put those flowers back in okay, so let's put the flowers back in and Now a couple things the flowers should really move I think it's space invaders the aliens go like this Tu-Tu-Tu-Tu-tu-tu And I'm already almost a 20 So I'm not sure [we're] going to add that feature to this and maybe that'll be like bonus Exercise for you to try to do and I'll certainly post a solution with that But let's at least at the very least right now get the drops to hit the flowers and make [something] happen Okay, and there's a couple other things I want to talk about with this drops array like I you know in theory there are still these drops that are now Thousands and hundreds of pixels high and I can't by the way my arm It's very sad how my arms cut off the way? I have this set up, but you know what can you do okay? Well, I lost track of what I was doing now Let's look here We have a bunch of drops that are showing and moving we have [a] bunch of flowers that are showing Well, what do we also want to do for every drop for every drop? I want to look and see if the drop? intersects a flower if the drop [and] the flower are overlapping if the drop hits the flower Maybe make the flower bigger to water it or something like that So it grows of course I could make it disappear which would be the space invaders thing [so] let's see so that should indicate to you that I'm saying if Every drop should check to see if it hit any of the flowers so for every drop I want to check every flower which means I need this kind of loop also inside here Now here's a big [thing]. I don't want to use. I in two places if I'm putting this loop I is for the outer loop so for every drop. I really do want to check I'm going to use J to check every flower, and I'm going to say something like if drop hits hits flower and That's not correct right because what I want to say is if drop I hits flower J then and I'm just going to put a console.log right now So just to see if this idea works okay? I like programming this as if there's a magical world Where you write a function for a drop like hits and then you just run the code and [it] works obviously If I hit refresh here right now the first thing it's going to tell me This is a flower is not defined. Yeah flowers. That's the first thing. It's going to tell me the next thing It's going to tell me is drops Index I dot hit is not a function right because I've got to write [that] function, [so] Where does this function hits go it goes in the drop object? which is not this file, which is this this is a long one by the way, so I want a function called hits and What am I checking to see if the drop hits? I'm checking to see if the drop hits a particular flower And how do I know if those two things intersect so what I want to know is first thing I need to do is I want to know the distance between This drops x and y and what the flowers x and y? and how do [I] know if You know I've definitely made videos about this before, but really real quickly Just to very very quickly go over this if I have two circles And I know the distance between them I can determine if they are intersecting based on the relative difference between their distance and the sum of their two Radii Right you can see here if the distance is longer than the sum of their two Radii They're farther apart if it's shorter their overlap they're overlapping so what I want to say is if and I need a little bit more code space here if If the distance is less than this objects radius which I'll call R Plus the flowers Radius which I'll also call are then return true otherwise return False so I'm writing a function that's sending back true when the drop hits the flower sending back false when it does not are Something I made up [if] I make something up I've got to actually add it. So this drop is drawn as a 60 a circle with a diameter of 16 So I want to make this actually now a radius this dot r times to this dot r times 2 because this should really be a variable and This dot R equals 8 so the radius is 8 I draw it as the radius times 2 and now I can check the radius There and the drop and I want to do the same exact thing for the say it with me It sounds like I would like this dream to be the Miss Mr.. Rogers somehow Can you say flower and now that's not how it works whatever, sorry Do I have a dream to be Mr.. Dyk just say that that's a little bit weird, [maybe] it's not weird Maybe that's a nice thing to want to be okay? Uh 30 this dot R times to This dot R times 2 okay, so now Here we go. [so] now in the drop. Where's the drop? Where's the drop so now I've got this going let's refresh I'm going to position my Watering thing below the flower. I'm going [to] hit the spacebar and look it's water now notice it console.log watering 15 times why because this drop Started moving up at the flower it Here, it's intersecting then it moved here. It's still intersecting then moved here It's still intersecting so what I probably want to do is have a mechanism for getting rid of the drop once it hits the flower [okay], so boy. There's a so many things to add to these [pro-kit] believe this could this could just be for an hour But you know maybe I should just keep [going] with this and actually make every feature happen But let's let's uh I'm gonna keep going for now okay, uh people I'm [blood] checking the chat, and I really shouldn't do that in the middle of these videos okay, so Okay, so what am I doing here okay? So now in the main sketch Okay, [if] the drops hits the flowers console.log watering so what I need to do now is What I need to do now is I know what I'm going to do I'm going to have the flower grow and I'm going to remove the Drop so you could also seeing how [I] remove the drop you could also make a version where you remove the flower which would be The more traditional [space] [invaders] thing so I need to do two couple things. I need to say something like Flowers Index J. Grow Because that flower should grow, and I need to say something like drops index I dot remove because and now anytime something turns blue have to be a little bit skeptical of whether [or] not I should use that word because It's probably a key word in Javascript and on it might be fine, but let's think of something else drops index evaporate That's a good name [for] a water function evaporate so I'm going to grow the flower and evacuate Evaporate the drop so let's do these things one at a time to comment [that] out and this means now I need to add a function this [dot] grow to the flower object And we say this dot r equals to this dot R plus two just gets two pixels bigger, so let's look at this and Look at that, so this is actually kind of a nice effect because oh we've been overtaken by the purple pink flower of glorious Wonderfulness, but But you can see here that the bit without the drop being removed It's behind that flower and if [the] flower is growing And if the drop is moving while the flowers growing it never leaves the flower you have this infinitely growing flower Which is kind of nice, but I'm going to correct that problem So let's add this other function back in drops that of dot evaporate which means I Need a function called evaporate now what am I really doing here what I need to determine basically? I need a drop to have I mean I could do a couple things one is I could just set its position like way [off] screen I could say this dot [x] equals [five] [thousand]. It would kind of be good because you wouldn't see it It would be to the users If it was gone, but it probably better to actually remove it from the array so what I'm going to do is Set like a flag basically to know So I'm going to say like this dot to delete equals False So when and maybe I'll just I don't need to say to delete. I'll just call it delete oh bad idea turns red That's that's got to be even worse than this cameras going to show off in like two seconds Like I can like nope because I'm at a half an hour these cameras stay on only for a half an hour, okay? so I'm going to set up a variable that's going to automatically start as false [and] I'm going [to] set that [variable] to true You know this is a little probably a lot of bunch of extra steps it may be a little bit redundant But this is going to set me [up] for other possibilities because maybe you know I need to do other things later So what I want to do is basically have a variable in the object that knows whether it's something That's valid and should continue to show and move or something that I should delete because the object can't delete itself the deleting has to happen in the main part [of] the program where the array is being managed, so what I'm going to do now is show you how to deal with that and I could say and This is totally unnecessary, but for simple to make things a little bit clearer and more simple I'm just going to have a completely separate loop down here Which is exactly this same loop? And I'm just going to say if drops Index I [to] delete right if This particular drop is something that should be deleted then what do I do? I want to just remove that drop from the array and the way that you do that in Javascript [is] with the splice function The splice function Splice is something out [of] an array And I need to give it which element out of the array do I want to splice which is in this case I and then to give it how many elements? Do I want just that I are also the one after and in this case. I want just that I so I say one so now We should be able to run this and you'll see Right, it's just getting bigger, and those drops are being removed from the right now this totally worked and didn't have any problems But I really did something that's a little bit problematic when you're deleting things and I have a separate video about this So maybe I'll refer you to that somehow in the description but when you're removing stuff from an array if you're marching through the array forward and you delete something and then the array Chunks back contracts, and you move forward again you actually could skip elements by accident, so this merits probably a longer discussion but I'm going to save that for another video, [but] [so] it's Generally a good idea in this case to walk through the array backwards And how do you walk through an array backwards [I]? start at the end length minus [one] I go down by one and [I] go all the way down to zero so You know it didn't really matter because if I [missed] one I'll catch it the next time around is happening 60 frames per second, but now you can see here we go and I Could grow these flowers so I'd be in a way. This is kind of like you had 30 minutes This is the basic core idea of space invaders with some modification and flowers of water now I sort of would like to keep going [I'm] looking [at] the chat as people asking questions off to look at those after I'd like to keep going to add a few [more] Features, but let me tell you what those features are So number one is I would like the invaders to move The flowers excuse me, and I would like to make the interaction of the ship be a little this is like too awkward This is not working for me. I want to be [able] [to] hold the key down when I release the key habits stop moving [so] I want to fix those two things however I might suggest to you stop this video now try to add those things yourself [and] then come back and watch to [see] how I did it But you know since this if anyone's still watching this video [thirty] minutes in thank you very much Okay, so let's add those things because it's not too much to do first. Let's move the flowers So if we look at the flower constructor function which sort of represents [like] a template for that flower object? It has [a] function called grow which grows the radius it has a function called show which draws it, but it has no function to let it move so I think we should write a function called move and how should it move it needs to say this x equals this dot x plus something and This dot y equals this dot y plus something now if I'm right if I think about space invaders how it works these all kind of move together, and then they move down and move together that way, so Ultimately, I probably don't really need each Object to have its own like variables for how it moves because they don't all move separately they all move together But maybe I'll build that into the program anyway, and then they're all just moved together anyway Boy, this is actually going to be quite tricky because when one of them hits they all have to move Anyway, but it's okay Let's just let's so [let's] add this dot x I'm going to call it x dir for like x direction and this dot [y] Dir for y direction yeah this could be done more simply I think but I'm going to just go with this right now so I'm going to say like this dir equals 1 and this dot y dir equals 0 just to sort of see [what] happens [and] I'm going to go back to sketch, and I'm going to say here in addition to showing all the flowers Have them move so let's refresh, and you can [see] the flowers are moving now The issue is when one of them gets to the right side they need to all move down and start [moving] to the left [I] could do something tricky like only check the right Edge one we I know is the last one in the array it sort of tempted to do that but Let's um [let's] let me be methodical about this and I'm going to say I'm going [to] save our [write] equals flowers index. I dot choke. Oh, this is tricky Okay, I got I got an idea so Boy, this is really tricky what I want to do I need I [need] an algorithm to check if any of the flowers have hit the right edge so the first thing I want to assume is That none of the flowers have hit the right edge If flowers Index I item I should build this into a function But I'm just going to do this right here. If flowers index, I dot x is greater than with right equals true so this will actually works wasn't as tricky as Long as I create that variable up here if any of them hit the right side? I just set that variable right equals true and now at the end I can say if right if right is true, then what do I want to do? I want to loop through them all again and set their Ex dir to negative one You know what I'm going to do this. I should really build in a Function like I'm kind of like doing this thing where I? Prefer to not have any stray code out here [want] everything to be built into the object this is going to be too much So what I want to do is I'm going to call this function shift down and I'm just doing my indentation here so basically if any of them get if any of the flowers hit the right edge I want all the flowers to shift down and start moving to the left, so if I go back into my flower object I actually don't need this y direction variable. I'm going to just get rid of that and I'm going to I'm going to say this dot shift down Equals function and what do I do here the two things? I want to happen is I want the y values to move down and I want the direction to move in a different direction So I say this Ex dir x Equals negative 1 right because I'm reversing it [1] will now become negative 1 and I can also say this dot y Plus equals, I don't know let's move it down by [R] So in this case. We should see now It's the oh R is not defined the classic horrible, Javascript error right? What is it here? It's this dot R naught R. Because it's the objects are So now it's moving over to the right hits the right it shifts down, and now it's going to move over to the left So all I need to do is also have something to the left, so I should really actually now that I think about it I feel like I'm talking to myself am I talkin same [eye] still watching this video. [I] can't imagine anybody is Okay, so now if I go back to sketch actually, what do I want? I don't want just to check if it hits the right. [I] just want to check if it hits an edge so what I want to know if [is] [flours] x is greater than width or flours Index, I dot x is less [than] [0] Either Edge Edge is true if Edge shift them all down so now Here we go flowers at the Edge Flower dance at the Edge there. We go now. What are those flowers as they're coming down at me [ok] this is too much fun to do the flower space invaders Watering dance, okay. I really like those flowers to have a little bit of alpha It's kind of bothering me that they don't even though. I don't have any visual design sensibility to bone in my body Okay, it's a little bit nicer. Oh, they're kind of dark, but they'll be nicer when they overlap I'm gonna make them brighter there. See I just wanted that, and I don't want them to have a stroke, okay? I'm off the beaten path here the last thing I want to do to this is make the interaction more seamless I don't I hate this that I have to I can't hold down the key and have the thing move So I need to figure out how to do this so let's look at what's happening here This here is a singular event Ship move to the right ship [oh], if they're sorry, I lost my train of thought let's key press the global function key pressed NP [five] is a single event [if] I press the key it moves it to the right Pressing the key is a single event doesn't matter if I'm holding it down so what I want to do. Here is basically Set what I want to do is permanently move the ship to the right which actually isn't going to be that hard to fix? because All I need to do is Essentially have a ship move function. That's always being called and in here I want to call this now set Direction So the idea is that the ship is always moving But I only am setting the direction when I'm pressing the key so in other words This is always happening, but now I need a new function this.set dir equals function so notice what I've done here I've written a new function that receives a value and sets this objects x [direction] to that value well that means that That objects x direction now needs to be used inside the move function and what I? Need a new variable part of that ship which is x [direction] which I will start at zero so watch this now when I hit refresh [I] can press the key and it's moving now the problem is when I let go of the key it's Still moving now this might be the interaction you want for some games some things, but probably not this one I would I want to do now. This is actually quite. Easy is I just want to add the key released Event and all I have to do now is ship set Dir [zero] because when I lift the key stop moving and I could check you know which key was released But this I couldn't say any key that's released [stopped] moving [and] so now we can see this I can do this and I can now I can actually play this now there's a problem whenever I hit this whenever I release the Spacebar it also stops it from moving [so] maybe I should at least correct that so I could say as long as Key is not equal to space My phone is buzzing like [stop]. This is do the audio stop now, okay um You can see now I can play this game, and I can continue to move with the spacebar okay, so loads of fun [I] this is 40 minutes 40 minutes programming space invaders, but with flowers, so here's what I would love for anybody So I got to get this code online It's going to take a while but by the time this video is there hopefully [there'll] also be a link to the code and Links to other videos that are relevant what I would love is there anybody who watch this and learn how to program this you know? add um See what you can add to this can you add a score? Can you make the can you have different levels? Can you have two rows of flowers or invaders [or] whatever it is you're making You can see I'm still missing a lot of pieces, but the core basic game mechanic is here So thanks very much for watching this space invaders Slash flower invaders coding challenge
