Tuesday, April 8, 2008

Jangaron mini: Isn't it Cute?

Noticed the new box on the left-hand side? I thought, when blogging about a browser game, why not put the game right into the blog? But in order not to spoil the surprise completely and not to distract you too much from the blog itself, I included a "minified" version of Jangaron that provides instant action without any configuration, allows only one user versus one program, and leaves out most head-up display information (only the speedometer remains).
The tricky part was that I wanted the game to start when the iframe receives focus. In any browser but IE, window.addEventListener("focus", ...) does the job. Even when using the IE equivalent window.attachEvent("onfocus", ...), nothing happens. My next attempt was to use a googled-up solution where they put the event listener on the iframe element, not on its contentWindow. I won't quote the source, since this solution didn't work, either, at least not for my case: Believe it or not, IE does have some security features and won't allow any script to access its window.frameElement if it comes from another domain than its container page, in order to prevent cross-site scripting / phishing.
At last, I found this post by Hemchand Thalanchery about JavaScript and cross-browser window focus, and this was exactly what I had been looking for -- thanks, Hemchand! I think it is perfectly okay that when you build a workaround for a certain browser, you use proprietary functions of that browser. In this case, the IE-proprietary events "onfocusin" and "onfocusout" are the counterparts to "onfocus" and "onblur", respectively, and the listeners have to be attached to the document, not the window.
Too bad that I only encountered the cross-site scripting problem after having already uploaded the change, and too bad my provider didn't let me in until right now... wait a minute... here we go! Now, IE users won't get this annoying "permission denied" anymore like during the last four hours. Sorry for the inconvenience.
Feel free to add Jangaron mini to any of your Web-pages (some more hits for Jangaron, too :-) )! You can copy the code from the source of this page or from here:
<iframe width="360" width="180" src="http://www.jangaron.net/jangaron0.5/jangaron-mini.html">
</iframe>
To make it behave better than on my own page, you can add some markup inside the iframe element that informs the user that she or he has a browser that does not support frames, and add a link to the page (but then I'd suggest the full game page!).
Of course, since Jangaron is a vector game, you can change width and height any way you like!
Enjoy!

No comments:

Powered by WebRing.