Sprite Animation in JavaScript

that's it good boy adding animated sprite sheets to your games is one of the fastest and the most impactful ways you can bring your games to the next level and add that professional look and polish you want games with sprites are great at pulling your audience into the fantasy you are trying to create and they are also really fun to make today i will show you everything you need to know about sprite animation with vanilla javascript and by the end of this course you will be able to have complete control over any spreadsheet you choose i will show you easy beginner friendly sprite animation technique first and then we will go a bit deeper and learn how to properly set up different player animations so we can swap between them by changing just one variable also i'm giving away free premium sprite sheets today so that you can code along with me and get exactly the same result do you want to build polished beautiful 2d games and learn javascript at the same time then join me and let me show you how to animate sprites properly with many tips and tricks along the way this is complete advanced vanilla javascript sprite animation explained for beginners hope you get a lot of value out of this click like please in index.html i create basic web page markup i link my style css file we will use it just to position canvas i also link script.js that will contain all animation logic here i create html5 canvas element with an id of canvas 1. it will serve as our drawing board install css i give canvas some border top fifty percent this will only work if position is set to absolute left fifty percent transform translate minus fifty percent minus fifty percent will center our absolute position canvas element in the middle of the page width will be 600 pixels and height 600 pixels as well now let's do a quick javascript setup i will show you how little code you need to animate something on canvas if at any point in this video you find yourself struggling don't worry it takes time and patience for all of us to learn these things i structured this video to be very beginner friendly but i do expect some basic knowledge of html css and a little bit of javascript if you are new to coding or you feel you need to refresh your knowledge maybe the best thing to do is to start with a good quality javascript course first and then you can come back and work on all these creative projects with me there aren't many purely vanilla javascript courses out there and this is one of the best ones it was made by brad traversy brad is a self-taught coder as well and in this course he makes sure you go through all the important concepts to give you solid foundations you can build on in programming you can't learn everything from books sometimes you have to get your hands dirty these courses are the best to explain concepts and then give you exercises to practice them on i will leave a link in the video description to a list of teachers and courses on udemy that really helped me on my self-taught journey i still re-watch them or at least parts of them occasionally to refresh my memory i create a custom variable called canvas that will hold a reference to my actual html canvas element i created in index.html i point javascript towards it using getelementbyid and i pass it id i gave it canvas1 constant variable i call for example ctx shortcut for context is equal to this canvas variable from line one dot get context and i pass it to d i could also pass it webgl here which would give us access to a completely different set of drawing methods but that's for another video now i have all canvas 2d drawing methods stored in my custom ctx variable and i can call them from here for example ctx fill rect will call a method to draw a rectangle canvas if i console.log ctx we can inspect this object it has some properties which basically are global canvas settings such as fill style that says color of shapes we draw or font which sets size and font family of text we draw on canvas this tutorial will be focused on sprite animation we want to learn how to create animated characters for games so we are most interested in building canvas draw image method which sits right here i will explain everything you need to know about draw image method and its three versions in a minute it's easy don't worry about it before we do that i will quickly finish canvas setup to make sure we have correct scaling i need to set canvas width and canvas height by default canvas will be set to 300 x 150 pixels and our drawings can come out distorted that's why i will manually set it to 600 x 600 the same values i gave it in style css i create a custom variable called canvas width i will use capital letters here to make it clear this is a global variable i set it equal to canvas from line 1 dot width and i set it all to 600 same width i gave it in style css i do the same for canvas height also 600 now that we made sure scaling is correct let's bring an image into the project in this tutorial i want to show you two different ways you can animate sprites very simple one for beginners and then more advanced more complex and flexible way where you can just run commands like run jump sit and it will play the correct animation for us when you know both you can decide which one to use when you are building your games i want everyone to get the same result that's why i will be giving away this animated spreadsheet for free today it has 10 different animations you can download it from the project files and code along with me if you want this technique will work with any other sprite sheet but especially if you are a beginner it might be a good idea if you just follow exactly what i do first and then when you fully understand the code you can easily tweak it and make it work with your own sprite sheets click the like please and let me know in the comments if you're getting any value today to bring image into javascript project i can just declare a custom variable i call for example player image and i set it equal to new image like this this is a built-in image class constructor it will create html image element same as you would create if you put image tag img tag in index html markup we can append it to our web page if we want but today we will just use it to store that spreadsheet image for us so that we can animate it with the javascript i need to give it source so player image variable from line 6 dot src and i set it to path to my sprite sheet your path might be different it depends on how you organized your project files let's animate something on canvas i create a custom function called for example draw frame actually let's call it animate because this is our animation loop let's make sure that's clear inside animation loop first i want to clear old paint from canvas between every animation frame so i take ctx variable from line 2 dot clear rectangle built-in method it expects four arguments to specify what area on canvas we want to clear i want to clear the entire canvas so from coordinates 0 0 to canvas with canvas height now we can draw i will just test if everything works by drawing a simple rectangle at position 5050 and i give it width and height of 100 pixels now i can call a request animation frame built-in method which will simply run a function we pass to it it will call that function once if i pass it animate the name of its parent function from line 9 it will just run over and over create an animation loop so we declared animate i also have to call it like this and we have a black rectangle drawn on canvas if we don't specify fill style color of shapes on canvas always default to black it looks like a static image but it's actually animating the same rectangle over and over i can simply prove it by creating a global variable called x i set it to 0 and here on line 12 i replace hardcoded value with this variable and every time animation loop runs i increase x by one i told you you don't need much code to animate something on canvas well done you are a programmer now see you later okay there's a bit more i can show you let's put it back and let's use built-in draw image method to draw our sprite sheet on canvas the goal of this video is to make sure we fully understand how to use vanilla javascript to navigate in any sprite sheet and we will build this nice practice project together we will have a drop down where we select different animations and our dog will do whatever we tell them to do my dog's name is shadow and he's well trained look shadow sit shadow roll jump good boy draw image method is a bit special you can pass it three or five or nine arguments depending on how much control do you want to have over the image you are drawing the first argument is always the image you want to draw so i pass it player image variable from line 6. then i pass it x and y coordinates where on canvas i want my image to be drawn if i pass it 0 for x and 0 for y it will be drawn from the top left corner of canvas coordinates 0 0 it will also keep the image at the original width and height the sprite sheet i'm using has 10 rows and 11 columns of animation frames it's many times larger than my canvas so now we can only see this small part 600 times 600 pixels in the top left corner of my sprite sheet it's 600 x 600 because that's the size i set my canvas to so this is the version of draw image with only three arguments it works and you can change x and y coordinates to move your image around but you would need to resize your images using some other programs such as microsoft paint or photoshop but you don't have to do that because draw image also accepts five arguments that's its second version if you pass it five arguments the fourth argument will be with and fifth argument will be height so we are now able to scale the image up and down and we can also stretch it vertically or horizontally if i pass it canvas width and canvas height it will stretch the image to match my canvas area 600 times 600 pixels and since the image is not the same ratio as my canvas you can see the image is stretched just a little bit let's remove the black rectangle by commenting outline 11. i can pass any values as width and height and javascript will just stretch my image based on these values you can also change x and y to move the entire image around the final third version of draw image method accepts 9 arguments this gives us the most control over the image the first argument again is the image you want to draw the next four arguments determine rectangular area we want to cut out from the source image source x source y source width and source height and the last four arguments will tell javascript where on our destination canvas we want to draw just that cropped out part onto destination x destination y destination with and destination height these last four values basically work the same as these four values in the previous draw image call i showed you the only difference is they are not used to position and stretch the entire image but just the area we cut out using these arguments i comment outline 12 but i will leave it here for reference and on line 13 i will add source x source y source width and source height arguments and i will use them to cut out only one dock at a time one frame from my large sprite sheet so these four values determine area we cut out from the original sprite sheet and these four values determine where on canvas we want to place that cut out piece of image onto if i set source x to zero source y to 0 source width to 200 source height to 200 we are cutting out square 200 x 200 pixels from the top left corner there is nothing in the area if i change it to square 400 times 400 pixels we can see part of our dog i can put any values here and cut out any chunk of the original sprite sheet i want i can also scale it stretch it i can do whatever i want here i create a global variable called sprite width let's have a look at our sprite sheet if i take width of the entire file and divide it by number of columns i get width of one frame my sprite sheet is 6876 pixels wide and it has 12 columns 6876 divided by 12 is 573 i will use 575 for now because i made the last frame a bit smaller when assembling my sprite sheet in photoshop and there's some margin that snuck in sometimes when you see that your animation is moving sideways when it shouldn't try to fix it by adjusting width and height by small pixel amounts and watch what happens i will show you a bit later what i mean it's simple you can just ignore it for now sprite height or height of a single frame will be height of my entire sprite sheet which is 5230 divided by the number of rows we have 10 animations 10 rows so 5230 divided by 10 is 523 on line 15 i can replace source width and source height with sprite width and sprite height variables i just calculated and now we are cropping out exactly one frame from our sprite sheet and in destination width and destination height instead of stretching it to cover the entire canvas i can also use sprite width and sprite height variables here and we are drawing the frame at its original size if you are still not clear what each of these individual arguments passed to draw image method does feel free to play with it change the values and see what happens it's quite straightforward once you get used to it here i'm giving it an image i want to draw these four values specify a rectangle area to crop out from the original large sprite sheet and here i am telling it where i want that cropped out piece of my sprite sheet to be displayed on canvas if i set source x coordinate to 1 times sprite width i am jumping 1 frame as this number increases i am moving to the right jumping by the amount of sprite width this way i can display my animation row frame by frame when this number gets too high there will be no frame there eventually so source x argument allows us to cycle through sprite sheet horizontally if i want to swap between different animations the way our sprite sheet is structured i have to travel through it vertically we have source y argument for that again starting from top would be zero times sprite height variable from line nine and that will give me the top row in this case we have idle animation there one times sprite height is row 2 jump animation then there is fall animation running and so on traveling through the sprite sheet vertically along the y axis switches between different animations and we do it by changing source y argument traveling horizontally cycles between individual frames of these animations and can be done by changing value we pass as source x argument instead of manually changing numbers like this let's output it to variables i create variables called frame x and frame y and i set them to 0 initially then i just replace hard coded zeros inside my draw image method with frame x and frame y and now i can swap between animation frames by assigning different values to these variables frame x cycles through frames of each animation horizontally frame y swaps between different animations it travels through my sprite sheet vertically how do you feel about draw image method so far my goal today is to give you full understanding of draw image method and what each of its arguments does when we get comfortable with it we will be able to control sprite animations in any javascript game easily and we can also use these animations for other web development projects not just for games if you watch this course i know you are a creative person and i know one day you will build amazing things i hope you're getting some value today this course is my attempt to get you excited about coding is it working now let's cover a very simple way to animate your sprites first and then i will show you a proper scalable advanced technique that is suitable for both small and large sprite animation projects the simple way is this we know that frame x variable cycles through our spreadsheet horizontally first row in our sprite sheet is idle animation it has 7 frames inside animation loop on line 18 i can say if frame x from line 10 is less than 7 increase frame x by one frame x plus plus else meaning when it's equal or larger than seven reset it back to zero you can notice two things our animation is blinking and it's going very fast let's deal with it first frame is 0 so last frame is actually position 6. if i change this to 6 the empty frame is removed and blinking is gone on line 11 i can just change values of frame y and we are animating different rows in the sprite sheet problem comes when i get to frame y 4 which is row 5. we are starting from 0. this animation has 11 frames but i'm cycling only until frame 6 so we are not playing the entire animation when i get to this row we have a problem again sitting animation has five frames and we are cycling through more frames here so now it's blinking because we are including some empty frames to get this to work properly every time we want to swap between animations we have to change frame y value on line 11 but also this hard-coded number 6 on line 18. ideally it would have to be a variable that always changes to the correct value that reflects the number of frames for each animation row depending which one we are animating right now i would solve it by having variable called for example max frame i would slot it here and every time i change frame y variable i would change value of that max frame variable from 6 to whatever value we need here to display all frames so 10 for this row and 4 for this row since we are animating from frame 0. animation is going very fast to slow it down we can use this simple trick i will create a led variable called the game frame and i set it to 0. on line 22 inside animation loop i take this game frame variable and for every loop we increase it by one so now game frame is endlessly increasing as our animation loop runs over and over on line 19 i create an if statement let me just write it and i will explain it when we see the whole thing i say if game frame modulus percentage symbol something question marks for now is equal to zero only then increase frame x on line 13 i create a custom constant variable called stagger frames whatever value i give it it will slow down animation by that amount let's try five on line 20 i say if game frame modulus stagger frame is zero only then increase frame x modulus operator percentage symbol is also called remainder operator it returns remainder when we divide the first number by the second let's say game frame is 17 and stack of frames is 5 17 modulus 5 is 2 because 17 divided by 5 is 3 that gives us 15 and remainder to 17 is 2. remainder operator simply divides the first operand by the second one and returns the remainder here i am checking if the remainder is zero game frame is every increase in the number and stagger frames is always 5. this statement will return remainder 0 and be true every 5 frames so because i set stagger frames to 5 this code block on line 20 will run every 5 frames slowing down our animation 5 times new frame in our sprite sheet will only be served every time the main animation loop runs five times i can also slow it just by two zero here will stop animating the higher the number you use here as stagger frames the slower the animation will be let's leave it at 5 for now i think it looks good for most animations as i said when i change frame y to 4 if i want to display all frames in my animation i also have to change 6 here on line 21 to number nine for shorter animation rows like this sitting animation it has only five frames so i have to change this number to four so now we have a way to swap between animations but we always have to change two values once we are comfortable with sprite animation we will use it in our game our character will be able to jump when it reaches the peak height and starts falling back down we will switch to full animation we can also sit which will stop the game from scrolling we can also roll which will speed up the game and we can attack enemies this way i can also add this dizzy animation for example when we hit an obstacle you can see all available animations if you check out the sprite sheet let's refactor this code and let me show you more advanced sprite animation method that allows us swooping between different animation states by changing just one value we are venturing into a bit more advanced territory if you are new to javascript don't worry if it takes you a bit longer to understand what i'm about to show you it becomes easier with practice we all started somewhere i delete code between lines 20 and 23 we used it to cycle between animation frames horizontally in this more advanced method we will do it differently i set frame y to 0 that's my top row idle animation i also delete lines 17 and 18. they are commented out anyway let's clean this up inside animation loop on line 17 i create a let variable called for example position its job will be to cycle through horizontal sprite sheets but in a different way we will need this later i take a game frame variable from line 12. this variable is increasing over and over on line 20 as animation loop runs i divide it by stagger frames variable from line 13 and i wrap all of this in math.floor to get rid of potential decimal points i want this value to be only integers whole numbers without decimal points then i take this entire value and i do remainder operator and 6. 6 is here because i'm doing idle animation which has six frames counting from zero this line of code is not the easiest thing to wrap your head around i said this would be slightly more advanced don't worry if you're struggling to read this this is not beginner level javascript anymore what's happening here on line 17 game frame divided by stagger frames means we will have to increase game frame five times before we get to one because as game frame variable increases one divided by 5 is 0.2 2 divided by 5 is 0.4 3 divided by 5 is 0.6 game frame 4 divided by stagger frames 5 is 0.8 and only when we get to game frame 5 divided by stagger frame 5 we get value of 1 here so as game frame cycled from 1 2 3 4 5 by dividing game frame by stagger frames we go to 0 0.2 0.4 0.6 and 0.8 all of these values were turned into zeros because it's wrapped in math.floor it took five animation loops five increases of game frame variable to get to number 1 here when this is 1 1 modulus 6 is 1 because 1 divided by 6 is a 0 and remainder from 0 to 1 is 1. basically this value increases by one every time game frame variable increases by five slowing or staggering our animation five times making it five times slower we are using math.floor removing decimal points from these divisions for the first five frames we get 0 modulus 6 which is 0. then this calculation increases to 1. for the next 5 frames 1 modulus 6 is 1 then 2 modulus 6 is a 2 3 modulus 6 is 3 and so on position variable increases until it reaches 6. 6 modulus 6 is 0 7 modulus 6 is 1 8 modulus 6 is remainder 2 and so on this calculation makes sure position variable only cycles between 0 and this number i appreciate that this calculation is quite complex this is not course in advanced mathematics and logic so for now just take this little formula here and believe me when i say it works don't worry about understanding it completely we are focusing on javascript today being able to understand this calculation has nothing to do with your ability to be good with javascript these are two unrelated skills on line 18 i take frame x variable from line 10 and i set it equal to sprite width from line 8. and i multiply it by this position variable we just calculated on line 17. as i said this position variable will cycle between zero and number we put here first row in my sprite sheet has seven frames starting from zero frame x will be cycling through these values horizontally on line 19 inside the draw image i remove sprite width because width of our sprites is already accounted for inside my frame x variable on line 18. i misspelled stagger frames on line 17. when i fix this small typo we can see this is working and we are animating row 1 in our sprite sheet don't feel that you need to fully understand this calculation on line 17 to be good at javascript i did not come up with this formula tricks like this are usually figured out by someone much smarter than me we can just use them and they will work for us i could have achieved the same result using a bit more code and simple more readable calculations this is more complex and hard to read for beginners because it's such a short calculation it's kind of a neat trick to use this but it's not a necessity i like it because it makes the code look clean and compact i can still change value of stagger frames variable on line 15 and it will slow down or speed up my animation this is really nice code base to animate any sprite sheet but it can be done even better to swap between animations i still have to change frame y variable on line 11 and i have to make sure that this value on line 17 sets the correct amount of frames per row to make sure we don't have any empty frames or that we are animating all available frames from that particular row depending on what animation we are currently drawing the spreadsheet we are using today is regular and symmetrical all the sprites have the same width and the same height the technique i will show you now can be used for this type of sprite sheet but also for sprite sheets that are more irregular and have frames of different sizes i would like to have a code structure like this some kind of data array called for example sprite animations that contains objects each object's name in this array is the same as the name of that particular animation it holds data for so for example idle jump run and so on each of these objects can contain additional data for example for irregular sprites it can be pixel values for width and height that can be different for each frame and mainly it will contain locations array this location array will hold a set of javascript objects and each of these objects will have x and y property each of these objects represents one frame in that particular animation and its x and y properties will be coordinates we need if we want to use draw method to cut out this particular frame from the sprite sheet that way we can access any frame we want anytime by directly targeting positions in this array i can just cycle through this location array with a for loop and it will always play the entire animation for me without the need to set up number of frames each animation has each time it will know how many frames that animation has based on the number of objects in this location array each object will be one frame so how do we create a data structure like this with javascript and how do we map it correctly to match our spreadsheet let me show you on line 14 i create a custom constant variable i call for example sprite animations and i set it equal to an empty array this will serve as the main container to hold all data for all my animations i will create another variable i call animation states this will also be an array and i will use it as a place where i can create kind of a simple map that will match my docs sprite sheet i will go through my sprite sheet row by row from top to bottom for every animation row in my sprite sheet i will create an object like this with two properties name property will be whatever i want to call that animation row so for the first row let's call it idle and i will also need frames property i check my sprite sheet and i see that idle animation is made out of seven frames the second row i will call jump animation and it has seven frames i will create an object like this for every row in my sprite sheet going from top to bottom but before i do that let's check if it works on line 15 i have this animation states array which currently contains two objects one for idle and one for jump animation i could have also given it more properties but this sprite sheet is not irregular so name and frames properties is all i need to map coordinates for each animation frame i take animation states array and i call build in array for each method for each method execute provided function once for each array element i will do es6 syntax here this is so called arrow function it's a simplified syntax to write function expression in javascript i can skip function keyword here and i just create brackets where arguments i pass to this callback function go with for each the first argument we pass to it is just a variable that will represent each element in the array as we are cycling through it i will call it state as for each method runs state will first represent this object then this object and so on if we add more i'm simply saying inside this callback function i'm about to write refer to these objects as state so this name property can be accessed as state dot name for example i will also pass it second argument i call index index is another built-in feature of for each array method it simply stores number of each element as we cycle through the array so this first object will have index 0 this will have index 1 and so on i expect you understand basic array manipulation with javascript and fundamental methods like for each but i still wanted to explain in case we have some beginners here so this callback function will run for each element in my animation states array now i want to run through animation states and create data structure like this that maps my sprite sheet and coordinates for each frame i create lead variable called frames and i set it equal to an object inside i will have property called loc location that will be an empty array for now i will create a for loop that will cycle through state dot frames property so for idle animation it will run seven times as i set it here on line 18. every time this for loop runs i want to calculate x and y coordinates of that animation frame from my sprite sheet and i want to place them inside location array on line 27. how do i calculate that i create a temporary variable called position x and it will be equal to j variable from the for loop times sprite width that i set to 575 pixels earlier as the for loop runs and j increases position x will be calculated for each frame i will also need position y which will be index from line 25 times sprite height we declared sprite height earlier and we set it equal to 523 pixels to match our sprite sheet position y will be the same for all seven frames of idle animation when for each method moves to the second animation object here index will increase and for that animation row different position y will be calculated this might be quite a lot going on if you are a beginner this is more advanced than the first sprite animation method don't feel discouraged if you are struggling to follow it takes time and practice it wasn't easy for any of us at first so this for loop calculates position x and position y for each frame as it cycles through my sprite sheet every time we calculate x and y i take frames dot location array from line 27 and i use push method i create another small object here on a fly it has x property set to position x from line 30 and y property set to position y from line 31 i push these values into my location array on line 27 so this for loop will run through all the frames in one row in this case seven times and once we create seven objects with x and y coordinates and push them into location array i take sprite animations array from line 14 and i create a new key in there i will create something called key value pair key is the name of the property value is the value of that property so i'm taking sprite animations array from line 14 and i'm passing it state dot name which will first refer to idle then to jump as for each method runs through animation states array i'm saying create a new key new property in sprite animations array call it idle and its value will be frames from line frames object contains locations array which i just filled with seven objects that contain x and y properties for each frame in this animation that's it we created the data structure that maps locations in my sprite sheet i can console log it now i can see i made a typo here on line 29 you probably noticed it already this should be j not s so now i'm going to look in animation states from line 15 that's fine but what i actually want to see is sprite animations array from line 14 which we just created and filled with data you can see that my sprite animations contains two properties called idle and jump if i look inside each contains location array from line 27 and number of elements in that array corresponds to frames i declared for each animation each of these values was calculated here on lines 30 and 31 you can see that all y coordinates for idle are zero and for jump animation vertical y coordinate is 523 as we moved on to the second row in our sprite sheet now i can replace hardcoded number 6 here on line 40 with length of these locations arrays i access this location array by targeting dot spriteanimations.log actually no i skipped one level i need to specify if i want location array for idle or jump let's just hard code idle here for a moment and i want length of this array remember i am just replacing hard-coded number six that was here so don't length and that's it now it's dynamic i can add animations with four or fifteen frames per row or however many i want and it will still work with no blank or left out animation frames here i am accessing sprite animations from line 14 idle location dot length inside animation loop we are still calculating frames using frame x and frame y variables from lines 10 and 11. we don't need these anymore because now we have the exact coordinates stored in locations array i delete lines 10 and 11. on line 40 i add let keyword in front of frame x and i will declare frame y variable here frame y is just the value we can see here so i can access it by saying sprite animations idle dot location at index position from line 39 dot y i could do the same thing for frame x or i can just leave it as is both will work let's replace idle with the jump it breaks notice that row 1 with idle animation was working and row 2 doesn't which suggests something is wrong with how we draw vertical position inside the draw image on line 43 i remove sprite with value from source y argument we don't need it anymore as frame y contains complete already calculated coordinate now i can go back inside animation states array and i add data for all the remaining animations it's important to understand that you can't skip rows here you have to go row by row from top to bottom to match your sprite sheet because vertical y coordinate is tied to index in for each method i add full animation with 9 frames run animation has 9 frames dizzy 11 frames seat has only five frames roll seven frames and so on i also need to make sure there is comma between every object if i try fall i get blink in there must be an empty frame full animation is actually only 7 frames if i put less here we play only part of animation if i put more here we get blinking because some frames are empty run animation works dizzy works seed animation works as well you can see seed animation has 5 frames and this animation has 11 frames and i can swap between them easily without having to manually change number of frames like we did before role animation works byte animation works let's go back to idle putting hard-coded text here like this is not ideal of course i go up to line 10 and i create a variable called player state i set it to run initially down on line 71 and 73 i replace idle with this new player state variable now i can swap between animations here on line 10. so it works jump works full works in index.html i create a new div with a class of controls inside there will be a select element with an id of animations and name animations label for animations will say choose animation i give it some options that match names we gave to animations in script js file in style css i target controls and i give it position absolute set index 10 top 50 pixels and transform translate x minus 50 to center it horizontally i take controls select and option and i increase their font size to 25 pixels i can also remove the border around my canvas i want animations to change when i choose different value in this drop-down in script js i take player state from line 10 and i put it up top on line one i create a constant variable called drop-down and i point it towards this new select element with id of animations i take drop down and call add event listener on it i will listen for change event every time its value changes we will take player state from line 1 and since we are inside callback function on event listener we have access to event object i'm referring to it as e event object has target property target is simply referring to an element that was clicked and it has value property because i have added values myself whenever any of these option elements in my drop down is clicked player state variable will be set to its value attribute now i can easily swap between different animations in my sprite sheet just by selecting different options in a drop down that was a lot we covered today wasn't it if you are a beginner and you are still with me well done if you want you can practice these techniques on a different sprite sheet to really solidify all the concepts we covered today we are not done with this yet in the next part i will show you how to use this technique in an actual game you can also check out my other vanilla javascript playlists if you're still feeling creative i'll see you there [Music]

Channel: Franks laboratory

Views: 21,417

Keywords: javascript game, javascript game for beginners, sprite animation, javascript, game, javascript tutorial, javascript for beginners, javascript basics, javascript course, javascript programming, learn javascript, javascript beginners, web development, javascript game development, game development, game development tutorial, game development in javascript, javascript games, game development for beginners, html, beginner javascript, franks laboratory, frankslaboratory, html5, css3

Id: CY0HE277IBM

Length: 46min 5sec (2765 seconds)

Published: Fri Apr 23 2021