Sprite Animation in HTML5 Canvas with KineticJS

If you want to simulate motion with repeated display of a set of images, where each image correspond to one position in a series of positions in motion, then you can do this easily with sprite. Sprite is individual image in this series of images that constitute motion. The example of sprite is a person walking, where his/her motions of hands and legs are repeated during the walk. However sprite animation is not limited to repeated motion only. You can simulate, for example, explosion of an object, with series of images (sprites), each showing different stages of the explosion.

In my simple HTML5 game, the planet stops moving (and the game ends) when it hits any asteroid or boundaries of the Canvas. I modified it so that the planet explodes when it hits any obstacle. And for this I used Sprites. KineticJS makes animating Sprites very easy. This is how my sprite sheet looks like (sprite sheet is one image that contains small individual sprite images) –

Continue reading “Sprite Animation in HTML5 Canvas with KineticJS”

Collision Detection in HTML5 2D Games

I wanted to make the Simple HTML5 Game I had created a couple of weeks back a little more interesting. I decided that I would add some obstacles in the way of the moving object. The goal then would be to prevent the moving object from hitting the obstacles and boundaries of the Canvas. This required implementation of collision detection (between moving object and obstacles) logic. If shape of the image is rectangular, then it is easy to detect collision; this is something I had already implemented in the last game, where I checked if the moving object hits any of the four boundaries. But if shape of the image is irregular, then it requires a bit more work to detect collision. But first, try out the modified game below and see how collision detection works –
Continue reading “Collision Detection in HTML5 2D Games”

A Simple HTML5 Game

My son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don’t know Flash, I could not help him much. But I suggested that if he develops his game in HTML5, I could help him. So while teaching him HTML5 and animation, I ended up creating a very simple game, which I want to share here.
Continue reading “A Simple HTML5 Game”