tag:blogger.com,1999:blog-33563404065992603582024-03-14T18:01:23.396+01:00Jangaron - JavaScript TronAbout a Tron light cycle game written in pure JavaScript / DHTML.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-3356340406599260358.post-48286819848686487972010-10-29T22:42:00.000+02:002010-10-29T22:42:42.301+02:00Jangaron 0.71: fix for IE9 betaAnother new browser version needs another patch.<br />
This time, it's IE9 beta: alas, it became too standards-compliant! Thus, a typical crude workaround needed for IE6/7/8 did not work anymore. I fixed it, so you can now enjoy Jangaron in Internet Explorer 9 (beta)! It's fast and it's fun!<br />
<br />
<span style="font-size: large;">Evaluation</span><br />
In IE < 9, you will run into problems when trying to dynamically create an input field by code like this:<br />
<pre> var input = document.createElement("input");
input.setAttribute("type", "radio");
</pre>Old IEs refuse to interpret the type, also if you set it as a JavaScript attribute. Thus, you are forced to use a proprietary, IE-specific API extension that allows to hand in HTML fragments instead of the element name:<br />
<pre>// only works in IE < 9:</pre><pre> var input = document.createElement("<input type='radio'>");
</pre>Unfortunately, the usual way to do <a href="http://www.nczonline.net/blog/2009/12/29/feature-detection-is-not-browser-detection/">feature detection instead of browser detection</a> does not apply here, since the function <span style="font-family: "Courier New",Courier,monospace;">createElement()</span> is defined in any browser, only old IEs provide additional semantics. So I did browser detection (shame on me), which of course failed when IE 9 (note: only in IE 9 mode, not in any backwards-compatibility mode!) became standards-compliant.<br />
The only way out was to use the anti-pattern <i>programming by exceptions</i> and simply try the extended API and catch the error for standards-compliant browsers. To avoid recurring runtime penalty, I only do this once and store the result in a feature flag: <br />
<pre> var SUPPORTS_CREATE_ELEMENT_WITH_ATTRIBUTES = function() {
try {
window.document.createElement("<input type='text'>");
return true;
} catch (e) {
return false;
}
}();
</pre>Instead of SUPPORTS_... I should maybe call that flag REQUIRES_..., since I do not use this feature because it is supported, but because the way the standard suggests does not work in old IEs.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com3tag:blogger.com,1999:blog-3356340406599260358.post-22802081964617270742010-09-21T21:47:00.001+02:002010-09-21T22:01:30.658+02:00The Story Continues: Jangaron 0.70I just promoted version 0.60 to "stable" and uploaded a new "experimental" version <b>0.70</b>. 0.43 is no longer linked (though still online) and 0.54 is now the "old" version.<br />
Here are the highlights of the new experimental version 0.70:<br />
<ul><li>Using <a href="http://www.schillmania.com/projects/soundmanager2/">soundManager2</a> for <b>HTML5 sound </b>that works in modern browsers without any plugin and even on <b>iOS</b> (iPhone, iPod touch, iPad)! Well, still <i>quite</i> experimental, but it's a proof of concept... As a fall-back, if available, Flash is still used. Moreover, I had to repair stuff to make it work on iOS again. </li>
<li><b>New controls</b> In single-player mode, you can now press <span style="font-family: "Courier New",Courier,monospace;">Shift</span> or <span style="font-family: "Courier New",Courier,monospace;">Ctrl</span> combined with the arrow keys. What happens is that when you hold down a modifier key, releasing the arrow key will turn your lightcycle again! Using <span style="font-family: "Courier New",Courier,monospace;">Shift</span>, you turn in the opposite direction, while using <span style="font-family: "Courier New",Courier,monospace;">Ctrl</span>, you turn in the same direction. Thus, you can do <b>side-steps</b> (<span style="font-family: "Courier New",Courier,monospace;">Shift</span> + arrow) and <b>U-turns</b> (<span style="font-family: "Courier New",Courier,monospace;">Ctrl</span> + arrow), and the time between pressing and releasing the arrow key determines the "width" of the move. Be warned that holding down the key for too long will trigger key repeat, and you will most likely crash! Maybe I can fix that...</li>
<li><b>Improved team lightcycle resurrection</b> When you play in a team with other programs and you crash, you are transferred into another lightcycle of your team. So far, this move was so confusing that usually, you immediately crashed again. Now, the view port changes to the other lightcycle, but it remains controlled by the program <i>until you press the first controlling key</i>. Thus, you can relax and wait for a not-so-close situation until taking over control, or just decide to watch the game continue. I plan to visualize the state in which the program has control over the viewport's lightcycle.</li>
<li>More technically, I used the latest <a href="http://www.jangaroo.net/">Jangaroo compiler</a> to recompile all libraries and the game itself. Should not really make any difference in game play, but leads to cleaner JavaScript code and a better build process. I hope to be able to put all Jangaron source code on github soon.</li>
</ul>Please tell me what you think about the new features and whether they work for you!<br />
<br />
P.S.: For those of you who are bored with the splash screen and voice, there is a secret switch: Just add <span style="font-family: "Courier New",Courier,monospace;">?nosplash</span> to the URL, and you'll be directed to the settings dialog immediately, like this: <a href="http://www.jangaron.net/jangaron0.7/jangaron.html?nosplash"><span style="font-family: "Courier New",Courier,monospace;">http://www.jangaron.net/jangaron0.7/jangaron.html?nosplash</span></a>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com4tag:blogger.com,1999:blog-3356340406599260358.post-37475713232684368722010-09-14T15:38:00.000+02:002010-09-14T15:38:09.354+02:00Eventually: Jangaron + Sound in Firefox 3.6Greetings, programs, it's been quite a while.<br />
Jangaron looks a bit abandoned, doesn't it? Well, you may be right. I've been working hard on the "parent" project <a href="http://www.jangaroo.net/">Jangaroo</a> and its Flash compatibility: see this new <a href="http://www.jangaroo.net/files/examples/flash/box2d/">Flash-ported-to-Jangaroo Demo</a>!<br />
But nonetheless, I was quite annoyed when I noticed that Jangaron was not working correctly with Firefox 3.6. To be more precise, the mini game worked, and the settings UI worked, but starting the full game from the settings UI with sound enabled failed. The workaround was to<br />
<ol><li>play Jangaron mini only or</li>
<li>switch off sound before starting the game from the UI.</li>
</ol>Now that I found time to dig into the problem, the solution sounds somewhat familiar: browser detection was broken with Firefox 3.6! After patching that, everything now works fine again. <b>So please spread the word to Firefox 3.6 users to go ahead and play Jangaron (again)!</b><br />
The problem was in the browser detection code I copied back then from an old version of MooTools, which detects Gecko aka Firefox like so:<br />
<span style="font-family: courier new;"> if (window.document["getBoxObjectFor"] != null)<br />
return ENGINE_GECKO;</span><br />
It is not really bad practice to use proprietary methods or properties to detect a browser, but as you can see in this case, it is not very future-safe. Because as browsers become more and more standards-compliant, especially these proprietary methods are likely to be removed (as in this case, <a href="https://developer.mozilla.org/En/Firefox_3.6_for_developers">see here</a>). Or, as for example happened in case of Microsoft extensions like CONTENTEDITABLE, they are copied by other browsers, and thus also fail as a distinguishing criteria.<br />
Whatsoever, since the only thing that came after GECKO was OPERA and UNKNOWN, I now ask for Opera first and consider everything else a Gecko and hope your exotic Linux browser won't mind.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com3tag:blogger.com,1999:blog-3356340406599260358.post-83674111762996863182009-04-04T20:45:00.007+02:002009-04-05T16:36:53.057+02:00Jangaron 0.6 Online: 3rd Person Perspective!After improving the Jangaroo tool (sorry, new version not yet released) and major refactoring of Jangaron into separate modules, I put online a preview on the upcoming new version:<br /><div style="text-align: center;"><span style="font-size:180%;"><span style="font-size:130%;"><a style="font-family: trebuchet ms;" href="http://www.jangaron.net/jangaron0.6/jangaron.html">Jangaron 0.60 (beta)</a></span><br /></span></div>Now, eventually you can <span style="font-style: italic;">play</span> what you could only <a href="http://jangaron.blogspot.com/2008/06/from-new-perspective.html">see in a video</a> so far!<br /><object width="430" height="235"><param name="movie" value="http://www.jangaron.net/blog/Jangaron-3rd-Person-2.swf"><embed src="http://www.jangaron.net/blog/Jangaron-3rd-Person-2.swf" type="application/x-shockwave-flash" width="430" height="235"></embed></object><br />The new features include:<br /><ul><li>smooth switching between 1st- and two different <span style="font-weight: bold;">3rd-person perspectives</span></li><li><span style="font-weight: bold;">shrinking lightcycle walls</span> when players derezz, like in the movie, instead of fading walls like before</li><li>support for <span style="font-weight: bold;">IE8</span> (also patched Jangaron 0.54) -- lightning fast!<br /></li><li>offer you an <a href="http://www.jangaron.net/jangaron0.6/jangaron-0.60-beta.air"><span style="font-weight: bold;">offline version</span> </a>to install (you need to install <a href="http://get.adobe.com/air/">Adobe AIR</a> first -- I used version 1.5.1), much easier than my <a href="http://jangaron.blogspot.com/2008/06/play-jangaron-052-offline.html">previous attempt</a>. Jangaron now has a really nice build process (<a href="http://maven.apache.org/">Maven</a>), so that I can promise to build a version to install for each future update.<br /></li><li>bug fix: controls now work correctly when going very slowly</li><li>redesigned the <a href="http://www.jangaron.net/">Jangaron home page</a> with the look and feel of the new version and links to all available versions of the game to give visitors better guidance which one to start</li><li>added meta-data so that iPhone and iPod touch use full screen mode<br /></li></ul>Open issues are:<br /><ul><li><span style="font-weight: bold;">clipping</span>: depending on the type of browser, when you go very close to another wall, the angle of the wall may be displayed incorrectly. The reason is that when <a href="http://jangaron.blogspot.com/2008/06/from-new-perspective.html">introducing arbitrary trapezoids</a>, I removed clipping for the time being. Different browsers have different limitations in the size of borders (most around 1000 pixels) which lead to problems with steep slopes.</li><li><span style="font-weight: bold;">restart game</span>: you still cannot return to the configuration screen other than by reloading the page. This is especially annoying in the AIR version, where you cannot reload! I hope I'll have this fixed soon. Besides that, there are still some states (glance direction, speed when having jumped to another lightcycle) that seem to be reset incorrectly when the game restarts.</li><li><span style="font-weight: bold;">iPhone on-screen controls</span> are not yet available. As you might remember, I patched them into 0.54, but this solution will be replaced by browser detection and/or configuration.<br /></li></ul>I successfully tested in Firefox 2 (Windows XP), 3, and 3.1beta, IE7 and 8 (Windows Vista) (known not to work in IE6 and never will!), Safari 3.1 (XP) and 4 beta, Chrome 1, Opera 9.62, AIR 1.5.1 (Vista), and iPod touch 2.2.1. I also experimented with a new open source AIR alternative called <a href="http://titaniumapp.com/">Titanium</a>, but only made work the "mini" Jangaron version, i.e. the one without the settings dialog. Brave folks can download a Mac, Windows, or Linux installer on the <a href="http://get.titaniumapp.com/app/L2GBHKv">Jangaron Titanium page</a>.<br />I'd like to ask you help me collect all other browser/OS environments Jangaron 0.54 or 0.60 run on! Please report any functional or performance issues!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com2tag:blogger.com,1999:blog-3356340406599260358.post-82053988894523045222008-08-03T23:23:00.020+02:002008-12-09T21:23:27.059+01:00Jangaroo Released and Jangaron Updated to 0.54It's been a while since you last heard of me. Of course, I've been really busy, but rather less with Jangaron itself (and, as obvious, even less with the Jangaron Blog) than with the base technology Jangaroo.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.jangaroo.net/"><img style="border: 0pt none ; margin: 0pt; padding: 1em 0pt 0pt; cursor: pointer; display: block; width: 194px; height: 34px;" src="http://www.jangaroo.net/contentblob/1180/jangaroo.png/data.png" alt="" border="0" /></a>Jangaroo? As mentioned before, Jangaron is completely written in JavaScript, but it uses features of the new language version JavaScript 2, most notably packages, classes, and static and private members. To allow this JavaScript 2 code to run in today's browsers, I use the <a href="http://www.jangaroo.net/home/jooc.html">Jangaroo compiler</a>, which was developed by <a href="http://www.coremedia.com/">CoreMedia</a> as an internal tool, but has just now been <a href="http://jangaroo.blogspot.com/2008/07/former-life-and-birth-of-jangaroo.html">released to the public as Open Source</a>. Guess what kept me busy: I was the initiator and so-called "Program Manager" of the project at CoreMedia<a href="http://www.coremedia.com/"></a>, with the goal to launch the Open Source Jangaroo project. (Okay, plus one week holiday, where I refrained from touching a computer. To be honest, I lost a bet with my wife.)<br />Read all about the goal, features, and history of Jangaroo in the <a href="http://www.jangaroo.net/blog">Jangaroo Blog</a>.<br />What I did update for Jangaron are two things: I used the latest version of the Jangaroo compiler, and I revamped the settings UI. Read about both changes in a minute, but if you want to try the new version immediately, here are some hints for <span style="font-weight: bold;">troubleshooting</span>:<br />If you have any JavaScript errors, try to <span style="font-weight: bold;">clear the browser cache</span>. If that still does not help, <span style="font-weight: bold;">reset your settings</span> by clicking the corresponding button with the red <span style="color: rgb(204, 0, 0);">x</span> in the settings UI. If that does not work, either, delete the Cookie "jangaron" from domain "www.jangaron.net", path "/jangaron0.5" using a Cookie manager for your browser. If your browser does not have a Cookie manager, then don't use IE (well, you can still delete the Cookie from the file system). If you still have problems with the 0.54 update, please report back by comment or using the e-mail address given on the "About" tab of the game. For the time being, you can still use my back-up of <a href="http://www.jangaron.net/jangaron0.52/jangaron.html">version 0.52</a> or the (very old) <a href="http://www.jangaron.net/jangaron0.4/jangaron.html">stable version</a>. I also updated Jangaron mini in the Blog, so here, clearing your browser may also make problems go away.<br /><br /><span style="font-size:130%;">Updated to the Latest Jangaroo Compiler</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.jangaroo.net/"><img style="border: 0pt none ; margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe4MUBK34chI1hJ0h_6Egg06wngqBAzkgTSfSoMylDmssiocMqUGyWBbUmqHscgjoqrmwmRLe4rhK5hwobYTBs1ugblLBbaMC4uwfNrDK3y6kzOI_hciqtS8naX-MtwA7xc6u4yqK3KNs/s400/Jooley.png" alt="" id="BLOGGER_PHOTO_ID_5230411850827657570" border="0" /></a>I used the latest version of the compiler (version 0.1.1, which has just not yet been released) to recompile the Jangaron code. Besides some <span style="font-weight: bold;">performance improvements</span>, the main point is an <span style="font-weight: bold;">even better browser compatibility</span> of the Jangaroo runtime. This makes Jangaron run in <span style="font-weight: bold;">Konqueror 3.x</span> (tested with 3.4) and even on... yes... <span style="font-weight: bold;">Safari/iPhone</span>!!! It seems that Safari/iPhone is more similar to Konqueror/KHTML than to Safari/Desktop. Unfortunately, the way Jangaron grabs key strokes does not seem to work on Konqueror, and the iPhone does not even have (many) keys. So I set up a <a href="http://www.jangaron.net/khtml/jangaron.html">special iPhone version</a> that uses on-screen buttons for turning. Speed and view control are not yet available, this is just a quick test whether it is playable at all. Please report back!<br />But most importantly, Jangaroo being Open Source allows me to <span style="font-weight: bold;">release Jangaron as Open Source</span><span style="font-weight: bold;"> soon</span>, too. I had to wait until Jangaroo was released, because nobody would have been able to produce a running version from the Jangaron source code without the Jangaroo compiler! Now, I have to figure out which license I'm going to use for Jangaron and where to put the source code repository. Developers, stay tuned!<br /><br /><span style="font-size:130%;">Revamped the Settings User Interface</span><br />On my way from Hamburg to Augsburg to visit the 40th birthday party of a good friend of mine, I used the 2 x 6 hours to revamp Jangaron's settings UI and add a <span style="font-weight: bold;">splash screen</span> with a new logo including a smoothly increasing glow effect (again, pure JavaScript!).<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.jangaron.net/jangaron0.5/jangaron.html"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxT58WktdWgEs1u29lOtlGlT3SPjkv_N6qEGp06VsjBnT9AC0aMM_w-WYiJE1oqg9YSd-Qn2WCbiL1rARTdKRqZWv6y_amIBpEHXl_bY06NqEtJfVP7E3lGM1nl-I9vnONse6YfurBBb9/s400/Jangaron0.54-settings-screenshot.png" alt="" id="BLOGGER_PHOTO_ID_5230648591366233650" border="0" /></a>To come back to the new features, the settings dialog now has<br /><ul><li>a large <span style="font-weight: bold;">glowing lightcycle</span> changing to the first user player's color and serving as the new "Enter the Grid" button,</li><li>a different <span style="font-weight: bold;">color theme</span>,</li><li>expandable, overhauled <span style="font-weight: bold;">help texts</span> for each tab,</li><li>it <span style="font-weight: bold;">starts on the "Players" tab</span> when visiting for the first time (since there you find the setting you most likely want to change),</li><li>there, it starts with the main two settings: <span style="font-weight: bold;">game mode</span> and <span style="font-weight: bold;">number of players</span>, and</li><li>in the background is now an optionally <span style="font-weight: bold;">animated game grid</span> (what else?), that can be switched on in the "Grid settings" tab. However, by default it is switched off, since the permanent redraw consumes quite some CPU. Also, you can get dizzy in the head from staring at the sliding grid.</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BAsNewFLArl9RyOdOj2VaA33HPxoZ5O3UmzLRa-5jPcMi7VeTOfwp2IQZaUnS2INYJKECriwO4khxtVQcQczyAGboL86GnDIcdkFNuOugmdIyZhrJ8RIC9iWgtPyufnBrbt_uLi3Fh4U/s1600-h/Jangaron0.54-monitor-screenshot.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BAsNewFLArl9RyOdOj2VaA33HPxoZ5O3UmzLRa-5jPcMi7VeTOfwp2IQZaUnS2INYJKECriwO4khxtVQcQczyAGboL86GnDIcdkFNuOugmdIyZhrJ8RIC9iWgtPyufnBrbt_uLi3Fh4U/s400/Jangaron0.54-monitor-screenshot.png" alt="" id="BLOGGER_PHOTO_ID_5230419288062369042" border="0" /></a>One small visual change to the game is that the <span style="font-style: italic;">you win</span> / <span style="font-style: italic;">you lose</span> texts now even more look like old character-based terminal output. I added a PNG as an overlay that is slightly less transparent at every other line, which leads to this <span style="font-weight: bold;">"analog monitor blur" font effect</span>. You may need to take a closer look to recognize the difference (click the image above or lose the game, whatever you think is the faster option!), but still I think it was worth the effort since it adds to the 80-s look-and-feel of the game.<br /><br />Of course, I also fixed some <span style="font-weight: bold;">bugs</span>. For example, <span style="font-weight: bold;">combo box selections</span> did not update correctly in <span style="font-weight: bold;">Safari</span>. Fortunately, someone else had <a href="http://lists.apple.com/archives/web-dev/2007/Aug/msg00059.html">identified and solved the problem</a> before. The point is that Safari is very close to the spec here, which does not allow two options of a <span style="font-family:courier new;">select</span> element to be selected at the same time. So to select a different option, you have to deselect the currently selected one <span style="font-style: italic;">first</span>, or the change is ignored in Safari. The fix was to simply use the <span style="font-family:courier new;">selectIndex</span> property of the <span style="font-family:courier new;">select</span> element, which avoids this problem completely.<br /><br />Finally, you may ask yourself, <span style="font-style: italic;">and what about the <a href="http://jangaron.blogspot.com/2008/06/from-new-perspective.html"><span style="font-weight: bold;">3rd person perspective</span></a></span>? I have also been working on that, but there are still some performance issues in some browsers and some minor bugs and features (e.g. changing camera position), and I want to give you a good experience from the start when introducing that feature. Maybe I'll set up an alpha version of <span style="font-weight: bold;">Jangaron 0.6</span> for curious and brave Jangaron fans, so let me know if you want me to!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com6tag:blogger.com,1999:blog-3356340406599260358.post-83729081694286118032008-07-03T20:15:00.010+02:002010-09-14T17:19:45.096+02:00Jangaron 0.52 in Firefox 3 -- but slowAbout 20% of all Firefox surfers that have visited www.jangaron.net during the last month already used Firefox 3 -- and couldn't start the game! After a really small patch, Jangaron 0.52 now works completely in Firefox 3.<br />
My workmate Jan found a bug in the browser abstraction code: To let standard-compatible browsers simulate IE behavior (yes, I know, it should be the other way round!), I checked whether <span style="font-family: courier new;">MouseEvent</span> is defined. Since MouseEvent is supposed to be a constructor function, I used <span style="font-family: courier new;">typeof MouseEvent=="function"</span>. For reasons beyond my imagination, Firefox 3 changes the type of <span style="font-family: courier new;">MouseEvent</span> to <span style="font-family: courier new;">"object"</span>, so the check failed. Now, I simply use <span style="font-family: courier new;">typeof MouseEvent!="undefined"</span>.<br />
After quick-fixing the bug (no new version number, just reload / maybe clear browser cache), the full game now works in Firefox 3. However... it runs <span style="font-weight: bold;">unbearably slow</span> :-(. I started searching for similar problems and found many disappointed Firefox users who reported that version 3 is actually quite slower than 2 (at least in certain circumstances).<br />
Currently, there is not much more I can, or better am willing to do about it. Maybe the guys over at Mozilla will come up with some performance tips or patches soon. Until then, <span style="font-weight: bold;">I do not recommend using Firefox 3 to play Jangaron</span>. If you are brave and try, I would really be interested in your experience. By the way, I didn't yet bother to patch the "stable version" 0.43, which has the same bug, so please use 0.52 with Firefox 3.<br />
One last hint, if you want to use Firefox 3 for surfing and Firefox 2 to play Jangaron: just google for "<a href="http://www.google.de/search?q=firefox.2+firefox.3+parallel">firefox.2 firefox.3 parallel</a>". Essentially, you create a separate <a href="http://support.mozilla.com/de/kb/Managing+profiles">profile</a> for each Firefox version so the other one does not mess it up, and start the program with command line switches that tell it a) to use a certain profile and b) not to reuse the running Firefox instance.<br />
After being a bit disappointed by Firefox 3, Opera 9.5 and Internet Explorer 8 are my next candidates...][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com2tag:blogger.com,1999:blog-3356340406599260358.post-27604685139058345152008-06-28T20:52:00.006+02:002008-06-28T21:48:28.175+02:00Play Jangaron 0.52 Offline!Jangaron does not need a server connection, as it is not (yet) a network multiplayer game. However, it has not been so easy to play Jangaron offline - until now!<br />At the <a href="http://jangaron.blogspot.com/2008/06/from-new-perspective.html?showComment=1214498280000#c6116907151275318844">request of Brian</a>, I just uploaded a <a href="http://www.jangaron.net/download/jangaron0.52.zip">zip of the Jangaron 0.52 files</a> (only 57 KB, without sound files), including a small patch to make it run without sound locally. Just unpack the archive to some folder, and open <span style="font-family: courier new;">jangaron.html</span> in your favorite browser.<br />The problem with sound is that Flash (which I use <span style="font-style: italic;">for sound only</span>) refuses to load sounds from local <span style="font-family: courier new;">file</span>-URLs. The simplest way to make it work locally is to install a Web-server like <a href="http://httpd.apache.org/download.cgi">Apache</a> (don't be afraid, download the <span style="font-style: italic;">binary release</span> and it's really simple!) and put all Jangaron 0.52 files and <a href="http://www.jangaron.net/download/jangaron0.52-sound.zip">the Jangaron 0.52 sound files</a> (3.5 MB in two subfolders) below Apache's <span style="font-family: courier new;">htdocs</span> folder. Then, start Apache and browse to <span style="font-family: courier new;">http://localhost:8080/jangaron.html</span>, and you can play Jangaron with sound, even when you are not connected to the Internet!<br />Please tell me if you succeeded to install Jangaron (with or without sound) or contact me if you need more detailed instructions.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com3tag:blogger.com,1999:blog-3356340406599260358.post-88358472195760667552008-06-15T21:53:00.010+02:002008-12-09T21:23:27.156+01:00From a New PerspectiveWhile some users <a href="http://jangaron.blogspot.com/2008/04/users-voices-ii-and-winner-is.html?showComment=1209595200000#c2238953626307329370">prefer the first person view</a>, even after adding look left/right/aback, you sometimes miss a bit of overview in the game.<br />Thus, I started working on a <span style="font-weight: bold;">third-person perspective</span> for Jangaron, where you can look <span style="font-style: italic;">over </span>the lightcycle walls. To give you an early preview of how it may look like, I used <a href="http://www.debugmode.com/wink/">Wink</a> to produce a video of a game played with my workspace version. What you can see right at the beginning is the "camera" moving gently from the usual mid-horizon perspective to a bird's eye view above the player's lightcycle. I plan to provide keys for toggling between those two modes. As you can also see in the video, even in the third-person view, you can look in all four directions!<br />What do you think?<br /><object height="235" width="430"><param name="movie" value="http://www.jangaron.net/blog/Jangaron-3rd-Person-2.swf"><embed src="http://www.jangaron.net/blog/Jangaron-3rd-Person-2.swf" type="application/x-shockwave-flash" height="235" width="430"></embed></object><br /><br />The <span style="font-weight: bold;">technical challenge</span> of this new perspective is that <a href="http://jangaron.blogspot.com/2008/04/understanding-css-border-slants.html">CSS border slants</a> per se can only draw trapezoids where the projection of one of the parallel sides is completely contained within the other (leftmost figure). If the projection has at least a non-empty intersection, two slants (a "real" slant and a triangle) suffice (middle figure).<br />But what about arbitrary trapezoids? The solution is to cut the trapezoid in<br />a zigzag, resulting in serveral right angle triangles and one terminal slant (rightmost figure).<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqhAmPPXXxk_s0-W-58mmr4OBH0X87AGsj526pgl9ZYeqlmK8_sQ5YL1mlGDZ7jZ7PCNfUtCww4h3XHt3O49Ioqaz5wMs9560RgHn_sZPfWks6YhHs1G1b1xdfO-_U7iAt4rkC57YDBVq/s1600-h/multi-slant-shapes.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqhAmPPXXxk_s0-W-58mmr4OBH0X87AGsj526pgl9ZYeqlmK8_sQ5YL1mlGDZ7jZ7PCNfUtCww4h3XHt3O49Ioqaz5wMs9560RgHn_sZPfWks6YhHs1G1b1xdfO-_U7iAt4rkC57YDBVq/s400/multi-slant-shapes.png" alt="" id="BLOGGER_PHOTO_ID_5212223493140693330" border="0" /></a>The worst case concerning the number of triangles is a very thin, 45 degree trapezoid. This is why I used another trick for the grid lines, which is to draw a white right angle triangle and a slightly smaller black one, so that only the white sloping line remains. I could not use that trick for the lightcycle walls, because they are drawn on top of the grid.<br />The question was if using this drawing technique degrades <span style="font-weight: bold;">performance</span>, but the answer seems to be "no". I use highly optimized code to update the DOM and to create the zigzag (just some linear equations; note that many coordinates can be reused!), so the overhead of projecting the wall etc. seems to outplay creating additional triangle/slant shapes. I hope to be done with the feature soon, so that you can check it out yourselves!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com1tag:blogger.com,1999:blog-3356340406599260358.post-51427313349614366202008-06-13T23:50:00.003+02:002008-06-14T00:22:51.925+02:00Jangaron Promo Video ManiaIt is really astonishing for me what can happen in a community: After Jangaron 0.5 was done and I made it run on the Wii again, I posted a <a href="/2008/05/fixed-flash-detection-for-opera-wii.html?showComment=1211959440000#c870987794669040455">rather kidding remark</a> to <a href="http://www.tron-sector.com/members/profile.aspx?ID=9635">TRON.dll</a>, who, as you might remember, had already put together that great <a href="/2008/04/wii-loves-jangaron.html">video of Jangaron on the Wii</a>. I said, jokingly, "why don't you also produce a video of the new version", and he even topped that and created a fully-fledged Jangaron promotion video with titles and everything, showing all game modes etc., uploaded it on <a href="http://www.youtube.com/watch?v=_SeUU_0Z3vA">YouTube</a> and posted it in the <a href="http://www.tron-sector.com/forums/default.aspx?do=top&id=359999&pg=3">Tron-Sector forum thread</a>. And all this happened without me lifting a finger -- amazing! I have to apologize, TRON.dll, it is long overdue to report about your great Jangaron promo video here: Everybody watch and enjoy!<br /><object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/_SeUU_0Z3vA&hl=en&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"></param><embed src="http://www.youtube.com/v/_SeUU_0Z3vA&hl=en&rel=0&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" width="425" height="349"></embed></object>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-13319881167540214032008-06-07T00:04:00.003+02:002008-06-07T00:17:15.123+02:00A Tiny New Feature for Jangaron (0.52)This one I stole from <a href="http://www.armagetronad.net/">Armagetron</a>: The outer rim walls of the game grid can now be set to be infinitely high. I like it better for its claustrophobic ambiance, so I made it the default. If you don't like it, uncheck <span style="font-family: courier new;">Grid settings | infinitely high outer rim</span>, and you're back to the way it looked before. On any problems running the updated full game or Jangaron mini, please clear your browser cache.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com4tag:blogger.com,1999:blog-3356340406599260358.post-75734110934885531082008-05-28T02:46:00.006+02:002008-05-28T03:14:34.794+02:00Fixed Flash detection for Opera / WiiSome folks over at the <a href="http://www.tron-sector.com/forums/default.aspx?do=top&id=359999&pg=3">Jangaron Tron-Sector thread</a> reported that version 0.5 does not work in certain browsers and under certain circumstances.<br />The good news: I fixed a bug in my Flash detection code so that it now works in Opera without the right (and still without any) Flash plug-in. That fix (version 0.51) should make it work on the Wii, too ("work" in this case means "no sound, but at least you can play the game").<br />Concerning other browsers, some people seem to have tried IE6 and very old Safari versions which I cannot test, and both do not work. Let me quote from my own post over at Tron-Sector:<br /><blockquote>Jangaron is based on <a href="http://www.blogger.com/2008/04/understanding-css-border-slants.html">CSS border slants</a>, which are not fully functional in IE6. One crucial feature, namely <i>transparent borders</i>, is missing in older IE versions, and Jangaron heavily relies on that feature.<br />Besides Firefox and IE7, there are many other alternative browsers that are supported by Jangaron: all other Gecko-based browsers should work (Iceweasel, Netscape, Camino, ...), Safari 3.1 (I think 3.0 also, but I am not sure) and other WebKit-based browsers, Opera 9.25 and thus the Wii browser. Unfortunately, there are still problems with browsers based on KHTML (the WebKit predecessor), like Konqueror 3.x. Jangaron's stable version seems to run on Konqueror 4, though, because some serious bugs in KHTML's JavaScript engine were fixed (or was it even replaced completely?).<br />Jangaron's claim "The Tron Lightcycle Game in any modern browser" is to be emphasized on <span style="font-style: italic;">modern</span>, and is also rather a vision than a completely proven fact. I need <strong>help for testing and debugging Jangaron</strong> in this multitude of browsers, so all you JavaScript / DHTML gurus out there, feel welcome to support!<br />Thank you for starting to report problems; now, let's analyse and fix them if possible!<br /></blockquote>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com2tag:blogger.com,1999:blog-3356340406599260358.post-16088193944319162672008-05-24T13:54:00.005+02:002008-05-24T14:25:25.300+02:00Jangaron 0.5 is out!Finally, its done! We arrived at a level where <a href="http://www.jangaron.net/jangaron0.5/jangaron.html"><span style="font-weight: bold;">Jangaron version 0.5</span></a> seems stable enough to announce it to the public and offer you an updated version packed with new features!<br />"We", in this case, are David "Avi" Scott and Frank "Joo" Wienberg and all the others who gave valuable feedback.<br />Note that version 0.43 is still available at the well-know location <a href="http://www.jangaron.net/jangaron.html">www.jangaron.net/jangaron.html</a>. The index page <a href="http://www.jangaron.net/">www.jangaron.net</a> now lets you choose between the stable (0.43) and the experimental (0.5) version.<br /><span style="font-size:130%;">Night of the Feature Creep</span><br />The most important feature for the new version turned out to be something that wasn't even mentioned in the voting (sorry, guys, no grassroots democracy yet): Sound and music! And David is the one who contributed his own compositions to Jangaron. Thank you again, David, for your excellent "labor of love"!<br />To give you a quick overview of what to expect from Jangaron 0.5:<br /><ul><li><span style="font-weight: bold;">Look Left/Right/Aback</span> - One of the most-voted features is now available, and even in the extended version that you can also take a look behind, watching out for lightcycles chasing you! This gives you more overview and allows new strategies. The keyboard setup has been extended by three columns for the corresponding keys.</li><li><span style="font-weight: bold;">Sound and Music</span> - This one is the real feature creep. I revamped Gustavo Ribeiro Amigo's <a href="http://jssoundkit.sourceforge.net/">Javascript Sound Kit</a> for Jangaroo (no, this is not a typo: as faithful readers might remember, Jangaroo is the language Jangaron is developed in). Sound is only available when you have a Flash plug-in which must be version 8 or higher, but the game remains true to not requiring any plug-in, you just have no sound then. This technical feature allowed to enrich the game with sound and David's great music. Pump up the volume and enjoy!</li><li><span style="font-weight: bold;">Team Play and Presets</span> - I <a href="http://www.blogger.com/2008/04/users-voices-ii-and-winner-is.html">promised Brian</a> to include teams in the next Jangaron release, and as I tend to keep my promises, you all had to wait a little bit longer ;-). But it turned out great (at least I think so!) and was worth the effort. Team play allows a variety of modes and so that you do not get lost in configuration space, we included presets for classical setups: you can replay the famous original movie scene (User vs. MCP), fight one on one (on one on one...), setup pairs, or face your destiny as a Lone Hero against one big MCP squadron. Starting from one of these presets, you can create your own personal setup. Please let me know your favorite team play mode!</li><li><span style="font-weight: bold;">Save Settings</span> - a feature you did not know you wanted. Now that there are various ways to set up the game, it would be a pity if you always had to start from scratch when reloading or revisiting. All settings are saved to a browser cookie. Note that the in-game statistics (wins, deaths) are not stored.</li><li><span style="font-weight: bold;">More Accurate Lightcycle Control</span> - I noticed that especially in critical situations where there is a lot work for the rendering engine, the lightcycle control became inaccurate. I improved this by recording the key event time and computing a more precise turn position. This change improves gameplay a lot and increases your chances to beat the stupid, but fast-reacting program players (they somehow remind me of Matrix Agents).</li></ul>I hope you enjoy the new version as much as I do myself. Jangaron started more or less as a proof-of-concept for the Jangaroo language tools and was nice, but probably not long-lasting fun to play in the previous versions. Version 0.5 offers music, sound, and much more variety in gameplay, in particular for multiplayer sessions, so I hope you'll all become <span style="font-style: italic;">Jangaronies</span>! Let me know of your preferences, ideas, feature requests, or if you are willing to contribute! Just leave a comment here or drop me a mail (joo[AT]jangaron[DOT]net).<br />More about the technical challenges, pitfalls we had to overcome, and solutions later...<br />See you on the Grid!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com1tag:blogger.com,1999:blog-3356340406599260358.post-672939040265918142008-05-13T06:30:00.002+02:002008-05-13T06:30:01.947+02:00Playing Jangaron with a GamepadI've been quite busy working on the next game release, but to jolly you along, I have something from the "tips & tricks" section.<br />For two or more players, sharing the keyboard takes Jangaron's game goal that you have to elbow your way through a bit too literally. Also, using the keyboard for an arcade game is not everyone's cup of tea.<br />I remembered the tool that accompanied good old M$'s precision pro joystick, which could make any joystick button simulate any key press (even sequences!), and thought there must be a similar, free tool that works for any joystick or gamepad. I searched, and of course, there are many such tools.<br />I tried <a href="http://xpadder.com/">Xpadder</a>, because at first glance, it looked the most convincing and is free (but don't you forget to donate, pal!), and I must say it really works neat with Jangaron!<br />You can choose two approaches: Either, you map the buttons and axis of your gamepad or joystick to any key and then adapt the settings in Jangaron, which I would <span style="font-style: italic;">not</span> recommend until the next Jangaron version which <a href="http://jangaron.blogspot.com/2008/04/users-voices.html">saves settings</a>. Or, you map the buttons / axis to the preconfigured keys of some Jangaron user player and optionally space (for pause) and return (for confirming the "game over" dialog) -- that's what I did. There is no noticeable performance impact, and if you chose the buttons wisely, you will be rewarded with a new gameplay feeling of Jangaron, especially for multiplayer sessions!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-64765931133877690912008-04-19T15:14:00.005+02:002008-04-21T09:10:05.266+02:00User's Voices II: And the Winner is...The "next features"-poll is closed, thank you for participating! As you can see, there is no clear winner: Both "look left / right" and "2D grid overview" received exactly the same number of votes (4), while the other two candidates, "save settings" and "configure acceleration", have been defeated. In my <a href="http://jangaron.blogspot.com/2008/04/users-voices.html">previous post about the poll</a>, I voiced my doubts about the "2D grid overview" feature, so I am going to take the liberty to start with "look left / right". To be honest, in the meantime I already implemented one of the "loser" features, namely "save settings", since it turned out to be quite a quick-win.<br />While we're at it, I'd like to congratulate Brian (USA) for being the first and (so far) only visitor to actually leave a comment in the Jangaron blog! Why are you other 124 people (at least that's what Googalytics tells me...) so quiet? Brian, in return for your commitment and commendation, I am going to implement your <a href="http://jangaron.blogspot.com/2008/04/users-voices.html?showComment=1208283840000#c9065396649157411048">feature request</a>, too, and introduce configuration of teams and start positions in the next Jangaron version!<br />But please be patient, I have to steal some more time until it's ready to show. Maybe I'll offer a "beta" (wow, isn't that Web-2.0-ish?) before the next stable version, since I have some more surprises up my sleeve...][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com6tag:blogger.com,1999:blog-3356340406599260358.post-16714077498178626772008-04-18T21:04:00.005+02:002008-04-18T22:47:28.758+02:00Multiplayer fixed<blockquote><p>Zaphod tried to run in several equally decisive directions simultaneously. "Right!" he said. "Er ... we've got to get manual control of this ship."</p><p>"Can you fly her?" asked Ford pleasantly.</p> <p>"No, can you?"</p> <p>"No."</p> <p>"Trillian, can you?"</p> <p>"No."</p> <p>"Fine," said Zaphod, relaxing. "We'll do it together."</p></blockquote><br />Sorry, users, since some minor modifications to Jangaron for the "mini" version, <span style="font-style: italic;">multiplayer was broken!</span> Both player views were rendered, but only one could be controlled, independent of key assignment.<br />The reason was a stupid bug: In the <span style="font-family:courier new;">switch</span> statement for key control, I wrote<br /><blockquote style="font-family: courier new;"> case keyMap.slower: [...]; break;<br />otherwise: return true;<br /></blockquote>What I meant was:<br /><blockquote style="font-family:courier new;"> case keyMap.slower: ...; break;<br /><span style="font-weight: bold;">default</span>: return true;<br /></blockquote>But unfortunately, the erroneous <span style="font-family:courier new;">otherwise</span> was interpreted as a label (a JavaScript language construct I never use!), so no error was raised, but <span style="font-family:courier new;">return true</span> was never executed! This led to the first player swallowing <span style="font-style: italic;">all </span>key presses.<br />Of course I fixed the problem as soon as I noticed it. Since it was only a minor patch, I did not increase the version number.<br />You should know that Jangaron is a hobby project. There is no quality assurance, just some basic testing, and there are not yet any real "releases". <span style="font-style: italic;">This is why I need you!</span> If anything does not work or looks awful or is unusable, or if you have any other feed-back, <span style="font-style: italic;">let me know!</span><br />So now, please go ahead and play Jangaron with two or more users! Believe me, it's much more fun than against programs.<br /><span style="font-style: italic;"></span>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-46499208064988694352008-04-14T23:07:00.009+02:002008-12-09T21:23:27.860+01:00Wii love(s) JangaronTron-Sector member <a href="http://www.tron-sector.com/members/profile.aspx?ID=9635">TRON.dll</a> did it - he not only tried out Jangaron on the Wii, he also made a quick video about it and put it <a href="http://www.youtube.com/watch?v=YaOSUJmvdA0">online</a>! The video shows how he configures the keys to match the Wii remote control and proves that the actual game runs on Wii's Opera browser.<br /><object height="355" width="425"><param name="movie" value="http://www.youtube.com/v/YaOSUJmvdA0&hl=en"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/YaOSUJmvdA0&hl=en" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed></object><br />After having conquered the Wii, next target is of course the iPhone:<br /><div style="text-align: left;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1VTSCZ0W9Xq1WshNcfaSkwhzGirCssUvEM_i152s1DAc8Pe5BgIXtc6CdMvZEOx0s4Dx3PMLU9SLr3sxsFIdvd7Rel7Tit6FiSC4vuSTKmoaGh34Y_GotZBwYojezraTWdU_4y5wYxpHy/s1600-h/Jangaron-iPhone.png"><img style="display: block; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1VTSCZ0W9Xq1WshNcfaSkwhzGirCssUvEM_i152s1DAc8Pe5BgIXtc6CdMvZEOx0s4Dx3PMLU9SLr3sxsFIdvd7Rel7Tit6FiSC4vuSTKmoaGh34Y_GotZBwYojezraTWdU_4y5wYxpHy/s400/Jangaron-iPhone.png" alt="" id="BLOGGER_PHOTO_ID_5189218227450176770" border="0" /></a>Looks quite real, but unfortunately isn't... yet! What you see is just a joke some clever dudes put online to exploit the iPhone hype, not a real iPhone emulator. But for fun, you can go to <a href="http://iphonetester.com/">iphonetester.com</a>, rotate the "emulated" iPhone, enter the Jangaron mini URL http://www.jangaron.net/jangaron-mini.html -- and pretend to play Jangaron on an iPhone!<br /></div>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-85229385192832345672008-04-11T21:36:00.022+02:002008-12-09T21:23:28.022+01:00The Art and Science of CSS Border SlantsWhen reading through the games category over at Ajaxian, I stumbled across a <a href="http://ajaxian.com/archives/the-art-and-science-of-javascript-games">review</a> of James Edward's article <a href="http://www.sitepoint.com/print/art-science-javascript">The Art and Science of JavaScript Games</a>. One the one hand, I was quite thrilled by the fact that somebody else had had the idea to write a 3D JavaScript / DHTML game, on the other hand, I was quite disappointed by the realization (given its pretentious title).<br />James Edwards may belong to the "seven of the greatest minds in modern JavaScript" (as quoted on <a href="http://www.brothercake.com/">his own home page</a>), but he misses some points about CSS border slants, which leads to an unnecessary complex solution.<br />Unfortunately, the source he cites, Tantek Çelik's "technique for creating shapes using the interactions between CSS borders", leads to a dead link. I could only find something similar, <a href="http://tantek.com/CSS/Examples/polygons.html">A Study of Regular Polygons</a>. I still prefer the source already mentioned in a previous post, <a href="http://infimum.dk/HTML/slantinfo.html">CSS border slants</a>, which links to the original source of <a href="http://www.meyerweb.com/eric/css/edge/slantastic/demo.html">Eric Meyer's Slantastic Demo</a>.<br /><br /><span style="font-size:130%;">Triangle Man Hates Particle Man</span><span style=";font-family:lucida grande;font-size:130%;" ><br /></span>Whatever source James Edwards used, he should have realized that the shapes he wants to draw for his 3D maze can be produced much simpler. And thus he misses the most important point for a tutorial: keeping things simple!<br />To draw a simple triangle, Edwards uses a bow-tie-shape and cuts it using clipping. He uses this figure to explain his approach:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i2.sitepoint.com/graphics/maze_unclipped-element.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 102px; height: 52px;" src="http://i2.sitepoint.com/graphics/maze_unclipped-element.png" alt="" border="0" /></a>He needs two nested <span style="font-family:courier new;">div</span>s and a second lengthy CSS rule to cut out the triangle (I won't repeat the details here).<br />If he had taken a look at the <a href="http://infimum.dk/HTML/slantHowto.html">Slant How-To</a>, or stopped and thought about the approach for a second before writing a <a href="http://www.sitepoint.com/books/jsdesign1/">book</a> about it, he would have noticed that it is much simpler. Just swap the transparency of the bottom border with the red color of the right border, and you are done. Or even better, collapse the right and bottom border of the bow tie to zero. Just one <span style="font-family:courier new;">div</span> and one simple CSS rule suffice in both cases.<br /><br /><span style="font-size:130%;">Make it complicated, and there is more to explain</span><span style=";font-family:lucida grande;font-size:130%;" ><br /></span>But it gets even worse. In the subsequent sections of the article, two triangles and a rectangle (which is, astonishingly, constructed from a single <span style="font-family:courier new;">div</span>) are combined to form "columns" of a slanting wall:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i2.sitepoint.com/graphics/maze_perspective.thumb.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 419px; height: 388px;" src="http://i2.sitepoint.com/graphics/maze_perspective.thumb.png" alt="" border="0" /></a>As you can see, each column of the wall comprises of four "bricks", where the two triangle bricks are composed of two <span style="font-family:courier new;">div</span>s, which results in a total of <span style="font-style: italic;">six</span> <span style="font-family:courier new;">div</span>s. If I had implemented Jangaron's lightcycle walls like that, the frame rate would probably be two or three, making the game unplayable. Instead, a slanting wall in Jangaron is constructed from a single <span style="font-family:courier new;">div</span> like so:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEWxfQPxkK2EhDNd6LxN4qnlOOSGbug9pY9ZF7oD7B17Iicc0w2YgzWgsEZ0AG3YBIVPm6IjI0ZTQk5EOD72CkqPENkZ2g1IJZl9-bNPZCSwHZqWreMD2jZbbntXYwJ6j4sGUKsF0of08/s1600-h/Jangaron-wall.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEWxfQPxkK2EhDNd6LxN4qnlOOSGbug9pY9ZF7oD7B17Iicc0w2YgzWgsEZ0AG3YBIVPm6IjI0ZTQk5EOD72CkqPENkZ2g1IJZl9-bNPZCSwHZqWreMD2jZbbntXYwJ6j4sGUKsF0of08/s200/Jangaron-wall.png" alt="" id="BLOGGER_PHOTO_ID_5188101081689801042" border="0" /></a>Only the right border has a color, top and bottom border are transparent, the left border has zero width, and <span style="font-family:courier new;">width</span> is also set to zero. The full CSS rule is:<br /><blockquote style="font-family: courier new;">padding: 0;<br />margin: 0;<br />width: 0;<br />height: 5em;<br />border-style: solid;<br />border-color: transparent #E46C0A transparent transparent;<br />border-width: 7em 9em 7em 0;</blockquote> Here is the resulting slant:<br /><div style="border-style: solid; border-color: transparent rgb(228, 108, 10) transparent transparent; border-width: 4em 5em 4em 0pt; margin: 0pt; padding: 0pt; line-height: 0pt; width: 0pt; height: 6em;"></div>Note how using <span style="font-family:courier new;">em</span> (instead of <span style="font-family:courier new;">px</span>) resizes the slant when you change the browser's font size (usually ctrl-+ or ctrl-mouse-wheel)! Of course, this is not always desired, but serves as a quick demo that we are really producing vector graphics in HTML.<br />You could use <span style="font-family:courier new;">margin-top</span> to simulate Edward's "top brick" (I usually prefer absolute positioning). This means we have reduced six <span style="font-family:courier new;">div</span>s to one, with much less CSS hassle.<br /><br /><span style="font-size:130%;"><span style="font-family:lucida grande;"></span></span><span style="font-size:130%;">The TRBL with CSS or: Dad, 11 o'clock!</span><span style="font-size:130%;"><br /></span>Finally, in another section of James Edwards' article, I wasn't sure whether I was probably taken for a fool:<br /><em></em><blockquote><em>These values are specified in the same order (top, right, bottom, left) as they are for other CSS properties, such as border, padding, and margin. Thinking of the word trouble (TRBL) should help you remember the correct order.</em><br /></blockquote>Whoa, those stupid CSS language designers defined these values in some random order so that you have to create a mnemonic to be able to remember it at all!<br />In <span style="font-style: italic;">trouble</span> are also Indy and his father, when in "Indiana Jones and the Last Crusade", they have stolen a plane from the airship, and are now being chased by German fighters:<br /><b><a href="http://www.imdb.com/name/nm0000148/"></a></b><blockquote><b>Indiana Jones: </b>Dad, you're going to have to use the machine gun. Get it ready!<br />[<i class="fine">Henry turns around and gets the gun ready</i>]<br /><span style="font-weight: bold;">Indiana Jones: </span>[<i class="fine">spotting an approaching fighter</i>] 11 o'clock! Dad, 11 o'clock!<br /><span style="font-weight: bold;">Professor Henry Jones:</span> [<i class="fine">looking at his watch</i>] What happens at 11 o'clock?</blockquote>What I want to say is that it is not exactly a new idea to specify directions clock-wise...][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-64170456845253937692008-04-10T02:59:00.006+02:002008-04-10T03:24:21.398+02:00User's Voices<span style="font-style: italic;">Greetings, my fellow conscripts,</span> here is the ultimate chance to influence which Jangaron feature will be next! Just check one or more features in the poll on the left-hand side, press "Vote", and voilà, you just participated in Jangaron game development!<br /><ul><li><span style="font-weight: bold;">save settings</span><br />Jangaron is quite configurable, but after having started the game, you have to reload the page to try other settings, and you always have to start from scratch. This feature would save your settings in a local browser cookie.</li><li><span style="font-weight: bold;">look left / right</span><br />Yes, you can already <span style="font-style: italic;">turn </span>left or right, but this feature is about looking left or right <span style="font-style: italic;">without </span>turning. Might give you the strategic information you need (am I being followed?), and would simply look cool.</li><li><span style="font-weight: bold;">2D grid overview</span><br />This is the mother of all feature requests, but I thought, hey, why do I go through all the pain to create a 3D view, and then people say, "whoa, that's irritating, can't you bring back the old days when the game was just a bunch of colorful lines?". No way, 2D grid overview will not make things that easy, but you may see, if this feature makes it...</li><li><span style="font-weight: bold;">configure acceleration rate</span><br />Sounds a bit technical, but may result in real fun! Imagine, in a two player game, one can go fast with slow acceleration, but the other can accelerate very quickly with a lower maximum speed -- are you curious which combination is a genetic advantage?</li></ul><span style="font-style: italic;">End of line.</span>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com3tag:blogger.com,1999:blog-3356340406599260358.post-26620276286281801982008-04-08T02:31:00.009+02:002008-06-09T22:36:50.083+02:00Jangaron 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).<br />The tricky part was that I wanted the game to start when the iframe receives focus. In any browser <span style="font-style: italic;">but </span>IE, <span style="font-family:courier new;">window.addEventListener("focus", ...)</span> does the job. Even when using the IE equivalent <span style="font-family:courier new;">window.attachEvent("onfocus", ...)</span>, 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 <span style="font-family:courier new;">contentWindow</span>. I won't quote the source, since this solution didn't work, either, at least not for my case: Believe it or not, IE <span style="font-style: italic;">does</span> have some security features and won't allow any script to access its <span style="font-family:courier new;">window.frameElement</span> if it comes from another domain than its container page, in order to prevent cross-site scripting / phishing.<br />At last, I found this post by Hemchand Thalanchery about <a href="http://odondo.wordpress.com/2007/08/28/javascript-and-cross-browser-window-focus/">JavaScript and cross-browser window focus</a>, 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.<br />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.<br />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:<br /><blockquote><iframe width="360" width="180" src="http://www.jangaron.net/jangaron0.5/jangaron-mini.html"><br /></iframe><br /></blockquote>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!).<br />Of course, since Jangaron is a vector game, you can change width and height any way you like!<br />Enjoy!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-56306178794733226752008-04-06T00:47:00.007+02:002008-04-20T22:47:24.730+02:00The Meaning of "Jangaron"Eventually, this post will unveil the meaning of the game's name, "Jangaron".<br />Jangaron stands for many things: fun, a hobby project, an attempt to gain eternal fame, but also a proof-of-concept for a tool set that allows using a subset of JavaScript 2 / <a href="http://www.ecmascript.org/">ECMAScript 4</a> in browsers limited to JavaScript 1.x. I already mentioned the central tool, the JavaScript 2 to 1.x compiler, in a <a href="http://www.blogger.com/2008/03/from-c-64-till-dawn.html">previous post</a>.<br />The project that has the goal to put this whole tool set online as Open Source and create a community around it is code-named "<span style="font-weight: bold;">Jangaroo</span>". The rationale for that name is like so:<br /><ul><li>The project was initiated by a group with the nerdish and preposterous name "True Kangaroo" (which I am a member of...).</li><li>We wanted an artificial name (like all those other cool Web 2.0 projects have) with lots of "oooo"s in it. In fact, it is so artificial that a Google search only returns some folks using "Jangaroo" as their user name in some obscure forums and at Digg, and I'm pretty sure that <a href="http://digg.com/users/jangaroo">Andrew Croshaw</a> is not the type who sues us to grab the domain. Are you, Andy? The same holds true for "Jangaron", where the only off-topic match is on a <a href="http://www.morinhor.com/show_en.asp?lc=Lasorons%20song%282%29#">Mongolian Online Music page</a>. Let's just hope that "Jangaron" is not a Mongolian swear word or something... but would then someone name a song like that?<br /></li><li>While the "J" is most often used for Java frameworks, here, it stands mainly for JavaScript (unfortunately, JSangaroo was too unpronounceable). Well, the tools are written in Java, so in either case, there is a lot of "J" in the project!<br /></li></ul>Of course, my pseudonym "Joo" is nothing but a short version of "Jangaroo" (and also resembles the name "Joe"). Note that it can be written entirely using JavaScript's most important symbol, the square bracket. Self-evidently, the compiler mentioned above is is called "jooc", pronounced like "juice".<br />As you might have already guessed, the "n" in "Jangaron" simply rhymes with "Tron".<br />There you go.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-34292194192169126782008-04-05T02:44:00.009+02:002008-12-09T21:23:28.323+01:00New Jangaron Version 0.43 OnlineGreetings programs,<br /><br />I just put online a new version (0.43) of Jangaron with some improvements you might like:<br /><ul><li>You can now adjust the <span style="font-style: italic;">minimum and maximum speed</span> of each light cycle. Program players currently always go at minimum, but at least each can race at a different speed.</li><li>The on-screen status display has been split into one <span style="font-style: italic;">global status bar </span>that shows the wins, deaths and current state of each player, and a <span style="font-style: italic;">head-up display</span> inside each view port, which shows the view port's player's name, position, direction, and speed (now also graphically) [thx <a href="http://www.tron-sector.com/members/profile.aspx?ID=9635">TRON.dll</a> for the suggestion!].<br /></li><li>The default setting is now that <span style="font-style: italic;">all six players</span> are already added, so you can quickly start a more vivid game. I also adapted the default names and colors to better resemble the movie scenario.<br /></li><li>All starting positions have been moved a bit into the grid, so that now there is room to cross behind them, which keeps you from becoming separated from the opponents early on in the game [thx <a href="http://www.tron-sector.com/members/profile.aspx?ID=6320">TheReelTodd</a>! It does play better!].</li><li>Some minor HTML and CSS changes that make the settings dialog even more flexible and accessible.</li></ul><span style="color: rgb(255, 102, 0); font-weight: bold;">Note that you may have to refresh your browser cache to receive the updated version!</span><br /><br />This is how the new version looks like in two-player split screen mode with the option "light cycle walls are always transparent" on the "Grid settings" tab switched on:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5vpKARtj6mLJ1sLiU36aQQAON88YtGtYY0mj4Ewm0TvfI_vKoghbs3AaOdw_jTaII0hntwDuiehlxjzkT58sa0reiHq4JQvhlfnG4QmL1Q4bkBxqqkPlZT2P9Ct_nVAUvZJ0MHUnj9r8x/s1600-h/Jangaron-4.3-screenshot.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 423px; height: 239px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5vpKARtj6mLJ1sLiU36aQQAON88YtGtYY0mj4Ewm0TvfI_vKoghbs3AaOdw_jTaII0hntwDuiehlxjzkT58sa0reiHq4JQvhlfnG4QmL1Q4bkBxqqkPlZT2P9Ct_nVAUvZJ0MHUnj9r8x/s320/Jangaron-4.3-screenshot.PNG" alt="" id="BLOGGER_PHOTO_ID_5185562253535116546" border="0" /></a><br />Any feed-back is highly welcome! Please play the game and help improve it!<br />Have fun on the grid, and take care not to be derezzed...<br /><br />End of line.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-30065559350709636752008-04-01T14:06:00.005+02:002008-12-09T21:23:28.499+01:00Jangaron Screenshot<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipri3X8MmxEn2-KBdg8hSNHvorL2M7iWiiIMWel-YJDYshxdjFDsnQ-hCMi1UQK1FCHTAkF6bsvhNWl3GPqKnmQhXaIuuaMtOGywRe_-pYrkTHLc9JED7lpjc7CKHgxHGO-lihwB76OmI1/s1600-h/jangaron-screenshot.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipri3X8MmxEn2-KBdg8hSNHvorL2M7iWiiIMWel-YJDYshxdjFDsnQ-hCMi1UQK1FCHTAkF6bsvhNWl3GPqKnmQhXaIuuaMtOGywRe_-pYrkTHLc9JED7lpjc7CKHgxHGO-lihwB76OmI1/s400/jangaron-screenshot.jpg" alt="" id="BLOGGER_PHOTO_ID_5184247336412544242" border="0" /></a>For the very impatient, here is a quick screenshot of the game in action.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-58663603108146550812008-03-31T14:50:00.004+02:002008-03-31T15:24:27.603+02:00Came from Alabama with a laptop on my kneeOoops -- last night, I encountered an embarrassing bug in Jangaron: If you chose the same color for multiple players, a crash of one of them claimed the lives of <span style="font-style: italic;">all </span>same-colored players!<br />I found the bug when trying to reconstruct the original scene from the movie, where all good players feature slightly different red/orange/something colors, while the bad guys are uniformed with blue light cycles. Not too bad, to get rid of all bad guys by crashing one of them, but not too fair, either (hey, good guys always <span style="font-style: italic;">have to be fair</span>, but at least they don't have to brag about their ingenious plan to rule the world until eventually, they are fragged...). Another thing I noticed was that I really have to add a team mode.<br />Of course, I fixed the bug as soon as I could, i.e. on my way to work. Although I don't live in Alabama, riding public transport trains with my laptop (well, the company's laptop) gives my the opportunity to code on Jangaron. In Hamburg, when using a Laptop in public transport, you are still met with puzzled gazes and sometimes even snide remarks, mostly by folks who one minute ago were busy scuffing their thumbs on their mobile's knobby keys.<br />The bug was, as most often, caused by over-optimization combined with sloppiness: The color was a shared object (aliasing), and its alpha value was modified, although Color objects are intended to be immutable. More over, the alpha value is used as (the only) indication of a dying player. For the time being, I just fixed the first issue, but will care about the others later.<br />If you played the game before and still experience the bug after reloading the page, try to clear your browser cache.<br />Have fun!][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com2tag:blogger.com,1999:blog-3356340406599260358.post-89503409074788879562008-03-30T03:13:00.005+02:002008-03-31T20:08:17.759+02:00From C-64 Till DawnI just joined the <a href="http://www.tron-sector.com/forums/">Tron Sector forum</a> to create some promotion for Jangaron and was about writing a really long post, but then I thought, "hey, why did you just start a Jangaron blog? Spare Tron Sector a couple of bytes to host and blog it!" So I just posted a short introductory text and links to the game and this blog.<br />When browsing through their <a href="http://www.tron-sector.com/games/">light cycle games list</a>, I found several justifications for creating yet another one of these. <span style="font-style: italic;">My </span>justification is that I wanted to start a game software project that feels like back in the 80s: Try to do something amazing with very limited technologies. So I got into my head to implement a 3D light cycle race not only as a browser game, but also (mainly to make it harder) without using any plug-in or proprietary browser features like <a href="http://msdn2.microsoft.com/en-us/library/ms532853%28VS.85%29.aspx">filters</a> or <a href="http://en.wikipedia.org/wiki/Canvas_%28HTML_element%29">canvas</a>. It had to be a challenge close to impossible.<br />Moreover, writing a light cycle game is something I failed to finish back when the Tron movie was new (I was young but didn't need the money). I started to implement the game, but my computer graphics skills were as inadequate as the C-64's, so it got buried in oblivion.<br />Well, in the meantime, things changed: I have a Ph.D. in computer science now, which makes me a perfect candidate to re-implement a 25 year old game idea in JavaScript.<br />I have been using and getting to love JavaScript at work for years. It features a unique combination of functional and object oriented programming that leaves the impression of an independent congeniality. To overcome some limitations of the language design and to make things more interesting, already in 2003, on of my colleagues (and co-founder of the company!) anticipated <a href="http://www.ecmascript.org/">ECMAScript 4</a> by creating a compiler from a subset of the specification (as it was then) to JavaScript 1.x as it can be executed in browsers. I continued his work and built a second version that moved a bit more complexity to a run-time library for the sake of even better readable and debuggable compiler output. This left me in a situation where I had all the tools to create awesome JavaScript frameworks and applications, so I needed some excuse to use them even in my spare time.<br />Until half a year ago, I was totally convinced that it is impossible to do any ambitious graphics with (D)HTML. But I am a UI guy, meaning that software without a face is a no-go for me, so I didn't give up. In one of my never-ending CSS-DHTML-JavaScript-google-sessions, I stumbled across <a href="http://www.infimum.dk/HTML/slantinfo.html">CSS border slants</a> (at the latest then I started to be proud of my danish ancestors!), which opened up unbelievable possibilities and kept me from sleeping quite some time. I don't want to deprive you of one quote from the border slants page:<br /><blockquote>For a dynamic example, see the <a href="http://www.infimum.dk/HTML/rotatingStar.html">Rotating Star demo</a>. Also proves that DHTML and JavaScript are not fast enough to do wire-frame games.</blockquote>Ha!, I thought, I will prove you wrong! Despite the fact that Jangaron is not exactly a wire-frame game, but uses a lot of filled trapezia, I guess what you can see by now <span style="font-style: italic;">does </span>prove them wrong. The trick is that I chose a game that quite coincidently has such a limited perspective and so simple game objects that the restrictions of border slants do not apply.<br />Furthermore, there are many things you have to bear in mind to end up with efficient DHTML (and which the creator of the Rotating Star demo probably was not aware of). One anecdote is that while I learned a lot from some <a href="http://dev.opera.com/articles/view/efficient-javascript/">Opera "efficient JavaScript"</a> page, my game ran unbearably slow only in Opera, until very recently -- I still don't know which code change caused the sudden performance change. In many cases, trial and error is your friend. After all, I was surprised that at least on my hardware, the frame rates do not really vary tremendously between different browsers. One browser can treat transparency more efficiently, another delivers smoother animations (less jerking -- better garbage collection?), but the overall frame rate is almost equal. Even most-hated Internet Explorer is not bad when it comes to JavaScript and DHTML execution speed. And believe me, I did not implement browser-specific performance optimizations (the browser-specific workarounds for bugs to get it to run at all were sufficiently complicated).<br />What is <a href="http://www.anybrowser.org/campaign/">said to be true for a Web-site</a> seems to be true for a cross-browser game, too: If you do <span style="font-style: italic;">the right thing</span>, it will be <span style="font-style: italic;">best played with any browser</span>!<br />I hope we can use this blog to discuss more about what <span style="font-style: italic;">the right thing</span> is in JavaScript browser game programming, but now, the daylight-savings-time-bastards have already stolen another hour of my life, Dawn has almost cracked and I have to sleep.<br />Good night.][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0tag:blogger.com,1999:blog-3356340406599260358.post-92127559453889104412008-03-27T21:01:00.006+01:002008-03-31T20:05:59.841+02:00See you on the GridAfter having released a first version of "Jangaron", I thought it was about time to start blogging about all I had to learn (sometimes painfully) to write a <span style="font-style: italic;">wow</span> browser game: JavaScript, (X)HTML, CSS, and many other technologies.<br />But before I really start to give you all the dirty details, have a look at the game in action and tell me if you think it a <span style="font-style: italic;">wow</span>:<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://home.arcor.de/frank.wienberg/jangaron.html" style="display:block" target="jangaron"><img style="margin: 10px auto; border: 2px solid rgb(228, 108, 10); padding: 8px; display: block; background-color: rgb(224, 224, 224);" src="http://home.arcor.de/frank.wienberg/jangaron-logo.png" alt="Jangaron"/></a></div>][][]http://www.blogger.com/profile/16691397407081340400noreply@blogger.com0