jQuery controlled interactive "game" with CSS sprites

Hey, I was wondering if I could make the header on my page (http://marioplanet.com/images/logo/logo.png) interactive by having a little mini-game of sorts occur upon clicking on a part of the image.

It would have Mario, only Mario, on top of the text, making the rest of the characters vanish upon the start of the "mini-game".

Then, the end-user would be able to use the left and right arrow keys to move Mario left and right, and the space bar to make him jump.

That's what I w开发者_开发技巧ould have for starters, getting more advanced releasing little "updates" to the "mini-game" when I develop my jQuery skills.

I was just wondering if this was feasible and how much time I would expect to spend on such a project.

Any suggestions or info on how to move forward best would be awesome! Also, if this is just way to hard to do with just jQuery and CSS, I'd like to be advised! :)

Check out gameQuery, a jQuery plugin.

It won't be too hard. Obviously you'll need to split Mario into a separate image from his game world. Then you'll have to work out the shape of the images. This will probably be easiest achieved using an image map. Then capture keyboard events, and take it from there.