Need to load assets, draw things on screen, animate things, manage frames, handle input from a variety of input, check for collisions, play sounds, manage states. <= Don't do all this, use a framework and make your game. These are solved problems, not your game.
Phaser, designed for mobile. HTML5 + JS, open source, 2D. It's under active development by professionals at Photo Storm so it doesn't get out of date in a fast changing technology environment.
Phaser will try and render using the fastest technology available in the runtime it finds. Pass in functions to manage states - preload, create and update (clock tick - uses request animation frame).
Texture atlas, lets you work with many related assets - a sprite sheet with a map to where they all are. There's a free tool that will build them for you from individual assets. Phaser will then allow us to access this in a conceptually easy manner.
A physics group to allow collision detection, there are different physics engines - arcade is probably enough for most things. Create a sprite using the physics group.
Animations are just more complex sprites, use several sprites from the texture atlas and give it a name. Call
.play and Phaser will handle it. Can chain other animations when animations complete with callbacks.
Can hook interactions to creating sprites. Phaser will give you a clean interface with input events.
Each sprite can have an update event that will be called on each clock tick.
Phaser abstracts out the audio implementation - just give it an MP3 and an OGG. Can preloaded them and then add them into the game so we can call them.
Set up a collision callback that will be called when Phaser detects the two objects have overlapped.
There's lots more in Phaser:
- Camera movement
http://phaser.io/ <- has 300+ of demos and code samples.