Transcript for:

welcome everyone this is another chris chorus with   your host chris and today  we are going to be coding a pokemon styled game so to create this game in  our browser there are a few things we have to   do well maybe not a few but quite a lot so i group  these into sections to help us better proceed with   development of this project the first section is  going to be map creation with the tiled map editor   so the very first thing we need to do is actually  create this map we see in the background make sure   that we lay it out correctly so that when our  player goes ahead and runs into things such as   the side over here we can't do that we need to  go ahead and make sure that this looks cohesive   put all these elements in the right spot to make  sure that our player can move behind objects like   this house right here so there are a few things  we need to do to make sure that our map is laid   out correctly and in order to do this we're going  to be using the tiled map editor then later on   we're going to proceed into the player and map  development section what do i mean by this well   we need to actually take the images we generate  from the tiled map editor and put them inside   of some sort of programmatical game like we  have right here with javascript and canvas   then finally we are going to be activating some  battle sequences so when we go ahead and walk in   the grass over here our battle sequence engages  and then we can go ahead and fight an enemy now   there is so much that goes into a battle sequence  like this i try to keep it as minimal as possible   so really we're only going to have two attacks  but you can actually go ahead and scale this up   to have as many attacks as you would like but you  see right here we have an animation for fireball   and we have animation for tackle and right now  the enemy only has one animation as well as much   as i'd love to add things such as player levels  the amount of times you can use an ability being   able to capture these pokemon style creatures well  it's really just not feasible within the amount of   time we have for this tutorial i already expected  this one to be anywhere from three to eight hours   long so this is the minimum of what we're going  to do to start but you'll see eventually when i   go ahead and finally eliminate this enemy draggle  right here the enemy faint and then we are moved   back to the scene background music starts playing  wasn't playing it by default just not to annoy the   camera but that is the gist of what we are going  to be doing now like always with all my tutorials   if you want to go ahead and take this to the next  level there will be tons of bonus content over on   chrisgroves.com some things i thought about  adding into this game were conversations with   other characters entering buildings traveling to  other lands item collections health bars healing   and gym battles that is honestly a ton of content  this could honestly go on for over 80 hours worth   of course content so forget all that stuff let's  just focus on the main thing that we need to make   our very first pokemon styled game so the very  first thing we need to do is create our map and   we're going to be using the tiled map editor to do  this so what is the tiled map editor what's going   to be an app that's available on both windows and  mac and you'll see if i open this up this is how   i created this map basically this allows you to  place tiles in certain portions of a gridded area   if i turn that grid on it looks just like this so  each of these are just little tiles that fit into   these areas right here and what this allows us to  do is place boundaries all along the edges of our   map where we want our character to move so what we  can do here is we can export our background images   without the collisions so if i turn the collisions  off it's going to look something like this we're   going to export this whole background image as  one large image and then we can go ahead and   export these collisions separately so that when  our player moves throughout the map we can track   collision between our player and these collisions  right here they're not going to be visible within   our game but they will work they will not allow  our player to move past these red boundaries and   the reason we're making this within a tiled  map editor as well it's going to allow for   a lot more detail than if you were to go ahead  and generate out a map using just pure javascript   what do i mean by generate diode and map using  pure javascript well i did this within the last   tutorial on pacman actually so if i go ahead  and check out pac-man this map right here   is completely generated using an array and this  works for pac-man because we don't have that much   detail here within this game you'll see we have a  few pipes we have these little pellets we have our   ghosts that is totally fine for a low detailed  game like this but if we go back to tile you're   going to see there is so much detail within this  map imagine having to lay this out with an array   and you might be wondering well what am i even  saying with lay this out with an array well let   me bring up the code for pac-man real quick so if  we look at the code for pac-man this map over here   is completely generated by this array so if we  look at things this little one right here refers   to a top left corner piece within our pac-man game  so this guy right here in the top left corner is   just referring to this one right here and each of  these little pipes up top these little dashes is   just referring to one portion of the pipe so these  are actually little grids and they are drawn all   throughout our pacman map you'll see the dots  are pellets one of these dots refers to pellets   and then we have different symbols to represent  different things within our game such as side   pieces caps corners and so forth so this is how  the pac-man game was generated now imagine trying   to generate not a pac-man game but our pokemon  game over here imagine how big the array for this   game would be if we're to use the same style we'd  use on pac-man over here it would be absolutely   massive it would just make our game a pain in the  butt to actually develop especially if we want to   go ahead and layer pieces on top of each other  for our game so it's very important that we use   some sort of tiling editor tiled is free and it's  probably one of the easier ones to use from what   i've actually experienced so that is what we're  going to use so before we even download tile   the very first thing we're going to do is find  assets for a game because we need those in order   for tiled to be able to build out our maps so  where would i go to download any free game assets   well i would actually go to itch dot io so this  is going to be an indie game community basically   a marketplace for both free and paid assets for  your games if i go all the way over here to the   left hand side of the website you're going to  see some text that says game assets we're going   to click on that and then you can go ahead and  select a top down tag because if we look at our   game the pokemon game is basically a top down game  we're looking up from the top down at our player   so we want to go ahead and click top game  assets and now that we have that tag on here   we can go ahead and see what is available to us  so you'll see some of these are paid it'll be   notified by a tag right here but some of these are  going to be completely free and if i look at the   most popular tag right here these are some of the  most popular ones available i looked through a few   of these and honestly the ninja adventure one is  probably the best free asset pack you could ever   get really incredible work by that artist over  there and we actually will be using some of it   that is by pixel boy but in order to generate our  map we're actually going to keep on scrolling down   until we get to the 12 by 12 rpg tile set so  this is free to use for both commercial and   personal use and it's perfect for our type of game  a pokemon style game in which we can go ahead and   travel some sort of unique world so this is what  it looks like it comes with a tile grid that looks   just like this and allows us to produce worlds  that look like this so how do i actually download   this well we can go ahead and click the download  now button and then we can go ahead and donate to   the author which i really recommend doing because  they for sure put a lot of effort into this   project but if you would just like to get the free  version you can go ahead and click no thanks just   take me to the downloads and then it's going to  allow you to download everything you need so we do   need the full asset pack we do need the character  walking but that might come in the full asset pack   so let's go ahead and download the full asset  pack now if for whatever reason this is no longer   available on itch.io this will be available within  a google drive link within the description just to   make sure that everything is safe and sound for  future use of this tutorial so if i go ahead and   open up my finder check out my downloads folder  and look inside of that you're going to see this   is what i downloaded it's going to be our asset  pack and this is laid out perfectly with a 12x12   grid format so that we can import it into the  tiled editor you'll learn a little bit more about   that and understand it as we go but you'll see the  character isn't actually here let's go ahead and   make sure our character is downloaded as well we  just need to make sure that we download these four   items too so i'll click download on those four as  well and let's go ahead and check those out now we   have our character walking in different directions  this is how we're going to animate our characters   we need these little sprite sheets right here but  something i do want to note about this asset pack   is there is one issue especially with this png  right here where everything is being displayed   if i go ahead and open this up and i zoom in  on this one building right here let's go ahead   and zoom in on that if i zoom in on this building  you'll see it is off by a pixel these just don't   line up and that is pretty unfortunate just a  small mistake obviously when this was exported   so what i did was i fixed this behind the scenes  if you want to go ahead and get the fixed up   house which we're going to use you just need  to make sure that you download the link within   google but i still highly recommend going ahead  and supporting the author who made these in the   first place so you'll see right here within tiled  i created tile set and that goes ahead and fixes   that one issue for this house if we zoom in on  it well now these are lined up a bit better not   even on perfect kind of messed up up here but we  should be good to go with this instead so what i'm   going to do is i'm going to go ahead and create  a new folder i already have one called pokemon   assets i'll go ahead and create another called  my game assets just to differentiate the two   and then i'm going to go ahead and pull well  i'm going to go ahead and pull our character   sprites into that but i'm not going to go  ahead and pull on the first asset pack that   we downloaded from h.i.o simply because the house  is a little off instead i'm going to go inside   the pokemon assets folder and this is available  within a google drive link and then i'm going to   grab the tile set within here i'm going to copy  this with command c go back to my game assets   and then i'm going to go ahead and paste that in  so that is going to act as a tile set for when   we are using tiles rather than the one that came  directly from itch.io so definitely go ahead and   check out more of itch.io for any game assets you  might want to use you'll see there are a ton of   different styles and these are really really great  assets and you get a ton of them for free but now   that we actually have this tile set well now if  we go back to our to-do list what do we need to   do well we can check out find assets now we need  to go ahead and download tiled so that is going   to be the map editor app in which we can actually  go ahead and place these tiles and create a map   so how do we go ahead and download tiled well a  simple google search will suffice and the download   link will also be available within the description  if you want to go ahead and speed things up a bit   so i'm going to go ahead and type in tiled map  editor we're going to go ahead to the very first   link then we can click download on it io you'll  see these two work in tandem pretty well together   so here it is all we need to do is download now  and like i said this is completely free even   though this is going to show a price right here  this is basically just a suggestion for a donation   i really recommend donating to them as well  because this stuff would not be available   without their hard work but if you want to go  ahead and get this for free like always you can   just go ahead and press no thanks just take me  to the downloads then you can install tiled for   the platform of your choice so i'm on mac os so i  downloaded that right here if you're on linux you   can click this one if you're on windows just make  sure you're selecting the right bit and then you   can go ahead and install that from there so i'm  not going to go through the whole installation   process of actually showing that install but once  you go ahead and install this make sure that you   open it on up i'm going to close my tiles so we  can start from the very beginning of what tile   should look like when you open it so when we open  up tiled it shouldn't look something like this   it's not the most intuitive platform but it's easy  to get around once you actually import your tile   set so to import our tile set to that image that  we just downloaded we want to go ahead and click   new tile set right here so what is a new tile set  well if we look at this tile set right here this   is indeed a tile set but what what does it even  mean to be a tile set i guess is what i'm asking   well a tile set is basically going to be this  image right here that is perfectly laid out   in some sort of grid format so when  we downloaded this this was a tile set   at 12 by 12 pixels which means each of these was  laid out perfectly on a 12 by 12 pixel grid so   since these were laid out perfectly on a grid  like so each piece and apologize for my poor   writing here each little piece of one of these  grids is going to be able to be plopped on top   of the tiled map editor and when we combine all  these little pieces together they're going to be   laid out perfectly so that we can begin adding in  those collision blocks it's really important that   we place those collision blocks in just so our  player can't go off the screen where we don't   want them to go but allowing us to have some sort  of tile format like this is going to allow us to   really make our course look great and connect  all these little small pieces together to make   something that looks really really good so that  is why we're using tiled and some sort of tile set   like this and thankfully the artist of this set  already laid everything out perfectly so we can   go ahead and grab it and place on top of some sort  of map so what we're going to do is we're going   to go back over here and call this tile set what  well we can go ahead and call this pokemon style   game type we can go ahead and keep this  as based on tileset image because we know   we're going to be using a tileset image now what  is the source this is just going to be the image   that we want to use as our tile set so we're going  to go over to downloads and we know this is in   my game assets and it's going to be called  tileset.png this is what we want to select   so we'll go ahead and open this up and then for  our tile width and tile height we want to make   sure that this is 12 pixels because that is what  this tile set was meant to be at if you go to the   home page of this tile set you'll see that it was  meant to be at 12 by 12 pixels so we need to make   sure that this is exact to the actual tiles for  the tiles that we're using so with this this is   all we need to get started so we'll go ahead and  click save as after that and then we just need to   save this in some sort of location so this is  going to be the project file for tiled we just   go on over to mygameadsets and save it directly  in here you'll see this is going to be saved as   pokemon style game great that works for me and we  can go ahead and select the tiled tile set files   so i'm going to go ahead and save it so you'll  see that i'll go ahead and open up and this is   what it's going to look like so you'll see since  the author went ahead and laid this out perfectly   all these assets are divided up into 12 by 12  grids so we can either go ahead and grab a blob of   grids or we can go ahead and just grab one little  individual square and copy it out onto some map   so next thing we need to do is start creating that  map this is just the layout tile set that we're   going to be using to basically copy and paste  these images into our map to create something   that looks really good so in order to create a new  map we're going to go up here to file new and then   hit new map so most of this you can go ahead and  leave it alone but we really want to focus on our   map size how big should this be well i know i want  our game rendered out at about 10 24 by 576 pixels   and i already did a little testing with this so  i think the ideal width and height is going to be   70 tiles wide multiplied by 40 tiles tall so if  we look at this our map is going to be 840 pixels   by 480 pixels wide this can be rendered out on  a larger screen which we're going to need to do   anyways because our tile width and height is so  small to begin with ideally it would be something   like 24 32 64 pixels wide for these but this is  what we're given so we're going to go ahead and   work with it to make sure we get exactly what we  want but you'll see right here the total width and   height of our project is just going to be the 70  tiles times the actual width of one of these tiles   and same thing for the height 40 times a height  of 12 is going to be 480. so that's what's going   to determine the actual width and height of our  map so once we go ahead and change our width and   height right here we can go ahead and hit save  as and then we want to go back to my game assets   we're going to save this here as well i'm going  to go ahead and say this is going to be called   pokemon style game map so once we go ahead and  put that in we can save this as a separate map   so now we have two things open right now we have  our map which is just going to be this blank grid   right here and we have our assets on the right  hand side this is basically going to be our copy   paste section so we can go ahead and grab one  of these and begin drawing out our map with that   we don't really need this project sidebar right  here so i'm going to go ahead and exit out of it   but now we can go ahead and begin using the  tiled map editor to actually draw tiles onto   this grid right here so how do we want our map  to look well i know i want to go ahead and make   sure that this is some sort of island map so i  want the whole thing filled up with water first   and when you go ahead and develop these maps  you want to go ahead and think of this from a   layer standpoint you'll see over here we have  a layer bar and this is very similar to things   you'll see in like photoshop illustrator and xd  these are going to be layers for actual tiles   so let's think if we want to go ahead and build an  island what do we have to build the island on well   an island needs water so that'll be the  first layer what comes after the water   while we're going to need some sort of island  base we'll go ahead and grab material like this   then what comes on top of the island we're going  to need things like grass plants houses and then   we might even want to build a plane on top of  that so it's very important that we go ahead   and lay these out in layers because later on if  we want to go ahead and turn things on and off   make sure we get a different view of things such  as how does our island look with flowers without   flowers with trees without trees it's going to be  very useful to be able to toggle these on and off   so let's go ahead and start with tile layer one  how do we begin actually posting tiles onto our   grid right here well we're going to want to  make sure that we have this layer selected   and then we're going to go ahead and select  this brush tool right here then finally in   the bottom right corner in our tile set that we  imported initially we're going to go ahead and   click the tile we want to begin drawing so i'm  just going to start by zooming in on my trackpad   i'm going to start with this one little tile in  the center right here so if i go ahead and select   this and then i'll zoom in on this grid right  here so i'm doing on the trackpad by expanding   my fingers you can go ahead and do it with  your mouse by using the scroll wheel let's   just go ahead and expand inwards you're going  to see now i have this little icon right here   getting ready to be drawn on top of the grid and  all i have to do to draw this is just hold down   and pull across the grid squares that i want  to draw this on so that's pretty cool right   we're going to go ahead and draw this map just  by dragging and clicking but obviously this is   going to take a very long time to fill up and in  addition this isn't very randomized this isn't   going to look very good if we just go ahead  and keep drawing out this tile exactly like we   are right now so one we need a method to fill up  this whole grid a lot quicker this is going to   be our island water and then two we need a way  to actually randomize this so we don't get some   sort of boring pattern like we see right here so  let's start with just filling up blank sections of   a grid so let's say we want to fill up the whole  thing with water what we can do is we can select   this paint bucket tool right here this is going to  be the bucket fill tool you can either just click   on it or hit f and you'll see once i select that  and i make sure i have a tile selected right here   and i hover over our grid it's going to go ahead  and highlight the empty areas that have not been   filled in with the tile yet that is great that  is exactly what we want so if i were to go ahead   and just click you're going to see our entire  grid the area that hasn't been filled up yet   now has this little tile that we have in the  center right here but that doesn't solve the   issue of adding some sort of randomness to this  actual grid so if i wanted to go ahead and make   this a little more randomized the very first thing  i could do is i could select not just one of these   squares over here i could select multiple of them  so i click and drag and select the whole thing   now if i hit the paint bucket again and i hover  over our area even without clicking if i hover   over this you're going to see exactly what it  would look like if we were to go ahead and paste   this in so i could go ahead and just paste that  like so and that is already looking a lot better   i don't think we'd actually ever be able to tell  that this is some sort of pattern in the first   place so it's going to go ahead and lay things out  like you see right here and i think that honestly   looks really good but if you want to go ahead  and randomize this even further you can go ahead   and click on this dice button over here and what  this does is it's automatically going to select a   random square from what you have selected so see  right here when i try to use the fill tool while   it's only selecting one square because the fill  tool is going to select all like squares that are   around one and so right now all these are going to  be different because we actually filled it in with   all these nine squares that we have so we want to  go ahead and test out this randomization tool we   can go ahead and click this little square selector  right here and just go ahead and drag over our   whole map and then hit delete that's going to  delete everything that we just put in but now we   can go ahead and use our fill bucket again making  sure that we have the dice selected which i do   and make sure over here that we selected all the  squares we want to have randomized and now you'll   see when i hover over the whole thing all these  squares are alike so i can fill in the whole grid   and then i click and now if i look very closely  these are going to be completely randomized   thanks to the tool we used over here for complete  randomization and we can see how this looks by   hitting command g or control g for windows to  see this is a truly randomized grid that we just   created so that is looking great for our water we  are creating that initial base image which we want   to use for moving our character around a map so  now that i have this layer created i want to go   ahead and rename it to something a little more  descriptive so that when i come back to this i   know exactly what this layer is so i'm just going  to go ahead and call this water you can call it   ocean doesn't really matter both are descriptive  of what we just put on so now we know we need to   create some sort of land mass and if i zoom out on  our tile set over here you'll see we have a bunch   of options for creating a specific landmass on top  of this so the very first thing i wanted to do is   create a new layer so i'm going to right click on  the section right here head over to new and then i   want to create a new tile layer to begin layering  new tiles on top of our water because if i were to   select our water and i were to select some grass  and use our brush tool to just start coloring on   top of this you're going to see even if i turn off  our water layer right here it also turns off the   grass we just did some destructive editing to our  water by covering it with grass we don't want that   rather we go ahead and select our tile layer  too which is going to be our eyelid layer begin   drawing on top of this and then when i turn this  off just turns off that layer we can turn off the   water to just view this looking really good just  a nice and easy way for non-destructive editing   for our map so tile sets are usually designed in  a specific way and what i mean by that is if we   zoom in on one of these elements or i guess these  two lan masses down below you're going to see a   little bit of differentiation the very first  thing i noticed is that this right here has a   border bottom that is green it has this greenish  shadow covering the very bottom of the landmass   but over here we have a watery blue shadow so  if we think about this this landmass right here   was meant to be the island land mass while this  was meant to be on top of grass so if we were to   go ahead and create some sort of land mass on top  of our water right here we would want to use this   bottom land mass to begin creating that so a very  quick way to just get started with everything is   first i'm going to go ahead and erase what i have  right here by using the rectangle tool selecting   that area and making sure i have that layer  selected hitting delete now we're good to go to   actually begin using what we have over here so i'm  actually going to go ahead and select the brush   tool and i know i want this one landmass right  here because it's supposed to go on top of water   what i'm going to do is i'm going to select from  the top right hand corner all the way to the   bottom left i'm going to select that whole thing  right there by clicking and dragging and then i   want to make sure before i actually paste this in  that i have this randomization button turned off   because otherwise it's just going to give us one  square to randomize between i'll go ahead and turn   that off and now you'll see with the brush tool we  actually have that exact landmass and if we zoom   out we can plot this right in the middle of our  map so cool we have our very first island for our   game and if you go ahead and select a little too  much like i did right there you can simply take   this eraser tool click on that hover over the spot  in which you accidentally drew something click and   now it's gone that easy so this is our very first  island we can turn it off with the layering over   here but now that we have this island i want to  go ahead call this the island layer cool so if i   want to begin extending our island well obviously  we just place this big chunk land mass right here   but how do i actually make this island bigger well  now it's going to be up to you to begin extending   this using pieces of this landmass so you'll see  right here if i zoom in on this one little square   i selected this is just a bare green square that  is perfect for extending the island landmass we   have right here so i go ahead and select that make  sure we have our brush tool selected i'm going to   turn our grid back on with command g just so i can  see exactly where i'm going to be placing things   you'll see if i begin drawing on top of these  little edges right here of our island that it   gets filled in with a green square and we need  to be pretty precise because some of these have   such small details on them to really bring out the  reality of our game and we want to make sure that   we cover these little edges up as well so i'm just  going to go ahead and start drawing over all these   nice little edges that we had previously to where  i want to extend this landmass so i'll go ahead   and add a couple more rows on top and i always  want to make sure i'm really looking at these   detailed pieces right here get rid of those  we might even need to fill those in with a new   detail piece that only faces to the side but let's  just keep extending this i'll go ahead up three   or four rows or so so our island just  got expanded by four rows but obviously   this over here looked way better than what we have  right here this just doesn't look realistic at all   so i want to go ahead and expand this what i  can do is i can go ahead and select our side   pieces right here so i want to make sure that  i select these top two because this bottom one   right here if i zoom in on that you're going to  see that this side piece is meant to connect to   some corner piece so i don't want to use that  one but i know these two side pieces right here   well these can definitely function as side pieces  for a map so if i select those two and i go ahead   and place a new piece right here i can zoom in and  actually that looks a little bit off so we might   even need to use just this top piece why does  this look off well you'll see right about here   we're missing some blue pixels that are supposed  to extend from this portion and this portion onto   this bottom square right here so these two tiles  don't actually connect so we want to make sure   that we go ahead and use the correct pieces here  so we're no longer going to use both of these   pieces instead we're just going to use this middle  piece because i think we can go ahead and connect   that to everything else on the side so i go  ahead and replace this top piece right here   which corresponds to this one right here i can go  ahead and click and you'll see actually yeah that   connects pretty well to the other middle pieces  so i just want to use this middle piece to begin   creating my sides i'll go ahead and drag that on  up to when we get to right about here and now i   want to do the same thing for the right side of  the screen so i'll move on over to the right of   our island i'll select the middle side piece and  then i'll just begin drawing upwards with that   middle side piece making sure i have the brush  selected so i want you to go ahead and pause the   video and try doing this on your own because it's  really important for you to actually execute this   stuff to get it really ingrained in your memory go  ahead and try adding the top portion of our island   right here by selecting the correct tiled piece  from over here in our tile set so once you think   you have that down this is how i would go ahead  and do it i would go ahead and look and say well   i just came from this right side over here what is  the very first top piece i might want to add into   this well i would go ahead and say probably this  one and i just want to go ahead and make sure that   it would connect if i were to place it right next  to itself if i go ahead and create this right here   and also create this right here i honestly think  these connect pretty well and that should be good   enough to create a whole top side of our island  so i can go ahead and just drag that on out   and now we can really get down to detailing out  this ion so this is looking a lot better than   we had previously but now we want to fill in the  little details that come with our tiled map editor   so one of the little details is going to be for  our corner pieces or where we have this corner   right here on the top right of our island the  first thing i want to do is select this inner   piece because this inner piece is going to have  detail right up here and right on the side that's   going to make this top piece and the side piece  look more realistic so i go ahead and select   this corner piece and click right there well  now this top piece definitely meshes in better   but you'll notice over here for our corner piece  on the side we used this middle piece right here   instead of this top one whenever we create some  sort of corner we want to make sure for the very   last piece we are selecting well the very last  piece right now we're only selecting the middle   so i'll select that very last piece and let's say  for our last piece i want to add that end and now   that is looking really darn good everything  connects very well it's looking very realistic   compared to what we had before no jagged edges and  now i just want to make sure i keep adding detail   for these inner portions of our grass so what i'll  do is i'll go ahead and select this middle portion   right here because i know it's going to be  the detail for our middle portions on the side   and then i can just drag on down that middle  portion and now i see we have detail all along   the right side of our island let's go ahead and do  detail for the top of our island well we know if   we want to go ahead and add detail right here well  we could try adding this corner piece that we used   for this top one but you'll notice it has detail  on the right side we don't want that we just want   detail on the top side so we can go one over and  if we go ahead and add that in well maybe it does   work out that's pretty close it's just a different  color but if we want to be even more realistic   we go ahead and select the second top piece and  say hey i don't want to use just the corner piece   for this anymore even though it does mesh pretty  well i want to use this top piece instead draw   over it and now that is supposed to be the one  that actually meshes in better with what we have   right here when it's this close it's kind of  up for interpretation you'll see if i go ahead   and swap between what we just had well this  isn't much different and it doesn't mention   any better than it did before so we could honestly  just go ahead and leave this as we had it and   just say we want to go ahead and select this top  detail piece and just fill in the rest of these   blocks with that detail so we'll go ahead and do  the same thing for our left side over here once   again i want to challenge you to pause the video  and fix this corner right here and add in all the   detail from the top of our island to the very  bottom on the left hand side so once you think   you've gotten that down this is how i would do  it i'll go ahead and add in the corner right here   the corner detail piece and then i know this  doesn't mesh really well on the top left hand   side so i'll go ahead and select the top left  hand side of the island within our tile set over   right to this piece right here and now that looks  a lot better and now i can go ahead and grab this   middle piece and just begin dragging down to  add that detail to the left side of our island   and now we created our very own island using this  island set that we had over here we basically just   morphed this island piece to create something that  looks really cool so you can really take this to   the next level by adding these little pieces right  here and begin extending your island as you wish   to create something that's more diagonal and  something that's even bigger than what you had it   i'm going to keep this as is for now just for  time's sake but definitely go ahead and try   creating more of this island on your own because  in the end this is going to be your game and you   want to make it as cool as humanly possible so  just checking up on to do let's go ahead and   check off what we finished already we downloaded  tiled we imported that into our project so we go   ahead and mark off downloads and setup we were  already creating our map and now we went ahead   and finished tile layering for ocean and land  masses so i'll go ahead and check that out as   well and now i'm going to go ahead and edit this  a little bit as needed i know next up i want to   go ahead and show you guys how to create another  landmass on top of this which our character can   move up to another level so i'm going to go ahead  and say this task should be tile layering for   a plai toe if my third grade geography in science  does me right i believe this is called a plat   toe so let's go ahead and create a plateau so  what do i mean by a plateau well i want to build   a landmass on top of this little island right here  and the perfect way to begin building a landmass   is using the second landmass piece that we have  above our water landmass so once again we know   this is meant to be placed on top of land mass  layers because it's shadow on the bottom right   here is going to be a greenish shadow rather  than the blue shadow so we know this is meant   to be placed on top of islands or landmasses to  begin adding extra depth so if i were to add this   in i would want to make sure definitely to create  a new layer so i'll right click and hit new layer   and i'll call this play tow and now i can begin  building this how do i want to start building   this while we only have so much real estate or  at least i do for a small tutorial map right here   so what i'm going to do is i'm going to select  just this portion right here with this little   striped section which is going to act as stairs  in which our player can actually go up from so i   go ahead and select that and then drag it over our  game you'll see this is actually a little bigger   than you might have figured so i can just go ahead  and place this in a location that i think is good   and i actually want to place this a little  higher to the top of our map rather than lower   because we need a little bit of area in which  our player can move and actually get up this   so i'm going to go ahead and place this right  here just click that to make sure i have the   plateau layer selected when i do that you'll see  just like that now we have some sort of plateau   on top of our island although it doesn't look that  great let's just say for tutorial purposes i want   to make this little plateau very small maybe  it's just an altar or something like that that   we want to go up and if i want to make this as  small as possible well i'll go ahead and get rid   of this angled portion right here by selecting  with a rectangle tool and i'm going to go ahead   hit delete and now this is starting  to look a little better but you'll see   the top of the plateau meshes into the actual  bottom of it so i know i need some side pieces   to fill this in so to get some side pieces  i can go over to the tile set over here   grab some of these side pieces i'll go ahead and  grab these three and then i can just go ahead and   paste those on in now you'll see i'm just missing  a corner piece so i can select that corner piece   paste that on in and i might want some detail  right here for these tiles so in order to get some   detail i can select the corner piece detail paste  that in right there get the side piece detail   put that on in if i really want to be exact  i can get this bottom corner piece detail   and now that looks really good for our little  plateau right there and same deal as before   if you'd like to extend this plateau based on  your map you can begin selecting the front of   this plateau and then just make sure you move  this to the correct location to actually begin   creating something that actually matches up and  expands together that's really all you have to   do but i'm going to go ahead and keep this as is  for time's sake on this tutorial but we definitely   want the water we want the island and we want the  plateau but we're going to keep adding more and   more onto this island just to show you exactly  how to get those very detailed effects using   this map editor so i'm going to check off tile  layering for a plateau that is great i'm going   to add in another piece right here it's going to  be tile layering for a house so if i really want   to start adding detail in well maybe we want  some sort of house maybe this is our player's   house or another character's house how do we add  that in well i know i want to create a new layer   so i'm going to right click hit new tile layer  this is going to be my house layer so it can   either hold one house multiple houses probably  going to hold all the houses within my game so   i wanted to create a house i would go ahead and  select from the edges of our house right here   a small little box and i'm going to go ahead and  add one more row just so i make sure i have all   the detail of this house and with that you'll see  now we have a pretty house in which we can just   go ahead click and plop onto our screen as long  as we have our brush object right here selected   and our house layer over here selected too so  that is already looking like a very cozy nice   island for our player to be in that's pretty much  all we have to do to get started with our house   but you'll definitely want to make sure that when  placing this house while you give your character   enough room in the front right here in which they  can actually walk around that's always going to be   very important we wouldn't want to place our house  right up here in the front because otherwise if we   wanted our player to walk into this building well  it just wouldn't be possible so we're going to go   ahead and make sure our house is in the back  and that is simply how we're going to go ahead   and layer a tile for house simple enough right so  let's go ahead and start working on trees and i   went ahead and made this a separate task for trees  because they can get a little tricky when we want   to go ahead and place trees in front of each other  behind each other and so forth so i wanted to show   you how to do that as well so in order to go ahead  and create some trees while i'm really running out   of real estate right here on our island you're  running out of real estate on your island what   do you do you just simply buy a new one or expand  it so we have the money to do that right so here's   what we're going to do we're going to select our  island right here and then i'm going to select   this rectangle tool and then i can go ahead and  cut out a portion of the eyelet i want to expand   basically i'm going to be copying piece of the  island pasting it somewhere else to really expand   it outwards so i'm just going to go ahead and  create a whole new backyard for our house and   to do that i'm going to go ahead and click right  up above here and start expanding this downwards   and i want to make sure that i'm not selecting any  part of this ridge on the very bottom because i   want to expand the side so i'm going to go ahead  and select that area and then i'll hit command c   and then if i hit command v you're going to see  on the brush tool we have a new portion of our   map selected which we can just simply brush onto  our island so i go ahead and move this up we can   see a little bit of what this would look like  now that we have island selected i can just go   ahead and click and you'll see once i move to the  side we have a whole new backyard for our island   that simple when you know how to use the right  tools within the tiled map editor so we have   this new island but we know we want trees in  our backyard so i'll go ahead and right click   hit new tile layer we're going to go ahead and  call this trees so i move this up above our house   now we have a section for trees and the reason  i'm moving this up above house is because i know   my trees should go behind the house so now that  we have this new layer for trees we'll go ahead   zoom out of our tile set right here and look for  some trees and they're going to be right here   i really like these big trees right here so  i'm going to go ahead and select one of these   make sure that i cover the whole thing and then  with my brush tool selected you'll see now i can   start drawing trees so i want these in the back  of our island so in the very top right corner i'll   draw one i'll move on over to the side you'll see  i can't really draw these on top of each other on   the same layer if i were to place one right here  well that just goes ahead and cuts out the other   portion of the tree right there and that just  looks terrible so we want to make sure that we're   giving it enough space to create some new trees  all the way over here and we'll just cover the   whole back row with some trees and that honestly  looks pretty good we could go ahead and call this   done but if we want to add a little bit of realism  to our map right here using tree design we can go   ahead and create another layer specifically for  trees so we know we have this trees layer right   here but if i want to go ahead and create a new  tile layer i'll just go ahead and call this trees   one now i can go ahead and draw some trees  in front of those other ones and when i do   that within the tree is one layer well now i can  overlap these on top of each other because they're   not going to destructively take out the artwork  that was on the previous tree that we just put in   there so i can go ahead and toggle these on and  off and you'll see how these are layered on top   of each other it's very important that when you  want to layer similar tiles on top of each other   that you create these new layers to create the  effect you want so if you wanted even more layers   of trees well i couldn't go ahead and place this  with entries one you'll see that just goes ahead   and takes those out i would want to go ahead and  create a new tile layer call it trees 2 for the   second layer and then when i place this right here  you'll see now we have this nice little triangle   of trees i actually liked it better before but  you can go ahead and either keep or delete this   tree's two layer to create the island as you wish  with as many trees as you wish too so that takes   care of layering and placement for trees now  we want to go ahead and add in some landscape   details honestly this one is pretty easy for the  most part when it comes to flowers and grass we   just need to know a little bit of randomization  but i think it's more important to take care of   the pathways over here because it can get a little  tricky to make sure that we lay this out correctly   so for the details let's go ahead and create  a path from the beginning of our house   over to our little plateau over here so the first  thing i would do is determine well where would a   path go would we go ahead and create a new layer  for it what do we go ahead and draw on top of   our island layer right here honestly we could do  either or i think it makes more sense to create   a layer that way we can always turn this off as  needed and not destroy the old artwork that we did   so instead of drawing this directly on top of our  eyelid layer i'm going to go ahead and right click   hit new tile layer and we're going to call this  paths so now i know i want to draw a path from   our house over here what i could do is just go  ahead and select all of our sand paths right here   and i know if i want to go ahead and make these  randomized i can just select these little dice   it's going to go ahead and make sure that each  tile that i go ahead and draw on here it's going   to be a different tile so really cool stuff right  there and if i want to go ahead and make sure that   this little area before our plateau is filled  in too all i need to do is draw on top of it   and that already looks pretty darn perfect right  here just because we layered everything correctly   to where our plateau is placed on top of our  paths right here so it's automatically going   to give us that really cool effect so that takes  care of one path but this could be a lot better   how well we could go ahead and extend our path  and make sure that it connects to our grass using   these tiles right here so you'll see if i zoom  in on these tiles that they have edges for our   grass that connects the actual sand path so now  if i zoom in our map you'll see our grass right   here does not connect very well to our actual sand  so what i can do is get the piece where the sand   is on the bottom select that and i really want  to make sure i turn off this randomization tool   so i don't get any weird effects with other tiles  coming in and then i can just go ahead and draw on   pieces where this tile right here should have some  sand on the bottom and put that in every location   and where i want to sand and just like that we  really made our piece look even better than it   did before so now i want you to go ahead and pause  this and try filling in the bottom row right here   with some connectors on our tile set that makes  sure that the sand connects to the grass below   when you think you have that done let's go ahead  and see how i would do it i would go ahead and   select this top piece right here and then i  would simply draw that onto our paths layer   like so but uh oh we have an issue right here if i  try drawing onto this paths layer right about here   you'll see it's covering part of our island and  it just ruins the look so what i want to do is   i want to extend our island at least one or two  rows downwards how do i extend our island well   same way we extended our island on the top we  want to make sure that we select the island and   then go into our rectangle tool which is going  to be this guy right here and then let's say i   want to extend this by three rows i'll go three  rows up from this one right here so one two three   select from right here everything that i want to  copy and make sure that i get this bottom piece   right here that has some detail on it i'm going to  hit command c and hit command v it's automatically   going to put me in the brush tool with this big  piece selected and now i just need to cover the   correct portion in which i want to expand this  i know i don't want this right here because we   might have this little piece showing where my  mouse is so i'll go ahead and cover that and   then just click and now we have more real estate  on our island so what we can do is we can go ahead   and add more sand pieces so i'll go ahead and find  our sand pieces they're going to be right about   here and now i know i want sand on the top so i'll  grab that top sandpiece and begin filling in those   other pieces to make sure i have a nice sand path  well this might be a good sand pass for someone   who's really small right but what if we want this  bottom row filled up too what is a quicker way to   do this well one thing i could do is i could just  go ahead go back down to our sandpiece select   all these and randomize a huge row right here but  that's a little tire sum i like doing things fast   so instead i'm going to select a rectangle tool  make sure that i select these two rows right here   hit command c hit the command v and uh oh we  actually have an issue here what happened well   this is something that can really catch you what  did i just copy while i copied it looks like some   green and some sand pieces well look what i have  selected right here i have our island selected   this isn't really where we should be drawing our  paths because we have a completely separate layer   for that our eyelid should just consist of the  green and the edges around it so what i want to do   is one i'll turn off our path to see what  i actually drew on our island right here   now i don't want these path pieces on our island  so i'm going to actually erase them with the   eraser so one two three four and now you'll see  while we just erased our island we actually want   that green in there too so what i could do  is i could go ahead select a rectangle tool   just select another piece right here that's  already on our island hit command c to copy that   exact piece and then i can use our fill bucket on  this area that's exposed right here but you'll see   i still have this one piece selected if i want  to go ahead and deselect this i can hit command   shift a that should be control shift a for you  windows users and now i can go ahead and select   something else that i want to fill in with what  we just copied so if i want to go ahead and fill   this in what i can do is with this rectangle tool  select a square hit command c then hit command   v now you'll see i have that exact piece selected  down here you can just begin brushing that in   because it automatically selects the brush tool  and now our island is back to normal but let's   go back to our paths so i'll go ahead and show  our paths again by clicking the eye tool and   now you'll see i want to make sure i have paths  selected this time so i can begin filling in this   bottom portion right here so what's a quick way  to do this i can go ahead and hit r it's going   to select the select tool right there select  these bottom four hit command c hit command v   paste it on in looking a lot better but remember  we wanted to expand this one row down which is   the whole point of why we expanded our island  downwards so let's just go ahead and select our   rectangle tool with r or by clicking this right  here hit command c hit command v paste that on in   and now we have one more row added to our path  looking pretty good but still could use some   detailed touch-ups what could we do over here on  the left-hand side well we could add some sand   detail over here we always need to make sure we're  being really precise with these detailed pieces   so we know sand is on the right right here i can  go ahead and add that in on the left side and if i   go one over to the right we have some edge pieces  which we could use for the corners as well if we   want to be super precise so this one edge piece  has sand on the top right hand corner as you can   see right there i can select that paste it on in  and just make sure that i'm filling in the correct   spots in which i want a realistic path i'll do  the same thing on the right side make sure i have   some sand connecting pieces over here and then  i fill in all the corners and i think the very   last thing i'd want to do is make sure that this  is all randomized because we can see a pattern   that's pretty obvious and it just throws off  the look of our game so we want to go ahead and   randomize that whole path so what i would do here  is select a rectangle tool select everything that   i want randomized i want to start with a clean  slate so i'm going to go ahead and delete these   and then i want to select the tiles i want in this  location right here so i'll select these three   and then i'm going to use the fill bucket  with our randomization dice over here selected   so now when i go ahead and i try  filling in all this area in between   all these other guys that i just drew you'll see  when i begin moving my mouse over a different tile   we get a different randomization effect so we can  keep on going until we get one that we really like   and i think i'm gonna go with this one right here  i think that's good enough for me you can go ahead   and tailor this as you need to if you want to get  rid of any jagged circles or anything that might   be off the edge that looks really good for our  path i really love how this is looking so that's   how you're going to want to start creating paths  for your game and you can do the same thing with   these little dark green patches over here if you  notice within the preview i use these little dark   green patches as an area in which a player needs  to walk through in order to create some sort of   battle so if i wanted to create some sort of  battle patch i could just go ahead and select   this grid of squares right here and i want to make  sure i don't have the fill tool selected because   it's just going to go ahead and throw things way  off i'm selecting pretty much everything else in   our map that isn't a path if we were to fill that  in well now we have a huge land map we don't want   that we want an island so we want to make sure  we have our brush selected and if you ever have   multiple things over here selected with your  brush selected and it's only showing one tile   that just means you have your randomization  days turned on we want to turn those off   now you can see we can draw in a new battle patch  so i'm not going to call this a path i'm actually   going to create a new layer called battle patch  because this is where i want to activate some   actual code in the game to make sure that our  player is able to go into some sort of battle   so now i just need a good area to put this and  honestly i think i'm just going to put this right   behind her plateau it shouldn't matter too much  but you'll see that's how you want to add some   sort of battle patch if you're not happy with  how that looks behind the plateau well you can   go ahead and just draw it somewhere else such  as behind the house it shouldn't really matter   this is just for example purposes to show you how  to begin drawing paths battle patches and details   so that's how we're going to add a battle patch  and then finally we want to begin adding in   details so these are going to be our details  they're going to be flowers additional trees   fences and so forth so let me show you how to  begin adding in randomized details you might   already know a little bit using the randomization  tool so let's say we want to begin adding grass   onto a map what am i going to do first thing  as always i'm going to go ahead and create a   new layer i'm going to go ahead and call this  grass and flowers so i'm going to go ahead and   combine these two together and then i know  i want to begin creating grass on our map   so i'll select all these grass icons make sure  i have our brush selected obviously i don't want   these drawn out in this grid like format so i'll  select our randomization dice and then i can begin   clicking in random spots with all the selected  to get randomized grasp from this grid right here   i can just begin clicking all these different  locations to create some really cool details on   top of a map if you want to see how this looks  as you go you can just hit command g get rid of   your grid and now you can go ahead and create all  these cool pieces of grass within it so next up   let's do our flowers if we want to go ahead and  do our flowers next we just select the flowers   and then we can begin clicking and it's going to  go ahead and randomize different flowers for us   and which we can begin placing on our map really  really cool stuff using that randomization dice   and this tile set that was given to us if you  want to begin adding fences what we could do   is we could select all the fence right here  and we always want to make sure we turn this   randomization dice off when we select multiple  things but now you see i have our fence selected   we do not want to draw this on grass and flowers  otherwise it's going to overwrite the tiles we   just put on so as always we'll create a new tile  layer say this is going to be our fence layer   we can begin placing this in the right location  so i think it looks pretty good right here   we could even place one right next to that if we  want that looks pretty good but what if we want   this fence connected how would we do that well  what i would do is i'll select a rectangle tool   and start from the middle of this side piece right  there i want to go all the way towards the end   of our fence so i'll go ahead and select that hit  command c hit command v and now you'll see since   i started from the middle of that left hand piece  if i move over to the side and begin clicking it   begins extending our fence perfectly because the  artist of all these sprites was so good that they   were able to make sure that everything combines  perfectly using a tile editor it's pretty much all   we need to know for fences within our game so the  very last detail i want to show you how to add is   going to be this dock right here if i want to go  ahead and add this dock in well obviously i need   to connect it to our water and also our island  so it kind of makes sense as always to create a   new tile layer this is going to be our dock and  then i can simply select our dock right here and   then just find the right spot to overlay this  on so if i want to go ahead and make sure that   at the end of our path we have a dock in which  we can get on a boat and just go ahead and make   sure that this dock is above our island lair  otherwise we're going to see these little   island pieces on the side so it's above our  eyelid layer and just click it's drawn on top   now we have a dock for our game that's really all  there is to it so simple enough but it pretty much   shows you how to add all these details you see  within this tile set and how to arrange them in a   smart format in which you can create really really  detailed designs for your island so before we   move on i highly encourage you to create your own  island using all the techniques we just went over   but i do want to forewarn you in the end i will be  using an island that i created myself and i used   all the same techniques that we saw right here  but i'm using this little island simply to show   you all the basics in which we need to know to  begin creating maps using the tiled editor so i'm   going to continue using this island we have right  here to show you more things like collision but in   the end i'm going to show you the end piece that i  created and you'll be able to download it yourself   if you just want to use that for your game or for  the rest of your tutorial so next up if i go back   to to-do's i can check off landscape details and  now we're going to go on to collisions and map   boundaries so what do i even mean by collisions  and map boundaries in the first place well   eventually when our player is placed on the  screen we're going to need locations in which our   player cannot go for instance our player probably  shouldn't be able to walk anywhere on our house   they probably shouldn't be able to walk anywhere  on the sides of our island probably not in the   water either so what we're going to do is we're  going to create these little tiled squares and are   going to be placed in the exact locations right on  top of each other so that we can run rectangular   collision detection between these squares and  let's say our player if they're somewhere on our   map so we're going to detect whether or not our  player is touching any of these squares over here   and if they are about to touch we're going to  stop our players movement altogether they're   not going to be able to go off into the ocean  or some other location such as into the trees   so all the locations in which our players should  not go including the trees we're going to have   these little squares drawn out in all the  exact spots which our player cannot travel   and eventually these are just going to  fill up the whole boundaries of our map   and every location in which our player  cannot go so we create the correct effect   of collision detection and actual  realism within our game so this should be   the exact collision in which we're going to create  but using collision blocks how do we actually   import or create collision blocks into our game in  the first place well some tile sets will actually   come with these collision blocks and you'll see  right here we don't actually have a collision   block you're probably wondering well what do i  even mean by collision block what does it look   like what kind of tile is it well it's simply just  going to be a red block that's pretty standard or   use a red block for all the collisions in which  we're going to be placing on our map so i don't   have a red block within this tile set so i made my  own and you'll see this is going to be available   within the google drive like it's just a small  red square called collision.png i want to make   sure that i import this in to our project right  here so the way i'm familiar with doing this is   going to new file and then new tile set so  we're going to create a new tile set or that   one little square there's probably a better way  to do this but this is one that i've always done   so the name for this is just going to be collision  this is going to be based on the tiles that image   one image we're going to use which is exported  as 12 by 12. now i just need to go ahead and   find the source for this so i'll hit browse  and i know this is within not my game assets   this is actually going to be within the google  drive link which you can go ahead and drag into   my game assets if you'd like but this is going to  be within the google drive link of pokemon assets   and then inside of tiled there's going to be  collision.png this is why we want to select   for our new tile set so go ahead and open that on  up that's all we need to do here just hit save as   and now i can go ahead and save this within  my game assets i'll go ahead and call this   collision tile set like so and then i'll hit save  and there is her one tile set but now if we go   ahead back to our pokemon game map right here  you're going to see since we just imported that   tile set now it's available within our project we  can click this tab right here now we can select   this one tile and this is going to act as our  collision tile so let's go ahead and select it   and begin drawing out our collisions so i'm just  going to go ahead and create a new tile layer and   call this collisions and i can go ahead and move  this up above all of our other layers shouldn't   really matter too much honestly but let's go ahead  and move it to the top so we can see it's on top   of pretty much everything and now we just need  to determine where should our player go and where   should they not go let's start easy let's start  with the left side of our island i know i don't   want our player to be able to move past these  squares over here so i'll turn back on our grid   and then i'll just simply begin drawing on top  of these left squares the boundaries in which our   player should not be able to travel so it's going  to be all along this left side where else should   our player not travel while we know they shouldn't  be able to go off the front of our eyelid so i'm   going to cover in this square the square i'm  just going to move diagonally as needed because   you know you don't need to fill in these corner  squares if your player can't move down or to the   left right here because they're always going to  get caught by these two connecting ones so we   can just go ahead and draw out by connecting  corners of these squares all the boundaries   in which our players should not be able  to travel on the bottom side of our map   so that's pretty much all we need to get started  our player can move all around here all around   here but we need to make sure that we continue  drawing these boundaries so i want you to go   ahead pause the video and try this on your own for  the right side of the map just don't forget while   you're over here you need to take into account the  dock and potentially the boat let's go ahead and   give that a go and then continue the video when  you're ready so in order to add these collisions   on the right side of our island i'm just going  to start off down here like normal and then i   kind of need to determine well should a player  be able to stand on this one little dog piece   right here i think that is okay gives our player a  little more room to move so i'm going to go ahead   and draw collisions right beneath this instead  and then should our player be able to stand on   this far piece over here i think that is okay as  well so what i can do is connect to these corners   and then i'm okay with the player standing on  the top of the dock too at least i think i am   we'll find out as we actually begin inserting  this into our game but let's just go ahead and   draw that around our dock like so and i'm simply  just going to drag up for the top of our island   so now it's beginning to get a little tricky  because we have our trees right here obviously   we don't want our player going off the top of the  island but we don't actually need to draw these   squares because these squares are actually going  to be drawn in front of that island piece there's   no point of drawing these collision blocks right  here because these will be programmatically moved   within our game along with our map so the less  collision blocks we have the better for our game   performance so we don't want to add collision  blocks back here in which we're not actually   going to use them for collision we actually  want to begin drawing in a diagonal motion   in which our player should not move so our player  should be able to go right here but not into the   trees really so i'm going to go ahead and draw  blocks in front of all the stumps on the trees   and now we have a much more optimized block system  because we're not adding these additional blocks   up here that our player would never actually  reach in the first place so that is going to   be the boundary for our island but we also  have boundaries for things such as our fence   should our player be able to walk directly over a  fence i definitely don't think so so i'm going to   go ahead and add boundaries in front of the bottom  portion of the fence our player should be able to   walk on the path right here and so it's important  that we keep these little top pieces of the fence   intact without any boundaries above it so we're  going to leave those we're going to take care of   this on the next step and you'll see exactly what  i mean by that but this is good for the time being   and if this is frustrating you as in you  can't really see what's behind some of   these boundaries we can use this opacity bar  right here select our layer of collisions start   dragging this down so we can see exactly what is  behind these i like having it about 30 25 so i   can still see the artwork behind the squares  while still seeing a good amount of redness   so that takes care of the fence but we still need  to do our house as well so i'm just going to go   ahead and outline the edges of our house but once  i get to the top and if this is hard to see we can   always increase that opacity layer once i get to  the top we need to really think is it okay if our   player walks right here right here right here and  right here while on top of the house no obviously   not our players shouldn't be able to walk from the  ground to on top of the house but behind the house   yes they definitely should be able to walk  the house is just going to cover our player   so what i want to do is not place our collision  block right here because these are going to stop   our player's movement altogether instead i want to  go ahead and place our collision block right below   the house so that our player can actually walk  beneath this section right here so i'll go ahead   make sure that i take that into account but still  draw a little square around our house in the area   in which our players should not be able to move  so finally we just need to take care of our plane   so we'll just start drawing around the edges like  so we know our player shouldn't be able to go off   the plane in any direction so unfortunately our  player won't be able to go up the sides directly   right here and right here but if we wanted them  to be able to do that we could go ahead and   expand our island to the right and then we could  create some pathway in which they can move up but   really based on the way this tile set is designed  currently well we can't really go up on the side   but now our player can walk up this tile and  give off the illusion as if they are on top of   the platform and we're going to stop as soon as we  hit the top the left or the right of this plateau   that's pretty much all we need to do for our  collision blocks so the process is first we   would go ahead and export our whole map right here  as one singular image because it's going to be a   lot more performant if we export this all as one  image rather than just multiple layers on top of   each other we're only doing the layering so that  we can edit things much easier if we were to come   back to this at a later point in time two we're  going to go ahead and export all of our collisions   so this is going to be exported as a data file and  based off of that data file like i showed you for   pacman this is going to generate an array for us  which we can generate a bunch of blocks place them   into our game programmatically and then monitor  collision detection between our player and every   single block we have right here we're going to  be moving these blocks as we begin moving our   map and our player but the last thing we need to  do in regards to our map is drawing the foreground   layers so we can go ahead and check off collisions  and map boundaries but now we need to draw these   foreground layers what do i mean by that well  the top of the house objects in which our player   should be able to travel behind we need to make  sure that we create one singular layer which is   going to contain just the top pieces of where  our players should be able to travel so to show   you what i mean by this i'm going to create a new  tile layer this is going to be called foreground   objects and i'm just going to group all these  together in one layer no matter what they are   so now what i can begin doing is i can begin  selecting pieces that i want placed on top   of each other which are players should be able  to travel behind so one instance is our house   right here if i want to go ahead and copy these  squares which the top of our house is in i need   to make sure first i select our house layer it's  like a rectangle tool and select all the tiles   associated with that top portion of the house i'll  hit the command c go back to foreground objects   hit command v and now we have just the top portion  of our house and what we're going to do is we're   actually going to draw this directly on top of  the same place we got it from so i'm just going to   click and now you'll see if i turn off our house  layer well that part is gone but we still have   this top portion so what this means is now we can  go ahead and draw these foreground objects on top   of our player because when we import these into  our game we're going to be drawing these in layers   on top of each other and our player object is  going to be placed behind this layer that contains   all of our foreground objects it's going to make a  lot more sense as we actually get our player into   this game and begin programming everything but  for the time being just go ahead and bear with me   on this a little bit but you're going to want to  go ahead and do that for the house and any other   objects in which a player should be able to travel  behind so you might have some trees in which your   players should travel behind you'll probably need  to go ahead and grab the top portion of those   trees but you'll see right here for a small little  map we have this fence right here and we know we   want our player to be drawn behind these little  tops of the fence post so in order to make sure   we draw these on the foreground layer we're going  to want to select a rectangle tool select those   pieces on the top go ahead and find our fence  which is going to be right here hit command c   go to foreground objects hit command v and then we  can just simply click and if we remove our fence   right here you'll see now we only have the tops  of those fence on the foreground objects layer   that is perfect we can go ahead and turn our  fence back on and if we turn our house back on   i think we are good to go with our map right  here so this is how we go ahead and lay out   a full map using the tiled map editor you want  to make sure that you draw all these within the   correct layers because it's going to be easier  for editing but in the end it's very important   to understand there are three things we want to  export it's going to be our base layer which is   just a giant image it's going to be our collisions  which is going to be all these little blocks right   here we're going to export those as data objects  and then finally we're going to export one more   large image which is just going to contain all  the foreground objects in which our players should   be able to travel behind those are the three  necessary things we need in order to create some   sort of top down pokemon style game so that brings  us to checking off foreground layers so now we can   move on to exporting layers for project import  now as i mentioned i do have a bigger version   of this map which i would like to use because  it allows for more player movement the reason i   didn't go ahead and create it right here is simply  because it would have taken way too long for this   tutorial it took me actually about like two to  three hours to make on my own time so to proceed   with the tutorial what you can do here is you can  use what we have right here you can use your own   map with all the exclusions in place or you can  go ahead and download the map i'm about to import   to continue on with this the map i'm about to  import is exactly what we see right here just   on a larger scale so don't get worried if you see  a lot of stuff that you might have missed out on   really there's not much different in regards to  technique and it might even give you some ideas   in regards to how you can style your island so  if you would like to use the map that i created   here's how we're going to do it within the google  drive link i want to make sure that you have   the pokemon assets and inside of the tiled  folder there's going to be a tmx file called   pellet tone that is going to be the name of the  area in which we're going to be starting out in   and all we have to do here once you download it is  double click and you're going to see this opens on   up within tiled now here you're going to want  to make sure that next to pellet town you have   the collision tile set and the pokemon style  game tile set as well you could even rename   this to something better let's go ahead and do  that let's just go ahead and call this pokemon   style make sure we're using camel  casing here and then call this tile set   that's a much better name compared to what we had  prior so i'm going to change that then i just need   to make sure i save and everything should be  referenced correctly so once you have this open   this is what the map should look like you'll see  not too much different here just a lot larger map   but this uses all the same techniques that we used  building up that smaller island that we just did   so how do we go ahead and export this large  map well we wanted to go ahead and export   the island portions separate from the collisions  and separate from the foreground objects you'll   see up here i have those foreground objects i  have the battle zones which we'll cover later   and i have the collisions i'm going to turn  these three off and this is what i want to begin   exporting for our game so in order to export  just this what i can do is i can go to file   and then export as image and then i want to make  sure that i only have this one checkbox right here   checked only include visible layers we turn off  foreground objects battle zones and collisions   those are not going to be included within this  final image right here so i'm going to save this   as pellettown.png i can also browse the location  i want to save this at this is just going to go   directly within my game assets so i'll go ahead  and hit save you'll see by default tiled as a   bmp file of this i don't want that i just want  this as a png so just make sure that right here   you type png or else it'll be saved as a bmp and  then i want to make sure that using current zoom   level is checked off we're going to use this  later on but right now i just want to show you   why we're going to use it so we're going to  export this as is i'm going to hit export   and that's going to go ahead and send that on  over to finder so now you see within finder   i have our pallet town.png and if i go ahead and  full screen this this is what our map looks like   so looking really really cool all we're going to  do is we're going to import this into our game   place our player right about here so and  then we're going to actually move the map   not our player but it's going to give off the  illusion as if our player is moving through this   whole little island right here so if we go over  to to do we exported our layers for project import   so that is going to be the end of the very first  module map creation with the tiled map editor   we learned all that stuff such as where to find  assets how to download tiled how to actually layer   all of your assets together use randomization and  add those collision barriers in place so we create   a map that's going to set us up for a success when  we actually begin programming our game so up next   we're going directly into that we're going to go  ahead and program the player and map development   for our pokemon styled game so let's go ahead  and get our project set up how would i actually   go about creating the file structure for our game  well the first thing i would do is open up finder   and then i want to go inside of a directory i  am comfortable with creating web projects in   so you'll see over here i have a folder called  web you can put this wherever you'd like   documents downloads it really doesn't matter  but this is where i store all my web projects   and inside of here i want to create a new  folder to represent a new project what is   that project going to be called i'm going to  hit command shift n since i'm on mac i believe   for windows it should be ctrl shift n but that is  going to create an untitled folder for me and now   i can double click it and i can create a new name  for this i'm going to call this pokemon dash game   simple enough and that's going to be where i'm  storing all my project files what project files do   i need to add into here well i'm going to open up  a new finder window and in downloads i know i have   some assets that i want to use within this game  specifically within my game assets what did we   just export well we just exported pellettown.png  this is going to be our game map so i want to drag   this on over into our pokemon game but before i do  that i might have multiple images within my game   so it makes sense to be organized and create  a new folder inside of this called either img   or images it doesn't really matter i'm just going  to go with img because it's a little shorter and   i know what img stands for so i'm going to go with  that and then i just need to make sure that i drag   in pellet town.png inside of that folder and  now i can begin using this within my game so i   want to go ahead and open this up within a text  editor i can simply grab this folder right here   go on down and hold this on top of sublime text  now this only works for mac unfortunately i have   tried for windows so if you want to go ahead and  open this up within windows just go to file and   then open and then select the folder in which your  project is located and you'll be up to date to   where i am right now so within our project pokemon  dash game but now we need some sort of index.html   file to actually be read about the browser so  in order to do this i'm just going to go to file   new file and then i'm going to hit command s to  save this as no other than index.html this is   going to be the main html file which we run our  project from so i'm going to go ahead and make   sure i'm saving this within our web directory and  within pokemon dash game and this isn't going to   go in anything other than pokemon game it's going  to be the root of our project so we'll hit save   and now we have an index.html file so what else  do we need while we need a javascript file but   the very first thing we need within an index.html  file is going to be a canvas element looks just   like this because this is what our game is going  to be rendered on top of so now we just want to   make sure that this is being rendered out onto  our screen so what we can do is i can right click   in our little project folder over here and then i  want to hit reveal in finder this is just going to   open up our finder directory looks exactly like we  had it open earlier so i'm going to go ahead and   double click index.html and this is what our game  looks like currently so if i want to see that our   canvas element that we just put within index.html  opens up over here i can inspect by right clicking   and hitting inspect right here at the bottom  within chrome then i can look around for a   canvas element i don't see anything when i hover  over so i'm going to go ahead and look inside of   our body tag by double clicking right here and  you'll see our canvas element is right there we   have it rendered out onto the screen and if you're  wondering where these tags right here are coming   from chrome places them within our html file by  default a really nice handy thing that chrome   does for us if we just want to go ahead and keep  our index.html as clean as possible to start so   we'll keep it like this for now and just include  a canvas element but now we need to write some   programmatic code one to make sure that our canvas  element is resized correctly so it can actually   fit a full game inside of it and two to make  sure while we can actually render out our image   onto our game using canvas so in order to do that  we want to create one more file i'll go to file   new file and i'm going to hit command s and then  i want to save this as index.js it's going to be   the main location in which we run all of our  programmatic code so if i save with that now   we have an index.js file i can console.log out  some text and this will be a string of hello   world so classic but now if i go ahead  and refresh in our browser over here   by hitting command r and going over to our  console tab not going to see that text being   logged out within index.js so what i want to  do is make sure that i create a script tag   that references the file that we want read  within javascript so the source is going to be   index dot js it's going to be right here now  if i refresh you're going to see that console   log be outputted so now our javascript  file is connected to our index.html file   next up let's go ahead and get this canvas  resize to be something a little bigger so in   order to select an element from our html and put  it within javascript we want to go ahead and call   the document object and this document object has  a method called query selector basically inside   of this we can just reference any element within  our html over here and it's going to grab it and   put it inside of a javascript object so what is  the element we want to reference it's going to be   our canvas element and now this is going to grab  the canvas element but we want to put it inside   the constant called canvas let's set  that equal to that so now when i save   and i console log out our canvas object right here  and refresh go to our console tab you're going to   see we are logging out our canvas element perfect  so now that we have this selected we can go ahead   and resize it directly within our javascript  some people like doing this within css i do not   i always like doing within javascript because  this is where i'm always working with all my   main canvas details so i'm going to go ahead and  continue doing this right here if i want to go   ahead and affect our canvas width i can select  our canvas and then just reference its width   property and say what do i want to set this equal  to well typically to make sure a game fits on any   desktop screen it's a good practice to go ahead  and say our canvas width should be 1024 pixels   then our canvas height should be 576 and this is  going to give us a perfect 16 to 9 aspect ratio   basically it looks like we're using either a  computer monitor or a tv screen but it's going   to make sure that it fits across all desktop sizes  with this width and height so now if i go ahead   and save and refresh that now we have a canvas  width and height associated with our element   and if i go ahead and inspect our canvas you'll  see i need to even full screen this their canvas   is taking up this much width if i go ahead and  push our console to the side taking up that much   height so we might even want to go ahead and close  out of our console to see where our canvas is   but once we do that well the canvas is the same  color as our background of our index.html file so   we can begin styling that with some css and some  style tags within index.html so if i want to go   ahead and start using css within index.html i  can simply create a style tag and begin writing   css inside of this so what is some basic css  well let's say i want to select our body tag   i can go ahead and reference our body create some  opening and closing curly brackets and then i can   reference a background nash color property and set  that equal to black this is the most basic css we   can write so if i save that and refresh now you'll  see our background is going to be black for our   body now if you'd like to learn a little bit more  about css i do have a master class on that you can   check it out right here but otherwise let's go  ahead and continue onwards with this tutorial   so now we have a black background but our canvas  is still the same color how do we change the   color of our canvas well we can do this directly  within javascript and this is how we're going to   be doing it once we create an animation loop so  it kind of makes sense to do this now anyways   so what i need to do first is reference our  canvas context and this is just going to be   one giant object that gives us the whole api  for canvas it's going to allow us to do things   such as drawing rectangles arcs images whatever  we need to create our game this canvas context   is what's going to allow us to do it so to grab  this canvas context we need to create a constant   called context but i actually like calling  this something really short because i use it   so much throughout my games that i really don't  like referencing something so long like context   and i know i'm always going to call this something  small i'm consistent with it so i just call this c   instead i'm going to set c that stands for context  equal to our canvas dot get context method and now   what kind of context do we want to get do we want  to get a 2d context or a 3d context basically do   we want to get a 2d api or a 3d api well we want  the 2d version so i'm just going to type 2d into   here and now we can replace our console.canvas  with console.log c open up our console   refresh now you'll see we have a giant object  which is going to be responsible for drawing out   everything we need for our game this is  the canvas context right here so how do   we actually draw something out with this canvas  context well the most simple thing we can draw   is going to be rectangle and we're just going to  go ahead and do this so we can differentiate our   canvas from our background of our html element so  i'm going to go ahead and draw a rectangle with   c dot fill rect and then i need to specify four  arguments for this method the first one is going   to be x position so if i want this on the very  top left hand corner of our canvas i'll go ahead   and say x should be equal to zero and then our  y should also be equal to zero that's going to   place this in the top left hand corner and then  how wide should this rectangle be well i want this   the full width of our rectangle so i'll go ahead  and reference our canvas width which we just set   right here and then how tall do we want this  to be well no other than our canvas dot height   so if we do that save and refresh not going to  see anything because fill rect by default is   going to be a black color not very intuitive when  our background is blocked over here and especially   since we just changed it to that so in order to  change the color of this rectangle we can set a c   dot fill style to a color like white we save  and refresh and now you're going to see this is   the full width and height of our canvas now  something you might notice is we have some borders   along the edges of our canvas on the top and on  the left there's a little bit of black space there   i'm actually going to keep that as is just so  we can see exactly what is our html element   and what is our canvas element  but that border is coming from   our body tag by default it has margin laid on top  fit because browsers said hey by default body tag   should have around 8 pixels worth of margin on  the sides i don't know why they did that but   that is what they did by default so it's there and  we can always override it by setting our margin   equal to zero and that gets rid of it but we don't  want to do that so we're not going to affect that   within our code that's just some temporary browser  code by the way we're just going to leave this as   is but now we are actually completely set up to  begin and continue creating the rest of our game   so with player and map development we can go ahead  and check off project setup alright so now it is   time to import and render our map onto our actual  canvas game so if we go back to our code you'll   see right here we just put pellet town inside of  our image folder and there it is this is what our   image looks like but we want to make sure that  we can get this over to our actual game over here   which is just a white background currently so how  do we actually get this rendered out on the screen   well we're going to want to head on over to  sublime text specifically within index.js and   we're going to want to use a canvas context method  so remember the c right here refers to our canvas   context we're just referring to it as c because it  is short it is very easy to use like i said we're   going to be using this all throughout our game  so in this one case it makes sense to call it   something shorter rather than be more descriptive  although it kind of is up to you in the end   what you want to choose nevertheless how  do we draw an image so we're going to call   c dot draw image like so so this method right  here is how we draw something onto the screen   now what is the first argument of c dot draw  image well it's going to be an html image   object which means we can't just put a source  in here so if we wanted to reference pellet tone   this image right here you might be thinking well  can't we just put a source in here with a string   and then go into our image folder with dot slash  image and then reference pellet space town dot png   well this would be the smart way to do things  maybe draw image could handle this for us but   unfortunately it does not we can't just pass a  string through like this we actually have to pass   through an html image object and we can create  that within our javascript thankfully so we don't   have to go back over to index.html to do this so  how do we actually create this html image object   well we're going to go ahead and create a const  call that image and this is going to be equal to   a new image so new image right here comes from the  native javascript api thankfully they provide this   for us so when we actually create this while we're  just creating an html image but we're putting   inside of a javascript const called image so now  that we have this image right here well you might   be thinking to yourself well can't we just take  this string and put it into our new image like   so and then that's going to give us everything we  need to draw out this image that we're trying to   get on our screen yes that would be the smart way  to do things but unfortunately the api does not   allow you to put the string directly within the  image constructor so we can't do things like this   we have to reference our const of image and then  say what its source is equal to so its source is   equal to this right here we go inside of our  image folder and then we reference pellet town   png so this is how we create an html image  within javascript and i can go ahead and console   log this image object out and i'm going to comment  out c.draw image just to show you what this looks   like we go back to chrome we can right click  to inspect going to open up console so if we   click this console tab and then refresh now you're  going to see we have an html image object so this   is something that you'd place within your html but  thankfully we don't really need to do that we can   just create this directly within javascript and  then reference this as needed to render hondura   canvas so now that we have this available to us  within c.draw image remember we can't reference   a string like we are right now we just want to  get rid of that and then reference image which   remember is just this html element right here so  the draw image method requires three arguments   the first one is always going to be the html image  which we have and the second is going to be the   x position in which we want this image drawn  on so if we just want this drawn from the top   left corner of our screen we want to say for our x  coordinate we're going to put a zero in right here   and then the third argument is going to be our  y coordinate so we also want to say that this is   equal to zero as well and once we have this in  place if we save go back to chrome and refresh   well we don't have any errors but you'll  see our image is not being drawn why is   that well let's analyze our code you'll  see right here we are drawing an image   as soon as we load this index.js file and this  index.js file is being loaded right here so all   this code is just being called immediately when we  go ahead and load index.html directly within the   browser but the thing is this image right here it  might be something like 100 to 200 kilobytes large   takes a little more time for this to  load than rather just load instantly   as soon as we call this code right here so what's  happening is we're trying to draw out our image   before it's actually loaded on the screen  we're calling this one statement right here   before we actually load it in pellettown.png  and that is an issue because if this image   isn't loaded when we call this method while it's  just not going to show on the screen especially if   we don't have an animation loop running so the  way we can fix this is this image object comes   with another method and the method is going  to be called on load so it looks like this   image dot on load and this is going to be equal  to an arrow function or just a regular function   does not matter but basically what this says is  when this image right here actually loads inside   of this image object well we are going to fire  whatever code is inside of this arrow function   so it makes sense to only call c dot draw image  whenever our image actually loads so we'll go   ahead and paste that on in there so now when  our image loads we're going to call c.draw image   so now if we save and refresh and go back to our  code you'll see now our image is being drawn out   on the screen because we waited for our image  to load before we actually called that method   so looking at this yes we have our image imported  into our game but one of the big issues is well   this is just way too small imagine if we drew a  player onto here they'd probably be the size of   this door it'd be very hard to see what our player  is actually doing maybe this is actually the kind   of game we want where we're super far zoomed out  but in our case for a pokemon styled game that   is not what we want we want to zoom in on this  so we could zoom in on our image in a few ways   one we could go ahead and set the scale of the  c.draw image function but i've always found it   easier to export the image at the exact size we  want it at that way we don't have any issues with   their images positioning which we're going to be  editing later on so in order to export our image   at the actual size we want it at we're going  to go back on over to our tiled map editor and   once we're over here what we want to do is on the  bottom right corner of tiled you're going to see   this percentage right here what this percentage  determines is how far zoomed in or zoomed out we   are from our map so right now if we're looking at  this we are 136 percent zoomed in and what i want   to do is actually want to zoom in on my map and  here i'm using a trackpad so i'm just expanding   two fingers to zoom in if you have a mouse you  can use a scroll wheel to zoom in but i'm just   going to keep zooming in until i find something  that i think i want to play my game at so this   is a pretty close representation of how zoomed in  our image will be when we're playing our game and   i just want to keep zooming in or zooming out  until i find something i'm happy with so you'll   see we're around 382 why not go ahead and just  make this a straight interval at 400. i think when   we're 400 zoomed in i think this is what i want to  export our image at this looks great for starting   off our game so how do i export our image at 400  percent zoomed in well once i actually set this   to 400 percent i can go on over to file and then  export as image i'm going to want to click that   similar to like we did before and i want to  make sure this time that i click this one option   right here use current zoom level so this option  right here use current zoom level refers to this   percentage right down there so we want to make  sure that that is completely checked off and then   we just need to determine where we actually want  to save this image so i'm going to go ahead and go   inside my web folder where i actually created this  project it's going to be right here for me here   is our pokemon game and then i want to go inside  of our image folder and basically what i want to   do is overwrite this pellet town image right here  you'll see if i try clicking on it though it's not   automatically giving me that extension so i want  to make sure that i'm saving this as pellet space   tone town.png within my projects image folder and  once i do that hit save now i can go ahead and hit   replace because i definitely want to replace that  smaller version of the image and once i make sure   that i have this checked to use current zoom level  i can export it make sure that i'm replacing the   current image hit yes now if i go back to chrome  and i refresh you're going to see that it's much   more zoomed in that is looking a lot better than  i had previously but obviously this just isn't   positioned correctly we want to make sure that our  player starts off where that house is not the top   left corner of our image so all we're going to  be doing now is moving our image start location   so that the house is the center focal point so  the easiest way to offset our image is to deal   with the see.draw image method right here remember  the second and third arguments determine our x and   y position of this actual image so if we wanted  to offset our image we could set our x equal to   some sort of negative value because let's say  we want to offset it by negative 300 pixels all   that means is we're going to take this image  right here and move it 300 pixels to the left   so what we can do is say for our x coordinate  when we draw this image we want to push it over   300 pixels to the left we probably want to go  ahead and push this upwards as well so this third   argument is going to be our y-coordinate we can  go ahead and say our y-coordinate is also equal   to negative 300. that'll go ahead and draw it 300  pixels upwards and now when we save and refresh   you'll see we're getting closer to where that  house is in the middle and now we just kind   of want to eye things until we can get this  house directly within the middle of our screen   so let's go ahead and change our x coordinate  to b negative 600 we'll go ahead and double that   save and refresh getting a little closer let's  change it to 700 save and refresh that looks near   the middle of the screen we'll keep it at that  for now but obviously we want to move this upwards   as well so we go on back to our code and say we  want to push this up by 500 pixels on the y-axis   looking a lot better let's go ahead and make this  550 and then 754x coordinate so i really like how   this looks for the start of our game you can fine  tune this as needed i'll go ahead and keep this as   is for now but technically this is all we  need to do in order to export our image   and import it into our game at the correct size  so to briefly recap if you want to go ahead and   export your image at a different size from tiled  you just need to go on over there and make sure   that you select the correct zoom amount right here  on the bottom right go ahead and export this at   that current zoom level import it into your game  creating a new image and then using the c.draw   image function make sure you have unload and you  should be good to go but that is what's going to   allow us to check off over on to do import and  render our map so now let's go ahead and create   a player so that we can get moving around our  world so how would we actually create a player   well within our game it makes sense to import a  different image for our player because our player   and the background right here are going to be  moving independent from one another so we need to   make sure that we just import something separate  from our background image so within our finder we   have our my game assets folder and this remember  is where we downloaded our sprite sheets right   here which represent how our character looks if  they were to be moving in a certain direction here   we have our character moving up here we have our  character moving to the left here down and here to   the right so to import a character we're going to  be using one of these images right here now why do   these images show four versions of our player well  this is what we call a sprite sheet it's basically   just one image that shows different frames of an  animation so basically what we're going to do is   we're going to import one of these images into  our game and then we're only going to load one   section of this at a time so we'll only load this  very first image right here and then eventually   as we go on to later lessons what we're going to  do is over time we're going to change which of   these images is being rendered so although we'll  go ahead and load this very first one for the   first frame as time goes on we're going to load  this one and then we're going to load this one   and then finally we're going to load this one and  then when we load all these in sequence together   over time we're going to create the illusion of  a player that's actually animated and walking   through our scene we're going to be covering  that later on within this tutorial but the very   first thing we want to do is actually just get one  section of this image rendered out onto our screen   so what we could do is we could go ahead and copy  and paste these four sprite sheets right here into   our game but one issue i have with these sprite  sheets is they are placed in a square format   which just means we would have to go from this one  image to this one and then we'd have to go down a   row and over to the right to another one i don't  really like transitioning between different images   within a sprite sheet using that square format  because it's a lot easier to create this animation   if these sprites were placed right next to each  other from left to right so if we really wanted to   we could go ahead and use these four sprite sheets  right here and drag them directly into our project   but since they use that square format we're not  going to be using these ones we're actually going   to be using some custom ones that i edited myself  so within the google drive link i want you to go   inside of the images folder and inside here you're  going to see four images are going to be player   down player left player right and player up so  as you can see these are just placed directly   next to each other to create the same animation  effect as we would have using the square format   but this is a lot easier to work with within  javascript so we're going to be using this   format instead of the square one so from the  google drive link i want you to go ahead and   select those four images so i'm doing here is  selecting player down i'm holding shift and then   i'm clicking on player up i have those four images  selected i can right click hit copy right here   and then i want to go ahead and find my  project folder so i know that's under web   this is my pokemon game right here and  i want to go inside of our image folder   and then i want to right click and paste in those  four items so now we have player down player left   player right and player up all available within  our game we can double check this by going on   over to sublime text and you'll see within our  image folder we have those four sprites loaded in   so we drew out our image for our background let's  go ahead and draw out our image for our player   so the first thing i'm going to do is just get  rid of this console log we no longer need that and   then beneath image dot on load i can go ahead and  create a new const called player image and this   is going to be equal to a new image object we're  just doing the exact same thing as we did up here   so now that we have this player image constant  we can go ahead and say that our player   image.source is equal to what well we have four  options to choose from but let's go ahead and   start with the easiest one with our player facing  down i'm going to go ahead and select this player   down image right here so i can go into our image  folder and then reference player down dot png and   now i just need to make sure that this draws  out on the screen whenever it actually loads   so i can either write this out manually or i can  go ahead and copy this on load method right here   i'm going to go ahead and copy this by selecting  it hitting command c and then beneath line 18 i'll   paste that on in but remember we're not waiting  for our image to load because that is actually our   background image we want to wait for our player  image to load instead so once our player image   loads we want to call c.draw image our player  image function and then we need to determine where   should our player be drawn out on the screen so  i typically find it easiest whenever we add a new   image to a project to draw that image out add an  x coordinate zero and a y coordinate of zero that   just means that it should be placed on the top  left hand corner of the screen so if we go ahead   and save go back to google chrome and refresh  well something is up here our player should   be drawn right here in the top left hand corner  but they are not what is actually happening well   i can guarantee you right here that our player  down image is quite small this image right here   is being loaded much quicker than our pellet town  images being loaded over here so as a result this   player image on load function is being called  before our background image actually draws out   so if this draw image function right here for our  background takes place after our player image is   drawn out what's happening is our background image  is being drawn on top of our player that is not   what we want so since i know our background image  is larger than our player image what i could do   is i could just call c dot draw image for a player  image within our background image unload function   if i paste that on in there and get rid of this  player image on load right here and then i want   to make sure that i'm creating this constant  above this on load function because that way   i declare our player image before we actually  use it just makes more sense reading from the   top down if i go ahead and place this directly  within the background image onload function   you're going to see that our image is now drawn  out correctly we waited for our background image   to load we drew that out first and then we drew  our player image so now that we have our player   drawn out let's go ahead and move our player to  the center of our screen and then we can even move   our background image to be in the correct position  even more so how do we move our player to the   center of the screen well it's going to be within  these two coordinates right here for x and y   so for a player image the x-coordinate what should  it be well it should be half the size of our   canvas width our canvas width extends all the way  from the left side of our canvas to the right side   of the canvas so right here we want to go and say  we want to spawn our player directly in the middle   right here how do we get this one coordinate well  to get that middle coordinate we want to go ahead   and select our canvas width which we set up here  to be 10 24. so what we can do is we can grab our   canvas width for our player images x coordinate  and just simply divide that by two and now we save   and refresh you'll see our player is placed pretty  much directly within the center of the canvas   the left of our player right here is actually  going to be the center of our canvas so this is   a good start it's not perfect even on the x-axis  but let's go ahead and move our player downwards   so that they are placed directly within the  center on the y-axis as well to get our player   centered on the y-axis we're going to select our  y-coordinate where we're drawing our player out   we're also going to reference our canvas that we  pulled in from our html you can see we're getting   that right here we set the canvas height equal to  576 so we can go ahead and reference our canvas   height divide that by two save refresh and now  that it's pretty close to the center of our screen   but what we really want to do is get our  player moved from where it is right now   to the center point right in the middle so using  canvas width and height is great for getting your   player placed near the center of the screen but we  need to add a little more code to get our player   placed perfectly in the middle so starting with  the x-axis how do we move this image over to the   left so that's perfectly centered within this  vertical line well what we'd want to do is grab   the width of our actual image right here and then  divide it by two so when we divide this by two   and move this on over to the left by the size  of one of these squares right here it should   place the center line directly within the center  line of our canvas giving us the effect we want   so for x coordinate we know we need to get  the width of our actual image and in order   to get that width we can go ahead and select our  player image and say we want to go ahead and firm   our canvas width divided by 2 subtract our player  image dot width divided by 2. so playerimage.width   refers to this whole width right here of our  player image and then when we divide that by 2   we're just going to cut that in the middle you'll  see we're dividing by two right there that is   going to give us the distance of this right here  which will allow us to move this over to the left   by the perfect amount based on our image width  so if we save and then refresh in chrome you'll   see now our image is placed perfectly within the  center of our vertical line we just need to make   sure we do the same thing for the y coordinate  of our player so we're going to move our player   up by half the height of this image right here  same exact thing we did for our width so here for   canvas height divided by 2 go ahead and subtract  our player image dot height and then divide that   by two save and refresh and you'll see that it's  placed perfectly within the center of our game   so our player is within the exact spot we want  them at but obviously our background image is   not placed correctly so all we have to do to  reposition our background image is going to be   just move this coordinate right here for where  we are drawing that background image out so it   looks like we need to move this over by about  25 to 50 pixels on the x-axis so i can just go   ahead and say negative 770 for x that is getting  closer let's go ahead and make this negative 780   and maybe even 785 and that looks to be right  in the center of our player right there i think   that is good enough now let's go ahead and  make sure that we do the same thing on the   y coordinate we want to go ahead and move our  house up so it's placed right beneath our player   we'll go ahead and select our y coordinate  right here subtract about another hundred   from that make this negative 650 save and refresh  and i think that looks really good so it looks a   little silly right now simply because we have our  whole sprite sheet being loaded in the game with   four instances of our player but in regards to  positioning this is absolutely perfect because   our player is placed in the center of the screen  and our image is lined up pretty well to give off   the effect as if our player is coming out of this  house so the very next thing i want to do is make   sure that we're only rendering out one of these  images so we're not going to render out all four   of these guys at the same time we're just going  to render out one of them even though we're going   to be loading all four within our original image  we're going to only be rendering out just this one   portion right here and we can do so with the draw  image function so to get just one of those images   rendered out we're going to go ahead and focus in  on c.draw image specifically for our player image   so this right here we'll go ahead and select our  image and put it at the x and y coordinate that   we specify right here but the thing is if we  want to go ahead and start cropping this image   so we can use sprite sheets per se we need to add  a couple more arguments to this function in order   to make that work so in order to add cropping  to c.draw image we need to add four additional   arguments right after player image it's going to  change how this whole method works so right after   player image we need four arguments for all of  them i'm just going to write to zero for now so   one two three four these are the four arguments  we need to begin cropping things so let's focus in   on this first argument right here of zero what  does this represent well this represents the   x-coordinate in which we want to begin cropping  from so if we look at our image over here we know   the x-coordinate starts off on the left-hand side  of the image i think that makes sense for where we   want to begin cropping from so our x coordinate  is going to be zero which is equal to this point   right here this is where we're going to begin  cropping from on the left-hand side so we can   leave this as zero for the x-coordinate on the  crop now for the y-coordinate on the crop what   does this represent well where from the y-axis do  we want to begin cropping from this is also going   to be zero we want to start cropping from the  very top of our image right here so thankfully   we can leave our x crop and our y crop equal to  zero we're going to begin cropping from the top   left-hand corner of our image now how far do we  want to crop to if we were to keep zero right   here we wouldn't actually be showing anything this  is going to be the crop width what does our crop   width need to be well the crop width needs to be  the full width of just one of these images so what   we need to do is get the full width of this image  right here and then if we divide that by four we have equal widths for each of these  images we can just go ahead and reference   the width of this full image divided by 4 to give  us the crop width we want because we only want to   show one section of this image at a time so for  our crop width the fourth argument would then draw   image this is going to be our player image dot  width divided by four that means we're going to   crop one section of our image just that one-fourth  of the image now the argument after that this zero   right here is going to be our crop height so how  far do we want to crop from the top of our image   well we want to crop the full height of our  image we don't need to divide this by anything   because if we were to divide this by two or  something like that well we'd only be rendering   out either a top or a bottom of the image we want  to render out this full thing because that is   the way our sprite sheet is arranged so for our  crop height we're going to reference our player   image.height and we don't need to divide this by  anything thankfully so we can just leave that as   is and now our six and seven arguments right here  these are going to be the location in which our   image is actually placed on the canvas we can  leave this as is we already know this is going   to be the center of our canvas but now we just  need to add two more arguments that declare the   actual width and height in which our image should  be rendered out at so really what we can do right   here is we can just copy these two lines right  here which declare our width and height and say we   want to use the same things for our last arguments  on which these are actually rendered out at   so if we save and go back to our game over here  make this full screen refresh now we're going to   see we perfectly cropped our player by adding in  all these arguments so the most important thing   to note is if you want to add cropping to an image  you need to add in these four additional arguments   right here which determine the crop position  and the crop width and height and then you   need to make sure that you have these other four  arguments down here and these represent the actual   coordinates and the actual width and height of the  image being rendered out on the screen so you just   need to differentiate between the cropping and the  actual position and the actual width and height   and that's how you're going to get a sprite  sheet cropped correctly onto your screen   so this is rendered out correctly but since we  basically changed the width of the image actually   being rendered on the screen it's not rendered out  in the correct spot anymore so we know our player   right here is actually one fourth of our original  image so if we go back on over to our code this   right here is going to be the x position of our  player we're not going to subtract our player   image with divided by 2 anymore we're going  to subtract our player image width divided by   4 to start so if we save and refresh that  we're getting a little closer to the center   but we want to make sure that our player is moved  over to the right so by subtracting one fourth of   our image now we're getting a little closer  but we need to make sure that our player is   placed over to the right just by a little bit  so while we're getting right here we actually   need to divide this by two so all we're saying  is subtract this width right here divided by two   and when we only subtract by this amount it should  get our player placed perfectly within the center   on the x-axis so if we save that and then refresh  now our player is placed perfectly again within   the center of our house and we should be good to  go to begin adding player movement into this so   looking back at to do we can go ahead and check  off player creation we created a player imported   them into our game using a sprite sheet and then  we positioned them correctly using a little bit of   canvas width and canvas height math so now let's  go ahead and get our player moving through our   map whenever we press down on one of our keys  so the very first thing we're going to want   to do in order to move our player is we're  going to want to start listening for event   so within javascript to listen for events such  as when someone presses down on their keyboard   we can go ahead and call our window object  this is going to be available within javascript   at all times for us as long as we're writing  code directly for the browser which we are   so we can go ahead and reference this window  object and on top of this call add event listener   so this is going to take an argument and the first  argument is going to be what event do we want to   listen for now there are a number of events you  can use within javascript on the browser such as   click mouse down touch key down we are going to  be using key down because we want to listen for   whenever a user presses down on one of our keys on  the keyboard so that event is going to be called   key down all lowercase and then whenever  we key down we're going to add a second   argument right here that references an arrow  function so basically what we're saying right   here is whenever we key down we want to call  whatever code is within this function right here   we can test that this works by console logging out  some sort of text within this arrow function and   you save go back to your game refresh right click  open up the browser go on over to console and then   you begin keying down make sure you select your  canvas right here so i'm clicking and then i want   a key down pressing a s d w for any key that we  press right now we are constantly logging out   that text so we know this works which is perfect  but now we only want to listen for particular keys   specifically wasd because those are the keys most  often used for moving a character within a game   so to listen for specific keys within this arrow  function right here we want to go ahead and add   an event argument into it so this is going to be  passed through by default whenever we key down   this is a pre-populated object it stands for event  but most of time developers will just call it e   because they are used so often so we're going  to go ahead and call this e stands for event and   if we were to console log this out save and then  refresh and then key down with our canvas selected   you'll see that this is what the e object consists  of this is a keyboard event if i open this on up   we have a bunch of different details related to  the event of me pressing down on a particular key   and the one we want to focus on within this object  is going to be this key property so right there   i pressed down the s key so now what we can  say is when we press down this s key right here   we want to activate some specific portion of code  so if we want to grab this key property right here   within our code we can console.log out e dot  key if we save that go back to our game and   refresh and begin kingdom i'm going to press a s  d you see it's logging out to the exact key we're   pressing down on within our game you can press a  bunch of them just logs out all those keys based   on whatever we actually pressed so with this we  can create certain events that only occur when we   press down on specific keys so what we can do is  we can write a switch case statement we're going   to switch out e dot key and inside of this we want  to write a case that basically says whenever the   case is w add a column to the end of that and then  at the end of this we're going to add a break what   this is basically saying is whenever e dot key is  equal to w then we want to call whatever code is   between case and break so inside of this i can  console log out pressed w key and this is only   going to activate whenever i press w let's get  rid of this initial console log i'll delete that   save and then refresh and now i'm going to  press a i'm going to press s i'm going to   press d nothing being console logged but as soon  as i press w you're going to see that we pressed   down the w key so this is when we'd activate  code which pushes our character up we want to   listen for not just w but also asd so a quick  way to listen for those keys as well is to just   copy these three lines right here i'm going  to copy those with command c create a new line   and paste in three different instances of case so  now all i need to do is switch out w right here   with another key i also want to listen for our  a key i want to listen for our s key right here   and i want to listen for our d key right here  and now if i want to test this out i just need   to make sure within our console log that i'm  logging out the correct key that we're pressing   so for a we press the a key for s we press  the s key and then for d we're going to press   the d key so i save and refresh and then press w  a s d and i try pressing any other key such as j   k l i u o well none of those are going to show  we're only listening for wasd which is exactly   what we want to begin moving our player within  our game so how do we use this event listener   and the switch case statement to actually move our  player what we need to do is add an animation loop   in which we can change our image coordinates and  each time we change our image coordinates we're   going to go through a new iteration of a loop and  whenever we go to a new frame if our images have   different coordinates well it's going to give off  the illusion as if our player or background image   is moving so it'll make a little more sense as we  actually code it so let's go ahead and add in an   animation loop now in order to add in an animation  loop right above window.add event listener i'm   going to create a function called animate so  this is arbitrarily named does not matter what   you name this but since this is going to be our  animation loop makes sense to call this animate   now in order to get this running in a loop you'll  see right now if i were to go ahead and call this   animate like so that console log out some text  inside of it such as animate save and refresh   well this is only being called want we want this  to be called over and over and over again until   we tell it to stop and in order to do that we need  to use a window dot request animation frame method   so this takes one argument and it's going to be  the function that you want to call recursively   what function do we want to loop through over  and over and over again to begin editing our   object properties well it's going to be no other  than animate so if we were to call animate inside   of this animate right here is going to go back and  call this animate function so basically what we're   doing is we're just creating an infinite loop and  there's nothing wrong with an infinite loop we're   trying to create an animation this is totally  okay but when we request the animation frame   of the function in which we want to loop through  we're just going to create that infinite loop to   give us the exact effect we want so by calling  this right here if we save go back to chrome   and refresh you're going to see now we're  looping through that function over and over again   and we can begin editing our game's properties  over time to create the illusion of movement   so in order to begin moving our player it's  really important that we move the c draw images   inside of our animation loop because right now if  we're just rendering these onto our screen once   well whenever we go ahead and try to move  things within animate these aren't actually   going to move because we're not telling them  that these should be drawn out continuously we   want to make sure that we're calling draw image  for each frame or animation loop so we're going   to go ahead and take these two lines right here  we can go ahead and take them out of image.onload   because eventually these are going to be drawn no  matter what because our animation loop has been   called so many times so we can just go ahead and  paste these in directly within animate i'll get   rid of this console log right here save and then  refresh and everything should still look the same   but now in order to actually move our player or  move our map we need to edit the coordinates of   c.draw image for either a background image or a  player image whenever we key down but in order to   change the x or y coordinates that we have right  here for our background image well the issue is   these aren't stored inside of a let in which we  can actually change these need to be stored inside   of some sort of variable so what we could do is we  could create a let above our animation loop that   says background image x coordinate and then set  it equal to negative 785 but why would i recommend   against this well eventually we might need to do  the same thing for other instances of images such   as our player so if we wanted to move our player  image we would have to create a new let right here   call this player image x and then set that equal  to whatever and it's just going to make things   really messy it's really hard to keep track of  what belongs to our player what belongs to our   background and what belongs to any other images  that we might use in our game so if you ever find   yourself creating some sort of variable where  you select something such as a background and   then you select some sort of property on top of  that such as image or just your x-coordinate it   makes sense to create some sort of class for that  image it's going to make your code a lot clearer   and much easier to manage in the long run so this  is a good instance in which we want to go ahead   and convert these c draw images and do classes so  above animate i'm actually going to delete these   two lines right here and i'm going to create a  class called sprite uppercase s because whenever   you use a class within javascript you should  uppercase the actual name so now that i have   a class of sprite i want to go ahead and call a  constructor method inside of this so if you're new   to constructor methods basically what this says  is whenever you create a new instance of a sprite   we're automatically going to call whatever code is  within this constructor function and within here   we can begin setting properties that describe what  a sprite should look like how it should move what   color it should be and so forth so each sprite is  going to have a property independent from another   sprite and here is where we want to declare those  properties whenever we actually create a sprite   so to declare a property within a sprite class  within this constructor function we want to go   ahead and reference a property with this and then  we want to declare the property name with dot and   then what is the property so this first property  is going to be equal to position and i'm going   to set this equal to a position that we're going  to pass through this constructor method so here   i never like passing my arguments through bear so  if i were to pass it through bear i just reference   position right here because if i need to add on  additional properties well i need to add a comma   and then add on another property like velocity  and the issue with this is you need to remember   the order in which you pass these through i really  don't like remembering the order so instead i like   passing through just one singular object and  then within this object i can just reference   particular properties such as position or velocity  and now when i go ahead and create a new sprite it   does not matter the order in which i pass these  through it just makes our code a little cleaner   in the long run so to get you acquainted with this  class if you're new to it let's go ahead and just   immediately begin creating a new sprite so now  that we have this class created i can create   a new const and this is going to be equal to our  background our background sprite so this should be   equal to a new sprite so basically we're saying  create a new sprite from this class right here   and now whenever we create a new sprite what are  the properties in which a sprite can take what's   going to be whatever is within this constructor  method right here we're just passing through   one singular object so we can reference that one  singular object say we want to pass through what   an object with a property of position or velocity  well right now we're only assigning position   within this so i want to reference a position and  i know i want to set this equal to an object with   an x and a y property so for x i'm going to say by  default should be equal to 0 for y this should be   equal to 0 as well and now we have a new sprite  created within this background constant so if we   wanted to link this background constant up with  our actual background we're drawing out our map   this is where we're drawing out our background  right here and we know it's x coordinate is   actually negative 785 so for x right here we could  say our position by default should be negative 785   and for y this should be negative 650 so this  right here we're beginning to link this up we   just created a position and stored it within this  position property right here and now that we have   this position property stored we can use it to  begin drawing out an image directly within the   sprite class so beneath constructor if i go ahead  and add some break lines right here i can create   a new method and for all the classes i draw on my  screen i like creating a method called draw this   is also arbitrarily named but this is going to  determine what we're actually drawing out on the   screen using canvas what code do i want to use to  draw something out well this code right here for   drawing out our background image i'm going to go  ahead and cut this out of place with command x and   paste it in to draw right here so we're calling c  dot draw image but you'll notice right here we're   referencing a constant that we don't actually  have access to within our sprite class although   this might be global this is not good code quality  especially because all of our sprites are going to   need different images associated with them so  since each sprite should have a different image   associated with it that is a perfect instance in  which i know i want to create a new property for   the sprite class so here underneath position i'm  going to add in another property called this dot   image and i want this equal to whatever image i  pass through within our spread constructor so we   need to pass it through new sprite right here but  now since i'm referencing image i need to add this   in as a property within our constructor method  so i'm going to go ahead and add a comma so we   want to pass through an image and now that this is  available to pass through within the constructor   here i can go ahead and add a comma right beneath  our position property and say what should our   image for the sprite be equal to well i want this  image equal to the image we created up here for   our background this is going to be thepeltdown.png  so if i go ahead and say image should be equal   to the image constant we created above basically  this right here is being passed through into the   constructor this right here is going into this dot  image and now that we have this.image available to   us we can use it within our draw function but  we just need to make sure that we change image   right here to actually reference this dot image  so in order to do that here we just need to say   we want to draw out an image of this dot  image and now we're going to go through   this whole loop process and call c.draw image with  the image we passed through for our background   so we have our background created now all we  need to do is actually call the draw method   within our animation loop so right beneath where  we're drawing out our player i'll call background   dot draw so when we call background.draw we're  going to call this right here which populates   the image through this whole process we just  went through and now when we save go back to our   game and refresh our background is still being  drawn this might not seem like a lot but this   is exactly what we need to do to begin animating  our background to create the illusion of movement   it's very important that you don't skip this  step so make sure you go through the process   of creating the sprite class so you can begin  moving your background along with me so now that   we classified our background we can begin changing  its properties over time within our animation loop   so actually what we want to do is listen for  when we are pressing down a w key and a key an   s key or d key from within our animation loop and  based on which one we're pressing down currently   we're going to move our map in a particular  direction which is going to give us the illusion   of movement so within here within animate i want  to go ahead and listen for if we are pressing down   the w key so how would i actually do that well i  need some sort of object to actually set w a s and   d properties to on whether or not they are pressed  down currently so above animate i'm actually going   to create a new const this is going to be equal to  keys and i'm going to set this equal to an object   and inside of this i can begin referencing the  keys i want to listen for so the first key i want   to listen for is just going to be w and i'm going  to set this also equal to an object and inside of   this i'm going to add a property called pressed  i'm going to set this equal to false and this just   means our w key is not pressed down by default  and i want to do the same thing for a s and d   keys so i'll go ahead and copy this one object i  just created for w make sure i add a comma to the   end of it paste in another add a comma paste  in another add a comma and paste in another   so now i have four properties in here but i want  to make sure that they're all different from each   other i also want to listen for our a key our s  key and our d key so none of these are going to   be pressed down by default but now whenever we do  press one of these down within our key down event   listener we can begin setting these equal to true  so whenever we press down the w key right here we   no longer want to console log out this rather we  want to select our keys object what do we want to   select well the w property right here so go ahead  and say keys.w is it pressed down right now yes it   is we're going to set that equal to true whenever  we press down on our w key we want to do the exact   same thing for a s and d so we can just copy this  line right here get rid of the console log and   then say for our keys a is it pressed down when  we press a yes it is let's do the same thing for s   paste that in change keys dot s dot pressed  equal to true and then we'll get rid of d   paste in keys dot d dot pressed that  is also going to be equal to true   so now within our event listener right beneath  our switch statement if we console log out   our keys object that we just created let's go  ahead and save refresh and open up our console   to see what this looks like so over in our console  if we click on our canvas and we begin pressing   asdw watch what happens i'm going to press  a now look inside of this object right here   and you're going to see a is now equal to true if  i press s open this s is now equal to true as well   d that's going to set d equal to true and then  eventually when i do w that's going to set all   of them equal to true so i did those in sequence  from one another that means i lifted up on one of   the keys as i went to the next one which means  technically the key i left it up on should not   have pressed equal to true so whenever we lift up  on a key we need to make sure that is set to false   how do we set these defaults whenever we lift up  well we're going to want to listen for a different   event specifically for key up not key down so  a quick and easy way to do this is just copy   this ad event listener right here and beneath it  paste in another event listener but we don't want   to listen for key down we want to listen for key  up instead so all this code is going to function   exactly the same the only difference being is this  code right here is going to fire whenever we lift   up on one of our keys on the keyboard not key down  onto it so we know whenever we key up whenever we   release one of the keys we press down we want to  set that pressed value equal to false so these   four values right here for key up i'm going to  select those four with command d on sublime text   and then i'm going to change these equal to false  so whenever we lift up on one of these keys we're   going to say it should no longer be pressed down  so now that we have an object which tracks which   key is currently pressed down at any particular  point in time we can go back to animate right   here in this if statement that we were creating  we can go ahead and say something like if keys   dot w is pressed down we can begin moving the  properties of our background sprite that we   created what property do we want to move well no  other than the position property specifically its   x and its y so what i'm going to say is if keys.w  is pressed i'm going to go ahead and select our   background object and i know this has a property  of position on top of it whenever i press w i   want to make sure that our background moves down  that's going to give off the illusion as if our   player is moving up so i'm going to select our y  position right here and i'm going to say whenever   our w key is pressed over time i want to take  that background position y and set it equal to dot y background.position.y the  current position it's at and i want   to subtract from it over time a value  is something like let's just say three   so right now we're only going to be editing  our current background position on the y   axis if w is currently pressed so if i were  to save this go back and refresh and i hit w   while nothing is moving what is going on here well  let's go ahead and inspect our class for sprite   if we look within our draw method which remember  is being called within our animation loop over and   over and over again we're drawing out our image  at a location of negative 785 and negative 650   these are static values so although we might  be editing our background's position over time   using this code right here well it's not actually  going to change anything with the rendering   because we're not using this.position within our  actual draw image code right here so we know when   we create a new sprite for our background that  we're setting this position equal to these two   coordinates already so what we can do is we  can get rid of within c dot draw image that's   negative 785 and reference this dot position  dot x that's going to go ahead and say that this   should be equal to this right here and then we  want to do the same thing for our y coordinate   so we just need to make sure that this 650  right here is being referenced from our position   rather than just some static value like we  have right here so for our y coordinate we   can reference this dot position dot y that's  going to give us this right here negative 1 650   we're going to go through the constructor process  if we go ahead and save refresh and then hit w   you're going to see that our background moves  although it definitely looks like we are moving   in the wrong direction because whenever we press  w we should be moving upwards so in order to fix   this we just need to go back down to our animation  loop right here and say we want to add on three to   background.position.y save and refresh now when  we hit w our background moves in the correct   direction and to illustrate how this is working  over time i think it makes a lot of sense the   console log out background.position.y if i go  ahead and save refresh and open up our console   and then i begin holding w you're going to see  this is the y coordinate of our background over   time as we hold w so we started off actually  at negative 650 we added three onto that that's   going to give us 647 and then as we keep moving  up while we keep subtracting 3 from this value   and it renders out our background at a different  position in time which is giving off the illusion   of movement so we just need to make sure we do  the same thing for when our other keys are pressed   so to clean this up a bit we'll get rid of the  console log and since we're only calling one   line right here within our if statement we don't  actually need curly brackets we can go ahead and   get rid of these because we're only calling one  statement and now our code is one line instead   of about three to four so here we can just  go ahead and copy this line paste it below   and then add in an else if instead that says elsif  if the keys dot a is pressed we want to go ahead   and move our background position on the x-axis  instead of the y because when we press a well   our player should be moving to the left which  means for background position.x we should be   adding three onto this so go ahead and save and  refresh and then i hold down a you'll see now   we are moving to the left but really it's just  our background image moving to the right which   gives off the illusion as if our player is moving  to the left so something else we can do here to   clean up our code is we can use a shorthand  syntax for these statements right here this   right here is going to be the exact same thing as  plus equal three so all this means is we're taking   our current background position on the y axis and  we're adding on three to it at any point in time   so if we were to go ahead and change this out  let me go ahead and get rid of this right here   and say that background position.i should be  plus equal to three that is the exact same thing   as what we just had previously it's just a little  cleaner so we save and refresh we can still go up   when we hit w we can still go to the left when  we hold down a so now let's take care of s and d   we'll go ahead and copy this else f paste it  in two more times now for s we don't want to   listen for keys.a but rather keys dot s and say  whenever we are going down we want to select our y   and then instead of adding on three to our y  position we want to subtract three instead so   that's going to take care of going down but now  we need a d so we'll listen for keys dot d dot   pressed and whenever we hold down d our background  on the x position should be moving to the left so   we want to subtract three from that so now if we  save we go back and we refresh we hit s we go down   we hit d we go to the right we hit w we go up and  if we hit a we go to the left so this is honestly   looking great for player movement but we can touch  this up just a little bit more and i think this is   important to make sure that our game is working  as optimally as possible so i'm going to narrate   this out as i do it if i hold down s and then  press d well i'm not actually moving to the right   even though d was the last key pressed i want to  make sure that whatever last key was pressed even   though i'm holding two down at the same time that  i start moving in that direction and in order to   get this effect we can't just listen for which  key is being pressed we also need to listen for   what was the last key pressed and based off  of that last key and what is actually being   held down as we're tracking right here  that is when we're actually going to move   one of these position coordinates so within our  event listener specifically for key down we want   to go ahead and listen for a lot of last key  this is going to be equal to an empty string   by default but whenever we press down something  like w we want to set last key equal to a string   of w we want to make sure we're doing this also  for a s and d so i'm going to copy this line and   say our last key for a should be equal to  a when we press down a our last key for s   should be equal to s and then our last key for  d should be equal to d so we're never going to   set this back to a blank state we're not going to  call this within key up at all which means this   is always going to track whatever the last key  we pressed down was specifically for w a s and d   so now that we have this last key property we can  listen for what key is currently being pressed   down but also whether or not that current key that  is pressed down was the last key being pressed so   here i want to add an and statement that says if  our w key is currently being pressed and our last   key is equal to w meaning this is the very last  key we pressed it wasn't a it wasn't s it wasn't d   even though these might be equal to true then  we want to call this line of code right here   we want to do the exact same thing for other else  ifs so i'll copy this and statement and paste it   into each location like so so now when we press  a we want to go ahead and move our background to   the right but only when our last key was equal to  a and then we want to do the same thing for s and   the same thing for d so this is going to basically  allow us to switch direction even though we might   have multiple keys down at the same time so if i  save and i refresh with that let me narrate this   i'm going to go ahead and hold down s now when i  go ahead and press d while s is down you'll see i   am moving to the right even though i have two keys  down pressed at the same time i can do the same   thing by pressing w and then finally i'm holding  three keys down when i go ahead and press a   you'll see that just overrides the last action  and that gives us accurate movement in regards   to what key we are currently pressing down at any  point in time so now we can go ahead and check off   move player through map on key down so now let's  go ahead and add player to map boundary collisions   so obviously on our island over here we want to  make sure that our player can't go into the water   they shouldn't be able to go past or on top of  our house like you see right here we want to   make sure that we add those boundaries in that  we actually created within tiled so how do we   actually go about doing that well in order to add  those collisions we're going to want to head back   on over to tiled and over here you'll see that  we have a layer for collisions now you might   be thinking can't we just turn off all of our  other layers and export our collisions as needed   well unfortunately with tiled they don't allow  you to do that you pretty much have to export   all these layers into one file and then take out  the data you want as needed so that's what we're   going to do we don't have to zoom in or anything  like that all we need to do is go to file and then   we're going to click export as so once we're over  here you'll see that we have a few file types in   which we can export this file as it's going to  be a json map file javascript map files lua csv   we're going to want to go ahead and export  this as a json map file because i found that   easiest to grab exactly what we need so i'll go  ahead and select this option right here and we   can call this whatever we'd like if we want to go  ahead and camel cases we'll go ahead and call it   pellet town with a capital t and then it  doesn't really matter where i save this i   can even just save this within or downloads root  so i'll go ahead and do that i'll hit save and   now within finder you're going to see within my  downloads folder that now i have pelletstown.json   so this is what we just exported and if i go  ahead and preview this you're going to see   that it basically contains an array full of all  these different numbers and if i scroll down well   we're going to have a new array full of numbers  so what this represents is basically our game   map each number represents a different tile on our  map related to a specific layer within tiled so   you'll see right here this first object all this  data right here refers to our ocean layer so every   symbol inside of here represents an ocean tile so  let's go ahead and open this on up i'm going to go   ahead and drag this onto some lime text to open  it and then i'm going to open these two up side   by side so i can show you exactly how this map was  exported into this data over here so we know this   data over here this array represents our ocean  layer as we can tell right here with this name   indicator so all the states related to our ocean  and this very first data point right here is going   to say draw a specific tile that's this very  first point where our map starts if we want to   continue the second part right here is saying  draw a different ocean tile right next to that   first one we're just going to keep going until  we go through 70 tiles because that is how large   our map actually is 70 tiles wide so as soon as we  hit the 70th tile we're going to go down a row and   then we're going to go right about here and say  that this tile right here should be equal to the   first tile on that second row and we're just going  to keep going through this whole data set until we   fill up our entire map with all the ocean tiles so  that would take care of the ocean layer but you're   going to see inside of this exported file we don't  just have an ocean layer we also have things such   as an island layer we're also going to have if  i keep scrolling down a trees layer so all these   layers right here are one-to-one representations  of every layer we actually created within tiled   ideally we could just go ahead and export our  collisions layer as needed but unfortunately   tile doesn't support that functionality as of  yet at least that i'm aware of so in order to go   ahead and grab our collisions data that we need to  actually prevent our player from going off the map   within this pallet town.json file we're going to  need to do a command f or ctrl f for your windows   users and go ahead and search for collisions  so up here this is all the data related to   our collisions layer and you'll basically see  everywhere where there is a 1025 this is where   we are drawing out a collision within our map  it's kind of hard to see how these actually form   the exact structure we have over here with these  red blocks but everywhere where there is a 1025   is going to be a one to one representation of  where we should be placing a collision block   within our game so we're going to want to go  ahead and copy our whole collisions array so   i'm going to go ahead and scroll down until i hit  the end of it it's going to be right about here   i'm going to hit command c to copy it and now that  i have that i can pretty much just minimize our   pellettown.json file when it comes to the data  all we really need right now is going to be the   data related to our collisions so i'll minimize  that and then within our project i'm going to   want to create a new file so go to file new file  and here i'm going to paste in all that data   so at the very top i want to go ahead and  assign this to a constant so i'll create a const   called collisions set it equal to this array  so now i'm going to hit command s to save this   and i want to go ahead and save this within our  project so i know that's within web this is going   to be pokemon game and i could save this within  our project root but i think it makes a little   more sense to be organized and save this within  a folder in case we need to import any more data   so i'm going to go ahead and create a new folder  right here i'm just going to call this data   and now i want to call this file collisions.js  so basically we took the array from the json   file and we created a const which is equal to  our collisions array which we need to import   into our game so we basically transferred it  over to a js file so we can import it into our   game quite easily so i'm going to go ahead and  save it as collisions.js within our data folder   now you'll see we have a data folder within our  project so now we can begin using this within   index.js so i wanted to go ahead and reference  this cost right here of collisions within index.js   the first thing i need to do is make sure  that this collisions.js file is imported   into index.html so to import this js file  i can simply copy the script tag right here   paste it above and then i'm going to swap out  index.js with collisions.js but first i need   to make sure i go inside of our data folder so  i'll go ahead and type data slash collisions.js   so since this file right here comes before  index.js now i can use whatever data is inside   of it within index.js so within index.js i'm going  to call to log out what while collisions because   that was stored as a cost within collisions.js  which we imported right here so now we should   have it available to us so now if i save go back  to our game open up our console and then refresh   you're going to see that is the array that we  exported from within tiled so if we look back   within our collisions.js array you're going to  notice that these are all just comma separated   values there are no arrays within this array  that's going to be the next step is we want to go   ahead and transform this data into a 2d array and  once we transform that into a 2d array it's going   to allow us to loop through it correctly so we can  create canvas objects on our game so we're going   to create little squares based on whatever data  we have within that collisions file and they're   basically going to line up perfectly so that  they recreate the collisions that we actually   created within tiled over here and since we're  going to be drawing canvas squares for our tiles   well we can use programming to determine whether  or not these tiles are colliding with our player   and if they are about to collide with our  player we're going to stop our player movement   to give off the effect as if we cannot move  past these in any direction where they are   drawn so how does this whole 2d array parsing  and implementation work well essentially what's   going to happen is we're going to have our  root array so this root array right here   is basically representative of what we have over  here stored within collisions we have one root   array currently but we need to go ahead and parse  these values into arrays within this root array   so if we were to parse these into arrays this  rotary right here would have sub arrays inside   of it so there's one sub-array we'll draw another  sub-array and then we're going to draw a third one   right here and this can go on and on for however  many tiles we have for the height of our map   so basically we want to go ahead and transform our  root arrays data into sub-arrays so for this first   sub-array we would have something like zero one  zero and then for the second one we might have   something like one zero one and then finally for  this third sub-array we might have zero one zero   so what does this even mean well basically we're  going to go ahead and loop through this array   we're going to go ahead and draw out onto a game  map so this is going to be our game map right here   as we loop through this array each of these sub  arrays is going to represent one row within our   game map so if we were to go ahead and loop  over a zero a zero just means we don't want to   draw anything out on our game map so we loop over  the zero we go over to our game map do we want to   draw anything within the first one third up here  no we don't because we know we have a zero that   we're looping over but if the second symbol we're  looping over is a one that means we do indeed want   to draw something what are we going to draw we're  going to go ahead and draw some sort of boundary   so i draw a boundary where there is a one and  now i know i have a zero right here i do not   want to draw anything next to that so if we loop  through our second array right here we have a one   that means within the middle of our map since  this is the second row i want to draw a boundary   where there is a one we loop over to zero nothing  going to be right here but eventually we do hit a   one as well so we're going to draw a boundary  over here as well finally we have our last row   so we have a zero not going to draw anything  right here we get a one we're going to draw one   right here for our boundary and then finally we  have zero not going to draw anything right there   so based off this array we're going to draw  collisions onto our map and everywhere where there   is not a collision that's going to be free area  in which our player can actually move around in   so everywhere i'm coloring over this is where our  player can move but as soon as we hit one of these   collisions we're not going to be able to based  on our programming but the first thing we need   to do is actually render these blocks out using  canvas objects and once we render these out as   canvas objects well we're going to be able to  program that effect where a player cannot run   into these so how would we go ahead and parse  this right right here into something like this   well within index.js we're going to want to  go ahead and create a traditional for loop   so i'll go ahead and delete some code that we  no longer need we no longer need this fill style   or fill rect that we used to originally separate  our canvas from the background and right there   where i deleted that code i'm going to start  creating a traditional for loop by declaring four   adding some parentheses then i'm going to  declare a let i equal to zero this is going to   be our loops index and i want to say i want to go  ahead and run through this loop for as long as i   is less than our collisions dot length and then  over here for our iterator if i were to go ahead   and do i plus plus that just means we're going  to loop through this for however many items are   within our collisions array right here so they're  probably about i would guess a thousand items   within this array so basically we're saying loop  through this loop 1000 times but we don't want to   loop through this a thousand times because that's  going to be a little inefficient we basically want   to go ahead and loop through this at increments  of 70. so we want to go ahead and start off at   0 right here and then go up about 70 elements  and select everything between this and this and   then within our loop we're going to want to go  ahead and start off at this element we ended up   previously go up about 70 elements and then select  everything within there so this is how we're going   to be creating our rows we're basically selecting  every 70 items incrementing onto the next 70 items   and pushing those 70 items into an array to create  the same subarray structure that we had right here   so rather than loop through this for every item  here for i we can say we want to iterate through   this for every 70th item and how do we know to use  70 right here well like i said 70 is just going to   be the width of our map based on the tiles we're  using so if i go back to tiled and full screen   this this map right here is 70 tiles wide how do i  double check that well i can go up to map and then   hit this resize map tab right here when i select  that you'll see the size of our map is 70 tiles   wide by 40 tiles tall so this is really useful  for us to use in order to parse our data into a   format that's more usable for our javascript  game so that's 70 tiles right there is going   to go right here and then we're going to want to  go ahead and select every element from 0 to 70.   so we can do this by selecting our collisions  array and then calling an array slice method on   top of it so the first argument for slice is going  to be the first index in which you want to slice   out items at which for us is going to be zero and  then the second argument is going to be how far   do you want to slice elements to it's going to be  70 because we know we want 0 to 70 elements from   collisions so if i were to go ahead console.log  collisions.slice go back to our game open up our   console and then refresh you're going to see we're  slicing out to the first 70 elements and we're   doing this exactly 40 times because we're looking  through collisions on length by adding on 70 for   every iteration but we know we want more than just  items 0 to 70 from within our collisions array we   also want all the other rows all the other items  associated with collisions.js over here so rather   than just using a static value of zero to 70 what  we want to do is go ahead and replace a zero with   i because we know i by default is equal to zero  and now we know we're going to get zero to 70   right here but as we begin to increase i over time  well i is going to be 70 on the next iteration of   this loop but now the issue is if we slice out the  items of 70 to 70 well we're not actually going to   be grabbing anything right here as we increase i  we also need to increase this value right here by   an additional 70. so instead of just referencing  70 right here what we could do is we could add   i onto this so for our first iteration is  going to be equal to zero so we're slicing out   0 to 70 because when we add 0 onto 70 well we get  70. for the second iteration we're going to have i   equal to 70 because we're adding 70 on i so here i  is going to be equal to 70 is going to be equal to   70 here as a result we're going to be slicing out  70 to 140 based on the evaluation of this equation   right here this is just going to keep going until  we loop through our maps height so if i save this   go back to google chrome and refresh some of these  arrays should be different and you see if i start   scrolling up now we have some 1025s within these  arrays that means our collisions are being added   to the correct rows so we know we're creating  rows based off this collision slice right here   but now we need to actually store them within  a new array so to store them within a new   array i'm going to create a const i'm going to  call this collisions map so that's a sequel to   an array and now within this for loop i could  select collisions map and then i could push in   this collision slice code that we just created  so i'll go ahead and grab that push in collision   slice and beneath this for loop i can call slog  out collisions map i'll save and then i'll refresh   and now you'll see this format that we have right  here we have one root array but within this root   array we also have a bunch of sub-arrays so for  every row where there is a zero within these   sub-arrays we're not going to draw anything but  everywhere where there is a 1025 that is where   we're going to go ahead and draw out a collision  and you'll see right over here this formation of   1025 is pretty darn close to what we have entitled  you can definitely see the shape over here   matches up with what we have over here those are  pretty darn similar so now that we have this array   parsed out correctly we're going to want to go  ahead and create canvas objects placed in their   exact positioning based on how they're parsed out  into this array it's going to make a little more   sense as we continue so first thing first let's  go ahead and create the object we actually want   to render out so in order to create an object i'm  going to go ahead and create a class and i'm going   to call this boundary just to separate it a little  bit from our collisions keyword over here now that   i have a class of boundary i'm going to create  a constructor method and now i need to decide   what defines a boundary well i know each of our  boundaries is going to have a position associated   with it and this position is going to vary so  i want to make sure that i'm passing through   a position within our constructor right here  i'm going to assign that as a property within a   singular object and then i'm going to say i want  this.position equal to the position we passed   through i know each boundary is also going to have  a width and then a height associated with it as   well so how big do i want these boundaries to be  well within our map our boundaries were created   using a dimension of 12 pixels wide by  12 pixels tall but remember we actually   exported our map four times zoomed in using  this down here so we zoomed in at 400 percent   which means our tiles were actually increased  from 12 by 12 to 48 by 48 if we multiply 12 by   4 we're going to get 48 so the actual width and  height we want to assign our boundaries right here   is just going to be a static value of 48 because  we know we're using that four times multiplier for   every tile within our map so with an xy position  a width and height we know we can draw a square   but now we just need to define how we actually  draw that square so we're going to go ahead and   add an arbitrarily named draw method and within  this i can select our canvas context with a c dot   and use fill rect so this takes four arguments  the first is going to be the x position so we'll   go ahead and reference the position we're  passing through as this dot position dot x   the second argument is going to be our y  position so we'll go ahead and grab this   dot position dot y our third argument is going  to be our width so we'll reference the boundary's   width and then finally we're going to reference  our boundary's height with this dot height now   that'll draw out a black rectangle when we call  draw but we want to go ahead and make this red   to match up more closely with what we actually  drew out and tiled so we'll go ahead and select   c dot fill style and set that equal to red that's  really all we need to get started with some sort   of traditional boundary so we know we're going  to have multiple boundaries laid out on our map   so it kind of makes sense to create a boundaries  const like so and set it equal to an array this   is going to store all of our boundaries which we  can later use to render all these out within our   animation loop so now that we have this boundaries  array we want to go ahead and populate it with   instantiated boundaries using this boundary  class but we want to go ahead and make sure   that the position for each of these boundaries is  positioned precisely based off of this collisions   map so everywhere where there is a 1025 we're  going to push in a new boundary into our   boundaries array so how do we begin doing that  well we're going to want to go ahead and select   collisions map like so then we can go ahead and  call before each method on top of it and we want   to say for each row within our collisions map  we'll call an arrow function and now that we have   a row we can also call for each on top of this  which grabs the symbol associated with each row   so i'll go ahead and reference a symbol these two  arguments right here by the way are arbitrarily   named i'm just naming them in regards to what  they actually represent for each item we're   looping over so if i were to go ahead and console  log out the symbol we're currently looping over   go back to chrome you're going to see we're  basically just going through our whole array   within collisions.js but since we're actually  looking through a 2d array we're going to be able   to place our boundaries precisely in their exact  locations which we want them at so within the   second for each loop right here i'm going to want  to go ahead and select our boundaries array and   push in a new boundary using this battery class  we just created so we know this takes an object   as a constructor and then it's going to have a  position property inside of it and i want position   to have an x and a y property because that's what  i'm using right here and also right here so i'm   going to go ahead and assign position equal to  and x and then also a y property like so and now   i just need to make sure that these are assigned  in the exact spots i want these boundaries placed   so i'll go ahead and add a zero for both of these  by default i'm going to want to place these based   on the indices associated with our rows and also  our symbols so right here for our first word each   next to row we can add a comma and then add  in a second argument which i'm going to call i   this is the index of the current row we're  currently looping over and then i'm going   to want to do the same thing for a row for each  where we're looping over each symbol add a comma   and then i'm going to call this j to represent the  index of whatever symbol we're looping over within   each row so when we loop over each row we're going  to be looping over each row at a time so we'll go   one two three this i right here represents the  index of the row we're currently looping over   so when we loop over the first row the index is  going to be zero when we loop over the second   row index is going to be one way lower the third  the index is going to be two so i is equal to zero   one two these are our eyes and then within  each of our rows we're going to be looping over   each symbol these right here are going to be our  symbols so in this case j is going to be the index   associated with each symbol within the row so our  index in this case for zero is going to be zero   for one it's going to be one and then for this  last zero it's going to be two so these are   indices associated with the symbol within the row  we're currently looping over these are our js so   we know our eyes are associated with y positioning  they go downwards so what we can do is for our y   on the boundaries is we can go ahead and grab the  index we're currently looping over which we'll do   right now we'll go ahead and say y should be  equal to i and then if we multiply that by the   height of our actual boundary which is going  to be 48 but we're going to be placing tiles   on top of each other so they're laid out in a  perfect row format and now we can do the same   thing for our x position we know our x position is  based on j right here so what we can do is say for   x we want to grab our j index and multiply that  by the width associated with our boundary so we   can go ahead and reference this as 48 and now each  of our tiles is going to be laid out on the x-axis   in perfect format right next to each other now  when you come back to this code at a later point   in time you might forget what 48 represents so  it makes sense to actually create some sort of   cost for this value right here you might be  trying to reference your boundaries width   and height directly but you can only grab these  two properties when a boundary actually exists   we actually haven't created a boundary until we  loop through this whole thing and actually call   new boundary right here so instead what we can  do is within our boundary class is we can create   a static property by using a static keyword and  call the static property width and set it equal to   the same width we're using down here within our  actual boundary property so now we have a with   legal 48 we can also create a static height  equal to 48 and now what we can do is call   boundary directly right here where 48 is we're  just going to call the class with an uppercase b   and then we can just reference boundary dot width  that's going to give us 48 but now we know exactly   what 48 represents it's going to be our boundary  width we can do the same thing for this 48 down   here this is going to be our boundary height  so this is a lot more descriptive than what we   had previously by just referencing 48 as a static  value so we come back to this at a later point in   time now we know what these two represent so if we  can't log out our boundaries array with everything   pushed into it and we refresh in chrome you're  going to see we have all these boundaries in place   for every single value within our collisions  array there were 2 800 values within our   collisions array and now we have 2 800 boundaries  but that is not correct because we don't want to   go ahead and draw a boundary on every single  location within our tiled map we only want   these boundaries drawn out in whichever location  there is 1025 within our original collisions array   so as we're looping through our 2d array right  here within our road out for each we actually   only want to push through a boundary if the symbol  we're currently looping over is equal to 1025 so   whenever we go ahead and pass over 1025 right here  we're going to be pushing in that new boundary   into our boundaries array so we do that save go  back to google chrome you're going to see now we   only have 185 boundaries that is the exact amount  that we actually created with entiled over here   that is exactly what we want because when we open  these boundaries you're going to see that they're   position varies for every single one and they're  all laid out correctly because we use this method   over here referencing our eye indices and our j  indices so our boundaries are created pretty much   perfectly now we can go ahead and render them out  onto our scene so to render these out we're going   to want to go into our animate loop right here and  determine where do we want our boundaries drawn   well i do want them drawn after our background  is drawn because i don't want any boundaries   placed behind our background if that's the  case we're just never going to see them   so i want to draw this after background but i also  want to draw this before a player because when i   test things i think it just looks a little better  for a player to travel over the boundaries rather   than behind him so between background.draw and  where we're drawing out our player i'm going to   go ahead and call boundaries dot 4 each and then  i'm going to go ahead and select the boundary   we're currently looping over and then say within  this arrow function i want to go ahead and call   boundary dot draw so this draw method right here  it's just calling this draw method right here   which just creates a rectangle so if i save that  and refresh over here you're going to see we have   boundaries drawn out on our screen but they're  only in the bottom right hand corner they're not   actually laid out correctly in regards to where  they should be placed on our map the reason for   this is is because when we actually created our  map sprite right here where we assign sprite to   background we offset its position by a little  bit we went ahead and set its x to negative 785   and we set us y equal to negative 650. that same  offset is not being applied to these collision   blocks right here so we want to make sure that we  apply this to where we are creating our collision   blocks as well so we're going to go ahead and  use this value in another spot it makes sense to   create a const i'm going to go ahead and call this  offset set equal to an object with an x and a y   so our x by default is going to be offset by  negative 785 pixels for y our offset is going   to be negative 650. so now that i have this offset  cost created right here i can replace negative 785   with offset.x and i can do the same thing  for y offset dot y if i save and refresh this   everything's going to be offset correctly for  our background we need to make sure that we're   applying this also x and y to our boundaries as  well so i'll go ahead and cut this offset right   here and i'm going to paste it right above  where we're actually storing our boundaries   so right here i'm going to add offset and now i  can use this constant within this code right here   so this is where we're pushing in new  boundaries and setting their position   i want to keep this code the same but i also  want to go ahead and add on to it our offset.x   that's going to subtract negative 785. i want to  do the same thing for a height add on offset.y   save and then go back to chrome and you're  going to notice well this is a lot closer   than what we had before though it's still not  placed in the exact position we want so if this   is the effect you get well it's very likely that  your collision blocks aren't in the correct spot   but more so that your background is not so why  would our background not be in the correct spot   along with our collision blocks right here well  within tile there are going to be properties   associated with each layer called horizontal and  vertical offset so what these do are is they go   ahead and offset items by a certain amount so  for a foreground layer if i were to go ahead and   offset this by selling like 20 you'll see that our  foreground layers are offset by 20. now what this   does is unfortunately when you export your map it  also adds around 20 pixels onto your width if you   were to go ahead and add some horizontal offset  that is not good that is not what we want and   unfortunately when i exported this the first time  i had a little bit of horizontal offset on one   of my layers so in order to make sure that your  map is as perfect as possible lined up with your   collisions you want to make sure for every single  layer you have horizontal and vertical offset   are zero so i go ahead and swipe through this  quickly you'll see now every single layer i have   has a zero zero for horizontal and vertical offset  so if that's the case all we need to do is make   sure we export a background image without that  horizontal vertical offset so in order to export   this i'll turn off our foreground layers our  battle zones and our collisions so this is what   i want to export i see make sure that i zoom in by  400 pixels so i'll do that now then i'll go over   to file export as image one more time save this  within our project directory as palettetown.png   make sure i am using the current zoom level and  then i just want to hit export and then i'm going   to replace the last version with this new one  i'm exporting without any of that offset so i   go ahead and replace that and i go back to our  game and i simply refresh well now our background   image lines up with our collisions perfectly we  just need to change our offset a little bit more   so that our player is placed directly in the  center of our house so we'll go ahead and make   that quick fix and we can do it pretty easily  by referencing our offset object right here   we'll go ahead and add 20 onto this value right  here negative 765 save and refresh getting a   little closer let's go ahead and say negative 735.  save and refresh and that seems to be directly in   the center we can go ahead and say that our player  is going to start out right here so now we need   to start detecting for a collision so we have  about 185 collision blocks placed within our map   but in order to detect for collision and show you  how this works i think it's better to just focus   on one singular block so we're going to want to go  ahead and create one boundary instead of all these   boundaries in our boundaries array and in order to  do this right above animate we can create a const   called test boundary and set this equal to a  new boundary and remember our boundary takes   one argument which is going to be an object and it  has a property inside of this of position with an   x and a y for x where do i want to place this i'll  just go ahead and say about 400 pixels and for y   i'll place this at about 400 pixels so now that  i have a test boundary created actually make sure   that i render it out onto our scene so what i can  do is i can comment out the boundaries for each   that's drawing out 185 boundaries just for now  and then i'll go ahead and reference test boundary   and call out draw so i save and refresh that now  i just have one boundary in which we can focus on   so the goal right here is to get our player on  top of this boundary and whenever the two are   intersecting we want to go ahead and console log  out some code saying that the two are colliding   but the first thing is if i begin moving you're  going to see that the boundary moves along with   our player so in order to get the boundary staying  still or at least giving off the illusion as if   it's staying still we're going to want to go  ahead down to where we're pressing our keys   and make sure we're not moving just our background  but that we're also moving our test boundary along   with it so what i could do is i could go ahead  and wrap background position y plus equal to three   within some parenthesis that way i can add a  new line here and then i could go ahead and call   test boundary call position dot y and then add on  to this three over time and if i save refresh and   hit w you'll see that stays in place when i go up  but the issue is now i just added this extra line   of code which is pretty similar to the top line of  code so we can go ahead and refactor this a little   bit to make adding movable items a lot easier  so right beneath test battery what i'm going to   do is i'm going to create a const called movables  and this is going to be an array that consists of   all the items i want to be able to move on our  map so i know i want our background to be able   to move i'll go ahead and add our background in  here and i also want our test boundary move i'll   go ahead and add that as well so now what i can do  is i can call movables within keys.w dot pressed   movables and then call for each on top of that so  for each movable within our array i can go ahead   and call movable.position.y should have three  added onto it over time that way i can delete   these two lines right here and i know it seems a  little counter-intuitive because we just created   three lines of code right here when we had two  prior but when we want to add more and more   items that should be moved around on our map while  these lines right here within keys.w.press would   just grow and grow so now we know we're never  going to have more than three lines right here   all we need to do to add movable objects into  our game is add the objects within this array   it's going to be really helpful when we add  all of our boundaries into this rather than   trying to move through them directly within our  keyevent listeners so now what we can do is we   can say for a s and d we want to do the same  thing we're just going to replace these lines   with the movables code right here so i'll copy  this movables code and then i'm going to add   curly brackets to each of these statements so  i can add more than one line of code within it   and then i'm going to paste in that movables  for each so for each movable when i hit a i want   to reference position x and i want to add 3 onto  that and now i can get rid of background position   x plus 3. when we go ahead and hold down s i  want to go ahead and reference movable position   y but in this case i want to go ahead and  subtract three i can get rid of background   position y minus three and then when i go ahead  and hold down d i want to call movables for each   reference the x position and subtract three from  it and i can delete this last line right here   and now when i save and refresh no matter which  direction i go in this little square right here   is always going to stay in place so how do  we detect for a collision now well within our   animation loop right beneath where we're drawing  our player i could call an if statement what is   this statement going to say well what i want to do  is select the right side of our player right here   how would i get the right side of our player well  we know the left side of our player on this side   is going to be our position x coordinate and if i  add on our player width right here what does that   give us well it gives us the right side of our  player we want to say if the right side of the   player is greater than the left side of our box  right here then we know the two are colliding from   the right side of the player and the left side of  our box we'd want to start off for ifstamin with   player dot position dot x that would give us the  left side of our player then we want to go ahead   and get the right side so we had a reference  player dot width that would give us the right   side of our player but the issue is we don't  actually have a player object we never actually   created a player sprite we're just drawing out our  player directly using the c dot draw image code   so in this case it makes sense to refactor our  sprite class to take into account the c.draw   image method so what i'll do is i'll comment out  this if statement we began writing and then the c   drop draw image right here i'm going to cut that  out and where we created our sprite class it's   going to be right here i'm going to paste that in  so to refactor this into a class format i can no   longer reference player image i want to go ahead  and reference the image that was passed through as   we instantiated a sprite so i can get that with  this dot image so instead of referencing player   image right here for all these different instances  i'll delete that and say i want to reference   this data image instead so we can go ahead and  delete this first c dot draw image right here   we save we go back to our game we refresh and  things are all out of sort well one we lost our   player because we never actually created a player  sprite in the first place and our background image   is just way off because we affected sprite code  that we used to create our background image in the   first place so one of the reasons our background  image is off is because these arguments right here   are deciding the crop of the image we're  trying to draw out our background image   should not have any crop associated with it at  all so what we want to say is we don't want to   crop it by 1 4 at the width we actually want to  crop it by the full width and the full height   so for a background image this 4 right here should  actually be equal to 1. but how do we make this   variable so that when we create our player sprite  we include four right here as well well this four   right here represents how many frames are within  one of our sprites so four represents the maximum   amount of sprites that is what we're going to  want to add as a property within our sprite   class so as an argument i'll also add in a frames  property and say this dot frames should be equal   to frames and when i pass frames through right  here i want it to be an object with different   properties associated with it so now within c.draw  image i want to say instead of referencing four   i want to go ahead and reference this dot frames  dot max this is the max amount of frames we should   have within any image we're trying to draw out but  by default this.frames.max should be equal to 1   so if we're not using a spreadsheet well we  shouldn't be cropping anything in the first place   so what we can do is by default say our frame's  argument should be equal to an object with a max   property equal to one then we can override  this as we pass through a new frames object   when we create our player sprite so now we're  cropping the full width of the image by default   i go back to chrome this is what it looks like  right now because these last four arguments right   here determine the x and y position of the image  within our canvas map and then the actual width   and height of the image as well so by default the  position of our image should be whatever position   we actually pass through within our constructor  function so these two arguments right here are   actually only for our player sprite i'm going to  cut these out paste it beneath our sprite class   and then comment the two out for use later but  to replace those two i know i want to reference   this.position.x that's going to determine  where our sprite is placed on the x-axis   and then i want to reference this.position.y  this is going to determine where it's placed   on the y-axis so for our background we're saying  that our position x should be the offset value   of x and y and those were those negative 700 and  about negative 400 values but this will always be   different for when we create our player's sprite  we do that save and refresh we're getting a little   closer but now the actual width of our image is  being divided by four we want to make sure this is   the full width of our image based on whether we're  using a sprite sheet or a singular image so right   here for a sprite sheet we need to divide that by  four because we know we have a max of four frames   instead of referencing four for our background  image we want to reference this.frames.max   that's going to make max equal to 1 give us  the full width of the image save and refresh   that now our background image is back to normal  but now the sprite class is set up for success   to actually draw our player out using the sprite  sheet but still crop everything correctly so now   what we can do is we can go ahead and create a  new const of player set it equal to a new sprite   which takes an object as an argument and then  we're going to have a position with an x and then   also a y what is x going to be equal to well it's  going to be this value right here this was the x   position of our player we're going to go ahead  and cut that out paste it with x right there   and then for y i'm going to cut that out and paste  it for y get rid of these two comments right here   and now we need to go ahead and add an image for  our player sprite so go ahead and declare i want   an image property and where is the html image we  created for our player it's going to be right here   it's assigned to player image i'm going to copy  that assign it to image and now we should be able   to render this out on our screen so i'll select  our player go down our animation loop where do i   want our player drawn out well i want it drawn out  right after our test boundaries our player should   always be on top so i'll call player dot draw  save go back to chrome and if we refresh well   something's definitely broken let's go ahead and  open our console we can click index.js to see   what's going on here so see when we created  our player sprite we're trying to reference   this.image.width but the thing is this dot  image is not available within our main init code   this.image is only going to be available within  our sprite class so we need to take that into   account where we are creating our player we can no  longer reference this.image.width we could try to   reference player image.width but now that this is  being called right away whenever we run our file   this probably isn't going to be available to us  because the image isn't going to be loaded in time   if this is the case well it probably just makes  more sense to reference a static value it's just   going to be a lot easier a lot quicker than  trying to wait for this image to actually load   so to find the static value of your image you're  going to want to open up your finder select your   image and then you can scroll down within mac and  see the dimensions right here this is 192 by 68 so   for our width i'll replace that with 192 and then  for this.image.height i'll replace that with 68.   save go back to chrome refresh open this up in  full screen and now our player is rendered out   correctly without any errors but there is the  issue where our player is not cropped correctly   even though we just added all that crop code why  is that well when we created our player sprite   remember we never added through this new frames  property we want to go ahead and make sure that   we add that through specifically for our player  because we know we're using a four frame sprite so   we'll go ahead and reference frames when we create  our player and set this equal to an object with a   property of max equal to four instead of one so  that's going to take place within this equation   right here where we go ahead and draw out our  image it's going to make sure it crops things   correctly so now if i go ahead and add that in  save and refresh now our player is back to normal   exactly where we want them at but we refactor them  into a sprite in which we can easily use to detect   for collision so remember we were detecting for  collision right here within this if statement   we grabbed the right side of our player using  our new sprite class and then we wanted to say   if this is greater than or equal to the left  side of our box right here which is going to be   test boundary dot position dot x we know the two  are colliding so we'll go ahead and call its log   out colliding when that is the case go ahead  and open up our console and then refresh and   we're not getting anything locked out even though  the right side of our player is definitely passed   to the left side of our box so if we look at this  code a little more closely we have a player.width   but we never actually created that within our  sprite class so that'd be a helpful property to   add into this and you might be thinking well can't  we use this.image.width well no we can't really   because remember our main image is the full  width of our sprite sheet we need to get the   width of just one of these guys right here so  it makes more sense to just add a width property   within our constructor and set it equal to this  dot image dot width divided by this dot frames   dot max and now it's important to note that  this should only be called when our image   is actually loaded so when we pass our image  it's going to be stored within this dot image   and then we can call this dot image dot  on load which is going to call a function   whenever the image fully loads so whenever  this function is called then we can go ahead   and set this property of this dot width to make  sure that this.image.width is available to us   we can also go ahead and set height in here as  well and we know that our spreadsheet doesn't   have any images laid on top of each other or  beneath them so in this case we can just reference   this.image.height and we don't need to divide this  by anything so if we can't log out this.width and   also this dot height we should get the height and  width of both our background and our player image   so i save then i refresh now we have the cropped  width of our player we have the full width and   height of our background image you'll see now our  collision code is working we are indeed colliding   because the right side of our player is  greater than the left side of our boundary   but once i move over to the left a little bit  you'll see that's no longer being logged out   but as soon as the two touch again  from the side we're logging this out   so basically we just need to do the same  thing for the three other sides of our box   now we need to say is the left side of our  player greater than the right side of our   box which we can get with the left side of our  box position.x plus its width to get the right   side so i'll delete these console logs scroll on  down to where we're detecting for collision right   here i want to add an and statement that says  is the left side of our player player.position.x   if this is less than or equal to the right side  of our box so test boundary dot position dot x   plus test boundary dot width then the two are  colliding if i save go back to our game refresh   now by default we're no longer colliding but if i  start moving to the left inside of the box i start   logging out that code and as soon as i go off to  the left side of the box it's no longer logging   but now the issue is this is still going to be  logged even though i'm not touching it but i am in   between the left and right side of the box we need  to add that additional quotient detection code for   the top and also the bottom of the box as well so  we'll add in an additional and statement that says   if our player dot position dot y that is going  to give us a top of our player right here   if this is less than or equal to our test  boundary dot position dot y plus our test boundary   dot height then the two are colliding from the  bottom of the box and the top of our player   so i save i refresh and now when i go down here  that should not be logged which it is not but as   soon as i touch it is being logged now we just  need to add one more side so we'll go ahead   and add one more end statement that says if our  player dot position dot y plus the player height   that gives us the bottom of our player right here  is greater than or equal to our test boundary   dot position dot y then the two are colliding from  the top of the box and the bottom of the player   so now that's no longer being logged out and it's  only going to be logged out when the two actually   touch now it's being logged it stops when i go off  the bottom of the box and in each direction i go   around the box it's no longer going to be logged  until i actually touch the actual box so that is   how we're going to add collision detection but  if we look at our code over here if we were to   come back to this at a later point in time well  we might not actually know what this represents   so it makes sense in this case to refactor this  into some sort of readable function so i'm going   to do is beneath movables i'm going to create a  new function called rectangular collision this   is going to take one argument just an empty object  for now and we can leave this as is so within this   empty object i want to pass through two properties  it's going to be rectangle one the first rectangle   we want to detect for collision with and then we  also want to pass through a second one which i'm   going to call rectangle two and then i want to  return parentheses which are going to evaluate   this conditional right here so i copy  and paste that into that return statement   now this is going to return true or false based on  whether or not this condition is true we just need   to refactor a little bit based on the properties  we're passing through this actual function   so i'm going to select all instances of player  and replace it with rectangle one rectangle one   is going to be representative of our player then  for test boundary i'll select all instances within   our function right here and reference rectangle 2  instead so now with this function we can go ahead   and get rid of this if statement down here  within our implementation and say if rectangular   collision between two objects what are they going  to be rectangle one it's going to be equal to our   player object that is our first rectangle and  then rectangle two is going to be equal to our   test boundary if this is true then we're going  to log out colliding this is a lot easier to read   so i save that go back to our game this works  exactly as it did before it's just a lot more   legible within our code and easier to understand  so now that we know this is working with this one   singular test boundary we can go ahead and add the  rest of the boundaries into our game so i'll go   ahead and uncomment those and then i can go ahead  and get rid of our test boundary right here i'll   delete where we're drawing it i'll delete it from  within our movables array and i'll delete where we   actually created it so now i'm going to be drawing  out all these boundaries i want to make sure   that these are movable boundaries so i'm going to  take our boundaries array and place it within our   movables array right here but i can't really place  an array inside of an array for movables to work   i just want all the items within boundaries placed  within movables so i want all the items placed   within movables i can call the spread operator  with dot dot dot that's just going to take all the   items and place them directly within this array so  we don't have any 2d array stuff going on and then   finally in order to detect for collision with all  of our boundaries we need to make sure that this   if statement is within this boundaries for each  where we are grabbing each individual boundary   so i'll go ahead and paste that in and then for  rectangle two i want to make sure i replace this   with the boundary we're currently looping over  and now we're only going to log colliding if our   player is colliding with the battery we're  looping over so if i go ahead and save and   refresh all of our boundaries are back and  if i begin moving around our map you'll see   that's only going to log out if i'm actually on  top of any of the boundaries in any direction   so we have our collision detection code in  place but now we just need to activate it   so that when we're about to collide with  the boundary while our player is not   able to move onwards so in order to do this  we need to basically predict into the future   whether or not our player is about to collide with  a boundary this is saying in the current moment   are we colliding we need to edit this a little  bit to predict whether or not we're about to   so we know when we're holding down w we're  adding three onto our movables position   which basically creates the illusion as if our  player is going upwards so if we were to detect   foreclosure between a boundary where 3 is added  onto that boundary's position.y then we would   know if we are about to collide with a boundary so  we want to grab the current boundary we're looping   over but we also want to add 3 onto the y position  to detect whether or not we're about to collide   into it from the bottom of the boundary so we only  want to activate this code when we're actually   pressing w on the keyboard so we're not going  to be detecting for collision by default within   our animation loop we want to detect for collision  when we hold down w so we could go ahead and loop   through all of our boundaries whenever a w key is  pressed but the thing is eventually we're going   to need to call a break statement that gets us out  of the loop all together and we can't call a break   statement within a dot for each it just doesn't  work so we need to create a traditional for loop   in this case i'll go ahead and create that with  four create a lut of i set it equal to zero and   then say i want to loop through this as long as i  is less than or boundaries dot length and i want   to loop through every boundary so i'll go ahead  and say i plus plus and i'm looking through every   boundary whenever w is pressed now within this  this is where i want to detect for collision so   i'll go ahead and take this if statement up here  cut it out and paste it into this new for loop   and now i don't have boundary available to us  like i did up here within four each so i need   to go ahead and say within this for loop i want to  go ahead and select the boundary i'm looking over   by creating a const called boundary and setting  it equal to or boundaries array which i can grab   based on the index we're currently looping  over so i'll add i inside of here and this   is the exact same thing as this for loop it's  just arranged a little differently and now we   can call a break statement to break out of this  when needed so whenever we press w this is still   detecting whether or not our player is currently  overlapping with the boundary we need to predict   into the future whether or not we are about to be  overlapping based on when our movables are moved   by 3 pixels so to do this i can say rectangle 2  should indeed be equal to boundary but i'm going   to go ahead and wrap this in an object like so  and then call the spread operator on top of it   what this does is it basically creates a clone  of the boundary object but without overriding the   original right here so i'm creating a new clone  of it like this what i can do is i can go ahead   and overwrite the position property by adding  this in right here and setting position equal to   and x of the boundary's current x position so  reference boundary dot position dot x then for y   i also want to reference boundary position dot  y but in this case i want to predict into the   future by three pixels so i'll add three out of  this so now this rectangular collision function   is going to work exactly the same the only  difference being is we're now detecting into   the future whether or not we're about to collide  because we created a copy of boundary and set   its y position should be equal to the current  position plus three this is how we're going   to detect into the future whether or not we're  colliding so if i save this refresh and i go up   and hold down w you're going to see right about  there we went ahead and logged out this code   this code is only going to log when i hold down w  anyways but there were 10 instances in which i was   about to collide with this boundary right here  so when we call this for loop right here we're   looping through every single boundary within our  map yet we're only really colliding with this one   boundary right here so we know when we collide  with any boundary we want to stop our background   movement altogether we do not want to detect for  a collision with any other boundary that might   be remaining including these boundaries over here  because if we detect whether or not our player is   colliding with these boundaries while it's going  to return false we don't want that we want to   break out of this loop as soon as we detect we're  colliding with something so as soon as we are   indeed colliding with something we're going to go  ahead and call break and i also want some sort of   let that change is within this so i can use an if  statement right here that says if we collide with   something we do not want to move our background we  don't want to move any of our movables so for each   frame of our animation loop i'm going to create  a lut called moving by default i'm just going to   set this equal to true and then what i want to  say is if we're about to collide with something   moving should be equal to false so for the  movables down here i only want our movables moved   if moving is true so we hold w we're about to  climb to something we set moving equal to false   we break out of the loop because there's no point  in detecting for collision with any extra blocks   then based off this value we're going to decide  whether or not our movables should actually move   so if we save and refresh and we try colliding  with the bottom of one of these blocks by holding   down w you're going to see we can no longer  go past it i'm holding down w you'll see we   are logging this out but i'm not allowed to go  past the block and if i go ahead and hit s well   i'm allowed to keep going downwards but that adds  to collision in place for the bottom side of our   block that is how we're going to want to add that  in so now we just need to do the same thing for   when we move to the right and left of the blocks  and also when we move down on some of the blocks   so the quickest way to do this is to copy all the  code above movable stop for each so starting with   this if statement right here all the way to our  for loop if i go ahead and copy this and then   within our else if we're holding down a paste it  in and save we're looking to be in pretty good   shape the only thing we have to change right here  is when we hold down a we know we are changing   our position.x by three we want to predict into  the future whether or not we're about to collide   when position.x has three added onto it so we want  to go ahead and get rid of this plus three for y   and our player should stop moving when we  collide with the block when we hold down a   hold down a we're no longer colliding on the right  side of blocks on the left side of our player   simple enough let's do the same thing for when we  hold down s i'll go ahead and copy everything from   if to the for loop and then within this new else  if where we're holding down s i'll paste that in   save and then what do i need to change well our  movables are going to be moving on the y axis   by negative 3 so i don't want to change x here  i want to predict into the future y negative 3   save and refresh and now when i go down on  one of the blocks we stop completely which   is great now i just need the same thing for  the very last else if i'll copy from if all   the way to the for loop and then within this last  else if when we hold down d i know i'm testing   for collision when we subtract three from x so  here i'll subtract three from x and then save   go back here and now when i go to the right i  can no longer go past the left side of a boundary   so that's how we're going to add boundaries into  our game in which we cannot travel past and the   cool thing is if we want to hide these boundaries  and make our game as realistic as possible make   sure that this is production ready we can go up to  our boundary class which is going to be right here   and our fill style we can declare we want this to  be r g b a this is going to take four arguments   for red we can set this to 255 for green we can  set sql to zero for blue we'll set this equal   to zero as well and this a right here stands for  alpha so if i were to set this to 0.2 you're going   to see we get an opacity similar to like what  we had with entitled that refresh now we can see   everything behind the blocks but if we want to go  ahead and make this as realistic as possible we'll   set this eagle to a pure zero so now the blocks  remain in place but we can no longer see them   but they still function as expected we can no  longer go past those blocks when we try moving   off the edge of our map and that is exactly how we  want to add collision detection to this whole map   we created so with that we can successfully check  off player to map boundary collisions alright so   let's go ahead and move on to foreground objects  so remember the foreground objects are those   objects we drew out entitled so that when we  go ahead and move past a building like this   well our player isn't drawn on top of it we want  to make sure that those foreground objects are   layered on top of our player right here and it's  going to give off the illusion as if our player is   traveling behind this building rather than on  top of it so you're going to see within tiled   we created a layer for our foreground objects so  if we go ahead and turn off every other layer so   battle zones collisions or objects we just keep  going down the list so let's turn off flowers   plateau trees three two one and then island and  ocean you're going to see that this consists of   our foreground objects this is everything that our  players should be able to travel behind so what we   want to do is just export this as one large image  but when we export it we want to make sure that   we also zoom in right here at 400 percent because  that is what our background image was exported at   so now that we're zoomed in at 400 percent we can  go up to file and then export as image so here we   want to make sure that we only include visible  layers and that we use the current zoom level   then we're going to want to browse for where we're  going to save this so this is already within my   pokemon game directory i'll go inside of that and  then go inside of image and then what do i want to   save this as well i don't want to save this as  pellet time because that is our main background   image instead i want to go ahead and save this  as foreground objects and then i also want to   save this as a png so i'll add a dot png to the  end of this and then i can go ahead and hit save   export and now that's going to export that image  into our project so if i go back to sublime text   you're going to see within our image directory  right here now we have foreground objects.png this   is a really large file so in order to actually  see this image i have to scroll on over to the   right and maybe even down and you'll see this  is what the image consists of so now that we   have this image in place we just need to import  it into our game and then render it as the very   last thing within our render queue so to create  this foreground image we're going to go ahead and   do so as a sprite so if we go ahead and scroll on  down right here on line 91 for me this is where we   are creating a new sprite which is set to equal  to our background image we want to do the same   thing but just using our foreground image instead  so i'll go ahead and copy these lines of code and   right beneath it i'm going to paste in another  instance and instead of referencing background   i want to reference foreground so now what do  i need to do well i need to assign a new image   to this image property now where did i create  this image in the first place it's going to be   right up here so you'll see right now some of  our implementation is getting modeled in with our   classes it's kind of hard to find exactly what  we're looking for so in this case i want to go   ahead and refactor our classes into a separate  file so to do that we can go to file new file   and i'm going to save this as classes.js so we can  just store this within a project root so go ahead   and hit save with that now we have a new file  in which we can put our classes in so i'll just   go ahead and take both of our classes this class  of sprite cut it out of index.js paste it within   classes.js and then back within index.js i know i  also have this boundary class i want to go ahead   and take that and paste it within classes.js so  now with both of these saved i just want to make   sure that i import classes.js into index.html  so in order to do that i can copy the script   tag right here paste it above and then instead of  referencing index.js i can go ahead and reference   classes.js and i need to make sure that  class is being imported before index.js   or else we won't be able to read those classes  within index.js so if i go ahead and save this   and refresh our game over in the browser you're  going to see this still functions as expected   because we imported our classes correctly but now  that makes index.js a little more clear for us   because this is purely related implementation now  not class design so previously we were looking for   where we were creating our background image and it  was going to be right here so in order to create   a foreground image i can copy these two lines of  code right beneath it paste in those two lines and   then i know i'm not referencing just a constant  image i'm referencing a const a foreground image   like so and then i want to change the foreground  images source equal to our foreground objects.png   so i'll go ahead and select that foreground  objects not to png so now that foreground image is   available to us what i can do is i can copy this  and then where i actually created this new sprite   for our foreground i want to make sure for our  image property i reference our foreground image   so if i save that now we have a foreground sprite  but i still need to render this out within our   animation loop so like i said we want to render  this as the very last thing so we're rendering in   our background we're rendering out our boundaries  and then we're rendering out our player we want to   go ahead and render out our foreground as the very  last thing by calling foreground.draw so if i save   i go back to our game and i start moving well  you're going to see that our foreground images   are in place and they're moving along with us so  if we ever want our foreground objects to actually   move well we want to make sure that we add this  foreground object into our movables const right   here so if i go ahead and add that in like so then  save and refresh all those movables are going to   stay in place but the cool thing is when i go  ahead and walk past this house right here now   you're going to see that our player is placed  behind the house giving off the illusion as   if we're actually traveling behind it and this is  going to work for every object in which we created   within that foreground layer you'll see right  here for the trees we can now travel behind them   and then there's going to be a tree on the  far right over here that we can travel behind   as well it's going to be this tree right here  and travel behind that and we can even travel   behind some of these fence posts so that is why we  create that foreground object layer within tiled   it's simply so we give off the illusion as if we  can travel behind objects which are supposed to   be laid out in front of us so now looking at to do  we can successfully check off foreground objects   next up we're going to add in player movement  animation so when we move our player yes we can   move but we want to give off the illusion as if  our player is walking so to do this we're going   to be adding some sprite sheet animations and  thankfully we already imported those spreadsheets   so it's going to make this task a lot quicker  to recap currently we're only rendering out   this first instance of our sprite but eventually  what we want to do is take this crop rectangle   move it over to the side by one and then render  out this instance of our sprite we're just going   to keep doing this over time we're going to keep  moving this over and over through the sprite sheet   until we go back to the beginning and it's just  going to loop through these over and over again   to create the illusion as if our player is walking  but we're just pushing this crop mark through a   sprite sheet so to add this animation we're going  to want to go to classes.js and this is where our   sprite class is now going to exist and we're going  to want to hone in on the zero value right here   this is the second argument of c dot draw image  and this is the x coordinate of our crop position   so this coordinate right here the  x position of our crop refers to   this right here this is the x position of  where we are currently cropping our player   so if we were to go ahead and change this  to something like 48 we would push this crop   rectangle 48 pixels to the side like this and then  48 pixels would be the new coordinate right here   which means we're just rendering out this instance  of our sprite so what we want to do is is we want   to iterate this value through 0 to 48 to 96 and  what is 96 plus 48 i'm not sure but we want to   go ahead and iterate this value right here in  increments of 48 because our main image over here   is actually 192 pixels wide as we can see right  here that divided by four 192 divided by four   is 48 so we want to go ahead and push our crop  mark over to the right by 48 pixels for each   frame we actually render our spray out in so what  i want to do here is track the frame our spray is   currently on we currently have a frames object  but right now it only has one property which is   going to be max so if i want to go ahead and add  properties onto this while still allowing the user   to pass through an argument right here what i  can do is i can assign this dot frames equal to   an object with frames inside of it and then i  can call the spread operator on top of this and   then any properties i know i want added onto this  object by default i can add next to dot dot frames   so add a comma right here and then what property  do i want to add on to this dot frames well it's   going to be val that stands for value and it's  quite commonly used in frameworks like view and   react so our vowel by default for frames is going  to be 0 but this vowel over time is going to go   from zero to three so if i go ahead and reference  this dot frames dot vowel right here for x   coordinate everything is still going to render the  same because by default this is going to be equal   to zero but over time if i go ahead and increase  this up to three well we're going to go ahead and   change the x coordinate from zero to one to three  but the first thing we need to do is make sure   that we're incrementing this value right here over  time so after we draw our image right here i'll go   ahead and reference this.frames.val and i want to  go ahead and say plus plus this just means we're   adding 1 onto this for each time we call draw  but i don't want this to go past this.frames.max   because otherwise we would just be rendering out  a portion of our sprite sheet that doesn't exist   so what i want to say here is if this dot frames  dot val is less than this dot frames dot max   then i want to go ahead and add one under this dot  frame stop val so over time this should iterate   through 0 and 3 but what happens if this stop  frame stop val is actually greater than 3 well   else i want to go ahead and set this dot frames  dot val equal to 0. so by default this.frames.val   will be equal to 0. that means we render out the  first instance right here but once we go past   this draw image code we're going to say if this is  less than this.frames.max which this.frames.max in   our case is equal to four so zero is indeed less  than four then we're going to go ahead and call   dot valve plus plus which just means the next  time we go ahead and render out the stop frames   dot vowel we're going to be moving this over  to the side to the next instance of our player   but the thing is when we reference this  frames.vowel on the second iteration right here   it's going to be equal to one so really we're just  moving over our crop mark by one pixel it could   be something like right here we want to make sure  that we multiply this.frames.val by 48 and that'll   push our crop mark over by the full amount  to render out the next image so go ahead and   multiply this.frames.vowel by 48 which in reality  is going to be the width of our sprite so this dot   width and that should get our crop moving over  fully to the right then on this iteration 1 is   less than 4 so we'll call it again go through  the next iteration where val is equal to two   this gets pushed over to the right by another one  and then we go through the next iteration still   because two is less than four so now val is equal  to three three is still less than four in this   case so we go ahead and add vowel again and then  finally three is still less than four so we'd add   vowel onto that one more time and then in this  case this stuff frames.val would be equal to four   but if we think about this four times 48 is going  to be equal to 192. so if we were to go ahead and   move our crop mark all the way to 192 pixels  that would be the full width of our image over   here that means our crop mark would be off to the  right we wouldn't actually be rendering anything   out so in reality we never want this.frames.vowel  to actually be equal to four we only want it equal   to three so that our crop mark cannot go past  this very last point in our sprite so to get that   effect right here we'll simply subtract 1 from  this dot frames.max and then when this.frames.val   is equal to 3. we know this.frames.max minus 1  is also going to be equal to 3 as well so we're   not going to call this if statement we're going  to call else resetting this.frames.valve to zero   which means that our crop mark is going to go back  to the very first sprite and restart the process   so we go to the end and then come back to the  beginning so if we save all this code go back to   chrome and refresh you're going to see our player  is essentially on hyperdrive they're running   super super fast we're looping through all of  our animations there's no stutter there's nothing   missing but this obviously looks very very goofy  we want to go ahead and slow this animation down   so that we only move through a sprite sheet for  something like every 10 frames rather than every   frame within our animation loop so what we'd do is  we'd wait for 10 frames then we go to the next one   wait for 10 frames go to the next one wait  for another 10 go to the next it's going to   slow down our animation so it doesn't look like  we're constantly running like we are down here   so what we can do is on to our frames  object we can add an additional property   and this is going to be called elapsed this is  the amount of frames that have elapsed over time   since the creation of our sprite by default this  is going to be equal to zero within draw we want   to go ahead and say if this dot frames dot max  is greater than one meaning that we have a sprite   sheet in place and we should be animating the  sprite sheet then i want to select this dot   frames dot elapsed and add one onto it over time  then we want to say whenever this divided by 10   is equal to zero then that is where we're going  to call the following conditionals right here   so beneath this i can write an if statement that  says if this dot frames that elapsed divided by   10 using the modulo operator is equal to zero this  just means if the remainder of this equation right   here is equal to zero then we're going to go ahead  and proceed with the following i want to call   these two lines right here so i save and refresh  that now you'll see we have a perfect walking   animation in place this is much more realistic  to that speed running effect that we had earlier   so we only want to move our player right here when  we're actually pressing down on a key making our   background move so what we can do is within our  sprite class we can add an additional property   called this dot moving by default this is going to  be equal to false but now whenever we press down   on a key on our keyboard such as wasd we want to  make sure that we set this value equal to true so   now within draw we could call if this dot moving  is equal to true then we want to go ahead and call   all the code within this if statement which is  going to give off the animation as if our player   is moving but right now we're creating a lot of  indentation using these if statements so a way to   clean this up a little bit is to get rid of that  last curly bracket and this first curly bracket   for if this is moving and instead of using curler  brackets and wrapping everything right here inside   of it we can just return if our player is not  moving so we're saying whenever we call draw if   our player is not moving if this value is equal to  false then we're just going to call return which   means we do not call any of the following code  this right here is the exact same thing as using   the bracket formation we have right here it's  just a little cleaner because we don't have that   much indentation and it's going to make our code a  little bit easier to read in the future so now we   just need to set this dot to moving equal to true  whenever we actually press down on our keyboard so   within index.js where are we actually moving while  we're moving whenever we press down one of the w   keys one of the a keys s or d keys so within this  statement right here i can grab our player and set   moving equal to true so if i save this and go  back and refresh now we start off stationary   but if i hit w we're going to start moving but  if i let go we're still moving unfortunately so   we need to make sure that we're always setting  this equal to false if we're not moving and we   know we're not moving if we're outside of this  if statement so we can grab player.moving equal   to true and right above this if statement i could  say by default this is always going to be equal to   false and we're only going to set it equal to true  if we're pressing down a certain key so if i save   and refresh that if i start hitting w now we're  moving but if i let go we stop moving so perfect   now we want to make sure that we set player.moving  equal to true for each key we're listening for   so with an a i'm going to paste in player.moving  equal to true with an s i'll paste that in as well   and then finally within d i'll also paste that  in so now no matter what direction i move in   we're always going to be moving and then when  i let go we stop so we basically created a nice   animation that only activates when we actually  press down on the keyboard the very next thing   we want to do is switch between our sprite sheets  so when we move in a direction such as left or   right or up we actually change the direction in  which our player is facing so if we look within   finder we have four different spreadsheets for  our player already imported we have player down   player left player right and playerup now all  we need to do is swap out our main sprite sheet   for our player based on whatever directional key  we are pressing so if we look within classes.js   we're currently only importing one image but we  might want to import multiple images specifically   for transitioning between sprites so within our  sprite constructor i'm going to add an additional   argument called sprites and by default this will  be equal to an array and then i'm going to assign   this dot sprite equal to sprites whatever  we pass through as an argument right here   so when we're actually creating our player  and our implementation up above it's going   to be right about here on line 41 for me now  i can pass through a sprites property what i   want to set this equal to well i want to set  this equal to four different images to represent   our four different sprite sheets over here so  i'm actually going to create an object for this   and inside of this i'm going to have up and  i'm going to set that equal to the image where   our player is facing up so i know i need to  create this image i'll go ahead and select   where we're creating our first player image copy  that paste it in and then i'm going to go ahead   and change this to player up image and now i  know this references player up now player down   so now i have this player up image available to  me which i can now use within sprites up so i'll   go ahead and assign sprites up equal to player up  image and now i want to do the same thing for our   three other directions so go ahead and copy and  paste this three times and now let's focus on   left we need to create a player left image so  go ahead and copy these two lines right here   paste it in and then say i want a player left  image and this will reference player left so now   i can use this within our sprites object paste it  in and i just want to do the same thing for these   other two objects so i want you to go ahead and  pause the video and try filling in these other two   objects by creating new images and referencing the  remaining sprites we have over here so once you've   given that a go let's go ahead and do it ourselves  let's go ahead and copy these two lines right here   paste them in and say we also want to reference  player right image and this will reference   player right so now i can go ahead and take this  image and say i want a property of right which has   player right image assigned to it and then finally  i have one for down and this player image down   is just basically player image this is the very  first player image we imported into our game so   i'm going to rename this not to player image but  player down image and then i know this is already   taking in player down so now i can go ahead and  use this constant right here to say for sprites   down property i want that assigned to player down  image so now if we console log out our player   go back to our game refresh and open up our  console you're going to see we're getting an error   player image is not defined on line 55 which is  going to be right here so for our main image we   also need to make sure that we swap this out with  our player down image because we just changed the   const name i believe that is the only other place  in which we need to change that so if we save   and go back and refresh now our game is back  to normal we can look within console check out   our sprite and see now we populated the sprites  object with four new images all these images are   representative of the four images we actually  imported into our game so how do we actually   swap between these sprites whenever we move in a  different direction well we're going to want to go   back to our directional code it's going to be down  here let's start off with w and a so we know we're   declaring player.moving equal to true but right  here we can also say that our player dot image   this is the image currently being rendered out on  the screen whenever we press w on the keyboard we   want this equal to player dot sprites dot up and  that's really all we have to do is if i save that   go back to chrome and refresh and hit w now  we're facing up and doing the upwards animation   because we're looping through player up instead  of player down right here and since all these   four images right here are exactly the same  width and height while all of our crop code   works perfectly to instill that new animation  in place all we need to do now is change the   direction for our other keys so i can take this  line right here and then whenever we press down a   we know that our player should be moving  to the left so a reference player sprites   left then when we press down s we should be  moving down so we'll reference player dot   sprites dot down and then finally for d we know we  should be moving to the right so our player image   should be equal to player sprites right i save  that i go back to chrome and now if i go ahead   and hold down s we have the down animation if i  hold down d we have a right animation hold down a   we have a left animation and if i hold down w  we have an up animation so that is how we're   going to add an animation to our character to  give off some realistic movement as if we're   in a real pokemon style game so with that we can  successfully check off player movement animation   okay so now it's time to go ahead and code battle  sequences so these are the battles that occur   whenever we walk over some patch of grass and  eventually we're going to stop our character   activate that battle scene and then we're going  to create some fights between some monsters so we   know currently that this battle zone right here is  part of our background image but what we need to   do is import from our tiled layers little tiles  that fill up these battle patches then when we   walk over one of these little tiles while we're  going to give ourselves the ability to actually   activate some sort of battle so how would we even  go about creating these battle tiles within tiled   well obviously we'll want to go back to tiled and  we're going to want to make sure that we pretty   much turn on every single layer that we have here  so i'm going to go ahead and go through my whole   island making sure every layer is turned on except  for this battle zones layer so if you decided to   import my map this battle zones layer is going to  be here by default but i want to show you how to   do this from scratch just in case you need this  functionality within your own map so really what   i can do here is i'm going to delete this layer  i'm just going to select it then hit delete and   that takes care of that and now i want to go ahead  and recreate it so how would i recreate that layer   i'd simply right click on my layers tab over here  and hit new tile layer and i'm going to call this   layer battle zones so these are the zones in which  a player can walk over to initiate a fight so in   order to create a battle zone well all i need to  do is draw tiles the same way i drew collisions   so if we look at just collisions right here we  know that all of our collisions are these little   red tiles we want to go ahead and say that our  battle zones should also be little red tiles   they could actually be another color to help you  differentiate on your map what is a battle zone   and what is a collision but in our case it doesn't  really matter if we use the same color for both   battle zones and collisions so what i want to do  here is i want to go ahead and select from our   collisions tile set our little red tile right  here make sure that i have battlezone selected   and then i'm going to select our brush tool  up here and then i can just brush on over   every area in which i want a  battle to potentially start   so it's going to be these little green patches  that i draw my map so there's one right here   and then there's going to be one over here as  well so i'm just going to go ahead and cover   that whole area with little red collisions  which are actually going to be battle zones   and that is pretty much all we need to do  to create these battle zones within tiled   but if we want to go ahead and import these into  our game well first we're going to have to export   this battle zones layer so remember to export  things we have to go to file and then export   as and before you even go to export ads you're  going to make sure you save this you can see i   haven't saved it up here indicated by this little  asterisk if i just hit command s that's going to   save and now i want to go to file export as and  then remember we want to go ahead and export this   as a json map file so i'll go ahead and say  that this is going to be pellet town battle   zones and then i'm just going to save this within  my downloads folder that's kind of my temporary   folder stuff so i'm just going to hit save and now  within finder i want to go to my downloads folder   and you'll see this is where it is so i want to  go ahead and open this up within sublime text so   i'll grab that file drag it on top of sublime text  and now you'll see this is all the data associated   with our map so even though we exported this as  pellatownbattlezones.json while it's going to   include all the data to our layers so we need to  make sure that we search for battle zones so i'm   going to hit command f within sublime text to open  up my search bar and then i'm going to search for   battle zones so once we find battle zones  down here we want to go ahead and take the   data object associated with our battle zones so  go ahead and grab everything where data starts   and go on down to where data ends if we look  within this data set you'll see all these 1025s   this is where our battle zones are  supposed to be placed within our map   so we copy this we can now minimize our battle  zones and then within our project you'll see we   already have a data folder which contains our  collisions now we want to go ahead and create a   file specifically for our battle zones so what  i can do is i can go to file new file that's   going to open up a new file right here and then  i can create a const called battlezones and set   it equal to that array that we grabbed from that  data set so now we can hit command s to save this   and i'm going to save this as battlezones.js  and by default i have an autoformatter on for   my javascript so that went ahead and autoformatted  this so everything is laid on top of each other it   doesn't really matter this probably isn't the best  for file size but it is okay in our case yours is   probably going to be laid out next to each other  that's actually better so ignoring the format of   this now we know we have a cost of battle zones  assigned to an array so now what we can do is we   can go to index.html and say right above our data  slash collisions we also want to import our battle   zones as well and make sure you get this upper kz  in there or else this won't import correctly so   once we save that we'll head over to index.js  and at the very top we're going to want to go   ahead and clog out the const of battle zones that  we created within that file just to make sure that   it's being imported correctly so i'll go ahead  and console.log out battle sounds like so and now   within chrome we can refresh right click inspect  go over to console now you'll see we have an array   full of data which is going to be all the data  related to where our battle zones should be placed   so to create some battle zones while battlezone  is just the same thing as a collision tile so   we're going to want to follow the same steps that  we used to parse out our data within collisions   into canvas rectangles so to start what we can do  is we can copy these four lines of code right here   related to our collisions map and beneath it we'll  just paste out a new version but we're going to be   editing our const names and we're also going to  be editing our for loop quite a bit to get this   working with our battle zones rather than our  collisions so to start remember we want to go   ahead and parse all of our data from battle zones  into a 2d array so to create that 2d array we're   going to create a const called battle zones map  so this is going to be the root of our 2d array   and then we want to loop through all of our  battle zones instead of our collisions we can   go ahead and keep eye the same because the  width of our actual map has not changed at   all and now as we loop through our battle zone  data we're going to want to go ahead and select   our battle zones map right here not our collisions  map and push into our array sub arrays sliced from   0 to 70 which increment over time based on our  iterator right here so if we did this correctly   if we can't log out battle zones map like so  save refreshing chrome with our console open   you're going to see we have one array which  contains 40 sub arrays but you're going to see we   don't have any of these arrays populated if i open  them while they're right length is equal to zero   so let's go back to our code and on inspection  we need to make sure that we are pushing in data   from our battle zones data set not our battle  zones map because by default this doesn't have   anything inside of it so we want to make sure  we're selecting the array that actually has data   inside of it which is battle zones so right here  we want to push in battle zones and then slice i   through 70 with this battle zones array i'll save  and refresh again now you'll see each sub-array   is populated with all of our data related to where  our battle zones should be placed you kind of see   this creates that exact rectangle in which we want  our player to activate battles in so we did that   correctly and now we're going to want to go ahead  and based off of that 2d array start pushing in   battlezone tiles into a battle zones array so in  this case what we'd want to do is create a const   of battle zones and set this equal to an empty  array to start this is going to contain all the   battle zones objects which are really just going  to be boundaries so we can go ahead and reuse this   boundary class and push them into our battle zones  array now one issue right here is we're trying to   declare a constant battle zones but if you look  up at the top we already imported our battlezones   const from our js file of battle zones so in  this case it makes sense to either change our   battlezone's data const name or our battle zones  array down here personally i think it makes sense   to keep battle zones the same right here so we can  use it within our implementation using a name that   actually makes sense so what i'm going to do is  over within battlezones.js i'm going to rename   this battlezone's data instead and i think that's  a little more representative of what we're looking   at here so i'll save that now within index.js i  can call slugout battlezone's data and any place   that i just use battlezones like right here and  right here i want to go ahead and replace those   with battlezones data and now i can use the  constant battle zones down here without that   interfering with this object up here if i save and  refresh everything still works and everything is   still console logged out correctly so now we're  going to want to go ahead and reuse some of this   code right here where we looped through our 2d  collision map and pushed in boundaries based on   the indices of our rows and our symbols so  here i can go ahead and copy all this code   beneath our constant battle zones i'll paste that  on in and now instead of referencing collisions   map we know we created a battle zones map and  pushed in all the associated data so instead of   referencing collisions map right here i could say  for each battle zones map for each row within that   battlefields map at least we're going to loop  through each row grab whatever symbol we are   currently looping over all that is fine and then  we know if our symbol is equal to 1025 which if   we look within our battle zones data right here if  we search for 1025 that is the only symbol within   this array then we want to push in a new boundary  but not into our boundaries array but rather   our battle zones array and based off of that our  battle zones should be placed perfectly based on   the indices of each row and the indices of each  symbol in which we are currently looping over so   if everything goes according to plan we can count  log out battle zones like so and it should contain   a bunch of different boundary objects which it  does contains 26 different battery objects in   which we can now render out on the screen in  their correct position so to render these out   we'll go on down to our animation loop which is  right here now where do we want to go ahead and   render out these battle zones well right beneath  our boundaries we can go ahead and reference our   battle zones array and let's say for each battle  zone within our battle zones array what do we want   to do we want to call the battlezone draw function  because we know this is just a battery object   which is shared with our boundaries up here so if  we save that go back to our game close out of our   console and refresh well we're not seeing anything  just yet because if we look at our shared boundary   class within classes.js scroll on down you'll  see that we set our fill style for our boundaries   to be zero so let's go ahead and turn this back  on i'll set it equal to 0.5 say even refresh and   now you'll see we have our boundaries drawn out  this is what we can and can't run into so move to   the right can't run into that can't run into that  either and now you'll see we have our battle zone   separate from all of our boundaries only issues  right now is obviously this isn't staying in place   that just means we need to put our battle zones  within our movables array so back within index.js   where is our movables array it's going to be  here on line 123 for me same thing we do with   boundaries since we want to put all of our array  objects inside of here i'm going to go ahead and   create a comma after foreground and then use dot  dot dot battle zones to say all the objects within   battle zones should be placed directly within our  movables array so if i save that refresh now when   i move you're going to see that our battles and  stay in place so now what we're going to want to   do is detect for a collision between our player  and these battle zones so if i were to walk over   this right now well that's totally okay because  our battle zones are separate from our boundaries   but we do want to detect for a collision  so we know that when these two are touching   we have the possibility to activate a battle  so to detect that these two are touching we're   going to want to reuse the same functionality we  used for when we're pressing down one of our keys   specifically this for loop and this if statement  with rectangular collision and it makes sense   to only detect for a collision between our player  and these battle zones when we're actually moving   because we should only be able to activate a  battle when we're moving in the first place   in the traditional pokemon games a battle is not  activated if you're just sitting still in a spot   you have to be moving in order to activate that  battle so it makes sense to put this collision   detection code also within our if statements  that listen for when we're pressing down w a   s or d so here we can keep our collision detection  code the same but we do want to duplicate this for   loop and beneath it i'm going to paste in a new  instance of it we can keep a lot of this for loop   the same but we are going to want to loop through  our battle zones rather than our boundaries and   now we're going to be selecting not a boundary  but a singular battle zone as we loop through this   to select a singular battle zone well we  need to select our battle zones array and   now we can get that singular battle zone based  off of this i index then we want to detect for   collision between our player we don't need  to predict into the future whether or not   we're colliding with a battle zone so we can go  ahead and get rid of the spread object right here   and just say we want to detect foreclosure  between our player and the current battle   zone that we're looping over now we don't need  to set moving equal to false when we're moving   through a battle zone because we don't want to  stop our player so we can delete this line right   here we are going to keep a break though because  there's no point of running through the rest of   this loop if we're colliding with one rectangle  that means we know we're probably not colliding   with another one so we'll just break out of this  for each frame in which we're actually colliding   with a battle zone in the first place but we do  want to start just by calling out battle zone   collision to make sure that this code works in  the first place so if i save that go back to our   game over here open up our console and i'll move  it over to the side so we can see things better   now you'll see if i begin walking into a battle  zone while nothing's being consoled out but if i   go ahead and move from the bottom up you're going  to see we have a battlezone collision in place we   know we're only colliding with that battle zone  when our player is actually on top of these tiles   so this code does indeed work but it would be  a little tiresome and a little annoying to have   to go ahead and copy and paste this into each  conditional because no matter which direction   we move we know we should be detecting for a  collision between our player and battle zones   we don't need to go in a certain direction  we can go up we can go left we can go right   we can go down this code should be running as  long as we are pressing down one of those keys   so rather than copy and paste this code into  other versions we're pressing down a different key   what we can do is above these if statements  where we're listening for key presses we can say   if keys dot w is pressed or keys dot a is  pressed or keys dot s is pressed or keys   dot d is pressed if any of these are pressed down  at any point in time we can go ahead and call this   code right here that loops throughout battle zones  and say hey as long as these keys are pressed we   want to go ahead and detect for a collision  between your player the battle zone and if so   we're going to console log out this statement  right here independent of which key you're   currently pressing so we'll go ahead and cut this  for loop out from where we placed it previously   and now within this new if statement we can  paste it on in here and we'll go ahead and save   refresh and now no matter which direction we move  over our battle zone well we should be logging out   the text battle zone collision so let's start  moving down and now as soon as i touch this   battle zone right here you're going to see we  start logging that out and if i move to the right   it's still being logged out if i move to the left  still logged out and if i move up well it's still   locked out but only when i'm actually on top of  the battle zone all our other collisions still   work but this code works perfectly for making  sure we know whether or not we're touching one   of our battle zone tiles so this is a really  good start but if we were to activate a battle   using this code right here well one of the issues  that would occur is well we're still technically   touching our battle zone even though our player  is way up here above it so technically we could   activate a battle when it looks like our player is  above the battle zone and it might make the player   a little annoyed or confused to know well a battle  was activated even though i really wasn't on top   of the grass so what we're going to want to do is  determine whether or not our player is actually   on top of the grass and to do this we're going  to need to use a little bit of geometry so here's   what we're going to want to do we're going to  want to get the area associated with our player   and also the area associated with one of the tiles  of our battle zones block after we get those areas   we're also going to want to get the areas of  this little intersection that was created by   these other two areas intersecting so we want to  say if the area of intersection is something like   25 or 50 percent the area of our player then that  is when we're going to want to activate a battle   but if our player moves up to something like right  here and the area of intersection right here is   minuscule then we're going to say well even though  the two are colliding because they're touching   well a battle should not be activated so it's  really important that we find the area of   intersection between these two rectangles and then  compare it to the actual area of our player and   based on how big this intersecting rectangle is  compared to our player that is where we're going   to want to go ahead and activate a battle so let's  start writing this out we know whenever our player   climbs with a battle zone yes we want to go ahead  and activate a battle but we only want to do this   as some other condition occurs so what i can do  is i can begin writing out that condition with an   ant statement that says if our overlapping area is  greater than our player's area which we can get by   multiplying our player width by our player height  divided by two the reason i'm dividing this by two   is our player width right here and our player  height when we multiply these two together well   that's going to give us the entire intersection  right here of our player so if we were to do this   without divide by two right here what we're  effectively saying is while the overlapping   area which is everything within this overlapping  rectangle right here needs to have a greater area   than the whole area of our player over here so  this is really small this is really big there's   a potential that this if statement might not even  occur based on how big our player is but if we go   ahead and divide this by two as well well we're  essentially going to cut our player area in half   which means we're only going to care about this  bottom portion of our player down here so now   there's a much greater chance the overlapping  rectangle area will be greater than the area   associated with the bottom half of a player and  not the top so that is why we're dividing this by   two is to give us more of a chance in which we can  actually call a battle zone collision it's going   to force our player to be at least halfway over  our collision blocks rather than fully on them   and it's also going to make sure that a battle  isn't initiated when our player is traveling along   the edges of our battle zones so this code right  here will work but one issue is we need to create   this overlapping area constant well we're going  to want to start by creating a const called   overlapping area so this is going to be associated  with this and this is going to be equal to the   math.max of two values so whatever values we  put inside of math.max this is going to return   the one that is the greatest so what values do  we want to put within math.max well to start we   want to go ahead and determine out of the two  rectangles we're detecting for a collision for   which of them has a greater x value on the left  side well if we look at this the left side of   our player is going to be right here and the last  side of our boundary is going to be right here if   we assign values to these we'll just say for the  left side of a player hypothetically this is going   to be a value of zero on the x axis and then for  our battle zone hypothetically this is going to   have a value of 20. so which is greater the left  side of our player at zero or the left side of   our battle zone at 20. well obviously it's going  to be 20 but we do need to test for this for each   time our player is moving through these battle  zones so here within math.max we want to grab the   left side of our player we'll get that with player  dot position dot x and then we want to add a comma   and also get to the left side of our battle zone  so we'll go ahead and reference our battle zone   and then get position dot x for battle zone so now  we're determining which has a greater value our   player position x which is this right here or our  battle zone position x which is this right here   in this case it's going to be battle zone position  x so we can go ahead and say math.max is going to   return 20 over here now we're going to want to add  on to this a math.min function whatever values are   within math.min we're going to go ahead and get  to the smallest result so for math.min we want   to go ahead and plug in the right side of our  player and the right side of our collision block   hypothetically we can go ahead and say that the  right side of our player is going to have a value   of about 25 and the right side of our collision  block is going to have a value of about 40. so   which of these is going to be the minimum value  it's going to be 25 right here so within math.min   to get the right side of our player we can select  our player dot position dot x and then add onto it   our player dot width this equation right here  will give us the right side of our player   at the hypothetical of 25. now we also want to  compare which value is smaller the right side   of our player or the right side of our battle zone  which we can select with battle zone dot position   dot x and then add on to that battle zone dot  width so this right here we'll get the right   side of our battle zone which is going to be a  hypothetical 40. so if we compare the right side   of our player at 25 to the right side of our  battle zone which is going to have the minimum   value well it's going to be 25 in this case so  what we're doing with these equations is we're   finding the width of our intersecting rectangle  so if we get the maximum value between these two   and the minimum value between these two well we're  effectively getting the width of our intersecting   rectangle now if we look at our code real quick  well we'll see that this doesn't actually give   us the width even though we have the values which  should be able to get us the width if we want to   get the width of this right here well we need to  go ahead and get our minimum value right here of   25 and subtract from it our maximum value that  was calculated over here with our yellows so all   we need to do is reorganize our code a little  bit for overlapping area and to do that we'll   take our minimum right here get rid of this plus  we're going to put our minimum at the beginning of   our statement and then we're going to subtract  our maximum so if we do things like this we're   calculating our minimum which is going to get this  right here and then we're subtracting from it our   maximum which is going to be this right here so  25 minus 20 is going to give us a width of 5 for   our overlapping rectangle now we need to do is the  exact same thing but to obtain a rectangle height   so at the end of this we can go ahead and  multiply this by a new equation because we know   requires multiplying the rectangles with by the  rectangle's height so we're multiplying it now   by the rectangle's height we just need to obtain  that and obtain that we need to go ahead and   monitor for the bottoms of our rectangles so these  two right here and we want to ask ourselves well   which is going to give us the minimum value in  this case it's going to be our player which if   we were to sign this a hypothetical value we could  say the bottom of our player is something like 30   and then the bottom of our battle zone is  something like 40. so now within our code   we can say go ahead and give me the minimum of  our player dot position dot y plus our player   dot height and then we want to see what is  smaller the bottom of our player or the bottom of   our battle zone dot position dot y plus our  battle zone dot height so this equation right   here is giving us the hypothetical 30 the  bottom of our player and this equation right   here is giving us the bottom of our battle zone  so the result of math.min here is going to be 30.   now we're going to want to subtract from this the  maximum value of the top of our player and the top   of our battle zone right here so we'll give this a  hypothetical zero to start for our player and then   right down here will give us a hypothetical of 15.  so within our code subtracting from this math.min   will subtract a math.max between the top of our  player which we can get with player.position.y   and also the top of our battlezone which  we'll get with battlezone.position.y so player position y is going to give us this  value of zero and then battle zone position y   is going to give us this value of 15 which is  going to be greater well in this case it's going   to be no other than 15. so if we subtract 15  from 30 we are going to get the height of this   rectangle right here which would result in 15. if  we multiply 15 by 5 based on these equations we're   going to get an area of 75 and based on the order  of operations well we want to make sure that we've   wrapped these last two equations in parentheses  and same with our top two equations so i'll wrap   math.min all the way to math.max in parentheses  that's going to make sure that we don't get the   area by multiplying these two together until  we get the distances required to calculate   our overlapping rectangle area so now i can't  remember what the exact numbers were but let's   just go ahead and say our player width is 20 and  our player height is going to be 40. if i multiply   these two together 20 times 40 we're going to  get a value of 800 so our total area for a player   is 800. now if i divide that by two like we're  doing all the way over here dividing that by two   we're going to get a value of not 800 but  rather 400 so if our overlapping area down here   75 is ever greater than 400 that is when we're  going to go ahead and activate our battle you'll   see that is just not the case but if we were to  go ahead and move our player rectangle down a bit   such to right about here well maybe that would  indeed be the case based on the equations we   wrote over here the overlapping rectangle based on  these dimensions would have an area of something   like 500 rather than 75 as a result we know  our overlapping area right here is greater than   the area of our player divided by 2 which is 400  therefore we can start a battle so let's go ahead   and save this refresh and then we'll open up our  console and now we should only log that text if   our player is about halfway over our collision  blocks so if we start moving down and we touch the   very tip of our collision blocks we're going to  see we're not actually logging anything out i can   move side to side that's still not being locked  out and on the edge over here i can start moving   down and that's still not being logged out but now  if i begin walking over our collision blocks right   here you're going to see we are indeed logging  that out because we used that overlapping area   code to determine how much of our player is  actually on top of one of the collision blocks   you'll see no matter where i go within our battle  zone right here we are logging this out but it   stops as soon as our player goes about halfway off  of our battle zones so that's going to give us an   accurate reading for initiating these battles  in the first place now essentially whenever we   call this text this is when we want to go ahead  and activate our battle you'll see when i begin   to move over this though that this is just being  called way too often this should only occur once   and it should happen by random chance in which we  activate the battle so what we can do here is we   can add on to this if statement by saying and and  and what we'll write is math.random if math.random   is less than a certain value let's make a really  small start such as point one then that is going   to be when we want to go ahead and activate  our battle so what does this actually mean well   math.random is always going to produce a value  zero to one and by saying we only want to continue   if the value produced by math.random is less than  point one we're effectively giving ourselves a ten   percent chance in which we activate a battle so  we save that go back to our game and refresh we   start walking over our battle zone you're going to  see that this occurs a lot less than it did before   but even now this might be a little too much  to start activating a battle we want to make   sure that the chances as it's happening are not  too often so if we want to go ahead and decrease   chance that this happens we can go ahead and  decrease this value right here maybe if we   go ahead and say math.random should be less than  0.01 save and refresh then start walking over this   you're going to see nothing is being activated  but eventually we do get an activation   which means we should be transitioning into the  battle state right now and by walking back and   forth you can see just how rarely this actually  occurs so i think this is a good rate in which   i want my battles to occur in the first place so  i'm going to go ahead and leave the code as is but   that is all we need to begin our battle activation  the next thing we need to do is transition   to a different scene within the traditional  pokemon games while the screen begins flashing   and then it swaps you over to a battle scene  so the first thing we're going to want to do   is actually activate that transition effect by  flashing our screen and then activate that code   for actual battle sequence so basically what  we're going to need to do here is whenever we   go ahead and console log out a new battle zone  collision whenever that may be we're going to   want to stop our player from moving all together  and we're going to want to go ahead and activate   some sort of animation that flashes our screen  black so let's go ahead and stop our player from   moving whenever we activate a battle so we know we  activate a battle right here and we can even say   before this is statement this is when we activate  a battle so how do we stop our player from moving   well we know all our movement code is down below  right here but we're also listening for keys up   here what we want to do is activate some sort of  boolean so that when we set it equal to true we   can no longer call any code that is listening for  what keys are pressed so when we actually activate   a battle i'll go ahead and rename this console log  to activate battle right here to help us indicate   what this is better when we're actually down  here we'd want to call some sort of battle object   and on top of that get a property called initiated  so by default this is going to be equal to false   but when we activate a battle this is going to  be equal to true so if a battle is initiated if   we actually call this right here before we listen  for any keys whether it be for activating a battle   or actually moving our player we would want to  go ahead and return so i'll go ahead and call if   a battle has been initiated and we're  just going to go ahead and call return   meaning we do not call any of the following code  we're not going to accidentally activate another   battle and we're definitely not going to be able  to move our player because we can't call any of   this code down here so if we want this code to  work well we need to create a battle object with   a property of initiated so right above animate  i can create a new const i'll call this battle   set it equal to an object and then i'm going to  add the property initiated set it equal to false   by default so all of our other code works but  now whenever a battle is initiated that'll be   set equal to true which means the next time we  iterate through our animation loop we're going   to go all the way up here check whether or not  battle.initiated is equal to true which now it is   and then we're just going to call return which  means we're not going to call any code down below   so if we save go back to our game and refresh we  start walking through our battle zones eventually   we should activate a battle which now we have and  you'll see i can no longer move our player at all   but one issue is is our player is still walking  even though it's impossible for us to move   so that'll be the next step is to make sure that  our player stops along with our ability to control   where a player is moving so we know our player  has the ability to move animation wise at least   whenever player moving is set equal to  true which we do whenever we press down   one of these keys the thing is when we activate  a battle and prevent our player from moving well   player.moving is not being set equal to false  and removing left right here is not being set   equal to true we want to make sure that these are  always being called even if a battle is initiated   so what i can do is i can take these two lines  right here and right above where we're calling   this if statement i can paste those two in which  sets them to the value that they should be at   even if our battle is initiated and our  game is stopped so now if i save and refresh   i start walking through our battle patches again  you'll see we activated a battle but now our   player is no longer moving so we can activate  that transition where the screen flashes black   and then actually switch us on over to the battle  scene so i found the easiest way to create a flash   transition is to use just default html thankfully  for us we're creating this game on the web so we   can use really helpful languages like html and css  to make our game even better we could go ahead and   create this animation directly within our canvas  but it's a lot harder to do and it's a lot more   time than it's worth i found if we just do this  within html what's going to make our lives a lot   easier so to do this with an html i want to create  a div that covers the whole width and height of   our canvas and then once i create this div i want  to go ahead and fill in the whole thing so it has   a background if not yellow but black and then i'm  just going to change the opacity so that it fades   out and fades in over time so all i really need  to do here is create a black background div that   is overlaid on top of our canvas and with that  our player is going to be stopped but we're just   going to be flashing that background on and off  to create the effect as if we're transitioning   into another screen so to create that background  div i'm going to want to head inside index.html   and i'm going to want to wrap our canvas inside of  a div so the beginning and closing div tags right   here i'll go ahead and wrap our canvas inside of  that if i save and refresh well we're not going to   see much of a difference at all which is okay this  wrapping div is just going to act as a container   for not just our canvas but another div and this  div is what's going to be a rectangle that fills   up our entire canvas width and height now we just  need to style this div so it actually does that   so to style this we can begin by adding a style  tag into our div and then we can go ahead and say   that our background color for this div is going  to be black we save that we refresh not seeing   anything just yet because right now this div right  here is not taking up any width and height even   though it might have a background color of black  it doesn't matter it needs to take up some width   and height in order for this to actually show so  if we were to go ahead and give this a width and   height we'll go ahead and declare a css property  of width should be equal to 200 pixels and then a   height should also have 200 pixels let's go ahead  and save and then refresh over here and you'll see   now our game is pushed down if i were to go ahead  and right click up here and click inspect grab   this little tool right here click that and then  hover over the very top you'll see this is what   our div looks like it's 200 pixels by 200 pixels  so with web development by default this div is   going to be overlaid on top of our canvas simply  because it's placed before our canvas but we want   to make sure that this div right here is overlaid  on top of our canvas instead so what we need to do   is we need to add a style onto our div right here  of position and we're going to set this eagle to   absolute and end it with a semicolon just like  the rest of our styles we save that and refresh   over here and now you'll see this is overlaid  on top of our canvas if i full screen this   seems to be in the perfect position but now we  want to go ahead and make sure that this div takes   up the full width and height of our canvas so if  we go ahead and inspect this div it's going to be   this guy right here but we want to focus in on the  parent div you'll notice right here the parentive   has a width of 1264 and a height of 576 so  although the height matches up with our canvas the   width most certainly does not this is important  to note because divs by default have a position   equal to block so block elements by default take  up the full width of their parent container what   is this this parent container it's going to  be body let's go ahead and see the width of   what body is it's going to be 1264. is it ever so  convenient that this div also has a width at 1264.   we're going to go ahead and change this div that  has a display block equal to not block but rather   inline block instead so i'm editing this in  line within my browser this means the changes   won't take effect permanently but we can see what  this looks like for debugging purposes i changed   our display to inline block and now when i hover  over our parent div with a display of inline block   you'll see the width is 1024 and the height is 576  that is the exact wooden height as our canvas and   now we can use this accordingly to make sure that  our background div right here takes up the full   width and height of this parent div so we know  our parent div needs a display of inline block   we'll go back to sublime text and say  our parent div which is this right here   needs a style tag where we can add a style of  display equal to inline dash block we save and we   refresh now that's applied by default and we can  see that has a width of 1024 and a height of 576.   so now what we want to do is expand  the width of our block right here   we're not going to do so using width and height  anymore we're actually going to turn these off   we're going to be adding in four new properties  related to our position absolute right here   so whenever we use position absolute that gives us  access to four new properties they're going to be   top right bottom and then they're going to be left  so once we supply these four properties right here   with zero you can see even with width and height  turned off well now our div covers are full screen   at a width of 1280 by 426 what these properties  do are is they determine the positioning of each   side of a rectangle so when we declare our top  is equal to zero we're saying start our rectangle   at the very top of our page we give it a right  of zero we're saying start a rectangle at the   very right of our page we're saying the bottom  side of a rectangle start out zero pixels from   the bottom we're saying the left of a rectangle  should start out to zero pixels from the left   now this is all relative to our html tag right  here why because there is no parent div which has   a style of position relative what we want to do  is make sure that this div right here is relative   to its parent div because we know the parent  div has a width of 1024 and a height of 576.   so to make sure that this div right here is  relative to its parent div all we need to do   is within sublime text add an additional style  to the parent div called position colon relative   and once we do that we're going to want to go  ahead and remove the width and the height from   the child div right here which is going to cover  our whole canvas and make sure that we set its top   equal to zero it's right equal to zero it's bottom  equal to zero and then it's left equal to zero   so now if i save and then i refresh you're going  to see that covers the whole screen but now if i   hover over a div right here it only takes a 1024  by 576 pixels and it's even more apparent if i   were to change our background color to something  like red let's save and refresh that you'll see   that this is taking out the perfect amount of  space but it's an html element laid on top of   our canvas which now we can animate just this  html element to create the illusion as if we're   transitioning to another screen so we're going  to want to go ahead and keep the background color   right here as black and now we can go ahead and  add in an additional css property called opacity   and set it equal to about 0 to start add a  semicolon to the end of that and you'll see   that no longer shows but one of the issues you  may have is is even though this has an opacity   of zero if i were to inspect this you're going to  see that it's still overlaid on top of our canvas   and that might prevent us from clicking on any  canvas elements that we might need within our game   so to prevent any clicking from occurring on an  overlaying div like this right here what we can   do is we can add one more property onto this  called pointer dash events and if we set this   equal to none well that's going to make sure that  this div right here never gets in the way of any   events that might be required for actual canvas  so we should be able to click freely without any   bugs or issues occurring due to that overlapping  div now how do we get our overlapping div flashing   well we could create a css animation but in this  case we are going to be using an external library   specifically for animations within javascript why  am i choosing this over css animations well simply   because i find it much much easier than creating  these within css and plus we're going to be using   this animation library later to help animate our  sprites once we're inside of our battle scene   so in this case it makes sense to import it early  use it for this functionality and then also use it   for the functionality we're about to create later  on when we need to animate our sprites so in this   case we're going to want to do a google search  for gsapcdn this is going to be the animation   library we're using and a cdn stands for content  delivery network it's basically an online script   tag that we can grab and place into our project  so that we can begin using the library immediately   so if we go on over to cdnjs.com select that  you're going to see right here gsap is provided   to us at version 3.9.1 you're going to want to  make sure that you're on the exact version i am   which is going to be 3.9.1 and then we're going  to want to select the very first result right   here that has gsap listed as 3.9.1 get the  minified version and we can just click copy   script tag head back to index.html and before we  import anything else i'm just going to paste in   the script tag that was copied so if we save this  link go back to index.js and at the very top of   our file if i can't log out not battlezone's data  but rather gsap instead save go back to our game   open up the console and then refresh you're going  to see for the very first object we're logging out   right here it's going to have a bunch of different  properties we've never seen this is the gsap   library this is all we have to do to import this  into our game and begin animating things using it   so what we're going to want to do is animate  that overlapping divs opacity so it flashes in   and then it flashes out and then after about  the third time we're going to stop the animation   and activate our new scene so let's start  animating it right off the bat whenever we   load index.js just to make sure that this looks  exactly as we need to without actually having to   activate it by walking over our battle zones so in  order to activate this animation within index.html   we want to look for what we want to animate well  we know it's going to be this div right here but   we have no way of selecting this one div because  it has no id associated with it so within this div   we can give it an id and call it overlapping  div like so so now we can grab this id   make sure you save index.html go back  to index.js and now we can call gsap.2   and this is going to take a string as the first  argument we want to go ahead and select an id   so if you're ever trying to select an id within  javascript you want to reference the pound sign   and then whatever id you put on your html element  you're going to want to list that out after the   pound sign so by doing this we're grabbing our  overlapping div which we set right here so now   this is going to take a second argument which  is going to be an object and this is going to   be all the properties we want to animate over time  so we know one of the properties associated with   our html div is going to be opacity if we go ahead  and animate this to one even though by default in   index.html its opacity right here is equal to zero  and save that and then refresh you're going to see   that fades in over time and that is how easy it is  to use the juice app animation library pretty much   you're only going to be using gsap.2 and 2 is just  a simple interpolation that says select an html   element and then determine what properties you  want animated if you want to go ahead and find out   what additional properties you can animate you can  use the gsap documentation and that will be linked   within the description of the video same thing  with the cdn link if you just want to grab it   from the video but this is a great start when it  comes to activating our battle so we know when we   activated battle while this just doesn't fade in  it kind of flashes a few times at least i believe   that's what happens when the pokemon game even if  it doesn't this will still create a cooler effect   than just fading to black so to get this flashing  a few times we're going to want to go ahead and   set a repeat property within our object right  here if we set repeat equal 2 about three times   save and then refresh you're going to see that  flash is about three times now it's a little   jarring because it starts from zero each time we  repeat this animation if we want this to be smooth   rather than just flash from zero what we can do  is we can add a yoyo property onto this and set   that equal to true and all that's going to do is  make sure that it goes from zero to one to zero   but in a smooth manner rather than just repeating  the animation with an opacity of zero to start   so if i save that and then refresh you're going  to see we have a smoother animation but we might   want to speed that up a little bit so what we can  do is we can add a duration property onto this   set it equals something like point four because  i believe the default is around point seven five   forgive me if i'm wrong on that but let's go ahead  and set our duration equal to point four save and   refresh and i think i like how that looks to start  so now that we like our animation right here we   can grab the animation code cut it from when we  actually start our game and now we want to place   that in the spot in which we actually activate our  battle so if i scroll on down we know we activate   our battle right here we're constant logging out  exactly that beneath battle.initiated i can go   ahead and call usap.2 on our overlapping div i  save and i refresh and now if i try to activate   a battle let's go ahead and see what happens  eventually over time our players should stop   and you'll see now our player is stopped we  activated a battle we called our animation   but now what you might have seen is while we  end up on the same screen we want to make sure   that we end that animation so the black screen is  still drawn on top of our whole canvas right here   and that way when our overlapping div covers  our whole screen while all of this is black   in the background we can swap out our canvas  scene to go to a battle view instead of a   map view so we want to go ahead and make sure  that this shows whenever this animation ends   what we can do is we can call an on complete  property this is going to be a function like so   and now on complete we can call another  gsap.2 make sure we select our overlapping   div go ahead and grab that paste it as the first  argument and then we want to say that the opacity   for overlapping div should be equal to 1 on the  end of this animation we can even make sure that   this is the same duration by adding our duration  property to the end of this and now this isn't   going to yo-yo back to an opacity of zero because  yo-yo isn't placed inside of here so now if i save   i go back to our game and i try activating our  animation one more time you're going to see that   activates and then it ends on a black screen  which is perfect because now behind this black   screen we can go ahead and say we want to switch  to our battle view rather than our map view so   to do this when our animation completes we're  going to want to go ahead and activate a new   animation loop at the same time we're also going  to want to deactivate current animation loop   because it doesn't make sense to call all this  animation code that we're calling right now for   a battle sequence because that contains completely  different code than what we're working with right   now for our map so we're going to cancel out of  this animation loop and at the same time we're   going to create a new animation loop but that  is more focused on our actual battle sequence   rather than our map movement so how would  we cancel out this animation loop well   window.requestanimationframe is always going to  return an animation id for each frame we loop over   our animation loop so if i go ahead and say i want  to create a const called animation id and set it   equal to window.requestanimationframe while this  is still going to function exactly as before the   only difference being is we're storing the frame  id within our animation id const we can go ahead   and console.log this out animation id save go back  to chrome refresh open up our console and you'll   see this is what frame we're currently on within  our loop and this just keeps increasing over time   until we cancel out of this but in order to  cancel out of this well we need the animation id   so now that we have this animation id available to  us whenever we activate a battle we go through our   flash sequence we want to go ahead and deactivate  the current animation loop right here at the   very end of our animation so what i can say is i  want to select window dot cancel animation frame   what frame do i want to cancel well our animation  id frame so to test this right before we return   when a battle is initiated we're going to want  to console.log out our animation id so if we   save that we're going to see our animation id  increasing over time and now if we activate a   battle down here well this should stop technically  shouldn't it well we watch that happen and why   does this keep going well one of the issues is we  actually call gsap.2 and we call on complete when   we try to cancel an animation frame we're trying  to cancel the frame in which animation id was when   we activated our battle the thing is the animation  loop is going to continue over time regardless   because we're calling this too late we're calling  this after our animation has occurred and our   animation id is increasing over time so we're  canceling the wrong animation frame we want to   make sure that this is the exact frame that we are  currently looping over within our animation loop   so instead of deactivating our current animation  loop right here we want to take this code out of   our gsap.2 function because remember this is only  called 0.4 seconds after the fact we want to make   sure that this is called immediately so whenever  we activate a battle yes we're going to activate   a battle but we're also going to deactivate  the current animation loop that's still going   to show everything within our background the only  difference is if we were to include moving sprites   while it stopped them from moving all together  but we don't have any moving sprites besides our   player in this case so it's totally okay to put  window.cancelanimationframe right here so right   here is where we deactivate the current animation  loop we save this try refreshing and doing this   again let's go ahead and start moving you're going  to see that this stops all together this means we   are no longer calling animate within our game we  activated the battle we activate our animation   now we are ready to transition to that new scene  so to transition to that new scene we want to go   right here to where we activate a new animation  loop and here we're going to call animate battle   so now that we have a new function we need to  actually create it we can go ahead and create   it down beneath animate so right about here  i'm going to create a new function called   animate battle and inside of this i want to call  window dot request animation frame what do i want   to loop through well this function right here  so animate battle will go right there now i can   const log out animating battle to make sure that  we switch on over to this animation loop instead   of the one we had previously so i save this go  back to our game and then i activate a new battle   we activate that battle this loop stops  but eventually we're going to go into our   new animation loop where we're calling animating  battle and now we can show everything we need to   to begin this battle functionality so with  that we just transitioned from our map to   a battle sequence so now what we're going  to want to do is import a battle background   to set the scene for this view so if we look  within the google drive link within pokemon asset   images we're going to see a battle background  png we want to go ahead and copy this so i'll   right click hit copy and then i want to go over  to our web folder where we have our pokemon game   so i'll scroll on down until i find pokemon  game and here with an image i can paste in   our battle background so now it's within our  project now we can begin using it so over   within sublime text right above animate battle i  can create a new const called battle background   image and set this equal to a new image object so  now that i have this new image object i can select   battle background image and set a source equal  to what well if i go with an image slash img   now i can find battlebackground.png so i'll type  in battle background not image but rather just   dot png and now we have an image we can use inside  of something like a sprite so here i can go ahead   and declare a const of battle background this is  going to be equal to a new sprite so what does a   sprite take well we can always check within  classes.js and scroll up above we know that   it takes a position we added velocity here we  don't really need that though because we're not   actually using a velocity property we can get rid  of that but we know sprite takes a position image   frames potentially and then sprites potentially  so really all we need is a position and an image   so i want this battle background image to  start at the top left hand corner of my screen   so declare that its position property should  have an x a zero and also a y a zero and now i   just need to set the sprite's image so let's say  it's image should be equal to battle background   image this is the image we just created and now i  just need to render this out in the scene so i'll   grab our battle background sprite and now with an  animate battle i can go ahead and paste in battle   background and call its draw method so i save  go back to chrome and then activate a new battle you're going to see well our background image  showed for a second but then we faded out to black   we want to make sure that we only show this  background image when our black overlay is   fully opaque so we shouldn't have that flash over  background image in place but once we replace our   background image with our black overlay on top  then we're going to fade our black overlay out to   give off a smooth transition as if we're actually  going into this new battle scene so we're going to   want to go back up to where we're activating a  battle and that is going to be right here where   we're constantly out to activate battle and now we  should really only be activating a new animation   loop on complete when our overlapping div has an  opacity of one so at the end of this animation   we're going to want to declare on complete at the  end of this animation then we want to animate our   battle so when this is fully black we're going  to animate our battle that's going to take   care of that flash we just saw but then we're  going to want to call gsap2 just one more time   so we'll go ahead and grab gsab.2 i'll  just go ahead and copy all this code   paste it on in we want to go ahead and say that  when we animate our battle we want to fade out   our overlapping div to zero we don't need to call  anything on complete so we can get rid of that but   this is going to allow us to see what we actually  transition to by calling anime battle in the first   place let's try this one more time we'll save go  back to our game and then activate a new battle   and now you'll see when we have a perfect  transition into our battle scene this is   a completely new animation loop we're  not calling any of the code we had prior   we're doing this as efficiently and as performant  as possible so now we can begin writing out the   code to actually create our battle scene in which  we have characters that attack each other and then   we'll transition back to our game once one of  the characters gets eliminated so it's kind of   annoying to have to go back and travel over this  to get the chance to start a battle animation   i know i got on the first time right there but  sometimes it might take a while to actually   activate that so if you're tired of doing that  what we can do is where we call our initial map   animation is going to be by calling animate right  here this is on line 319 for me i can go ahead and   comment this out and then right beneath animate  battle i can simply just call anime battle if i   save that and refresh then we're going to start  out on our battle scene which allows us to focus   in on this rather than having to activate this  each time directly from our map and with that we   can go ahead and say that we drew out our battle  background okay so now let's go ahead and add our   battle sprites what are our battle sprites we're  essentially just going to be moving sprites that   represent our monsters within this battleground  so if we go ahead and look within our finder   right here you're going to see that i included two  sprite sheets they're going to be draggle sprite   and mb sprite so draggle and mb these are the  names i chose for these sprite sheets i got these   from the ninja asset pack over on itch.io really  great free pack that you can use for any of your   games but i decided to choose the dragon looking  monster for our enemy and this flame looking   monster for ourselves so if we want to go ahead  and place these within our battleground right here   well the first thing we need to do is actually  copy these into our project directory so these are   available within the google drive link if you go  on over there go inside the images folder you'll   see that there's draggle sprite and mbsprite  available so what we're going to do is we're   going to select these two sprites and then i'm  going to go ahead and hit command c to copy them   now i want to go over to our project folder which  is within web and then i'm going to scroll on down   until i find pokemon game and now i can go ahead  and paste these within our image folder so once   those are pasted in we'll head back to our game  over in sublime text and within our image folder   we should see dragglesprite.png which is this  and then we have an mbsprite png which is this   so now that we have these within our project we  can actually make use of them within our game   specifically within index.js so we're going to  want to go ahead and go to where we're calling   animate battle it's going to be right here on line  335 for me so what we're going to want to do is   create two new sprites using our sprite class but  this time we're going to go ahead and use these   draggle and empty sprite images instead so what  we're going to do is right above animate battle   i'm going to go ahead and create a new const and  i'm going to call this draggle like so this is   going to be our dragon monster now i want to go  ahead and create a new sprite which comes from   our sprite class so what does a new sprite take  well we can reference the spread above to find   out and we know that it takes a position and an  image so for our position we're going to have an x   and we're also going to have a y what should these  be equal to well we want to go ahead and position   these somewhere down here so our x would be  something about 100 from the left and our y   would be a little greater probably something  around 400 so i already did the calculations   for this our exposition to start is going  to be 280 and then our y is going to be 325.   now we need to go ahead and assign an image to our  draggle sprite so what should our image be well we   need to create that html image to make sure that  it loads into our class correctly so to create an   html image we can reference these two lines up  above i'm going to go ahead and copy these two   right above where we're creating draggle i'll  paste those in and now we know we don't want to   create a new battle background image but rather  a draggle image instead and this is going to   reference that sprite sheet that we just imported  into our image directory so instead of referencing   battle background.png what we're going to do is  find draggle sprite dot png right here and that   is within our image directory so now that we  have a source assigned to dragon image we can   go ahead and put it into our sprite class save  and we're not going to see anything just yet if   we refresh because we need to make sure that this  new sprite is being rendered out onto our scene   so we're recalling anime battle we also want to  call within it our draggle cost which is now a   sprite and since this is a sprite we can go ahead  and call the draw method on top of it so we save   that and refresh we now have our draggle sprite on  the screen but one thing you might notice is this   draggle sprite is facing us it doesn't really  make sense to put it in our player position   if the sprite sheet is actually facing towards  us in this case we want draggle to be our enemy   so if the sprite is facing us we're going to go  ahead and move them to this platform over here   so the coordinates for that platform are actually  going to be 800 for x and 100 for y so we change   the position right here save and refresh now  drago is going to be in the correct spot but   you might have noticed we have four instances  of draggle right here we want to go ahead and   change this to one instance and make sure draggle  is animating accordingly based on the sprites next   to it so similar what we did with our player  class we can go ahead and start cropping our   sprite sheet right here by adding in a property of  frames and this frame property is going to take a   max property inside of it what are the max amount  of frames we want to go through within our dragon   image well if we inspect this you'll see we have  one two three four frames within the sprite sheet   so for frames max we'll go ahead and declare we  want this to be four frames max so if we go ahead   and add that in save and refresh you're going  to see draggle is reduced to just one portion   of the full sprite sheet which is great but  now we want to go ahead and move that crop   mark through all of our dragon frames to give off  the illusion as if draggle right here is animating   so why isn't this animating by default well we're  going to have to inspect classes.js to find out so   right here this is going to be our sprite class  and we know within draw what we're going to be   drawing our dragon image and all this right here  is our crop code all this is functioning correctly   because we prepared things very well in regards  to getting sprite sheets cropped but if we go down   below we'll see well if this not moving is not  equal to true then we are just returning we're   not calling any of the following code and we need  this code in order to animate our sprite sheet but   we were using this.moving to make sure that our  player sprite only moves when we press down on   the keyboard but by default any sprite we create  is going to have this not moving set to falls   so when we go ahead and create a draggle sprite  it has this stop moving equal to false which means   right here we're never actually calling any of  the code responsible for animating our spreadsheet   so how do we change this well what we're going  to want to do is pass through an argument which   says whether or not the sprite should animate  by default so instead of calling this dot moving   while moving we can go ahead and refactor this so  that this not moving is actually this dot animate   if this.animate is set equal to true that means  call the following code and actually animate   our sprite sheet but we might want this to change  based on which sprite we're creating so we want to   make sure that we set animate equal to an argument  called animate and we're just going to pass this   through up above within our constructor function  so go ahead and add animate inside of here and by   default we can say this is equal to false so we  want to make sure that we save this here but now   we're going to have to refactor some code within  index.js specifically for our players so if we   search for new sprite eventually we're going to  come across our player which is right here on line   73 for me and we know by default when creating  our player sprite while our players should not   be moving right off the bat because when they're  spawned on the screen well we only want our player   to have that movement animation when we're  actually pressing down on one of our keys   so we don't need to do anything right here  where we're actually creating our player sprite   but we do want to look for other instances  of player specifically for player dot moving   so since we changed moving to animate what we can  do is we can find all instances of player moving   and it looks like we have about four instances  and i'm just selecting these by selecting that   term right there and hitting command d within  sublime text that'll select all instances of   the text you want to select and now that i have  all this selected what i can do is i can delete   those instances and say actually i don't want  to reference player.moving i want to reference   player.animate instead so what we're doing right  here is within our animate function for our map   we're declaring by default our player should not  be animating that's going to be equal to false   for every time we go through an animation loop  then eventually when we press down on one of our   keys right here in the function is responsible for  moving our player you're going to see that we set   player.anime equal to true which means when  we press down on one of these keys what we   want to activate that sprite sheet animation so  that's all we're doing but this is also going   to allow us to use animate to actually animate  our draggle sprite right here so since we just   declared within classes.js that we have a new  property that we can pass through called animate   now we can go ahead and declare that property  where we're actually creating draggle so animate   and set that equal to true this is going to be  a sprite that should definitely animate so now   if i save that go back to our game and refresh  you're going to see now our spray is animating   simply because within classes.js well now this  is equal to true we're no longer returning we're   calling the rest of the code which is dependent  on the amount of frames or sprite sheet has   so with just that we have draggle bouncing up  and down but this animation is kind of fast   when our hold on the animation is 10 frames so  this value right here if we go ahead and increase   this to something like 30 instead of 10 save and  refresh you're going to notice that animation is   slower but if we increase this from 10 to 30  well that means when we go back to our map   well our player animation is going to be a lot  slower it might not be exact to what we wanted   it at so what we're going to want to do is add a  new property to our sprite class that determines   the max frame hold we should have so instead of  calling this 30 or 10 we're going to say that   this is going to be equal to this dot frames dot  hold how many frames should be held until we go to   the next iteration of our sprite sheet well since  we're adding this in right here we're also going   to need to add it in above and we're going to do  this by declaring a default argument for frames   so right now frames is equal to a max of 1 and  then we want to say that the hold for our frames   by default is going to be equal to 10. so that's  a good start especially if we're creating a sprite   where we don't want to pass through a frames  object in the first place well the thing is   for our player sprite if we were to pass through  a frame's object that just had a property of max   and not hold well the whole property just wouldn't  work it would be overwritten because we're passing   through a completely new object so we go back to  index.js we're going to want to go ahead to where   we're creating our player so we'll search for  player equal that's going to be right here in line   73 for me and we want to make sure that we update  this frame's object to also take into account the   hold for our frames so we know when we're creating  our player the hold should be 10 we're going to   add that on in and that should make sure that  our player is stable when we go back to our map   but now if we go to new sprite specifically  where we are creating draggle right here   we can go ahead and declare that the hold for our  frames is going to be a little greater we're going   to say that this is going to be equal to 30. so we  save that go back to our game and refresh you'll   see now this maintains that 30 frame hold but we  also want to make sure that when we go back to our   map that our player has the correct hold on it as  well that hold should be 10 frames rather than 30.   so if we ever want to go back and test our map all  we need to do is right here where we're calling   animate battle we can either go ahead and copy  this just call animate instead and comment out   animate battle or you can just go ahead and delete  battle and call animate it doesn't really matter   but if you go ahead and save and refresh with  just anime right there we're going to go back   to our map and now we can test whether or not our  player animation is correct so if i start moving   it looks like that is indeed correct with a frame  hold of 10 so you just want to make sure that this   works before you keep on going with development of  the battle scene so we'll go back to our code and   we know that worked so we'll go ahead and comment  our animate and go back to animating our battle so   we save and refresh we're back over here all we  really need to do now to get our sprites on the   scene is add mb which is going to go right here so  i actually want to go ahead and challenge you to   add mb yourself basically you're going to go ahead  and use the same code that we used right here for   creating draggle you're just going to create a  new instance by using the envy sprite sheet so   go ahead and pause the video and give it a go on  your own once you think you have that down let's   go ahead and do it together so what i'm going to  do is i'm going to copy all these lines right here   responsible for creating our draggle sprite and  then i'm going to paste them down below so i know   that i want to use a different image than draggle  i want to go ahead and use our envy image so here   i'll go ahead and select these three instances  of dragon image and say no this is actually going   to be mb image instead and now i just need to  make sure that i reference the correct sprite   from our images folder so instead of referencing  dragon sprite right here i can look for mbsprite   instead so i'll go ahead and delete draggle and  add an enemy sprite instead and now i don't want   to create a dragon const but rather an enemy const  and now that i have mb created what i can do is i   can go into our animation loop right here for  animate battle and then call mb.draw that is   going to call our sprite class specifically on our  mb sprite if i save this and refresh you're going   to see while it looks like these two are dancing  or maybe doing something else we should not talk   about so instead we want to change the position  for mb what we want to do is change it so envy is   down here not macking on draggle so x is going  to be around 280 and then y is going to be 325   as mentioned earlier if i save that and refresh  you're going to see envy is in the perfect spot   and ready to battle draggle so with that we can go  ahead and say we added in our battle sprites next   up we want to go ahead and add in our attack bar  interface we're not going to add any functionality   to this but we do need to make sure that it's  appearing on our screen before we add that   functionality so for our attack bar i kind of want  to replicate the original pokemon games what i'm   going to do is i'm going to go ahead and start our  bar right about here and draw all the way across   our screen right beneath our player and then we  can go ahead and start adding attacks right here   right here and then over here this will list  the type of attack we are selecting so what   we're going to do here is actually use html to  add this in since we're developing our game on   the web well we are able to use html and what this  is going to do is allow us to start inspecting our   html elements it's going to make production of  this way easier than if we were to just do this   within canvas so if we have html and css available  to us why not use it so that's how we're going to   go ahead and add in our tag bar interface so let's  go ahead and start what we're going to want to do   is head on over to index.html for a change so  now that we're inside of here i'm going to go   ahead and auto format everything i want to go  ahead and right beneath our canvas i'm going to   start creating this interface so to create this  interface i'm going to start with a simple div   and a div you can kind of just think of this as  any generic rectangle so this is going to act as   the rectangle that goes across our screen right  here so since this is our container i know i want   to style this up quite a bit so the first style  i'm going to add here is going to be background   dash color we use this previously up above and  this is going to be equal to white this is going   to have a full white background and now i want  to go ahead and add a width just to start i'll   say this is equal to 200 pixels and then i'll add  in a height and this is also going to be equal to   200 pixels so i save that and i refresh you're  going to see this is going to be the start   of our attack interface bar so i want to go  ahead and get this overlaid on top of a canvas   right now it is within the document flow because  all divs by default are going to be within the   document flow unless you declare otherwise so to  get this out of the document flow we need to go   ahead and use position absolute similar to what we  did with our overlapping div prior so i can just   go ahead and copy position absolute right here and  then paste it into our interface div right here so   i save that and refresh well it still looks like  it's within our document flow if that's the case   we just need to make sure that we set either a top  a left a right or a bottom property to make sure   that it's overlaid on top of what we want it to  be so what is the parent div of our interface div   right here well it's going to be this div at the  very top the same parent div we're using for our   canvas and the same parent div we're using for  our overlapping div that covers the whole thing   and we know this has a position of relative so  basically when we start declaring top bottom left   or right properties for this div right here we're  basically saying that we're going to place this   rectangle relative to our parent so if i go ahead  and declare a bottom property right here of zero   i save and i refresh you're going to see now  this is zero pixels from the bottom of the   parent element so basically what we said was  find the parent element which is going to be   our huge canvas rectangle so this red rectangle  is equal to this div right here this is our   parent and then since our child right here  has a position of absolute we told our child   div which is this rectangle right here that  we want it to be zero pixels from the bottom   of our parent element so the big red rectangle  right here so that's kind of how that works but   if we want to go ahead and make sure that our  child div right here expands the full width of   the parent element we can also go ahead and add  in a left property and a right property both set   equal to zero so that way when a rectangle right  here has a left of zero we're starting on the left   side of the parent div and then if we go all the  way to the right we're going to make sure that   the right side of the rectangle starts all the  way on the right side of the parent div as well   that's going to make sure it expands the full  width of the parent with a position of relative   all we need to do here is delete our width so  we'll go ahead and get that out and then we're   going to add on left and right properties so let's  go ahead and do that now so to delete our width   well delete our width easy enough but we want to  go ahead and add on a left property equal to zero   and also a write property equal to zero as well if  i save that and then refresh you'll see now that   takes up the full width of our parent container so  that's looking great but now we can't really see   envy so we want to go ahead and decrease the  height or height property right here i'm going   to go ahead and decrease it to something like 140  pixels save and refresh that and that seems to   be pretty darn good we still have a lot of room  to list out our attacks but we can also see our   character right here so now i'd say it's kind of  hard to see where our white rectangle right here   differentiates from our actual battle background  simply because we have a white colored element on   top of white colored and really really light blue  elements they kind of blend in together so we want   to make sure that we help separate this from our  background right here to help separate this we're   going to go ahead and add in a border property  so for a style what we can do is right beneath   where we added right zero we can add in a property  called border this is actually going to take three   separate entities within this one border property  they're going to be the width of the border so how   large we want this border to be i'm going to go  ahead and say i want this to be four pixels wide   the second entity we can add for border property  is going to be the color of the border so i know   i want this to be black to make sure that this  contrasts really well from the background so here   i'll add in black and the third entity is going to  be well what type of border do we want do we want   a dashed one a wavy one i think wave is a property  maybe not but pretty much we're always going to   declare our border is going to be solid this is  required for our border property to work so we   go ahead and save and refresh over here you'll  see our white box now has a border around it   but one thing is we might only want the border on  the top side right here because it doesn't really   make sense to add border for the left right  or bottom of the screens because we don't need   that contrast in place our background is already  black we don't need to add in additional contrast   so we want our border to only take effect for the  top right here what we can do is we can declare   we don't want to reference just a standard border  property but rather a border top property instead   if we change that save and refresh you'll see  the side and bottom borders were taken away   and now only our top border remains next up we  want to start adding an attacks and an attack   type so our attacks are going to go over here on  the left side of our screen we're not sure exactly   how we're going to place them just yet but on the  right side of the screen over here in this little   box we're going to have a type so we definitely  want to go ahead and separate our attacks over   here from our types on the right hand side so to  do this we're going to create two divs inside of   our main div right here our first div is going to  take up just this amount of space and our second   div is going to take up this amount of space so we  know we need to create two divs within our parent   div and then we need to go ahead and style them  so they only take up the correct amount of spacing   so this div right here is our parent div this  is the red div that encapsulates our whole bar   we know inside of this we want two more divs  so i'll create one div and then i'm going to   go ahead and create a second div let's go ahead  and focus in on this first div i know within here   i'm going to have quite a few attacks and i want  these to be clickable so i'm going to go ahead and   use the html semantic element of button and then  i'm going to call this attack one and within this   left hand side div i want to create about three  to four attacks so i'll duplicate that button   three to four times and if i save and refresh  that you'll see these are going to be our attacks   on the left-hand side but we also need to type on  this right-hand side over here so i'll go back and   the second div is going to act as our attack type  so here i don't want this to be something you can   click but i still want it to be semantic within  our html so if i read this i know well this is   just going to be some sort of display element for  display elements you can either use a paragraph   tag or some sort of heading tag i think it kind  of makes sense in this case to use a heading tag   so i'll just go ahead and use an h1 i'm going  to call this attack type so by default an h1   is going to be much bigger than other elements so  if i save this and then refresh over here now we   have attack type in place but it's not where we  want it we want to make sure attack type is over   here on the right hand side so right now our  divs right here are laid on top of each other   this is going to be our first div it's going to  represent the container for all of our attacks   and it's going to extend at the full width of  our parent container and then this right here is   going to be our attack type div it's also going to  extend the full width of our container you'll see   a red container right here is on top of our yellow  container for attack type and that's just the   default way dev elements work because they have  a display of block but if you want to go ahead   and make sure that these are placed next to each  other rather than on top of each other you need   to go over to the parent div and add a display of  flex and by default any child elements inside of a   parent div that has a display of flex the elements  are going to be next to each other rather than on   top of each other so let's go ahead and do that  for our parent div right here i'm going to add in   a display property and this is going to be equal  to flex so i go ahead and save that and refresh   now these are actually next to each other rather  than on top of each other now it might look like   attack type is still beneath our attacks over here  and it kind of is but this is just dependent on   this element's margin one of the nice things about  using html instead of making this interface within   our game is we can go ahead and right click our  element hit inspect and then we can go ahead and   see what styles are applied to our element right  here within our inspector so if i go ahead and   hover over h1 we'll see that it has some orange  bars on the top and the bottom the orange bars   mean this is the amount of margin applied to the  element by default h1s have a specific amount of   margin on them because that is what browsers like  chrome firefox decided should be a default now for   our game we do not want this default at all so  we want to go ahead and change the default for   all of our h1 tags we're going to want to do this  within our style tags up above so right beneath   body we'll add in an h1 and say for all h1 tags we  want to select our margin and make sure that they   have a margin of zero so now all of our h1 tags  will have a margin of 0. we save and we refresh   well now that margin is gone we can hover over  h1 and there are no more orange bars meaning   we did this successfully but you can really see  right here when hovering over the h1's parent div   and also hovering over this div right here that  these are placed next to each other rather than   overlaid on top of each other like they were prior  so now we want to go ahead and put attack type on   the right hand side make sure that these attacks  right here extend most the width of our bar   to do this we're going to go ahead and focus in on  our first div that contains all of our tags we're   going to want to add in a style attribute and  then the style we're going to add on is going to   be width and here we can begin using percentages  to determine what percentage of our full parent   div should we take up with this one div right  here so i'm going to say that the width should   be 66.66 percent of the parent div if i add that  save and then refresh over here you're going to   see inspecting this this block right here takes up  66 of our full parent div see if i hover over that   it only extends all the way over there and  this over here is going to be around 33   and that's pretty much all we need to do to make  sure that these are placed next to each other in   the correct format the next thing i want to do  is center attack type right here right in the   middle of its container div so to get attack type  centered we're going to want to go ahead and apply   a display of flex on top of this one container div  and then you'll see how adding on sub properties   work so we can get this thing centered so we  know for attack type we want to reference this   div right here that surrounds attack type so here  i'll add on a style this is going to be equal to a   property of display we're going to set this equal  to flex so i save that and refresh nothing's going   to change but what adding a display of flex allows  us to do is use sub properties that only work   if we have a display of flex in the first place  so the first property we're going to add on is   going to be align dash items this is going to  be equal to center so i save this and refresh   well that's going to center our h1 vertically  and this only works if we have a display of   flex you'll see if i get rid of display flex  right here save and refresh this just goes back   to its original position we need to make sure  that we have this display of flex right here in   order for that to work the second sub property of  flex we're going to add on is going to be justify   content this is also going to be equal to center  let's save that and refresh well things aren't   looking like we expect them to we would kind  of expect this already be centered within its   parent container but if we go ahead and inspect  this you'll see if i select the h1 right here   it's not taking up the full with the container and  the container well the container itself isn't even   taking up the full width of what it should be we  need to go ahead and add on a specific width for   this div right here to make sure that it takes  up the amount of space on the right hand side   so for our attack type container we can go ahead  and add on a width of what while 33.33 percent   to take up the additional percentage that was  missing when we added on a width of 66.6 percent   to its neighboring div so we save that refresh and  then we inspect our div right here you'll see it   takes up that remaining width and since it takes  out the remaining width justify content center   is actually going to work on h1 to make sure that  this h1 is centered within the containing div   so in summary a line items right here is going  to say for any children within this container   div that has a display of flex i want to go  ahead and take those children and along the y   axis i want to place them right in the middle of  the y-axis and what justify content center does   is the same exact thing but it says take all  the children elements and on the x-axis also   place those in the center that is how these two  sub properties work along with a display of flex   so that's looking good but maybe we want to  go ahead and separate attack type over here   from our attacks on the left-hand side a little  better by adding a border to the left-hand side   of the attack type parent div so we want to add  a left border to our div right here what we can   do is add in a border dash left property this is  going to be equal to the size of the border which   i want it to be four pixels to match our original  border up here i also want this to be equal to   black i'm going to say that this should be a solid  border if i save and refresh that now we have some   differentiation from our attack type and all of  our attacks on the left hand side now our attacks   on the left hand side are buttons and they're  kind of small they're kind of hard to click   i think it makes a little more sense to make sure  that these buttons take up all the remaining space   that we have in this div over here that's going to  make them super easy to click so that our player   has the most enjoyable experience possible so  to get our buttons taking out the full width   of this container right here we're going to want  to go ahead and add on a property of display grid   to this parent container and when we do that it's  going to allow these elements to take up specific   portions of the parent container that way we can  have an attack right here an attack right here   an attack right here and then finally an attack  right here all these little sections right here   are going to be clickable it's going to make  our game really easy to play since we have   a nicely set up user interface so to get this  layout we're going to want to head on over to   the parent div of all of our buttons and here  we're going to want to add on a display of grid   to this parent div if i save that and refresh well  these are already laid out a lot better than they   were prior by default the display of grid property  says take all the children elements and align them   in some sort of grid format but the nice thing  about display grid is we can go ahead and add sub   properties onto that that'll affect this even  more to get the exact layout we're going for   the additional property we're going to  want to add in here is going to be grid   dash template dash columns so this right here is  going to determine how many columns we actually   have within our container div so if we go ahead  and set this equal to two well we're going to have   two columns one on the left one on the right but  once we have more than two elements well we might   want these to stack on top of each other so if we  tell grid template columns to repeat well once we   go ahead and loop through two elements within our  grid we're going to have one right here one right   here and then we're going to repeat into a new  row to say a new element should be placed here   and a new element should be placed right here  so to get that effect we're going to want to go   ahead and call something called repeat and the  first argument repeat takes is going to be how   many columns do we want so here i'm going to go  ahead and say we want two columns one on the left   one on the right for all of our buttons so if i  save that and refresh nothing going to happen just   yet because we need to add in the second argument  right here which specifies how much space should   each column take up well we're going to go ahead  and say that this should take up the full amount   of width of each column so here to get the full  width i'll add in 1 fr which stands for fraction   that just basically means 100 if i save this and  refresh now you see we have the perfect layout for   our attacks and the nice thing about this is if i  go ahead and get rid of these last two attacks say   we only want to deal with two attacks right here  by saving refresh well now these automatically   fill out the remaining space and all of our  attacks text is already perfectly centered so this   is looking really good but you'll notice if i zoom  in here while these buttons have borders and it   doesn't really make sense in this case for them to  have borders so what i want to do is just get rid   of that and i want to apply this to all buttons i  create so i'm going to go up to our style tag and   say select all buttons and here i want to go ahead  and say all of our buttons should have a border   of zero i save and i refresh and that border is  completely gone but by getting rid of the border   well now we got rid of that hover effect for our  buns which was actually pretty nice on the button   it helped indicate what attack we were selecting  so we want to add that back in and we can do that   within our css we can select our button element  one more time and if we add a colon hover and then   some brackets now we can determine how our button  should look whenever our mouse hovers over this   element so i know i want to go ahead and select  the background dash color of our button only when   we hover over it though and i want to go ahead  and change that to a very light gray so here i'm   going to use a hex code and to get a very light  gray we can go ahead and select something like   c c c that should give us a gray we want we save  and refresh we hover over this and that is going   to give us a nice light gray in which we hover  over one of these if we want to go ahead and make   this lighter while we'd go ahead up to the next  value within the alphabet up to something like ddd   or eee i'm going to go ahead and select ddd  right here but if you want to go ahead and make   it darker you would go earlier on in the alphabet  towards a and if you want to make it super dark   while you go ahead and select something like zero  zero zero because the closer you go from nine to   zero the darker the color is going to be within  hex codes so i save that and refresh that seems to   be a light gray in which i can tell i'm selecting  this element it looks really nice in my opinion   now one additional thing here is when i hover  over these elements you'll see our cursor remains   the same we can actually change this to indicate  that these are clickable elements on the screen   to change that we're going to go back to our  css and say we want to reference a cursor   property and set this equal to pointer if i save  that and refresh you'll see right now we have a   default cursor but as soon as i hover over one of  our buttons well it turns into a pointer instead   so just a nice little added benefit to indicate  that these are things that we can click on   when we're playing our game now the very last  thing i want to do for our interface down here   is change our font type right now we're  using the default font i have on my system   i want to go ahead and change this into something  that actually looks like a pokemon style game so   to get some sort of new font for completely free  what we can do is head on over to google fonts so   i search for google fonts i'm going to click the  first result it's going to be at fonts.google.com   and now i can go ahead and find the exact font  i want so by default this is what your screen   is going to look like you can go ahead and search  through all these fonts choose whichever one you'd   like but i already know i want something that  matches our game style and i already searched   through this quite a bit so the font we're going  to use is going to be called press start so i'll   type that in right here and you'll see that  automatically filters all the fonts we have   some 8-bit lettering what we want to do is select  this just by clicking on it and then we're going   to go ahead and select the style right here so it  should look like this for you select this style   i want to go ahead and click it and then if i  click this right here view your selected families   it's going to give me some code in regards to  how i actually set this up within our website   so right here it says how to use on the web  to embed a font copy the code into the head of   your html so all we need to do is copy this code  right here these three links i'm going to go ahead   select that right click and hit copy and now that  i have that copied i can go back to sublime text   within index.html i just need to place these  within our head tag but if we look we don't   actually have a head tag specified our head tag is  typically one of the first things within our html   file so let's go ahead and create that it's going  to look like this just simply head and now where   does this head tag end well it's going to end at  the end of our style tag right here so anything   related to the initialization of your html file  whether it be styles external scripts typically   goes within the head of your site everything else  beneath it typically goes in the body tag but to   get started all we need to do is make sure that  we add head tags around our style tag right here   and then we want to go ahead and paste in those  fonts we're going to want to go ahead and paste   them in as the very first thing within our head  tag because if we do that then we can go ahead and   use them within our style tag basically the styles  from these links we paste in right here are going   to cascade downwards into the rest of our styles  that is why it's called cascading style sheets   so we go ahead and paste that in and save it  well now we can begin making use of this new font   so if we go back to google fonts over here  we scroll down a little more now we have a   property that tells us how we use this font in the  first place so what i can do is i can select this   property copy it with command c go back to sublime  text and now i can paste it on whatever element i   want this font to take effect on so i know i  want this on pretty much every element within   our game including our body our h1 our buttons  so rather than paste us in individually like so   this is just duplicative code instead what we  can do is say right above body we want to select   all elements with an asterisk add some opening  closing curly brackets and say our font family   for all elements is going to be press start 2p  save that and go back to our game in index.html   and refresh now you'll see our new font is  uploaded into our game so the last thing i   want to do is just make sure that these are all  the same size you'll see this h1 over here is huge   and the only reason i'm using h1 is just so i can  see within our html well this is going to be more   of a display label rather than a paragraph or some  sort of button but i do want the h1 size to be the   same as these over here so what i'm going to do  is add in a style tag and say that the font size   for this element right here should be 16 pixels  that is going to be the default of most elements   within html i save that i refresh and that is  definitely smaller but if you look really closely   well this is smaller than this over here so the  default font size of our buttons is going to be   13 pixels while the default of this element  right now is going to be 16. what we want to   do is select our button element and say for all of  our buttons we'll select a font size and also set   that equal to 16 pixels as well we don't want to  do this on all of our elements because sometimes   it makes more sense to give different elements  different defaults but in this case we do want   all of our buttons to have a font size of 16 so  we'll save that refresh and now our buttons are   the same size as our label over here i think this  is looking really good to start for our attack bar   at the bottom so with that we can go ahead and  check off add in an attack bar interface so now   we're going to go ahead and add in our health  bar interface and basically what we're going to   do here is we're going to draw in two rectangles  one's going to be right here on the top left hand   corner of the screen and one's going to be down  here on the bottom right corner of the screen   so this rectangle is going to correspond to mb and  this rectangle is going to correspond to draggle   here we're going to list out draggle's name let's  go ahead and call that his name and here's going   to be envy's name and then within both of these  we're going to draw small little rectangles using   divs this is going to represent our health bar and  eventually as mb or drago lose health over time   these are going to shrink and once one of them  hits zero well we're going to go ahead and remove   them off the screen but in this video we're just  going to go ahead and get these interfaces on the   screen before we add any logic so let's go ahead  and start recreating this little box on the top   left hand corner to do this i'm going to find our  parent div that has our canvas element it's going   to be this div right here and right above our  canvas i'm going to go ahead and create a new div   this is going to represent the top box up here so  within this new div i want to add a style tag and   i know i want the background color of this div  to be white so if we want to be able to see this   while we need to give it some width i'm going to  give it a static width of 250 pixels and to start   we'll say its height will be around 100 pixels  probably going to change that later on but if   we save this go back over here and refresh you're  going to see this is representative of our health   bar and what we're going to put on the screen so  we want to go ahead and overlay this on top of our   canvas whenever we overlay something we're going  to go ahead and add on a position of absolute   and we know this is going to be relative to the  parent div because the parent div has a position   of relative so if we save that go back and refresh  now it's on top of our canvas which is great we   want to go ahead and move this over to the right  a little bit and from the top a little bit as well   to make sure that it has an adequate amount of  spacing so here i can say i want this new div   around 50 pixels from the top of the canvas  and also 50 pixels from the left of the canvas   so i save that refresh now it's  looking to be in a pretty good spot   but it's hard to differentiate from our  background because we're blending in a light   white with a light blue over here so we want to  make sure we give it some contrast with the border   to do this we'll add in a border style and  here we need to specify the width of the border   so 4 pixels what color should this border be i'm  going to say black and then what style solid save   that go back and looking to be in really good  shape so the height of this div right here is   actually going to be determined by the content  inside of it so going back to our code i don't   actually need the height set to anything because  i want to make sure this is determined by the divs   contents so inside of this div if we look back at  this we need some text that represents the name   of the character that is placed on one of these  platforms so inside of here if i want some sort of   descriptive label that's probably going to be the  biggest thing within the element i like using h1   tags personally and within this h1 tag i'm going  to put in the name draggle save that and i refresh   and now the height of this div is dependent on  the actual height of the text inside of it so this   text is just way too big let's go ahead and shrink  it by adding a style tag under h1 here we'll say   that our font dash size is equal to 16 pixels  pretty standard for anything within html to set   it 16 pixels looking pretty good with that but  we do want some spacing around our text and the   box to make sure that this is completely legible  so to add spacing on the inside of a box while we   want to select the box first off and within that  box's style tag we want to use a padding property   and here i'm just going to go ahead and say our  padding should be around 12 pixels for this box   let's go ahead and save that and refresh and that  looks pretty good we have 12 pixels on the top   left bottom and right of our text now to make sure  that it has the adequate amount of breathing room   so now let's go ahead and add in a health bar the  health bar is going to go right beneath our text   and it's going to be green rather than the red  i'm showing in that example over here so to   create a health bar all i need to do is create a  div whenever you need some sort of rectangle it's   pretty safe to use a div within this div we'll  add a style tag and now we want this div to take   up the full width which it already does because  this by default have a display block whenever you   have a display of block it's going to have a width  of 100 percent but we do need some sort of height   associated with this so we can hard code this in  by specifying the height of this div is equal to 5   pixels so now we have a width of 100 and a height  of 5 pixels but we need to go ahead and declare   a background color for this div here i'm going to  set our background color equal to a hexadecimal of   pound d d d i save that and i refresh and you'll  see now we have some sort of health bar in place   but this gray is a little hard to see so if we  want to darken this gray a little bit we'll just   go ahead and say instead of ddd we want to go down  to ccc save that refresh and definitely darken up   a bit this is basically going to represent the  full potential amount of health that a character   has so we do want to separate our health bar from  the text up here and we can do that using margin   so within this health bar we'll go ahead and say  the margin top or this health bar should have   around five pixels of margin so if i save that  and refresh now we have a little bit of space   might even want to go a little further by saying  the margin top should be 10 pixels instead of 5   i think that looks pretty good that's enough  breathing room between our text and our actual bar   right here but i said the bar should be green this  gray bar is just representing the full amount of   health but not the actual health that a character  has after being attacked we want to go ahead and   create two bars so to create a second bar i can  simply copy this gray bar we just created paste   it and then we're going to need to reference a  background color of not this grayish but actually   a green color instead i save that and refresh now  we have a green color in place starting to look   pretty good but what i want to do is overlay  this green rectangle on top of this gray one   and then as we begin shrinking the width of  this green rectangle it's going to show us   how much health we have left over after an attack  has been made so to get that overlaid on top of   this one gray bar right here well we need to make  sure that both of these divs are wrapped inside   of a parent div so i'm going to go ahead and do  that i'm going to wrap these two in a div and then   for his parent div i want to give it a style of  position relative because i know i want to set one   of these child's divs have a position of absolute  which means i can move it around relative to this   parent div right here so for our green bar if i go  ahead and give this a position of absolute meaning   it's out of the document layout and then i give  it a top of zero let's go ahead and save that and   see what happens i save and i refresh and now our  green bar seems to be completely gone while where   to go well thankfully since we're using html we  can debug this pretty quickly we can simply right   click our html element and then hit inspect and  then we can hover over our green bar right here   so it looks like our green bar does exist but if  we look on the left hand side we have a width of   zero and a height of five so since we made this a  position of absolute well it kind of takes it out   of the document layout which does away with its  width completely so here we want to say that the   left of this bar should have a left of zero and  the right should be zero as well and that's going   to make sure that it takes up the full width of  whatever parent element has a position of relative   so i save that refresh and now it takes up the  full width but it's not necessarily positioned   correctly let's continue inspecting over here  in the browser so if we hover over our green   bar you're going to see it has some orange bars  associated with it which means margin is applied   to this element and you'll see right here that  is indeed true we have a margin top of 10 pixels   now that margin top of 10 pixels should only be  applied to whatever element is actually within the   object flow and that is going to be the gray bar  right here we never applied a position of absolute   which means other elements are going to be pushed  down relative to this one element that has height   and width associated with it so here this  is our position absolute it is not in the   document flow therefore we can remove margin top  to make sure that it's overlaid directly on top   of our gray bar so let's go back to our code  delete margin top 10 pixels for our green bar   right here save and refresh and now that is indeed  on top of our gray bar you'll see if i hover over   right here on both our green and our gray bar they  are laid on top of each other directly and if i   change the width of our bar right here and i can  do this directly in the browser by saying width   should be equal to 50 on the green bar you're  going to see this would be representative of   when draggle has been hit and he only has around  50 of his life bar left so that is how we're going   to create the interface for draggle right here  but we need to do the same thing for mb we need   to basically duplicate this and get it on the  bottom right hand corner so i want to challenge   you to pause the video and see if you can do it  on your own so let's go ahead and do it together   i know this div right here and i'm going to  comment this out represents health bar of draggle   basically the enemy so basically what i can do is  copy everything from right here up until that div   and then beneath that i'm going to paste it and  here this is going to represent the health bar of   mb which is us so all we need to do here is  basically change the top and the left positioning   and then the name of the character so let's go  ahead and do that now we'll change draggle to mb   and now we just need to change the positioning  right here so our top is going to be 330 pixels   from the top of our canvas and then let's go ahead  and say not our left but our right is going to be   50 pixels so we're placing this container  50 pixels from the right side of our canvas   i save that and i refresh and now this is already  placed in the perfect position it looks great   because all we did was duplicate the code up here  place it in a new spot and change the positioning   so this is looking absolutely awesome and  that's going to set us up for success when   we begin adding logic into our game so now we can  go ahead and check off add health bar interface   so now let's go ahead and move on to our attacks  first we're going to go ahead and handle tackle   so what is a tackle attack well a tackle attack is  simply going to be when we take our player or the   enemy up here and we're going to move them back  to the side a little bit then we're going to move   them forward and then we're going to go ahead and  cause an animation on the enemy the recipient of   the attack we're just going to push them back and  forth a little bit to show that they have been hit   this is a pretty standard attack within the  pokemon games so i think it makes sense that   we cover this one first plus it's going to be the  easiest to code so i suppose the first thing we   want to do is change one of these attack names  right here to tackle so to do this we'll head on   over to sublime text and we know we can do this  within index.html so head on over there and if i   were to start from the top of this file i would  scroll on down until i find one of our attacks   and it's going to be right here we have attack 1  and attack 2 so let's go ahead and say that attack   1 should actually be tackled if i save that go  back to chrome refresh now we have a tackle label   so now when we click this we want to activate that  attack then we also want to subtract damage from   draggles health bar so how would we go about doing  that well the first thing we need to do is listen   for events specifically when we press one of these  buttons so we need to make sure that we're adding   an event listener to both of these buttons  to do this we'll head on over to index.js   and we're going to find our battle animation  code so if i go ahead and search for that   it's going to be down here at anime battle so  right beneath anime battle i can start adding   in event listeners specific to our battle so what  i want to do is something along the lines of add   event listener and then the first argument here  is going to be what event do we want to listen   for i want to listen for a click event and then  we're going to call an arrow function that counts   logs out clicked just to make sure that this is  working so if we were to just call this by default   well we'd be adding this on to the window  object this is the same thing as calling   window dot when we call add event list by itself  it automatically adds window on top of that   but we don't want to listen for when we click on  our whole window if i were to save this go back   over here and start clicking even if we were to  click over here this consists of a browser window   so you'll see whenever i click on this while we're  still logging out the text clicked we want to make   sure that we only listen for when we click on  one of these specific buttons so we don't want to   attach this to a window object but rather a button  element object so how do we get our button in the   first place well to get our buttons what we can  do is we can call document document.query selector   and then we want to go ahead and add all onto  the end of that so what this does right here is   it searches through index.html and it's going to  go ahead and find whatever element we specify but   it's going to find multiple instances of that  element because when we call this function we   add it all to the end of it so what element do we  want to find within our index.html well i think it   makes sense to put bond right here so if i were  to go ahead and just console.log that out let's   go ahead and wrap all that within a console log  statement like so save and then refresh over here   open up your console you're going to see that that  outputs a node list full of our buttons nodalist   is basically an array it's a little different of a  data type we don't have to worry about it too much   just know that it's very similar to an array so  in newer versions of javascript what you can do   is on top of this node list you can call before  each statement on top of it and here we want to   save for each what within our buttons array while  for each button within our array we're going to   go ahead and call the following so let's go  ahead and console.log out each button we're   currently looping over just to make sure that  this works we save go back and refresh you'll   see now we're looping through our buttons we have  the index.html versions of our button elements   that is perfect that is exactly what we need  to start adding events onto these so now that   we're looping over these what we can do is we can  call the html button element and then we can add   an event listener on top of it so what do we want  to listen for when we click one of these buttons   well we of course we want to listen very quick  but then we want to go ahead and call nro function   to say this is how we're going to respond to that  click so if we go ahead and move this console.log   right here into our button.add event listener code  and get rid of that old ad event listener right   here save and then refresh i'm going to have to  move this over to the side so if i refresh and i   start clicking around we're not going to see that  text logged out anymore but now if i click on one   of these buttons you're going to see we're logging  that out specifically because we added an event   listener only to our button elements so whenever  we click on one of these buttons what do we want   to happen next well i think code wise it makes  the most sense to select one of our characters   such as envy and then to call an attack method  on top of them so we'll do that with mb.attack   we don't currently have this attack method but  if we were to go ahead and think beforehand what   does an attack method need well the first thing  we're going to need is some sort of object that   contains all the data related to whichever attack  we're calling so things such as the attack named   things such as how much damage does the  attack do what type of attack are we launching   we need all that data passed through within this  method right here so that'll be the first argument   data related to our attack the second argument  is going to be the recipient of the attack these   attacks should be interchangeable whether or not  our own character uses them or whether or not our   enemy uses them we need to be able to reuse these  attacks for scalability purposes within our game   so let's go ahead and add these arguments in and  i'm going to do so using one argument which is an   object that contains properties pretty much the  same way i've been doing this throughout this   whole tutorial so i'm going to call enemy.attack  we call an object and now the first property is   going to be what kind of tag we're passing through  this is going to be equal to an object so let's   go ahead and say that the name for this attack is  going to be tackle and then an attack needs damage   associated with it so we'll say tackle has about  10 points of damage associated with it we can add   a type to this i believe the type within the games  are normal for tackle and that is going to be our   first argument while the first property we pass  through the first argument at least it's going to   be an attack property so we have that setup that  specifies the type of attack we're calling now we   want to go ahead and call the recipient of this  attack so we'll add a property called recipient   now who is the recipient who are we fighting  over here it's going to be draggle we created   that sprite right up here so we can go ahead  and say our recipient is going to be our draggle   sprite so now that we're calling attack well  we need to refactor our sprite class to make   sure that it has this attack method inside of it  so we can go back to classes.js find our sprite   class it's going to be right here and beneath  our draw method we can add in an additional   attack method it's going to look like this so we  know attack is going to use one argument which   is just an object but within this one object we  can go ahead and pull properties individually   so what properties do we want to pull in here what  we're going to pull in attack and we're also going   to pull in the recipient of the attack as well so  that's how we're going to go ahead and get those   arguments and now we can begin using them within  this method so as i mentioned for this attack we   want to go ahead and pull envy back a bit launch  it forward and then move it back to his original   position in order to get this effect we're going  to go ahead and use gsat the animation library   we pulled in earlier so within attack what i can  do is i can simply call gsab.2 now what do i want   to animate well i'm going to go ahead and select  this dot position what this does is it gets the   position of whatever instance we created using  our sprite class so now that we have our sprite   position selected we can add a comma and then add  some opening and closing curly brackets to specify   what specific properties within position do we  actually want to animate well we want to animate   the x-axis of our position now what do we want  to animate this to well i want to animate this to   this dot position.x so that's going to be our  current position on the x-axis and then i want   to subtract 20 from it that's going to make sure  that our sprite moves 20 pixels to the left i save   that and then refresh and then select either one  of these buttons doesn't matter right now we're   going to make sure it only works for tackle later  on but if i select one of these you're going to   see that our sprite moves 20 pixels to the left  it's that easy to get this working with gsap   so we know we don't want mb to just move 20 pixels  we also want him to move forward around 20 to   40 pixels to give off the illusion as if he's  actually going forward and tackling the enemy   so if we need to create animations in succession  meaning that we know we want to call an animation   directly after this one but not at the same time  what we can do is use a gsap timeline so that's   going to look like this if i go ahead and create  a const of tl that stands for timeline it sets   this equal to gsap dot timeline with some open  and closing curly brackets it's going to create   a timeline object so this is really cool this  still works the exact same way as gsab.2 right   here so if i were to replace gsap with tl.2 save  refresh and select tackle you're going to see that   we still animate to the left but the difference  is is now if we were to call dot 2 on top of this   select this dot position again and then say  for x we don't want to go negative 20 from   our original x position but rather we want to  go positive 40 from it so what this does is it   says we're going to activate this animation  first where we move 20 pixels to the left   and then we're going to go ahead and activate this  animation where we move 40 pixels to the right   so really cool stuff using the timeline object  right here would be a lot harder to do this if   we were just using that simple gsap object like  we were prior so let's go ahead and save this   and refresh and now select tackle we go to left  and then we go to the right so we're beginning   to create that tackle animation now we do know  we want to go back to our original position once   those two animations fire and complete so at the  end of this dot two we can add in another.2 and   it's a lot quicker to just copy these three lines  right here and paste them on at the end kind of   chaining these together we can say finally we  should return back to our original x position   by removing the plus 40 that's going to make  sure we return to our home position so i save   that refresh hit tackle go forward and then we  eventually move back to where we were previously   now running this animation it doesn't look like a  true tackle simply because mb is doing it really   slowly we want to make sure that when he goes back  and launches forward it's kind of elastic he snaps   forward to really give off that tackle effect so  in order to give off more of a tackle effect what   we can do is within our second animation right  here where we're moving mbford we can specify   how long we want this to take and if we reduce  the duration on this to something like point one   which is really fast it's going to look like as  if he's charging in and really tackling the enemy   so we can go ahead and say that our duration  right here is point one i believe the default   is point five i can never remember that but  i think point one is going to be pretty good   for what we're looking to do so i save that  and refresh hit tackle you can see we launch   forward and that looks pretty good to me and  eventually we go back to our original position so   great i like the way that looks but now what we  want to do is midway through our animation when we   launch forward we also want to create an animation  on draggle to make sure that he wobbles back and   forth to create the illusion as if he has actually  been hit so we know we want this to occur after we   launch forward that's going to be this.2 statement  right here so what we can do here is we can add   in a property called on complete this is just  going to be a simple function here we can specify   what we want to animate when this one animation  completes so we want to call gsap.2 again   and then what do we want to animate well we want  to animate our recipient sprite so our recipient   is going to be the draggle sprite we passed  through therefore we can just grab recipient dot   position because we know we're going to be moving  the x axis right here and then we can add in a   second argument which is an object and say on the  x-axis we want to go ahead and animate this about   let's just say 10 pixels forward if i were to  save that and refresh over here tackle you'll see   well draggle's position actually went 10 pixels  relative to our canvas right here so what we   need to do is make sure that we're not just  referencing 10 but rather our recipient position   plus 10 that's going to make sure that he stays  over here and we're only going to be moving him   forward by 10 pixels from this exact location so i  save that and refresh hit tackle well you're going   to see now he's removed from the game so just  a little bug it looks like and yeah right here   where we're referencing recipient.position we need  to make sure we also add in dot x to refer to the   x-axis so i save that and refresh one more time  hit tackle you'll see that now he moves to the   right by 10 so that's looking good but we might  want him to go back and forth over and over again   so now what i want to do is add in a yoyo property  set that eagle to true and then i want to add in   a repeat property which i'll set equal to five  so what this is going to do is if i refresh and   hit tackle yoyo is going to allow this animation  to go back and forth from its original position   and the repeat is going to say how many  times do we want this animation to occur   so each time draggle goes back or forward  that's going to count as one repeat   so if i go ahead and refresh you'll see if i hit  tackle we go up one two three four five and that's   going to be the end of the animation as we go  back to our original state but that does happen   kind of slowly to give off the effect as if he's  actually been hit we want to decrease our duration   so for these animations i'll decrease their  duration to 0.08 that should be pretty quick   save refresh hit tackle you'll see that definitely  looks like he's been hit over there i like the   way that's looking but we can make this even more  convincing and we're going to do that by changing   the opacity of draggle when he's been hit so we're  going to turn the opacity on and off make it look   like he's blinking as if he's actually been hurt  so what we can do here is we can add in an opacity   property and set it equal to zero so what we want  to do is select a new gsat.2 which means that this   is going to occur at the same time as this since  we're not using any timeline object now what do   i want to animate while our recipient dot opacity  that's what i'm going to want to animate which is   why i can't just plop opacity in here is because  opacity needs to be a sub child of whatever object   you're about to pass through as the first argument  since we're passing through a recipient.position   right here well the children property of position  are going to be x and y that's pretty much all we   can animate if we're to set things up this  way so we do want to call recipient but for   our second argument right here we're going  to say we're going to animate our opacity   down to zero so if i were to save and refresh this  hit tackle well nothing's going to happen because   even though we're editing opacity right here  well we never actually set an opacity property   on top of our sprite class so recipient doesn't  actually have an opacity associated with it and we   never told our sprites how they should react when  opacity is set on top of those objects so within   our sprite class we want to go to the top and  then here we're going to go ahead and add in this   opacity set it equal to 1 by default that means  the sprite is always going to show by default   and now if we want to go ahead and edit out  how our sprite is rendered on the screen   using this opacity property right within our draw  method we can add in c dot save and at the end of   draw image we're going to add in c dot restore  so the reason i'm adding these two in is because   i want to use a global canvas property and if i'm  going to use a global canvas property what's going   to affect everything on our canvas what save and  restore does is it says if you're about to use a   global property within save and restore it's only  going to affect all the other code inside of it   not everything within your canvas that is why i'm  adding in c dot save and c dot restore so after c   dot save i can call that global property which is  going to be c dot global alpha and i'm going to   set this equal to this dot opacity so if we did  all this correct we save and refresh everything   still looks the same our opacity is taking  effect but if i decrease this opacity right here   to 0.2 save and refresh you're going to see  that all of our sprites now have some sort of   opacity associated with them we can see behind  them really cool stuff but we know we only want   this to activate when we actually hit an enemy  so i'm going to make sure that our opacity is   one by default that is totally okay and now back  underneath attack we know we are interpolating our   opacity down to zero so let's watch what happens  with just this code we already have save refresh   hit tackle you'll see he eventually fades out over  time that's great if we eliminate the enemy but   we don't want to eliminate him unless this health  bar is actually down at zero so instead what i'm   going to do is i'm going to go ahead and say  i want this to repeat over time let's go ahead   and say this should repeat five times and i want  this to yoyo as well that way we end up back at   one which we started out at so i'll say yoyo equal  to true and i want this to happen pretty quickly   the same speed we called this animation right here  so i'll grab this duration property and add it in   to where we're fading out our opacity so i'll  save refresh and then hit tackle and you'll see   that looks really good for our receiving animation  on getting hit so now we need to actually decrease   draggle's health bar whenever he gets hit by that  attack to do this we're going to head on over to   index.html and we're going to find draggles  health bar so if i scroll on up we made some   comments right here that says this represents  the health bar of draggle that is perfect   so what i want to do is find the green health  bar section that's going to be this right here   which we can tell since background color is  equal to green i want to go ahead and add an id   onto this and say that this is going to be  enemy health bar so if we go ahead and set   an id right here on top of this div now if we go  back to classes.js we can select that id directly   and then animate it so now that we have that id  in place how do we actually decrease the width   of our enemy's health bar well we know right here  within complete this is where enemy actually gets   hit so within here we can call a gsap.2  on top of an element that has an id as   indicated with a pound sign of enemy health  bar the same id we created within index.html   so now that we have this element selected  what do we need to do well we need to go ahead   and select the element's width and then decrease  it so let's go ahead and just say by default this   is going to be equal to 50 let's save that refresh  hit tackle you'll see that goes down to 50 percent   that is perfect that's exactly what we want  but we do want to declare the width of this   health bar should only go down by the amount of  actual damage we pass through within this attack   object right here so looking back within index.js  remember we pass through an attack object that has   a damage property associated with it we want to  select that damage property and then use that to   decrease our enemies width right here so instead  of referencing 50 what i'm going to reference is   attack dot damage which we pass through right here  and then i want to make sure that i add on to this   a percentage string so that this knows our width  should be some sort of percentage and not some   static value refresh and then hit tackle you're  going to see that goes down to 10 because that is   actually what attack dot damage is what we really  want to do is get a recipient's health which is   going to be 100 to start and then once they get  hit that's when we're actually going to subtract   10 that's going to give us a more accurate  result compared to how much damage tackle should   actually give off so if i want some sort of health  associated with our sprites what i can do is i can   go up to our sprite class and say this dot health  is equal to 100 and then later on if you want to   scale your game you can assign different health to  different enemies so if you have a really strong   enemy you can give them a health of one thousand  two thousand doesn't really matter however you   want your game to go you can go ahead and increase  this by passing it through as an argument but for   our case it's okay to lose this as just 100 for  a simple game so i'm going to go ahead and say   that both our player and our enemy's health  should be 100 and now when i'm animating our   health bar right about here what i want to do is  i want to subtract from our health so this dot   health the damage that's coming from our attack  and then i'm going to add on this percentage   right here now if i'm going to use this.health  when i call on complete i can't use this syntax   because this.health is going to be within the  scope of this function right here if i want to   go ahead and get this.health outside the scope of  this function i need to make sure that oncomplete   is actually an arrow function like so so now i  can get this.health from our class that is perfect   and now i'm going to subtract attack.damage from  it so if i save refresh hit tackle you're going to   see that only goes down by 10 that is perfect  so that's going to take care of the beginning   for this tackle animation and responding to it  with our health bar but we also want to make   sure that our enemy can tackle us that way we're  making our game as scalable as possible and that   way we can just reuse attacks whether it be for us  or the enemy on the other side of the platform so   if we want to go ahead and reuse this for our  enemy what we can do is head on over to index.js   and instead of calling mb.attack we're actually  going to call draggle.attack so we know we want a   tackle animation but our recipient in this case  is going to be envy so we just want to replace   those two so let's go ahead and save and refresh  and see what that looks like if i hit tackle now   well you'll see that almost actually lines up  which is pretty awesome honestly for how much   we've actually coded but we do know when we call  tackle we want draggle to line up in the other   direction and then launch forward so we just need  to edit our code a little bit within classes.js   basically the code we're going to be editing  is going to be this 20 right here and this 40   right here so we're going to want to create a let  called movement distance this is going to be equal   to 20 to start now what we can say is if we're  using an enemy by declaring this dot is an enemy   then we want to go ahead and change our  movement distance to a negative value   so movement distance in this case would be equal  to negative 20 instead of 20 like it is right here   so now what we can do is we know right here  this declares how far back do we want to move   we can replace this with this let that is going  to be determined on whether or not we're using   an enemy and here we want to go ahead and  replace that with movement distance times 2   because we know that was supposed to be a value of  40 so 20 times 2 is going to be 40 we move forward   40 pixels we save and refresh tackle  still looks the exact same because draggle   does not have an is enemy property associated  with it so we scroll on up go up here here we   can declare this dot is enemy is equal to well it  kind of depends i think this is something we'll   actually have to pass through as an argument up  here so this that is enemy is going to be equal to   is enemy now we can go ahead and add this  to our argument constructor list right here   say is enemy by default is going to be  equal to false and now all we need to do   is find draggle and index.js which is going  to be right up here on line 3 33ish for me   and now i can add in that property that says is  enemy set eagle to true and that should change our   distance code within our attack animation right  down here so if i save refresh hit tackle now   he's moving back and when he goes forward while we  still get the same reaction from envy right here   really cool stuff but something else we need to  take into account is when we run this animation   while we shouldn't be subtracting draggles health  we should be subtracting envy's health dot here so   we need to do basically the same thing we did for  our movement distance we just need to say that let   health bar so the health bar element by default  is going to be equal to what well enemy health bar   so i can go ahead and say that this is equal to a  string with an id of enemy health bar but if this   is an enemy then i want to go ahead and set our  health bar equal to what well our player health   bar which we can get with an id of player health  bar now if we're going to go ahead and reference   our player health bar we need to make sure  that we're setting this within index.html   so we know right here this is our enemy health bar  but if we're going down this right here is going   to be our player health bar so i can go ahead and  right here where the background color is green i   know this is going to be our player health bar so  once i add that id in i can go back to classes.js   see that that matches up so now that health bar  is assigned based on whether or not is enemy is   equal to true we want to make sure we're actually  animating our health bar that we're referencing   the correct id so go ahead and get rid of this  down here the static value of enemy health bar   and then reference health bar instead so  i save that refresh hit tackle you'll see   now that subtracts from mb's health bar rather  than draggles and we want to go back to index.js   and just switch within our event listener draggle  and mb one more time to make sure that all this   code works in reverse so envy is going to attack  draggle instead save refresh over here hit tackle   everything looks great and we do subtract from  draggles health bar now one more thing that i   want to do before we finish up tackle is you'll  see if i hit tackle again well this just isn't   subtracted over time it just stays in place even  though we damaged draggle one more time we want   to make sure that the subtracts for each instance  we call tackle so this is a pretty easy fix right   here when we're assigning our health bar's width  to this dot health minus attack.damage we're never   actually setting this.health to a new value for  each instance we call attack we need to make sure   that we do exactly that so what i'm going to do  is i'm going to take this statement right here   right beneath where we're calling our timeline  i'm going to go ahead and say that this   dot health is equal to this.health minus  attack.damage this is going to make sure that   this updates over time so that when we go ahead  and call while this.health right here it's going   to animate downwards for each instance we actually  call attack and if you want a shorthand version of   this well this right here is the exact same thing  as minus eagle attack damage just a little way   to clean this up in your code a little bit to try  to make it as readable as possible so i save that   refresh hit tackle one more time that decreases  if i do it again continues to decrease and it'll   continue to decrease until we hit zero and that's  just not going to show anymore we're going to add   some logic in there that ends this battle as soon  as that happens but i think this is a pretty good   place to go back to to do and then check off  attacks tackle all right so now we're going to   move on to our fireball attack so how's this going  to work well essentially here's what's going to   happen is on top of mb we're going to create a new  sprite right about here and then we're going to go   ahead and animate that sprite over to dragon's  positioning we're going to go ahead and subtract   from his health make him shake a bit but that's  essentially the gist of it the main thing you need   to know is we're going to be creating a sprite on  top of envy and then animating it to give off a   realistic effect now before we do that though you  might notice over here we're still using attack 2   for this button let's go ahead and start changing  that over to fireball so within index.html we're   going to want to find attack 2 and i'm going to  go ahead and change this to fireball save and   refresh and now we have an option for fireball but  you'll notice once i click this we're currently   activating tackle so now we're going to want to go  ahead and find some sort of way to make sure that   when we click fireball right here we activate  a fireball animation and when we click tackle   right here we activate the tackle animation so we  want to differentiate between the two to do this   we're going to go into index.js and we're going to  find where we are creating our event listeners for   our battle so i'm going to scroll on down a bit  until i find animate battle it's going to be right   here and then down below you'll see that this is  going to be our event listeners for our buttons   you can go ahead and list these are our attack  buttons so this is where we're going to want to   determine what attack are we currently clicking  so what we can do here is within our actual event   listener we can pass through an event object so  if i console log out or event object it's going   to give us tons of different properties associated  with the actual click of one of these buttons but   i already know on top of this one event object  i want to reference the current target this is   the current html element we're clicking it's  going to give us our button html and once i get   that button html on top of that i could call enter  html and that's going to give me the text inside   of our button html so if i go ahead and save this  and i refresh and make sure i have my console open   and then i go ahead and click fireball you're  going to see that it's giving you the contents   of this button right here simply the text fireball  if i do the same thing for tackle you're going to   see that gives me tackle so we want to go ahead  and select the event object for the current button   we're clicking on get the current target that's  the html element and finally we want to call it   enter html to get the text so now based on this  text right here we want to go ahead and get a   data object associated with the attack we chose so  this is a data object associated with tackle has a   damage 10 and a type of normal we want to go ahead  and do the same thing but get the data object   for our fireball so the name would be something  like fireball have more damage be a type of fire   so basically what i want to do here is not  reference an object directly for attack but   i'm going to go ahead and take this on out i'm  going to cut this current attack object and i   want to go ahead into our data folder and here i'm  going to hit command n to create a new file so i'm   going to go ahead and create a const and set this  equal to an object and then i'm going to save this   by hitting command s within data i'm going to save  this as attacks.js so what this is going to be is   a comprehensive list of all the attacks we can use  within our game it's good to make this organized   separated from our game logic because now we  know we can change this in one specific location   but the rest of our game is still going to work  because we're separating our data from our view   so inside of this const i'm going to go ahead  and say well what was that first attack that i   had it was called tackle that is going to be the  property name this is going to be equal to the   tackle object that i just cut out from index.js  and you'll see i actually forgot the const name   right here this should be attacks so make sure  you put that right there when you're declaring   cost obviously cos needs a name but within this  text object we have our first tag listed out   it's going to be tackle so now that we're here  we can duplicate tackle and then add a comma   to the end of this and we can begin creating our  next attack you think of whatever you would like   create whatever attack you want right here and  then you can implement the associated animation   to create the effect you want this is going to  be really scalable and really cool so instead of   tackle i want to go ahead and reference fireball  and i know the name for this is going to be well   fireball for fireball the damage for fireball  should be a little higher so i'm going to say   that it should be equal to 25 and then the type  for this is going to be fire so now we have the   two attacks we want within our game we need to  make sure that we import this into index.html so   we have our data slash battle zones we have data  collisions we're also going to want data slash   attacks dot js so this right here just references  data attacks.js and we want to make sure that we   call this before classes in index.js because since  we're importing this the old school way well we   need to make sure that this is loaded before we  can actually use it within classes or index.js   so make sure you save right here within index.html  now back within index.js we should be able to   select that attacks const so when i go ahead and  click i want to log out to the current inner html   but i also want to log out attacks and since we're  importing this the old school way this is going to   be available to us by default we imported it with  index.html and within attacks.js we call it const   attacks so this is what we're currently selecting  is the cost of attacks and that's what we should   see when we console.log this out let's go ahead  and comment out this code right here save refresh   and then hit fireball and you'll see right here we  can't logged out that object that contains all of   our attacks so now if you think about this we're  logging out the button we currently clicked on   which is fireball and now we have two properties  inside of this main object which represent our   attacks how do we select just fireball right here  well this is how we're going to do it we're going   to select our attacks object which we already  have and we know we want the fireball object   which has a name a fireball so what we can do here  is add some brackets and then take this right here   our current target inner html paste it inside of  the brackets get rid of the first const log save   and refresh so now we're going to be using this  text right here to select within our main attacks   object the attack we want to use if i go ahead  and select fireball you'll see now we are grabbing   the data specific for fireball but if i go ahead  and select tackle now we're getting all the data   associated with tackle and this is a really nice  way to get things because within attacks.js since   we're assigning this to an object we're basically  using some hashmap functionality to really really   quickly grab the data inside of these we're not  using an array so we don't have to loop through   all of our data set to find what we're looking for  we're just immediately getting the attack we want   so we're also keeping performance in mind here  we're using a hash map which is very very very   quick for selecting whatever data you would like  to grab so this right here is going to give us our   selected attack and if we have trouble remembering  what this actually does it's probably a pretty   good indicator that we want to create a constant  or some sort of variable so i'm going to go ahead   and cut this out of the console.log delete  the console.log and let's say this cost that's   selected attack is going to be equal to this right  here this is the attack we're currently selecting   so now we can uncomment this code right here and  say for attack the attack we want to use we're   going to set that equal to attack we just selected  based on the click so if we save and refresh this   well using fireball is still going to have the  same effect same thing with tackle they're just   both going to activate the tackle animation the  only difference being is when we use fireball it's   taking into account the fireball damage so that's  already set up which is great but we do want to   make sure that we're activating a different  animation specifically for fireball so here's   what we're going to do we're going to go on over  to classes.js and right with an attack we want to   go ahead and call a specific animation based off  of our attack's name so right here i'm going to   use a switch statement to say i want to switch out  our attack name with specific cases the first case   is going to be tackle so this way when we call  tackle we only want to activate the following code   between our case statement and this break  statement right here that means all this code   right here is associated with our tackle animation  so i'm going to cut that paste it in between our   case and break statement and now whenever we call  tackle we're going to activate all this code right   here responsible for our animation but now when  we call fireball this is no longer going to fire   so if i save that to refresh we hit tackle  tackle still works but if i hit fireball no   more animation in place which is great now we can  go ahead and create a new case right above tackle   that says what happens when our attack name  is equal to fireball well if that's the case   we want to call the following code between  this case statement and this break statement   so what's the very first thing we want to do here  whenever we call fireball well we want to create a   new sprite which is going to house the image for  our fireball animation so to get this fireball   animation we want to go into our pokemon assets  folder within google drive go inside of images   and then we're going to want to get fireball.png  so i'm going to go ahead hit command c and then   i'm going to go back to our project directory  so pokemon game image and then paste that on   in so now i have fireball in here and you'll see  this is just a simple sprite sheet for a fireball   also obtained from the ninja asset pack for free  so now that that's in place i can go ahead and   begin creating a new sprite within this case  statement so i'm going to declare a const set   it equal to fireball this is going to be equal  to a new sprite so what does this right take   well it's going to take a position with an  x and a y so where should this be spawned   well our fireball should be spawned somewhere  where mb is placed so we know we can get mb's   position with this dot position dot x and then for  y we can be y position with this dot position dot   y and then we need some sort of image associated  with this new sprite so i'll say our image should   be equal to a new image element that means  we need to create this new image element we   can do so right here so i'll say const fireball  image is going to be equal to a new image object   like so and then i need to set the source for  this so i'll say fireball image.src is equal to   what well we're currently within classes.js so we  can hit dot slash we know we want to go within our   image folder so we'll hit img and then finally we  want to select fireball.png which we just dragged   in so i'll grab fireball.png and now that i have  fireball image and have the source attribute set   right here when we are creating a new sprite  i can go ahead and set that image equal to   fireball image so if i save refresh everything  it's still going to look the same because   now that we have a fireball sprite created we need  to actually render it out within our animation   loop how would we do that well within index.js  we're going to want to go ahead and make sure   that we push this newly created sprite into  something that renders out with an animate battle   currently we're rendering out our battle  background draggle and envy but we need to render   out things that are dynamic such as newly created  attacks so what i want to do here is create   a const and this is going to be called rendered  sprites so i'm going to set this equal to an array   but i already know what i want to do with this  so right here i'm going to start looping through   this with render sprites dot 4 each and then  i can say for each sprite within this array   i want to call that sprite's draw function  now this isn't going to change anything but   what this allows me to do is push new sprites  into this array and by default they're going to   be rendered out because we're going to be calling  the draw method just based on this loop right here   so what i want to do to be safe with my code is i  want to push this through as an argument whenever   we actually select an attack so i'm going to copy  this right here when we call attack for whichever   sprite is actually attacking here we want to go  ahead and put through the rendered sprites array   so basically we're going to grab this push it into  our class and then we're going to push a sprite   into this through our class we're just going to go  back here and draw out the sprite but now within   classes.js all we need to do is grab the rendered  sprites that we passed through attack right here   and then we'll say for our rendered sprites we  want to push in the new fireball sprite we just   created so this is our fireball sprite we're  pushing it into rendered sprites which we're   getting through our argument right here so by  doing this we should see the sprite render down   on the screen let's go to save refresh hit  fireball you'll see our sprite is indeed   rendered out that is perfect to start now we want  to get this animating so we know we need to add a   few more arguments when we create this sprite the  first one is going to be frames we know frames is   going to be an object with a max what is the  max amount of frames with the sprite right   here well we can count them one two three four  simple enough right so max is going to be four   and then how long do we want these to hold for  i think it makes sense by default to say 10   so we'll just put 10 right there and then finally  we know in order for this to animate without us   moving we need to say that this animate property  should be equal to true so if we save that   and refresh and then hit fireball now we have a  moving fireball on top of mb ready to be launched   onto draggle so let's get this thing moving from  mb over to draggle so to get our fireball moving   what we're going to want to do is call gsap.2 now  what do i want to animate well our fireball sprite   specifically its position so now that i have its  position grabbed i could say for the x position   i want this to animate to our recipient's position  on the x-axis so our recipient is going to be   simply draggle right here now we want to do  the same thing for y say we want to get the   recipient's position on the y-axis so draggle's  position on the y-axis and on save and refresh we   hit fireball and you'll see that travels over to  draggle so once this travels over to draggle the   next thing we want to do is remove our fireball  from our render array because we know we no longer   need it we're just going to take it out of our  animation completely so what we can do here is   when we call gset.2 we can call on complete we're  going to set this equal to an arrow function   and whenever we complete this animation right  here we're going to grab our rendered sprites   array and we know that we just pushed in a new  fireball and since this was the last thing pushed   in we can simply call pop which just removes the  very last element of an array from the very end   so i call rendered sprites.pop on complete  refresh hit fireball as soon as it touches   draggle it's removed from the scene perfect  so now let's go ahead and make sure that when   the fireball hits draggle while he still shakes  left and right and has that opacity effect this   is going to be quite simple we already know we  did this within tackle so what we can do is find   where our enemy actually gets hit it's going  to be right here we want to grab all this code   related to our enemy getting hit copy it and then  paste it into this on complete when our fireball   actually hits draggle so i go ahead and add this  in here we're going to go ahead and animate our   health bar we're going to go ahead and animate  draggle's position and also draggles opacity   but right here if we're trying to animate our  health bar you'll notice up above health bar   isn't actually declared before any of this code  so we know health bar is declared within tackle   we want to grab this right here we know our health  bar is going to be global and used within every   attack we actually call so if i grab these two  lines take them out of tackle and paste them right   after attack that's going to make them globally  accessible within each of our case statements   right here that is what we definitely want so  now that health bar is available to us you'll   see that we can use it within our oncomplete right  here for whenever we call fireball so i save that   and refresh i call fireball we're going to get  the animation where he moves left and right no   opacity fades out but you'll notice our health  bar did not actually decrease over here and   that's because we need a little more refactoring  you'll see right here within width we're using   this.health but let's see where is this dot health  available to us where are we actually changing it   well the only place this.health is  being changed is currently within tackle   but we know this.health is going to be changed  for each instance we actually call an attack   so we can take the code right here cut it out of  tackle and same thing we did with our health bar   we're just going to go ahead paste that codon in  and say for whatever attack we just used we want   to subtract from this current sprite's health the  attack damage that was passed through right here   i save that refresh use fireball we subtract 25  damage from draggle if i use tackle now we're   subtracting 10 so it works for both tackle and  fireball now another thing we might want to do   is make sure that our fireball spawns in front of  envy not behind him just give off a little bit of   realism for our game so to get this rendered out  in front of mb we need to determine the z index of   where this fireball is rendered out on our screen  in relation to envy and draggle so to start we're   going to want to go over to index.js and focus on  animate battle right here so we have our rendered   sprites array but currently the only thing inside  of this is going to be our actual attack sprites   rather than things such as draggle or envy what  we want to do is actually put draggle and envy   inside of this array to start so to do this we  can grab draggle put them within rendered sprites   and then also grab embi put him in there too and  now that we're putting these inside of rendered   sprites while we're going to loop through those  sprays and then call the draw method on top of   them so this code is duplicative we don't need  to call these two lines right here might even be   a little cleaner just by starting with this make  sure you save and refresh and that these two are   still be rounded out which they are and now when  we create a fireball sprite when we click this   right here we're going to create that sprite and  we're going to place it right in between draggle   and mb so we're going to draw a draggle we're  going to draw our fireball but since we're drawing   our fireball before envy it's going to make sure  that the fireball is drawn in front of envy rather   than behind him and it's a good thing that it's  drawn after draggle because we want to make sure   that the fireball actually shows on top of draggle  rather than goes behind him so that's why we're   going to be placing our fireball in between the  two rather than before or after so whenever we   push into rendered sprites which is going to be  within classes.js specifically right here we don't   want to push into it anymore because push means  place the spray at the end of the array so to get   this effect what we can do is we can call rendered  sprites but we're going to use a splice method   instead so the first argument for splice is going  to be the index in which we want to go ahead and   either place something or take something out so  the index in which we want to place something if   we look within index.js is going to be 1 because  draggle is going to be 0 mb is going to be 1.   we want to place our attack actually where mb  is and push mb to the right so we're going to   put one right here for a destination index and  then how many elements do we want to remove   after this index well zero we don't actually want  to remove anything we want to keep mb where he is   just push one to the right then finally what  element do we want to add here well it's going   to be our fireball so now that we have the splice  code here this is going to function exactly the   same but put fireball right before envy within our  array we can delete push save refresh and watch   closely where envy is you should see the fireball  spawned in front of him rather than behind him   hit fireball that is indeed spawned in front  of him and then it is spawned on top of draggle   which is great but in the end you'll see empty  disappeared because if we look at the very end of   our animation we're popping off the last element  within render sprites which is now going to be mb   so instead of calling pop what we want to do is we  want to call splice and then we want to determine   from what index do we want to take out an element  well the first index because that is where we put   fireball right here and then how many elements  from this first index do we want to take out   well simply just one and that's all we need to  call here to make sure that we're removing our   fireball rather than mb so i save and refresh i  hit fireball you'll see the fireball is removed   perfectly now another thing i want to do to our  fireball is make sure that it's rotated correctly   right now it's currently facing up it is not  rotated in the correct direction to actually   hit draggle so i want to make sure we give off  as much realism as possible by adding in some   rotation to our sprite sheet right here so to add  a rotation to our attack sprite well we know our   tax break uses our default sprite class here we  can add in an additional property called rotation   and this should be equal to whatever rotation  we pass through as an argument right here   so i'll add in that argument of rotation  and by default this is going to be equal to   zero we should not have any rotation by default  but if we do pass through a property of rotation   well we need to edit how our image is actually  drawn out on the screen so rotation is also going   to be a global canvas property which means  we need to use this within save and restore   to make sure that it only affects this image  right here and not everything within our canvas   now rotating elements with our canvas is a pain  in the butt but here is how we're going to do it   we're just going to assume that we're rotating  envy rather than our fireball for illustration   purposes so when we call a global function like  c dot rotate by default it starts on the very top   left hand corner of the canvas and then it goes  ahead and rotates from this one point up here   we want to make sure that we're rotating from  the center of whatever sprite we wish to rotate   so what we need to do is we need to translate this  point right here to the center of whatever sprite   we want to rotate which means we need to call some  functions like c dot translate to get this point   right in the center so that's what we're going  to start off doing is translating our point to   make sure that we can rotate this correctly so  right after save i can call c dot translate this   is a global canvas translate function which is  going to move that rotation point so by default   this starts at 0 0 which is going to be the very  top left hand corner right here now how would i   get this moved from the top left hand corner to  the top left hand corner of our actual sprite   well the top left hand corner of our  sprite right here is going to be defined by   this dot position dot x and this dot position  dot y that is going to give us the top left hand   corner of our sprite but we want to rotate from  the center of our sprite so our point is currently   right about here how do we move this point to the  center of our sprite well we're going to want to   add on to the top left corner our sprite's width  so this dot width divided by 2. we're going to do   the same thing for position.y but instead add on  this dot height divided by 2 and that's going to   make sure that our point is moved into the center  of mb right here so now that the point is moved   right here in the center of mb we can call c  dot rotate which is going to give us the perfect   rotation on whichever element we edit the rotation  of so after we translate that point we can call c   dot rotate and rotate is going to take degrees but  in radians so radiance is a whole other topic i   definitely recommend checking out my circular  motion video to learn a bit more about them   but to give you an idea of what rotate takes the  value 0 is going to rotate our sprite by wall   0 radians but if we want to go ahead and rotate  this by a full 360 degrees we go ahead and say   that that should be equal to 6.28 math pi times  two so we only want to rotate this by about   one radian i think that should be right so let's  go ahead and call c dot rotate by one which is   going to be one radian that should rotate at about  45 degrees i believe let's just call that see what   it looks like but now that we call rotate we  want to translate that point which we moved   on top of every right here we want to translate  all the way back to the beginning of our canvas   otherwise canvas is not going to render this out  correctly in the correct positions so to translate   that back we can simply call c dot translate again  all this code right here we're just going to call   it after we call c dot rotate and then we're going  to make these negative values so let's say we want   to translate back by our current position and we  want to subtract from this our width divided by   2 and our height divided by 2. so all that's doing  is moving our point from here back up to the start   of our canvas where all of our canvas elements are  drawn relative to so if we save this and refresh   you're going to see everything is indeed rotated  but these are all the things we created using   the sprite class within our game so we rotated  everything by one rating which is about 45 degrees   you'll see this is about 45 degrees ish but we  don't want to rotate everything by default we're   only going to rotate by the actual rotation we  set whenever we create a sprite in the first place   so we say we want to rotate by this dot rotation  well we declared that rotation by default right   here is going to be equal to zero so since  that's equal to zero by default if we save that   and refresh everything's back to normal the only  thing we actually want to rotate is going to be   our attack coming from envy so where is our attack  being declared it's going to be whenever we call   a case of fireball right here when we're creating  a new sprite so here we can add in an additional   property called rotation and now if we go ahead  and set this equal to something like 1 radian   save and refresh everything else still looks  the same which is great but if we call fireball   you'll see that was rotated almost perfectly  to look like it's actually traveling towards mb   watch one more time hit fireball and that's  rotated perfectly and creates a really awesome   effect for our fireball attack now finally the  last thing we want to do is make sure that this   works if we were to receive a fireball from an  enemy so dragonball is a normal type but let's   say we create another fire type enemy well we  want to make sure that this animation we just   created works for the enemy as well makes sense so  in order to do this we want to go to index.js and   here where we're calling mb.attack we're actually  going to call draggle.attack instead and say that   the recipient should be mb which means it's  going to come from draggle to mb down here   so save that refresh and let's just see what  it looks like if i go ahead and call fireball   well that looks almost perfect almost the only  thing i would say we need to change is going   to be the rotation of our fireball so based on  whether or not we have an enemy we're going to   rotate that in a different direction so over on  classes.js we need to change rotation right here   based on whether or not we're referring to an  enemy so at the very top let's just go ahead and   say that this is going to be global to start we  can declare a let called rotation this is going   to be equal to 1 by default so now that we have  a line of rotation we can go ahead and get rid of   this equal one right here and just use rotation  like so because this without assigning it to   anything is the exact same thing as this if this  has the same name as the actual assignment you do   not need the assignment or the colon this is the  exact same thing it's just shorthand so it's a   little cleaner so that should still work the same  save and refresh and fireball and it does indeed   look the same but we want to make sure that we're  rotating that based on whether or not this is an   enemy launching it so here beneath light rotation  we can call if this is an enemy what do we want to   do we want to set our rotation equal to something  else so let's go ahead and say that our rotation   should be equal to negative 1 for our radians  instead see how that looks we're just going   to do some guesswork for this in order to get  this done as quick as possible save and refresh   and that looks a bit closer let's go ahead  and declare this should be negative two   save and refresh that's pretty close maybe we want  to touch it up a little bit by saying negative 2.2   save and refresh i think that looks pretty good  for our fireball coming from an enemy so just   to make sure this works we want to go back to  index.js go back to mb and switch out and be for   draggle right here save and refresh one more time  and now this should still be rotated correctly   when it comes from ebby still hit fireball and  indeed it is so looking great so we can go between   fireball and also tackle now i think that means if  we go back to to do we can successfully check off   attacks fireball so the next thing we're going  to do is queue up dialogue for our game so what   do i mean by this well whenever we click one of  these buttons right here whether it be tackle or   fireball well we want to display some text on top  of this that shows what attack we just used then   we're going to want to queue up some dialogue for  whatever attack our enemy uses but we do need that   dialogue in place so we understand what exactly is  going on within our battle sequence right here so   the first thing we're going to do is we're going  to create that dialog container and basically it's   just going to be this large rectangle that's  overlaid on top of all this stuff right here   so we're not going to see our attacks we're not  going to see our attack type or anything like that   we're just going to see text overlaid in the top  left hand corner right here so how do we go about   developing that well we're going to want to head  on over to no other than index.html and then we   need to decide where we want to put this container  within our html so i think it makes sense to put   it within this div right here this div right here  represents everything within this red rectangle   currently we're just going to create another one  that's overlaid on top of that so we know this   one div is our main white container we're going to  create a div inside of it and i'm going to write   some dummy text it doesn't really matter what you  write inside of there i just want to save refresh   and make sure that shows up which it does so it's  showing up but it's affecting our other layout   within our attack box specifically for tackle and  fireball we're going to want to make sure that   this is positioned absolute we don't want other  items being pushed around by this one container   right here we want this one container to overlap  everything within this bottom bar so to do this   we can add a style tag and say our position is  going to be absolute that's going to take this   div out of the layout just with that we save and  refresh you're going to see it's no longer pushing   things around which is great but we do want this  to fill up the entire width of that container so   to do that with a position absolute element we  can do it with top zero right zero bottom zero   and then left zero so we're saying the sides of  this rectangle right here should be a distance   of zero from the top right bottom and left of  the parent div that has a position of absolute   or relative so we do that and now it's going to  extend the full width and height of the container   but we can't really tell because we need to add a  background color to this as well so i'm going to   add in a background dash color set that equal to  white refresh and now you can see that takes out   the full width and height of that container div so  this is looking great for our dialog box but we do   need some padding right here otherwise our text  is going to be a little hard to read so to add   some padding here we'll just add a padding style  let's say that this should be equal to 12 pixels   so i save that and refresh now our dialog box  is looking really good so now that we have this   dialog box in place we really only want it to  show when we choose an attack or when the enemy   attacks so by default you'll see when i refresh  while it's showing we don't want that so actually   we're going to add in a display of none to the  style tag right here and that's going to make sure   that that box is hidden and we can select elements  that would be behind it otherwise so now we want   to go ahead and show that box and populate it with  text based on which attack we choose so if we want   to populate this box we need to give it some sort  of id and i'm going to give this an id of dialog   box with a capital b so now that i have an  id here i can go ahead and select that within   index.js classes.js wherever we want to select it  so if we think about it i think it makes sense to   actually select this within classes.js and change  the text based on which attack we actually chose   whether it be tackle or fireball so we know  whenever an enemy attacks while we run the   following code but we're also going to want to  unhide our dialog box so here we can do that with   document document.queryselector and we want  to select an element with an id of dialog   box like so that is how we're going to get our  element now that we have this element we can go   ahead and reference its style property and on top  of that we can say what style do we want to change   within javascript well we're going to change  the style of display let's set that equal to   block that was the default before  we set it to none so we save that   and refresh and now if we choose an attack  whether it be tackle or fireball now that   displays again but this doesn't make any sense  we want to make sure that this text is legible   and actually exhibits what attack we just used so  we're going to extend this a little further we're   going to select our dialog box again which i can  do just by copying document.queryselector and now   i can change its inner html with some new text so  if i write in new gibberish right here even longer   save and refresh and then use one of these you'll  see now we have that new text in place so we're   going to want to grab the name of the sprite  currently using the attack right now if we look   on our sprite properties we don't have anything  associated with name so we're going to want to add   that i'm going to add that with this dot name and  set it equal to whatever name we pass through and   then our property right here so name by default  isn't going to have anything associated with it   that is totally okay but now we can go ahead and  use this dot name right here when we're setting   internet html for a dialog box so i want to  say our dialog whenever we tag is going to   be equal to this dot name so this is going to  be something like mb or draggle we want to say   mb used so mb space used space what did they use  what attack did they just used well they're going   to use the attack we passed through right here  and that attack definitely has a name associated   with it already so basically what we're saying  right here is mb used fireball or tackle but   this isn't going to work unless we concatenate it  with pluses so i'm going to add those in between   our variables and our string right here and now if  i save that and refresh if i use fireball you're   going to see we populated the text with undefined  use fireball we're only getting undefined right   here because when we created our mb or draggle  sprites while we never passed through that name   property we just created so we need to make sure  we do that we can go over to index.js and then we   can go ahead and find our battle animation which  i'll do with command f and find animate battle and   it's going to be right here on line 364. so now  i know above this well this is where i created   the ambient draggle sprites so let's start with  draggle i'm going to go ahead and give him a name   property of draggle now i can go ahead  and use that within the actual class   same thing for embi i'm going to give him a name  of abby so i save i go back and i refresh and now   when i use fireball you're going to see it  says abby used fireball and i can't really   go to the next step in this process which we're  going to get to but i think before we get there   it actually makes sense to refactor a code a  little bit you might have just noticed while it   was kind of hard for me to find the animate battle  function that's the case and things are getting   hard to find well that's a good clue that you  should probably refactor your code a little bit   so what i want to do is move all of our battle  sequence code into a separate file and that way   i can easily differentiate between our battle  sequence code and also our map animation code   so what contains everything related to our battle  well looks like everything right here where we're   adding event listeners onto our button everything  from the bottom right here if we go on up to   our battle background image i believe that is  everything associated with our battle i want   to go ahead and cut all that out everything else  seems to be related to our map which is perfect   i want to save this file and then i'm going to go  to file new file and i'm going to paste all that   code in so once i paste all this battle sequence  code in a new file i'm going to hit command   s to save it and then i want to save that within  a root directory i'm going to call this battle   scene dot js so i save that and now we have  battle scene js within our project but we do   need to import this within index.html so where do  we want to import this relative to our other files   well a battle sequence might use stuff that is  available within classes in index.js so i think   it makes sense to import this as the very last  thing within our current script tags so i'm going   to go ahead and grab this last script duplicate  it and say for our very last script we're going to   reference battle scene dot js so i save this and  refresh and everything still looks and functions   the exact same but our files are definitely a  little cleaner because now we know all of our code   related to our battle is going to be within battle  scene and then maybe within some of our classes or   data files now getting back to this whenever we go  ahead and click this dialog box whenever it shows   a new dialogue we're going to want to activate  our enemy's attack and then we're going to want to   update this text with the enemies attack i'm going  to show you how to do this in the most scalable   way possible that i'm aware of at least so the  first thing we want to do is add an event listener   to our dialog box so that when we click on it we  can react to it in some way so to add that we're   going to make sure we're within battlescene.js and  here we want to select with document.queryselector   we want to select the element with an id of  dialog box that's going to grab our dialog   box over within index.html and that is right here  perfect so go back to battlescene.js and now that   we have this we can add an event listener on top  of this what event do we want to add well we want   to listen for a click event and then we want to  call the following code within an arrow function   that says clicked dialog so we're just doing this  to make sure that it works we save we refresh   right click to inspect and then open up our  console right here now when we click fireball we   shoot that attack we have our dialog box and if we  click the dialog box you're going to see it says   clicked dialog now it's not completely apparent  that when you hover over this dialog box that is   clickable because we never change our cursor  to the pointer we can do this really quickly   within index.html our dialog box right here has  a style we're going to add on to the style cursor   pointer now when we save and refresh that hit  fireball you'll see now when we hover over our   dialog box the user knows that this is something  that can be clicked on to go to the next sequence   within our scene so when we click on it all we're  doing right now is logging out clicked dialogue   what do we actually want to do well we can start  off within battle scene js by hiding the dialog   box so let's start off with that to hide the  dialog box well we know we're already clicking   on it with document query selector dialog box so  what we can do is when we go ahead and call this   arrow function in response we can get the event  object inside of it which is represented with e   and then on top of that event object i can call  current target and that is going to get the html   element we are currently clicking on it's going  to be dialog box so once we get this element then   we can call the style object on top of it and say  we want to reference our display property and set   that equal to what well none we're going to set  it back to its original state so now if i save   refresh hit fireball and then click on this you're  going to see it disappears and then we can go on   to the next sequence at least we can we never  actually told draggle that they can attack though   it's not really fair if the enemy can't attack so  what we're going to do here is create what's known   as a q this is a data type that's used in software  engineering quite a lot if you've taken interviews   you might have heard of this but essentially a  queue is just an array and inside of this array   we're going to have different data types or  different functions in our case we're going to   have different functions and these functions are  going to be which attack should draggle be using   which attack should our enemy be using so our  attack options are either going to be fireball   or tackle so cue is essentially going to function  as a line the functions in the front of this array   are going to be called first and then once they're  called they're going to be shifted out of the   array and then we're going to call the next item  in line so to give you an example let's say that   draggle sequence is going to contain a tackle and  then it's also going to contain a fireball attack   so we push these into the array and then  what we're going to do is we're going to call   tackle and then after we call tackle we're going  to shift it out of the array that means it's no   longer available to us so draggle just attacked  mb we just used tackle now within our queue the   only thing left is fireball so dragola is  then going to use fireball attack envy all   the way over there and then there's nothing left  within our queue because we shifted out fireball   so our queue is empty now that our queue is empty  what can we call well no other than e dot current   target style display none basically when our queue  is empty we're going to hide this dialog box which   means it is our player's turn to actually initiate  an attack and then the sequence to go and continue   but that q is great for giving draggle options in  which he can go ahead and use when it's his turn   on his side of the field so to create this cue  right above document.queryselector i'm going to   create a const called q and set that equal to  an array this is going to be empty by default   now whenever we go ahead and select an attack  on our end within this event listener right here   we're going to tell embi to attack but at the same  time we're going to push into our cue array so we   can do that with q dot push now what do we want  to push in here well we want to push in actions   that draggle is going to take so those actions  can be called with arrow functions we're going   to push in an arrow function and then we want to  call draggle.attack so i'm going to copy this code   right here where we're telling empty to attack  and then push it within this new arrow function   but i know this q represents when draggle  is attacking so instead of calling mb.attack   i'm going to call draggle.attack instead we  know the recipient for this should be envy   and draggle's attack should not be the attack we  personally selected it's going to be something   else so we need to make sure that we're grabbing  either tackle fireball we'll randomize it later   but to get the data object for the attack we  want to use for draggle what we can do is select   our attacks data object and if you need a quick  refresher attacks is defined within attacks js   what attack do we want to grab well for draggle  i think it makes sense to just give him tackle   so back within battlescene.js i can reference  our attacks object i know i want to tackle so i   reference that with a dot capital t-a-c-k-l-e and  now that it's going to be draggle's attack within   the queue so if i were to save and refresh  this nothing would actually happen because   even though we populated our queue with what  attack is supposed to happen next well we never   actually called the function within the queue  so we want to call that function when we click   on our dialog box it's going to be right in here  what we can do is we can say if our q dot length   is greater than zero meaning we have items within  our queue to be called then what do we want to do   well we want to go ahead and select our queue get  the very first item within it and then we're just   going to call the function that we passed through  so basically when we call this right here we're   calling this right here which causes draggle to  attack now after this q function has been called   how does a queue work while you shift off the  first item within the queue so what we can do   is select the queue and then call shift and that's  going to delete that item out of the queue meaning   that our queue would soon be empty in this case  so this all looks great but now we know we don't   want to set our e-current target display  equal to none unless this is equal to false   so we can go ahead and just write an l statement  right here and pop that right after it now it's   only going to be called if our queue is empty  meaning it is our turn to attack let's get rid   of this console log as well we no longer need  that but now if we save refresh use fireball   that looks great but now if we click on this we  should see draggle attack with tackle so i click   we see that tackle event now our queue is going  to be empty because remember we called q dot shift   that got rid of this function that we just called  right here so now that it's empty we should hide   our dialog box on click so we click our dialog  box now it's gone we can proceed with our battle   sequence i can go ahead and use tackle and then if  i click this again we have something in our queue   then draggle is going to use tackle so the really  nice thing about using the q data structure is   we can push in multiple attacks or draggle or  multiple sequences in which we want draggle to   respond to so for instance if we want to go ahead  and push in a new attack for draggle meaning that   he should attack twice we can simply copy this  code right here and then beneath it we can go   ahead and call it again q.push but this time let's  say we want to reference attacks.fireball instead   so if we save this and then refresh use something  on our end and we use fireball and click first   draggle is going to use tackle we go back to our  code we just used this attack right here so what   comes next what's going to be attacks.fireball  but only if we click so let's go ahead and click   and now he just used fireball and that was  subtracted from mb but now we have nothing   left within our queue so what happens while we're  going to set the dialog box display equal to none   and now we continue with our game so that is going  to be a really awesome way to start cueing our   dialogue so now we're going to want to go ahead  and populate attacks based on the chosen monster   so what do i even mean by this well our chosen  monster is just going to be empty right here   this is our monster but each monster is going to  have a certain amount of tax associated with them   the thing is tackle and fireball right here  are statically placed within our html we need   to make sure that we populate these dynamically  based on which attacks are associated with each   monster so to start the first thing we're  going to do is head on over to index.html   and we're going to find our attacks they're  going to be right here tackle and fireball   we're going to want to delete these completely  because we're going to populate them based off   of our monster data but we do want to add an id  to this div right here i'm going to call this   attacks box and that attack is definitely plural  with an s because it contains multiple attacks   most likely so make sure you add an id of tax  box and now within battlescene.js right before   we call animate battle right here we're also  going to want to populate that div with the id   of a text box that we just created so to do that  we can select it with document dot query selector   we can grab our id with a pound sign and get that  with attacks box and now we can call dot append   if we go ahead and write some text in here save  and refresh well we just appended some text inside   of that box but we don't want to append just text  we want to append an actual button element so to   create a button element right above this we can  create a const called button this is going to   be equal to document dot create element and then  what kind of elements do we want to create well no   other than a button element so now we have a  button element created and stored within our   constant button we can select our button and say  that the inner html of this button is going to be   equal to what well let's just say fireball to  start so we set the inner html now we want to   append this button into our text box so i'll go  ahead and do that by referencing our button const   save go back to our game refresh and now we have  a button a fireball in place and it still works   as it did before but we want to populate this  dynamically so we are going to use this code   right here but this is going to be based off of  what data we actually have in relation to each   monster within our game so forever using large  amounts of data it's pretty safe to create some   sort of data file similar to what we did for  attacks that way we separate our data from our   game logic so we have attacks.js which references  our attacks let's go ahead and create a new file   save it and then call this monsters.js so this  file is going to contain all the data related   to our monsters whether they be envy or draggle  it's going to contain all that information so   let's start creating this with a const of monsters  this is going to be equal to an object and we know   we are using mb so as our first property  we're going to declare mb with a capital e   and then what kind of data does mb possess well  we know if we look within our battle scene and   we're scrolling up and these data is everything  right here within new sprite so what we can do   is we can grab this object right here we're using  within our constructor cut it out and then go back   to monsters.js and assign it to our mb object so  it's going to look something like this so this   is all of our data related to mb but you'll see  right here for image we're using a const called   mb image so within battlescene.js we need to make  sure we grab that as well it's going to be these   two lines of code let's cut them out save go back  to monsters.js and now at the very top of our file   we can go ahead and paste those two lines in so  this is looking great for our data object but we   do need to make sure since we created this new  javascript file that we actually pull it in via   our index.html so where do we want to place this  in relation to everything well i think it makes   sense to place it right after attacks because  we are going to want to make use of our attacks   objects so right after attacks i'm going to create  a new script and reference monsters.js as well now   if i go back to battlescene.js all i need to  do here is make sure that when i create a new   sprite that i reference the envy property right  here within our monsters object to get the exact   same result as we had before so when i create a  new sprite i'll go ahead and reference monsters   and then select envy with a capital e if i save  go back to our game and refresh while everything   is still going to function the same which is  great i know it doesn't look like much but for   code organization this is going to be perfect for  what we want to do so we just cleaned up our code   quite a bit within our actual implementation in  battlescene.js now we can do the exact same thing   for draggle so i want to go ahead and challenge  you to pause the video and create a new draggle   monster type within monsters.js and see if  you can get the game working like it was prior   so let's go ahead and do it together right here  when we're creating a new sprite we know that   this object right here represents draggle i'm  going to go ahead and cut this out head on over   to monsters.js and then i'm going to create a  new property inside of here called draggle with   a capital d and then i can paste in the object i  just cut out now i know dragon image right here   needs some sort of image associated with it so i  know that was created within battlescene.js it's   going to be these two lines right here simply cut  those out save this file go back to monsters.js   and then at the very top i can paste in draggle  image everything looks great within this file   let's go back to battlescene.js everything's  looking pretty good here but when we create a   new sprite for draggle well we want to reference  our monster's object and then reference the dragon   property on top of that that we just created  so with just this save and refresh everything's   still working these are still rendered out on the  screen but our code is much cleaner this whole   battle scene file is only 68 lines of code which  is pretty awesome for how much we've actually done   so one of the big reasons i created this data  type from monsters.js was so i could add in   an additional property and that additional  property is going to be called attacks and this is   just going to be equal to an empty array to start  i want to make sure that i place this on both mb   and draggle and all this does is represent what  attacks should these characters have so if we want   to go ahead and reference certain attacks well we  know our attacks are all defined within attacks.js   so what we can do is within our attacks array for  mb we can grab our attacks const which is given to   us through attacks.js and then what attack do we  want empty to have well you have two options right   now tackle and fireball so we're going to say  within this array we want envy to have an attack   of tackle and that should actually be a  capital t make sure you get that right   and then envy should also have an attack of  what while also fireball with a capital f   and then we'll do the same thing for draggle  down here and we'll just give him an attack   of tackle to start so now we're populating this  attacks array with attack objects which is great   and we can see that being passed through into  our new sprite class right here the thing is if   we go ahead and check out the sprite class at the  very top we don't actually have any constructor   property related to attacks now this sprite class  is being extended so much to the point where it   probably makes sense to extend this class and  create a completely new one based off of it our   default sprites shouldn't do things such as attack  they're not going to have an attacks property in   the first place so it doesn't really make sense  to add that onto our default generic sprite class   so let's go ahead and extend this into a monster  class right beneath this class of sprite i'm   going to go all the way down and right above our  class of boundary i'm going to create a new class   called monster with a capital m and say that this  extends our sprite class up above so by default   when we extend a parent class like sprite it's  going to give us all the methods available within   that class so things such as draw attack those  are all going to be available within our class   of monster but we did say to ourselves a generic  sprite should not have any method of attacking so   i'm going to go ahead and grab this attack method  scroll all the way down to where that ends should   be right about here i believe and if you just  missed a bracket like i did you can delete that   last bracket but we do want to paste that within  our new monster class i'm going to paste that in   and since i missed a bracket i need to make sure i  add that last bracket in so this is all great now   we have an attack method within our monster class  and our sprite class up here is definitely more   generic but we still want to continue refactoring  our sprite class to make sure it's as generic as   possible it's only there to animate sprites not  have sprites attack each other so if i look at   our properties right here what is associated with  attacking and what is just going to be generic   well i know this name property that we just added  in is only for monsters so i'm going to want to   take that out of our class of sprite and i know  when we use is enemy well that's pretty much only   for our battle sequence as well it doesn't make  sense to keep that within our generic sprite class   so what i'm going to do is i'm going to copy  those two lines right there i'm actually going   to cut them out is enemy and name and then i'm  going to go down to our monster and then say i   want to add in a new constructor that's going to  take an object and then i'm going to paste those   two in and then we need to make sure that this  is a function for our constructor just to start   but i want to keep analyzing the code up above  for refactoring purposes so those two properties   is enemy and name are also assigned down here  we want to take those two out but you'll also   see we have health assigned to a hundred well  health is only available for our monsters so i   want to take that out as well and make sure  that i put that within our monster class so   i'm actually going to grab these three properties  right here related to monsters not generic sprites   cut those out and then paste them within our  constructor function right here now one of the   tricky things is with extended classes we need to  make sure that we put all the properties that we   want from our initial constructor inside of our  child constructor so we're also going to want to   grab all the other argument properties right here  and then paste that within our new constructor   and that looks great and then finally if we want  to go ahead and say that these should be assigned   just like they're assigned up above with these  lines of code right here within our generic sprite   what we can do is within our monster  constructor is we can call a super function   and then within here we can say what properties  should be assigned based on the parent well we   can declare those with an object because we're  using object syntax within our constructors   and then we know we want everything from rotation  up to position dependent on our parent the only   thing that's really different for our monster is  going to be his enemy a name so we don't need to   do anything there but we do want to grab these  arguments right here place them within super   but when we place these within super they can't  be assigned to anything those are going to be   assigned based off the parent so any assignments  we need to get rid of those and now all these   properties right here all of their assignments  are going to be dependent on this code right here   within their parent class so it should be pretty  good in regards to creating our new monster class   let's go ahead and make sure that all this works  correctly so now that we have this class in place   we want to make sure that we save the file with  command s we'll go back to battlescene.js and now   we're no longer creating a new sprite for draggle  we're creating a new monster and same thing   for mb we're going to create a new monster for  him as well so if we save and refresh looks like   everything went according to plan because our  sprites are still rendered out on the screen   now let's go ahead and test our attack if i use  fireball that still seems to work and the tackle   attack for draggle still seems to work as well  so great we just refactored that successfully   so now that that's refactored within classes.js we  can begin adding more properties onto our monster   class so another property i want to add on to this  only for monsters though not our generic sprite   is going to be attacks so when we pass through an  argument of attacks we're also going to say that   this instance should have an attacks property  assigned to it based on the actual attacks we   passed through right here within our constructor  so to recap if we go back to battle scene you'll   see we are passing through a big object that  represents all the data related to draggle and mb   we go back to monsters and something we added  inside of here was going to be attacks which   is set equal to an array that contains our tackle  and fireball attacks so now that we've refactored   everything these are going to be available to us  within our class of monster because we're saying   that this that attacks should be equal to the  attacks we're actually passing through we could   test that these are in place by constant logging  out either draggle or mb i'll call log out mb   save and then refresh over here right click hit  inspect go to console and you'll see now we're   logging out a monster if we open this up it has  attacks associated with it this is data related to   fireball and also tackle now we can go ahead and  begin using these to populate this section right   here and later on it's also going to come in handy  for randomizing draggles attacks on the other end   so now that these attacks are available to us we  know that our character is going to be mb and the   code that we're using to generate a button is  right here so what i can do is i can call embi   select mb's attacks and then i can call for  each on top of this for each what well for each   attack within our attacks array i want to call the  following arrow function now what do i want to do   all i want to do is call these three lines of code  right here i'm going to paste them in within that   four each and then i know while our button.enter  html shouldn't always be equal to fireball   but rather the attack name that we're looping  over so if i save that go back here now you'll   see this is generated dynamically we have tackle  and fireball and if i were to go ahead and edit   one of these attacks over here within attacks.js  whether it be the fireball name let's just go   ahead and type in some gibberish save and refresh  now that's populated automatically and it's really   nice because we only have to edit this in one  spot that's related to only our tax data we   don't have to go ahead and search through all of  our other code like we would have to otherwise   but in summary if you want to go ahead and add new  attacks for your player or for draggle over here   here's what you're going to want to do you're  going to want to go ahead and create a new object   within your attacks so if i were to create one  and simply duplicate this paste it in and call it   something else determine its damage and its type  once i have that new attack created i would go on   over to monsters.js and then whatever character i  want to have that new attack i would add it in as   a new item within our attacks array right here so  something like attacks dot water shot or something   like that so that right there would go ahead and  populate a new bun within our button tabs right   here and then finally what i want to do is go to  classes.js and within our monster class i would   want to go ahead into our attack function and  determine how an attack with a name of water shot   should be animated so i'd add a case of watershot  and then we'll go ahead and create all the code i   need to juice that to create the correct animation  of that water shot so you want to go into attacks   monsters classes.js and then edit your monster  class to add any new attacks to your game but   with that we can go ahead and check off populating  attacks based on the chosen monster next up we're   going to randomize attacks specifically for our  enemy so right now if i were to refresh this we   have tackle and fireball for ourselves which is  great we use fireball but right now dragon only   has one attack and that is tackle maybe we want  him to randomly choose fireball with a 25 or 50   chance how would we actually do that well we're  going to want to head on over to battlescene.js   and we're going to want to scroll down to where  we're actually pushing into our cue for draggle   so it's going to be right here within our event  listener whenever we click on one of our buttons   so right now we're saying that our first attack  should always be tackle and our second attack   should always be fireball so this is actually  pretty easy to do now that we added that attached   property onto our monsters object what we can  do now is we can select our monster so draggle   then get attacks the attacks array and within this  we can randomly select whatever attacks are within   this array so randomly select something we're  going to use math.random which always selects   any random value 0 to 1. and then we're going  to multiply this by draggle.attacks.length so   the length of draggles attacks array which is  going to be 2 because we have tackle and we have   fireball so when we call math.random times our tax  length we're essentially getting any value zero   to two but that also includes decimal numbers  and you can't select something from an array   using a decimal so what we want to do is we want  to wrap all this code in a math.floor statement   and that's going to round us down to the nearest  whole integer so now with this code we can only   get either 0 or 1 and it's going to be completely  random based on the length of attacks that draggle   actually has within his attacks array so this  code right here can be kind of hard to comprehend   on first glance so that's a good case in which we  want to create a const this is going to be called   random attack so i'm going to assign all that  code to random attack and now we can go ahead   and push into our queue the random attack that was  just selected so we don't actually need draggle to   attack twice so the second q dot push i'm going to  get rid of that but now every time dragon attacks   it's going to be completely random based off the  attacks within his attack array so we want to   make sure that the attacks are available within  his array in the first place so we go over to   monsters.js we look within dragon's attacks while  he only has attacks.tackle let's go ahead and add   attacks dot fireball in here as well and now this  should be selected on random so if we save this   make sure battlescene.js is saved as well go  back to our game use fireball when we click   dragon should use either fireball or tackle and  we want to go ahead and do this a few times to   make sure that it's actually randomized going  back and forth between the two so if i click   that time we got fireball great that worked  perfectly so we go back we choose we use tackle   what does dragon use next draglee's tackle  so perfect we saw both options right there   be used let's go ahead and make sure that it works  one more time please fireball dragon used tackle   in that instance so it's completely random we went  from fireball to tackle to tackle and that really   creates a lot more dynamic movement within our  game to make it more interesting make it something   that people would actually want to play for longer  so thankfully for us that was really quick let's   go ahead and check off randomizing attacks alright  so now we can go ahead and display our attack type   so when we're over in our game when we hover over  one of our attacks we want to make sure that we   display what kind of attack that is whether it be  a fire attack an normal attack water tagged and   so forth we want to display that over here just  so the user knows what we're about to use so in   order to do this we're going to want to go inside  of battlescene.js so if we go ahead and find our   event listeners for a button they're going to  be right about here so we're going to go ahead   and loop through each button that is currently  within our buns container right here and that is   perfect for adding more event listeners onto those  buttons you'll see we're adding one right here for   click and we want to go ahead and right after  that add event listener for click add a new one   specifically for our buttons so we're going to go  ahead and call the button we're currently looping   over and then we're going to add an event listener  this is going to listen for mouse enter so when   the mouse enters our button what do we want to do  well we want to respond with the following code   so we go ahead and console.log this out and just  say go when we enter one of our buttons save that   open up our console and then refresh now if i go  ahead and enter one of our buttons you're going to   see that we log out the text go and then only logs  on each time i enter one of the buttons which is   perfect for what we need to do so whenever we  enter one of our buttons while we want to get   the attack that we currently hovered over whether  it be tackle or fireball so if we look within our   click event listener up above we're currently  selecting our attack with the following code   so what we can do is we can grab this line and  put it inside of our mouse enter event listener   now if we want to go ahead and use this code well  this makes use of our event object so we can go   ahead and pass that through right here so now  that we have our event object we're getting the   current target which is our button and then we're  getting our inner html which is going to be the   name that's actually placed inside of the button  and then we go ahead into our attacks object and   from this we're able to get the selected attack  so now that we have the selected attack what do   we want to do well we want to change the inner  html of this right here so let's go on over to   index.html and find where it says attack type i'm  going to keep on scrolling down and it looks like   it's going to be here on 152 for me with an h1  that has a tag type inside of it so now that i   have this h1 found i can go ahead and add an id to  it and call this attack type makes sense so once   i add this id to this h1 here i can go back to  battlescene.js and now i can go ahead and select   that id how do i select that id well i want  to reference our document object and then call   query selector and then once i have query  selector in place i need to reference an id   which is indicated with the pound sign of attack  type so now i have that h1 now i can change   the inner html of the h1 to what well i want to go  ahead and change it to our selected attack which   is going to be an object but what is inside of our  attack data objects if i look within attacks.js   you'll see one of those is going to be type well  we can go ahead and grab this type property by   going back to battlescene.js and then on top of  our selected attack we want to go ahead and call   the type property on top of that so really that  should be all we need to do to get this up and   running if i save that go back and refresh  now when i go ahead and hover over fireball   you're going to see the type is fire and then if  i hover over tackle the type is going to be normal   now what if we want to go ahead and change  the color of this over here based on which   type we're hovering over maybe a fire type has a  color of red a normal type has a color of black   and then a water type has a color of blue how do  we go ahead and change the color of this over here   well inside of our tax data we can go ahead and  declare a color associated with each attack so   if i want to go ahead and say that our color  for tackle should be black i'll add in a color   property and then set that equal to a string of  black now i can do the same thing for a fireball   just make sure that i add a comma here and then  paste in a new color property and then say for   our fireball attack the color should be red so now  that i have a color associated with each attack i   can go back to battle scene js and when we enter  one of our buttons we're not just going to change   the inner html i'm going to copy this line right  here paste it we're also going to reference the   attack type h1 style and then on top of style  we're going to go ahead and reference the color   property so this is going to change the color of  our text so how do we grab the color that we want   well we have our selected attack and we know this  is either going to be tackle or fireball which   means we're going to have a color of black or red  and we can reference that color with dot color   so now we're going to go ahead and set the  style of color on top of our h1 of attack type   to either red or black so i save that go back  and now when i enter one of these right here   you're going to see fireball is displayed as  red and then tackle is displayed as normal so   just a little enhancement to make sure that a user  knows what type you're about to use on the enemy   that's pretty much all we have to do within our  to do's to display our attack type now finally   we need to declare when this battle ends so  eventually when we go ahead and hit draggle enough   or when draggle hits us enough with the correct  ability well he's going to lose all of his health   and then he shouldn't be able to respond after  he loses all of his health we pretty much just   want to say that either draggle or mb fainted and  then we want to go back to our map so we want to   focus in on where we are queueing attacks for  draggle which is going to be right about here   you go ahead and comments out say draggle or enemy  attacks right here and now we only want draggle to   really attack if drago has health that is above  zero if dragon's health is zero or below then we   don't want to attack we want to go ahead and push  in an event that makes draggle faint and then we   can go back to our map so above this i'm going  to go ahead and write an if statement that says   if draggles health is less than or equal to zero  then we want to go ahead and call the following   code so here we want to select our q dot push i'm  just going to go ahead and grab this from below   paste it into this if statement we know we don't  want draggle to attack so we can go ahead and get   rid of this but instead i think it would make  more sense to call a method on top of draggle   called faint so when we call faint what do we  want to do well we want to go ahead and pop up   our dialog box to say that draggle fainted we  want to go ahead and animate draggle downwards   fade them out that's a pretty classic way to  end things within the traditional pokemon games   but i think that's all we need to get started  we might add some more in as we go so let's go   ahead and call draggle.faint if dragon's health is  less than zero and then we don't want to call any   of this code down below we don't want to push in  a dragon attack so if struggle's health is below   zero we're just going to return which means we  don't call any of the following code but we do   need to add in this faint method so we're going  to go over to our classes and this is going to be   specifically on our monsters class so if we want  to add a new method we just have to find a spot   beneath our constructor and above one of our other  methods or below one of our methods doesn't matter   but we're going to go ahead and add that method  in by typing faint parentheses and then opening   and closing curly bracket so now if i go ahead  and console.log this out such as faint whenever   dragon's health falls below zero we should see  this text logged out so now you'll see if i   hit draggle with fireball i hit draggle and if i  click again well actually nothing was logged out   even though we said within battlescene.js that if  draggle's health is below zero we want draggle to   faint whenever we click our dialog box so let's  go ahead and click this again and maybe we'll   see that he fainted i'll click it and we don't get  that text logged out that we put within classes.js   we should definitely be calling faint right here  so what is going on why are we not calling faint   why is dragon's health not below zero well we need  to inspect our attack class actually so if we go   ahead and look at properties related to health  they're going to be starting right about here what   we're saying is whenever we go ahead and launch an  attack well we're actually damaging our own sprite   launching the attack so when i'm controlling mb  this not health is related to mb not the recipient   but when we launch an attack we don't want to  subtract health from ourselves we want to go ahead   and subtract health from the recipient the person  receiving the attack which is going to be draggle   so right here anywhere where we have this dot  health we just want to make sure that we change   that out for recipient.health instead so just a  small little bug on our end it's totally normal   to come across bugs as you develop something this  big so wherever it says this dot health within our   attack method such as right here within gsap.2  we want to replace this with recipient so we'll   keep on scrolling down that's also going to be  available within our tackle case so instead of   this.health i want to reference recipient.help and  i think if i go ahead and search for this.health   well those are going to be the only locations  left within our actual attack method that's the   only location in which we need to change them  so just make sure that you change this.health   to recipient.health to get to the correct effect  but let's go ahead and save this refresh and see   if that fixes things so i'm going to go ahead and  bring draggle back down to zero and now on this   final attack we go ahead and hit him and i click  again you're going to see we called that faint   method so perfect it works now simply because we  have that small bug related to our sprites health   so now that we're calling faint what really needs  to happen well we know we need to change the text   that's going to be placed inside of here we want  to go ahead and say draggle or mb fainted so how   do we change the text that's inside of here well  we know we're changing that text right about here   when we select our dialog box and set its inner  html equal to the name of our current sprite   and what attack they used so we can go ahead  and copy this line delete our console.log and   then paste that in and now what do we want to  set our innerhtml to so how do we change this   up well we do want to reference the name of the  monster that's currently fainting and then all we   need to do is change the end string right here to  something like fainted exclamation point that way   this would say something like dragon fainted or  mb fainted so that's going to go ahead and give   us a start in regards to changing the text right  here but we also want to go ahead and animate   draggle or envy so that they translate downwards  and fade out over time so we can do this right   here within faint we're going to call gsap dot 2  what do we want to animate well this dot position   the position of the monster we're currently  selecting and then we want to go ahead and animate   the y axis so i'm going to go ahead and push the  fainted monster down by about 10 pixels maybe 20.   so i can do that with this dot position dot y  plus 20. so we're animating downwards from the   current y position and then we want to go ahead  and edit the opacity of this monster as well   so i'll call gsap.2 again and then say for this i  want to go ahead and animate the opacity of this   one monster down to zero so now if i save that  refresh and bring draggle back on down to zero   once i hit him again goes down to zero and  if i click watch what happens to draggle   you're going to see that he fades out we display  the text draggle fainted and now when we click   this we can either go back to our map or we can  display one more option i think we're going to go   directly back to our map i think that makes sense  but we do need to take care of the event in which   envy fades and not draggle so if the enemy wins  we need to make sure that we call that same effect   over on mb so to test whether or not mb is held at  less than zero what we want to do is copy this if   statement right here and you might think that  we want to paste this down below but actually   what we want to do is paste this after draggle  attacks because we don't know whether or not   mb's health is actually below zero until dragon  actually attacks therefore we have to paste this   beneath where dragon attacks so if i go ahead and  paste that in we're going to attack with draggle   and then after that attack we want to monitor  whether or not if envy's health is less than zero   and if so we're going to take our q and then call  and be feigned after that attack occurs so if i   save that and then use tackle and he uses fireball  on us you'll see we go down to zero and if i click   we're going to see ambifate did we fade out to  zero and now we can proceed on to transitioning   back to our map so it's going to allow checkout  functionality in regards to when our battle ends   so now we're going to want to go ahead and  transition back to our map when either draggle   or mb faints so to do this we're going to go back  to battle.js and whenever draggle faints we also   want to go ahead and push something new into our  queue so drago is going to faint and then we're   going to push in a new action item so what needs  to happen here well we need to fade back to black   so we know we want to animate that overlapping  div and we can go ahead and do that with gset.2   and select that overlapping div with pound sign  overlappingdiv that was the id we gave earlier   on within index.html now we can go ahead and  say we want the opacity of this overlapping div   to go back to one so to test that this is working  we'll go ahead and refresh over here hit drag go   with fireball that's set to 100 so he goes ahead  has his health bar shrunk zero we click draggle   fainted and now when we click again you'll see  that now that fades into black now one issue is is   that overlapping div is not overlaid on top of our  user interface right here so to fix this we want   to go over to index.html and find that overlapping  div it's going to be at the very top of our file   or at least near the top here it is it's going to  be the first item within our main div and here we   want to go ahead and select the overlapping div  styles and set a new style of c index equal to 10.   so we want to make sure that this is drawn closer  to us on the screen on the z axis and to do that   we want to increase the value of z index so if we  give this something like 10 all the other divs are   going to be equal to one by default i believe  it's one might be zero it doesn't really matter   as long as it's greater than either zero or one  we're going to go ahead and pull that div forward   so our overlapping div should now be overlaid  on top of these let's go ahead and test that   we go ahead and hit draggle with fireball  and we go through the process click again now   that's overlaid on top of everything so once this  animation completes we want to go ahead and cancel   our battle animation loop and then once we cancel  that we're going to go ahead and reactivate our   map animation loop so let's go ahead and start by  cancelling our battle animation loop that's going   to occur within battlescene.js and we know that we  can call on top of our overlapping div animation   a property of oncomplete set that equal to an  arrow function and now whenever this animation   completes we can call some additional code so  the code we want to call is going to be cancel   animation frame and this comes from the window  object and since it comes from the window object   we don't actually need to preface this with window  but what animation frame do we want to cancel well   we're going to cancel an animation frame with the  name of battle animation id so we need to go ahead   and create this and then populate it with the  current frame we're looping over within our loop   so we can go up to our animation loop and  that is going to be right here on line 22   for me animate battle right above this i'm going  to create a new let called battle animation id   and now within animate battle i can go ahead  and assign battle animation id equal to the   result of this so this is what's going to go  ahead and activate our main animation loop   but when we go ahead and assign it something it's  going to give us the frame we're currently on   so we can go ahead and grab that id use it within  cancel animation frame right here and it should   stop our animation from running once we fade  to black so we can always test this by council   logging out our battle animation id directly  within animate battle we save that refresh   over here open up our console you're going to see  we're looping through each frame of our animation   and then once we go ahead eliminate draggle and  then fade to black eventually that's going to stop   because we called down below cancel animation  frame so perfect we cancelled our battle scene   animation for performance purposes but now we  want to reactivate our maps so we're going to   go ahead and do that by calling animate because  that is the function we're using within index.js   to actually make sure that our character can move  around on the map so this is a function we're   simply using it within battlescene.js as soon as  we cancel our animation frames let's go ahead and   test this save and refresh hit draggle with the  fireball click a few times fade to black and now   it looks like we're logging out the animation  id within our animate function on the other side   but we can't see it simply because we still have  that overlapping div if i were to go ahead and   hide that overlapping div by selecting it right  up above right here giving it a display of none   you'll see that now this is running again  i can actually move our player around which   is great so we just want to make sure that we fade  our overlapping div out as soon as we cancel our   animation frame and animate our game once more so  on complete after these two lines are called we're   going to call gsap.2 also on our overlappingdiv so  i'll go ahead and call that and then i know i want   the opacity of this overlapping div set back to  zero so save that refresh let's eliminate draggle   go through the process and now we go ahead back  to our map and we can move around because we're   running our animation loop and all the code within  index.js so obviously we want to go ahead and hide   our interface as well this should not display back  on the map so that's another thing we're going to   need to do when we go ahead and complete this  overlapping div animation so we're going to go   ahead and hide our whole user interface it kind of  makes sense to go to index.html and anything where   we have something related to our user interface we  want to go ahead and wrap that within one main div   so let's go ahead and analyze this well it looks  like everything from right here on line 48 for me   the health bar of draggle the health bar of mb  down to about canvas right here i want to go   ahead and cut that out because i want canvas to  be above it our canvas should not be within this   main div we're about to create so i'm going to cut  those lines out and paste them beneath our canvas   and now everything that i just pasted in and  everything below is going to be related to   our user interface so what we can do is we  can wrap all of our user interface in a div   so i'll create an opening div and then  i want to keep on going down until i   find the very end of our user interface it's  going to be right about here for our last div   i want to end in a closing tag for that div and  then i'm going to format everything so everything   is within that one div and then i want to add  an id onto this newly created div called user   interface so perfect now that i have this id  in place and everything is wrapped within this   one parent div over here what i can do is i can  select that div with document.queryselector get   it by its id which is going to be user interface  and then i can select the style on top of that   specifically the display style and set it equal to  none that's going to make sure that everything is   completely hidden from our game and that is not  clickable so if i save that refresh hit draggle   with the fireball and go through the process  again you're going to see now that interface   is hidden i can click around nothing is activated  we can move about our game as normal now something   we definitely wanted to do is make sure that our  transition back into a new battle is pretty much   foolproof so if we're going to activate a new  battle well you'll see there's definitely an   issue here and this is simply because we need to  re-initialize draggle we need to re-initialize our   health bars set them back to 100 make sure that  their display is set to block so they actually   show a few more things we need to do to make sure  that we can transition back into these battle   scenes so if we want to re-initialize everything  within our battle scene we need to focus in on   battlescene.js specifically on the parts where  we're initializing our variables so things such   as creating draggle mb rendered sprites all that's  going to need to be called again not just when   this file loads so to make sure that this code  can be called multiple times above animate battle   i'm going to create a new function called  init battle it stands for initialized battle   and now every time i initialize a new constant i  actually want it done with an init battle instead   so let's go ahead and see what we're actually  initializing we're initializing this stuff up   here such as setting draggle equal to a new  monster let's start by setting draggle eagle 2   a new monster within init battle if we're  sending dragon eagle to a new monster within   a function we need to make sure that this is  a let up above not a const so we'll make sure   to change all of our constants right here to let  for draggle envy and our rendered sprites and now   i can go ahead and set mb equal to a new monster  of envy within init battle which means i can get   rid of this right here and then i want to do the  same thing for rendered sprites make sure that   this is being set within a knit battle make sure i  get the original assignment deleted now each time   we initialize a new battle while we might have  different attacks associated with our character so   we want to make sure that we put this code inside  of there as well where we go ahead and populate   our buttons with our character's current attacks  our battle background is going to stay the same   so we can leave that as is up above but what else  might we want to put within init battle well we   might want to reset our q so nothing is inside of  that so i'll go ahead and move q up here make sure   that's let delete its original assignment and then  whenever we emit a battle i'm going to call q and   set it equal to an empty array what else can we  grab well the code that adds our event listeners   for each button we're going to want to grab that  as well whenever we init a new battle so i'm going   to grab everything from line 100 up until 46 where  we call it document.queryselectorall for a button   i want to go ahead and grab all that code paste it  within init battle and then if i scroll on down we   can go ahead and keep this code as is because we  only want to add an event listener for our dialog   box once if we're to add this multiple times  we'll essentially be activating more than one   click on the dialog box it's going to activate  double clicks we don't want that so let's just   go ahead and keep this as is and see how things  work with this so now that everything is wrapped   within a knit battle whenever we go ahead and  call anime battle we need to make sure that we   call this before we actually call animate battle  so where are we currently calling animate battle   i'm going to do a command f for animate battle  it looks like we're only calling it right here   when we actually begin our game so let's go ahead  and paste in init battle as well if i save that   and then refresh it looks like our game still  works so this is off to a really good start   so let's go through the process get ourselves back  to our map everything is still working as expected   and then we want to go ahead and activate a new  battle to test this new init battle functionality   let's fight go ahead and do that while still  getting the same issue so although we created   an init battle and when we start our game  we're calling a knit battle an anime battle   when we reactivate the battle scene we need to  make sure we call a net battle as well so where   are we actually reactivating the battle scene it's  going to be within index.js let's go ahead and do   a command f for animate battle so whenever we go  ahead and activate a new battle we're calling this   code right here but before we call this code we  always need to make sure that we call init battle   at least once so now if we save and refresh and  go through the process we activate a new battle   and now it looks like we're even a little worse  off than we were before but i promise you we're   on the right path here let's go ahead and inspect  this to see what's going on if i go ahead and look   around our canvas specifically for this element  of user interface you're going to see that its   display is equal to none because when we ended our  last battle well we set the display equal to none   so it wouldn't show on top of our map but if i get  rid of display none you'll see our user interface   is back that's a perfect start so when we init a  battle we need to make sure that user interface is   going to be showing and we can do so by setting  its display equal to block what else needs to   happen here well we need to make sure that we  hide our dialog box so just our attacks show   we need to make sure that we set our health bars  back to 100 percent so a few things we need to do   here whenever we reinit a battle so let's start by  showing our user interface we're going to go back   to battlescene.js specifically within init battle  so whenever we emit a battle we want to show our   user interface which we can do with document  dot query selector what do we want to select   well pound sign user interface and then we want  to go ahead and select the style specifically it's   display and set that equal to block so that should  take care of that let's go ahead and hide our   dialog box by default i can go ahead and hide this  by copying this line of code that we just created   pasting it on in and then instead of selecting  user interface i can go ahead and select   our dialog box instead but i don't want to  set this equal to block i want to set this   equal to none that's going to make sure that's  hidden by default i also want to make sure that   our health bars are completely back to 100  so to grab our health bars i'll copy this   line right here instead of selecting our  dialog box i'm going to select our enemy   health bar id and then i want to go ahead and  select the style dot width and set this equal   to 100 it's going to make sure that the green  bar fills up the full width of its container   and then i want to do the same thing for our  player health bar so i can simply copy this line   paste it in and then reference player health bar  like so and set its width equal to 100 so let's go   ahead and test all this out now all of the stuff  should show by default and the health bar should   be repopulated so i refresh go through the process  we go back to our map and i start a new battle   we're going to see now all that is showing it's  not perfect though because one our sprites are   missing and two we have duplicate attacks right  here within our attack bar interface so if we want   to make sure that there are no duplicates right  here we want to go ahead and select our tax box   this is another id we created within our html and  then we don't want to call anything regarding its   style we actually want to call a method called  replace children make sure you call this as a   function so when you call replace children by  default it's going to remove everything within   our text box the only thing within a text  box if i do a command f within index.html   are going to be buttons right in here so if we go  ahead and remove those each time we emit a battle   when we run through our characters attacks then  we can repopulate them with those new attacks   so we're just making sure that we give ourselves  a clean slate whenever we call replace children   so now let's go ahead and test this save and  refresh fireball and then re-initialize our   battle you're going to see that fixes that issue  so the very last thing we need to fix is getting   our sprites showing again on the screen why are  they not showing currently well even though we're   creating our monster spreads and we're rendering  them out with a render sprite array well we have   a bug within classes.js specifically within our  main sprite class so sometimes your images won't   actually load if image.onload is called after you  actually set your image's source property i didn't   learn that until just now so unfortunately this  is going to be something we have to refactor my   sincere apologies on that but it's nothing that we  can't handle and in the end it actually is going   to make our code a little cleaner so basically we  need to go ahead and move this dot image on load   before we go ahead and set our image's source  so that means we need to set this.image.source   equal to this dot image.source we need to go ahead  and pass this through as an argument within our   constructor so instead of setting this.image  to the image we're passing through as an html   element i'm actually going to set this.image2 a  new html image directly within our sprite class   so here i'll say this is going to be equal to  a new image then we can go ahead and set the   onload function and then after that we're going  to set its source which is going to fix the bug   of them not rendering correctly in time but we do  need to set the source attribute so save this file   and then where are we creating our monsters that's  going to be within battle scene js right here so   we know we're passing through monsters.draggle  and monsters.nb these are going to be objects   which means we need to go over to our monsters  file and then instead of setting image equal to   the actual html image we're going to go ahead and  set this equal to an object that has a property of   source inside of it this is going to be equal to a  string and then what string do we want to use well   what is the string of our mb sprite it's going  to be this right here let's go ahead and grab   that and set our image source equal to mbsprite  and then down here where we're sending draggle   image we want to do the same thing we're going to  add in an object with a property of src for source   and then right here that's going to be equal  to our draggle sprite dot png that means we can   get rid of these lines of code up above and we're  just going to be passing through a string instead   and then what we want to do is set this.image.src  equal to the image we're actually passing through   our constructor so reference that without this  and say image dot src is going to be equal to   our image's source so we save that and refresh  now all of our sprites are showing including our   background spread because the way we refactor our  code is going to make sure that our current way   of inserting images is still going to work if we  need it done that way so that's going to be how   we re-insert our sprites by refactoring our code a  little bit so now if i go ahead and use one of our   attacks you'll see the draggle faints and let's go  ahead and test this out one more time we restart   our battle and everything looks pretty darn good  let's go ahead and use a tackle you'll see that   subtracts 10 health from draggle and draggle can  use tackle and we can proceed with our q because   we just refactored our code using that init battle  function so now since dragon used fireball on me   that'd be faint but we do not go back to our map  unfortunately right now we're only going back when   we go ahead and eliminate draggle so we just need  to make sure within battlescene.js that we add the   code that we use to go back to our scene for when  we go ahead and eliminate mb as well so that's   going to be down here when we're calling mb.faint  we also need to make sure that we call this code   right here which activates our overlapping divs  we can either go ahead and create a new function   if we want to be as dry as possible but i don't in  this case i kind of just want to get through this   tutorial you know not hold you too long since it's  already been like six seven hours so i'm going to   go ahead and copy this q push and then when ebby's  health is less than zero i want to also call q   push with our overlapping div that ends our battle  animates our map scene and then sets our display   none for a user interface and then transitions  us back so save that and refresh and finally we   should be good to go even when draggle goes ahead  and eliminates us so we'll start a new battle   and then i'm just going to keep using tackle until  he uses fireball over there and there we go so now   we should faint and if i click again we go back  to our scene and we can go ahead and continue   with our game or can we so now that this restarted  you'll see if i use w a s or d we're not actually   moving on our map so one more thing we need to  set within this ending code is we need to go   ahead and grab our battle object that we declared  within index.js and set its initiated property   equal to false again so the battle ended we want  to make sure this is set equal to false because   this is what's going to control whether or not we  can move within our map animation loop so we need   to make sure we do this right here we also need  to make sure we do it right here because our code   is not dry at the moment we could always combine  this into a function if we wanted to save that go   through the whole process we restart a new battle  and then drago is going to eliminate us with a   fireball we faint we go back to our map and now  i should be able to move if i press w i am indeed   able to move once more and i'm not going to  initiate a new battle until i step into one   of these new battle zones and that random code  activates so let's make sure that activates one   more time and indeed it does we can go through  the battle process which is completely reset   hit fireball draggle fainted and great we can  go back to our map so with all that we're going   to be able to check off transition back to map  so finally it is time to add in music and sound   effects so the way we're going to do this is by  creating an audio.js file within our data folder   so let's go ahead and do that now i'm going to  select the file right here and then hit command n   and then hit command s so inside here i'm going to  be automatically put within my data folder and now   i can go ahead and create a file called audio dot  js so now that i have audio js right here i want   to create a const called audio and set this equal  to an empty object to start so once i have this   in place i want to make sure that i import it into  our game i'm going to do so by heading on over to   index.html and then with our script tags i want  to make sure that i import this audio and i can   do this before everything doesn't really matter  i'm going to import this audio by creating a new   line and then saying that our source should  be equal to data audio.js so that is perfect   now within audio.js i want to begin creating audio  objects but first we need audio to reference so to   get audio to reference i went to itch.io and i  found all the audio that i thought would fit our   game the best all from free audio asset packs so  those are going to be available directly within   our pokemon assets audio folder and you'll see  these are all of them right here so what i want to   do is i want to go ahead and copy all these audio  files i'll select them all and then hit command c   and then over in our project directory now i want  to create a new folder by right-clicking hitting   new folder calling this audio and i want to  paste in all those audio files so now that those   are available within our project i can begin  selecting them and creating actual html audio   elements which i can control using javascript  so this file right here map if i play this   this is going to be our map theme i figured it  would fit sounds good so let's go ahead and get   this integrated into our game so within audio what  i want to do is create a new property within our   object right here and this is going to be called  no other than map and then i'm going to set this   equal to have a source of what well from the root  of our project i need to go into our audio folder   right here so i'll open that up and then what do  i want to select well i want to select map dot   wave now typically i would create an audio object  directly here called new audio and then reference   that source but this is kind of cumbersome and the  default audio object that comes with javascript   is not that great honestly so instead of using  the default audio object what i'm going to use   is called howler.js it's pretty much the go-to  library for controlling audio within javascript   i would highly recommend it for any game you're  about to create so the best way to get howler.js   is to go to google and type in howler.jscdn this  will also be within the video description but i   do want to click on cdnjs.com and in order for  your game to work exactly as mine works you want   to make sure that you're selecting version 2.2.3  and you're just going to grab the minified result   right here you can grab that by copying the  script tag then we can head back to index.html   and then as the very first thing we can paste  in that new script tag that references 2.2.3   howler.min js so one of the nice things about  howler is we don't need to set a source attribute   or anything like that we can just say that  our map audio is going to be equal to a new   howl this should be available to us as soon as  we save index.html with this new script tag so   make sure you do that now back within audio js  we want to create a new howl and inside of this   new howl is where we're going to declare our  source attribute so what is the new source of   this audio file well it's going to be slash audio  map.wav now before i'm able to use this i want to   add one more property in here which is going to  be html5 i don't want to set this equal to true   and the reason we're doing this is because if  we try playing this audio file right off the bat   without the set well since we don't have a local  web server running well our audio just isn't going   to play we're going to get a chorus issue so if  your game is not running on a local server like   ours is not we want to go ahead and make sure  we set this equal to true or else when we play   this it's just not going to work now how do we  actually get this playing our game when we start   well let's head back to our game well if we head  back to our game you're going to see we start off   in the battle scene this is not the music that  should go with our battle scenes we need to go   to our initial state we'll head on over to battle  scene js and find where we're calling init battle   it's going to be right here on line 125 for me we  want to comment out init battle and animate battle   and then we want to uncomment out 124 of  animate to make sure we start out on our map   so i save that now we're back on our map but  you'll see our interface is showing by default   we can fix this quite easily by going to  index.html finding our user interface id   which i can search with for user interface and i  want to go ahead and add a style onto this that   just makes sure that this display is equal  to none by default just a quick fix for that   now we are back to our original position and now  whenever we start this scene we want to make sure   that our audio is playing so if we try calling  this directly within index.js such as audio dot   map dot play i save that and refresh the audio  isn't going to play by default let's go ahead and   inspect with our console over here i'm quickly  going to remove any console logs from index.js if i refresh over here you're going  to see we're getting an error that   says the audio context was not allowed  to start and must be resumed or created   after a user gesture on the page so by default  chrome and other browsers have this thing that   can be quite annoying if you're trying to make  a game that does not allow you to play any music   until someone either clicks or moves on your  screen so what we can do is we can add in an   event listener that says whenever we click  initially on our screen that is when we're   going to go ahead and start our game music so  let's go ahead and get rid of audio.map.play   and at the very bottom of our file right here  we're going to add in a new event listener   that listens for click so whenever we click  on our window anywhere on our window we're   going to call this new function and then within  this new function we want to go ahead and call   audio dot map dot play but we only want to call  this once so what i'm going to do is create a let   called clicked set this equal to false to start  then i only want to call this line right here   if clicked has not been activated so when we click  we're going to go ahead and play our map audio   but we're also going to set clicked equal to true  meaning we did indeed click that means this is   only going to fire once whenever we click on our  page so if i save that and refresh and then click   you're going to hear our music playing in the  background but if i keep clicking we're not   getting duplicates of that music playing without  this little boolean right here while we just   have multiple version playing it would be really  chaotic at once with all them playing at the same   time so good thing we added in that boolean so  that's how we're going to start with our audio now   the next thing we want to do is make sure  when we start a battle one we stop the audio   currently playing in the background and then  we activate some battle audio code right here   so where do we actually activate that battle it's  going to be within index.js we can do a command   f for activate a battle so if we scroll on down  we know when we set battle initiated equal to true   this is where we actually activate our battle so  right here we can actually call audio.map and then   we want to go ahead and call stop on this which  means we're no longer going to play that music   but we do want to call audio dot init battle  dot play that's going to be the sound effect   that occurs as soon as that battle initiates  with the black screen flashing in and out   and now at the same time i also want to call audio  dot battle dot play that is going to be our battle   background music so we're going to stop this and  then we're going to play our battle music as soon   as we stop that but we do need to create these  properties first before we're able to play them   so i'm going to save this and back with an audio  js i need to create a knit battle right here for   my property and this is going to be equal to a  new howl and what properties this new howl take   it's going to take a source this is the location  of the source file for me it's going to be audio   init battle dot wav and then i  need to make sure i set html5   equal to true since i'm not using a server and  then i also need not init battle but also battle   this is going to be equal to a new howl and i  can pretty much just copy this code up above   to save us some time paste it in and this  isn't going to reference init battle but rather   battle dot mp3 and when you're referencing your  file name make sure you get the casing correct   you'll see right here i put uppercase i for  a net battle i actually want to reference a   lowercase i instead and for our properties well  it kind of makes sense in this case to just make   the first letter lowercase as well so i'm going  to go ahead and do that for all these i'm going   to leave them out the same since i already  coded that within our actual implementation   but this is going to be a lot better for code  maintenance because this property right here   is equal to the actual name of the file it's  going to make this a lot easier for us to remember   so if i go ahead and save this and i make sure  within index.js that i'm referencing the correct   properties right here which indeed i am let's go  ahead and initialize a new battle so when i click   we have our background music playing  and now when i initialize a new battle you're going to see now we have that new battle  music in place and that new battle initialization   audio that played now this is very loud especially  if i turn it up all the way i don't know why the   audio file is that loud in the first place but  if we want to go ahead and turn this down we   can do so within audio.js basically we can add  in an audio property called volume and set it   equal to anything from zero to one so i want to  go ahead and set this equal to 0.1 for pretty   much everything because every single audio file i  have in here is just way too loud for some reason   i'm going to grab the volume property and put  it within each howl that i created so if i save   that and refresh and i click well you can't even  hear our map music until i really turn this up all   the way and that is a lot better at least for my  ears personally so we just created the audio for   our map and also the audio to transition us into  a battle the next thing we're going to want to   do is add audio for both tackle and fireball so  i have audio files for both of those right here   tackle hit and then init fireball and then also  fireball hit as well let's go ahead and add these   into audio.js so i'm going to go ahead and copy  one of these properties specifically battle and   paste it below and now i know to start i'm going  to start with tackle so this is going to be called   tackle hit when we actually go ahead and bump  the enemy back so the property that has tackle   hit should be equal to a new howl object with  an audio file of tackle hit dot wav not to mp3   and all these are already set should be good to  go on that one let's do the same for fireball copy   this property paste in two new instances so we  start off with fireball hit instead of tackle hit   or reference fireball hit right here we're  just going to reference our file of fireball   hit wav and then finally down here we have one  more which is going to be a knit fireball for when   we actually create the fireball attack this is  going to be equal to in these two locations init   fireball so with all these loaded now we can  actually use them within our game so when do   we actually call tackle hit when does our enemy  actually get hit with the tackle well it's going   to be within classes.js specifically within our  monster class right here so we'll go ahead and   find our attack method that's going to be here  and now if we keep on scrolling down let's find   tackle our case that tackles right here and  we want to find the exact instance in which   our recipient gets hit and that's going to be  when the enemy actually gets hit right here so   now that we know this is where our enemy gets  hit we can call audio dot what we'll tackle   hit dot play so if i save that and refresh well  now we're back in our map it's kind of annoying to   have to keep starting from here so really quickly  we can go back to battle scene js and we know we   want to start from a battle scene so we'll comment  out animate and then on comment and knit battle   and animate battle save that and refresh and now  we're in the correct location right here so now   whenever dragon gets hit with tackle we should  hear some audio being played so i'll go ahead   and select tackle and there is the hit audio  our background audio is also playing as well   unfortunately because we started in this battle  animation so really we know we're not going to   have that problem because when we start our game  well that's going to be the only time we really   click on the screen we're not going to start  from this position so what we can do temporarily   at least to start is go to index.js and we'll  comment out our map audio just temporarily so   we can go ahead and listen in on our attack sound  effects instead so if i go ahead and click tackle   we definitely get that attack audio let's go ahead  and do the same thing for when we use fireball   so we know we use fireball within classes.js  and we want to find our case of fireball it's   going to be right here so we have two options for  using fireball one when we actually knit fireball   and one when fireball hits the enemy where do we  emit our fireball well as soon as we call the case   a fireball so here i can reference audio dot what  while init fireball and then i want to call play   on top of that save refresh hit fireball and there  is that init fireball audio let's go ahead and add   the audio for when draggle actually gets hit  that's going to be fireballhit.wave where does   draggle actually get hit it's going to be right  here so here i can call audio dot fireball hit   dot play save that refresh and now we have two  sound effects that occur for that one animation   which is really cool and the nice thing is since  we implemented our code in a way where dragon   can use these attacks as well he too is going to  activate the audio files for fireball hit and also   tackle so i refresh and start using tackle yes it  works on our end but as soon as dragon uses one   you're going to see we also get that audio in  place so now let's go ahead and add some audio   for win either envy or draggle faint that audio  is going to be victory.wav so i guess that's not   a victory if mb faints but in this case hopefully  we always win so draggle is going to faint but   if we want to use victory.wav we need to go to  audio.js create a new property i'm just going to   copy the very last one paste it in and reference  victory for our property and then i want to make   sure that i change the source to victory that  wav that references this right here so now when   should we call victory well whenever one of her  monsters faints so we know that we can faint   within classes.js within our monster class here is  our faint method so when we go ahead and translate   downwards and fade our opacity down 0 we're also  going to call audio dot victory dot play let's   go and save that and see what happens refresh hit  drago with a fireball and now when he fades down   we get some victory audio play in the background  i guess that is a nice victory sound for us so now   the very last thing we want to do is when we  go back to our game we want to replay our map   audio so we know that we go back to our game  within battle scene.js and this is going to occur   whenever either enemy things or whenever either  draggle fans so after on complete we can go ahead   and call audio dot map dot play we want to do the  same thing in the other location as well if we're   in draggle faints so right here up above because  we are not using dry code for this quite yet   so i go ahead and save that refresh start off in  the battle use fireball we get our sound effects   all looks good and we go back to our game and  now we're playing our map music so perfect   let's go through the whole process now we're going  to start off from the very beginning we're going   to go ahead and get rid of our map boundaries  and make sure that our game works as cleanly as   possible using everything that we just developed  so within battle scene js i know i want to start   from our map so i'll call animate not init or  animate battle i'll comment those out and over in   classes.js i want to find our boundary class which  is going to be down here and i want to make sure   that i fade our boundaries out so right here where  we declare our fill style equal to a reddish color   with an opacity of 0.5 i'm actually going to  declare our opacity should be zero instead   save that go back to our game refresh and now  all of our boundaries are gone and it looks   like we're actually about to play our game so the  last thing i want to do is back within index.js i   want to make sure that i uncomment this code for  our map audio save go back refresh and then click   and i'll turn this up so you can hear it and now  our map audio is definitely playing we can go   through these green patches right here to start a  battle so let's go ahead and activate that battle   you see your battle activation plays our battle of  music plays in the background and now we can begin   so let me go ahead and tackle we get that sound  effect in place and he just straight up killed   us so envy's going to faint and it sounds like  our battle music is still playing should not   play after someone faints and when we go back to  our map we need to make sure that stops as well   so you'll see right there that our battle music  was playing even though we fainted and it's still   playing even though we're on our map right here so  it's a good thing we're testing this because there   are going to be a lot of small edge cases we need  to take into account so whenever someone faints we   want to make sure we stop our battle music we can  do that within classes.js we're going to go ahead   and find out where we faint it's going to be right  here on line 93 for me so we're going to play our   audio victory but we're also going to stop our  audio of battle so we'll select audio.battle   and then say we want to stop that audio from  playing so to test that out we want to make   sure that this music right here stops whenever  we use fireball and someone faints so i use that   that goes down to zero and if i click again that  stops and now our victory music plays i click and   now our background music is playing for our  map that is perfect let's go ahead and test   it out one more time we'll go back into another  battle by walking over one of these green patches   that starts our battle music starts once more  and then i can use these different effects   and you'll see dragon used fireball  eliminated us and be fainted   and now we can go back to our map  playing that original music so perfect   now the very last thing i would do to finish  off this game is just heading back to attacks.js   selecting fireball and sending it back yo 25  that way we just don't immediately win the   battle or dragon doesn't win because they just  used fireball so obviously there's a ton more   that can go into this game whether it be talking  to other characters entering buildings such as   their houses making sure our attacks have more  of an effect on characters who are weak to those   attack types or more resistant but with that we  can go ahead and check off music and sound effects   if you would like to learn more take this to  the next level eventually on chriscourses.com   i'll have some premium tutorials on conversations  with other characters entering other buildings   traveling to other lands item collection inventory  health bars and healing and then gym battles and   one of the nice things is if you're subscribed  to chriscorps.com you can go ahead and download   all the videos within this course including  the premium ones for later and you can also   view all the source code for each individual  video so you can see exactly what was changed   within the video that i just taught there are also  nice little chapters within each video as well at   least for the pokemon course so definitely be sure  to check out that premium content otherwise thanks   so much for watching i hope you guys learned a ton  in this tutorial and i'll see you in the next one