Welcome to Itty Bitty RPG! This is something I've been working on for a while now and I believe it is pretty cool. It is a cross pollenation between a simple web page counter and a passive RPG. As you visit a given site (this was designed with blogs in mind) you will acquire "experience". This experience will translate over time into higher levels. As you visit various pages of a given site you will encounter monsters, treasures,shops, pets, and other suprises! NOTE: None of the icons and dialogs you see were originally part of this page. They were dynamically inserted by the IBRPG code.
(1)To start out, click on the "Itty Bitty RPG" link below.
This is the "home base" of the rpg...
Once you have created a character (2)reload the page a few times then mouse over the "Itty Bitty RPG" link to see your stats. Leave the page - go somewhere else, close your browser even. Then come back. You will see that the stats persist. (3)Reload the page at least 10 times to see the "level up" notice The idea will be that this link will represent your "home base" on any given page. In a blog it'd probably be somewhere in the links column.
Now, are you ready to fight? You may have noticed as you reloaded a few times that the little creatures changed. Right now I only have 2 monsters - a lowly rat and a lowly ant. There will be greater and more challenging monsters as I get this developed. (4)Click on the icon and do battle! Click the "x" when you are either victorious or defeated. If your health is low simply go back to the village home and rest there. The idea behind this is that these icons will be "hidden" throughout a given blog. Users will visit all the nooks and crannies of a site to seek out and find all of the creatures, treasures etc. NOTE: create a character before clicking the monsters or "nothing" will happen.
You can also click on the treasure chest if you want to grab some coins. There is a shop in the town where you can buy weapons.
This is just the barest beginnings of this idea. Folks will be able to take this code and embed it in their own blogs, and there's the possibility to have this as a widget, or even a greasemonkey extension. Turn any site into an Adventure!! (5)View source and you will be amazed - all of the code needed for this is loaded dynamically. All a user has to do is include a js file, and add a few classes to some empty divs (for now). In the future the js code will analyse the site and dynamically add elements based on the semantics of a page.
Behind the scenes many things are happening. The javascript bootstraps a few YUI libraries, additional js code, and stylesheets to display the panels. The code then goes in and looks for HTML elements with a particular classname and transforms them into IBPRG nodes. Each node might be a monster, a quest, a pet, etc. The information about your character is stored in a persistent storage element inside Firefox. The images for the monsters, etc. are encoded as DATA URL's and will eventually be moved also into the persistent storage, so your load time will drop dramatically. As far as know, this is one of the first real implementation of the persistent storage capability.
This is an open source project that is located here: http://code.google.com/p/ittybittyrpg/. Please file bugs and feature requests there.