This is a puzzle game, it's name "Free the Birds". In summary, player has to find out a way to cut the rope holding the cage to free the bird inside. Bow and arrows can be used for this purpose.
This game was created in html5 using canvas, FileSystem & local storage features. We also used javascript and CSS/CSS3 for the implementation. Besides, CreateJS, Box2dWeb frameworks and jQuery have also been utilized.
With CreateJs, it supports APIs to make things become easier in working with canvas, in creating animation effects, and also supports playing sound from multiple formats.
For example: CreateJS provides API to create the animation of moving an object from one location to another.
I use this function to display game menus with some effects like slide-in down, fading...
Besides, CreateJS also helps to manage game resources such as images, json data… and makes sure all the resources will be loaded at the starting phase of the game.
With Box2DWeb: it’s a physic engine used for simulating motions and collision of basic objects such as circle, rectangle, triangle… in the real world. I use this for making effects like: a falling ball, explosion, or collision between an arrow and the rock or the tree…
Beside, I also create the Level editor for this game so we can easily create new map by dragging and dropping objects into it.
The editor will generate json file contains information about the map.
Html5 FileSystem API was used to read and write json file.
Additionally I also used css3 for border image of the game.
LocalStorage is used to save information like score, unlocked levels, …