Sprite Animation in Javascript using JSFiddle

Code and Demo for a Simple SHMUP Sprite Animation

Okay, so along with my prerequisites at CofC, I am also taking an entry game design course. Although I have more of an interest in C# and Unity, in this class we are using Javascript and JSFiddle . I’m not mad though, because is a great opportunity to learn some fundamentals as well as expand my knowledge of Javascript (I have none).

My first assignment in JSFiddle was to get a simple animation working with a sprite sheet. I chose to go with a basic shoot-em up (shmup)  game. First let’s take a look at our sprite sheet. These were created in Adobe Illustrator and Photoshop CC.

PlayerSpriteSheet

Feel free to use this in anyway you want. Just attribute this website.

These graphics are pretty simple. I may go back later and refine them to look a little less cheesy, but for now they will work for this assignment. We are only going to be dealing with the first two rows in this post. I will build onto it as the game comes along. All we want to accomplish now is having our ship bank right and bank left.

We are doing all of this at JSFiddle.net. I have never worked with any JavaScript before and it seems like a good place to get started, but if you want to build any large projects you might want to look somewhere else. If you have ever done any other programming, JavaScript will come pretty easily to you.

I am hesitant to go through a tutorial, as a lot of things need some cleaning up here (like the ugly if/else statements in my key down and our time intervals). In fact, a lot of this will be cleaned up as my next step. Below is the program and the code:

 

 

Let me know if you have any questions!

Leave a Reply

Your email address will not be published. Required fields are marked *