Post by The Sam on Mar 17, 2011 6:21:14 GMT -5
Click this link for code - kathack.com/
Click this link for explanation - www.geekologie.com/2011/03/play_katamari_damacy_on_any_we.php
This is AWESOME!!! SQUEE!
I've been playing with this for the past half an hour. Go on, try it, if you're MAN ENOUGH!
Click this link for explanation - www.geekologie.com/2011/03/play_katamari_damacy_on_any_we.php
Katamari Damacy, the game where you roll over thing to collect them and grow bigger and bigger can now be played on any website, thanks to a clever bit of code. Contra? Not yet, BUT I'M WORKING ON IT.
How does it work?
Short version: css transforms (for things stuck to the katamari), canvas (drawing the katamari), and z-index (illusion of depth).
Long version: The bookmarklet loads jQuery and kh.js into the current page. jQuery is used mostly for .offset() and .css(). kh.js is where all the action happens:
* Splits all the text on the page into words/spans. (StickyNodes::addWords)
* Builds a grid data structure so that intersections with elements can be found quickly (StickyNodes::finalize). Essentially grid[floor(x / 100)][floor(y / 100)] is a list of elements in a 100x100 pixel block. This should probably be an R-tree, but the hot-spot in this program is definitely in the rendering.
* The ball and stripes are drawn in a canvas that gets moved around the page (i.e. position: absolute; left: x; top: y;). See PlayerBall::drawBall.
* When an element is attached to the katamari, a clone is made. The original element is hidden. The new element is moved around by setting -webkit-transform. The transform rotates the element about the rolling axis of the katamari and scales the element to make it look like it's coming out of the page. See PlayerBall::drawAttached, transform_test.html, and transform_test2.html.
Did that say magic? I'm going to assume that just said magic. WHICH THE INTERNET IS BY THE WAY. Now, go to THIS PAGE, copy the code from the box, go to the website you want to play on, paste the code in the address bar and get ready to get your game on at work! And after that? Résumé-updating.
Katamari Hack (works best in Google Chrome or Firefox 4)
via
Katamari Hack rolls across your favorite websites, leaving swath of HTML5 destruction in its wake [engadget]
Thanks to Jonathan, blake and Erin, who don't roll anything but sushi. OH GREAT, NOW I'M GONNA BE WANTING SOME ALL DAY.
How does it work?
Short version: css transforms (for things stuck to the katamari), canvas (drawing the katamari), and z-index (illusion of depth).
Long version: The bookmarklet loads jQuery and kh.js into the current page. jQuery is used mostly for .offset() and .css(). kh.js is where all the action happens:
* Splits all the text on the page into words/spans. (StickyNodes::addWords)
* Builds a grid data structure so that intersections with elements can be found quickly (StickyNodes::finalize). Essentially grid[floor(x / 100)][floor(y / 100)] is a list of elements in a 100x100 pixel block. This should probably be an R-tree, but the hot-spot in this program is definitely in the rendering.
* The ball and stripes are drawn in a canvas that gets moved around the page (i.e. position: absolute; left: x; top: y;). See PlayerBall::drawBall.
* When an element is attached to the katamari, a clone is made. The original element is hidden. The new element is moved around by setting -webkit-transform. The transform rotates the element about the rolling axis of the katamari and scales the element to make it look like it's coming out of the page. See PlayerBall::drawAttached, transform_test.html, and transform_test2.html.
Did that say magic? I'm going to assume that just said magic. WHICH THE INTERNET IS BY THE WAY. Now, go to THIS PAGE, copy the code from the box, go to the website you want to play on, paste the code in the address bar and get ready to get your game on at work! And after that? Résumé-updating.
Katamari Hack (works best in Google Chrome or Firefox 4)
via
Katamari Hack rolls across your favorite websites, leaving swath of HTML5 destruction in its wake [engadget]
Thanks to Jonathan, blake and Erin, who don't roll anything but sushi. OH GREAT, NOW I'M GONNA BE WANTING SOME ALL DAY.
This is AWESOME!!! SQUEE!
I've been playing with this for the past half an hour. Go on, try it, if you're MAN ENOUGH!
