Sprite Animation in HTML5 and JavaScript!




In this video I will show you how to animate sprites using a sprite sheet graphic and some simple JavaScript.

Check out the source code here: https://github.com/pothonprogramming/pothonprogramming.github.io/tree/master/content/animation

Check out the working example here: https://pothonprogramming.github.io/content/animation/animation.html

Thanks for watching!

Original source


19 responses to “Sprite Animation in HTML5 and JavaScript!”

  1. Hello Frank, your channel is great, it helped me a lot. I'm trying to make a Zelda-like game, in full JS and canvas, and without framework if possible. I'm a kinda like you, I want to understand every concept and logic of programmation. Could I ask you some questions about making a game like that and collision detection ? If yes, should I ask here or by PM ? thanks anyway and sorry for my english. 🙂

  2. Hey Frank. I used this one Codes for my game.. I have changed around some things. But now the Animation frame_Sets don't change any more. And. Hmm I feel like Im so close to make something amazing. But still ehhe I really have no idea what made the Frame_Set system collapse, Would you mind taking a look at it?

  3. is it possible to make the canvas fullscreen? i tried to modify to lines starting from line ~230. i changed the buffer.canvas sizes, i tried to change the buffer.drawimage() values but i dont get it to work?
    another question in the animation.prototype the buffer = createElemetn, does this mean a canvas is created more than once?

  4. Thank you. I basically built.this on top of the script from the run and jump tutorial. Had a little.difficulty but managed to make it work.

    My only problem is that my jump work every other time now. Cant figure out why. Also had to delete background since.its being drawn on top of player no matyer where I place the code.

Leave a Reply