jQuery controlled interactive "game" with CSS sprites

views:

answers:

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 would 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! :)

+2 A:

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.

Matt 2010-08-06 22:15:33

Here is an example of one of the images that contains a bunch of useful sprites:http://www.spriters-resource.com/ds/marioandluigi3/sheet/25827 I will condense these down to one file which I can pull his walk right motion, walk left, jump right and jump left. I just mainly don't know how to animate the walk left and walk right.. Would I store the CSS locations of the sprites in a variable and connect them to a timer? Switching frames at a 12fps rate? Upon keypress, toggle the specific animations?

BOSS 2010-08-06 22:27:47

+2 A:

Check out gameQuery, a jQuery plugin.

Ryley 2010-08-06 22:23:21

I actually have looked at that before :) I can't tell if I would rather use that or just code it myself. It would be great experience in my opinion coding it myself. If I begin to sense failure however, I think I'll switch over to this :D

BOSS 2010-08-06 22:29:14

ansaurus

tags:

views:

answers:

jQuery controlled interactive "game" with CSS sprites

related questions