Jangaroo Released and Jangaron Updated to 0.54

It'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.
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 Jangaroo compiler, which was developed by CoreMedia as an internal tool, but has just now been released to the public as Open Source. Guess what kept me busy: I was the initiator and so-called "Program Manager" of the project at CoreMedia, 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.)
Read all about the goal, features, and history of Jangaroo in the Jangaroo Blog.
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 troubleshooting:
If you have any JavaScript errors, try to clear the browser cache. If that still does not help, reset your settings by clicking the corresponding button with the red x 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 version 0.52 or the (very old) stable version. I also updated Jangaron mini in the Blog, so here, clearing your browser may also make problems go away.

Updated to the Latest Jangaroo Compiler
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 performance improvements, the main point is an even better browser compatibility of the Jangaroo runtime. This makes Jangaron run in Konqueror 3.x (tested with 3.4) and even on... yes... Safari/iPhone!!! 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 special iPhone version 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!
But most importantly, Jangaroo being Open Source allows me to release Jangaron as Open Source soon, 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!

Revamped the Settings User Interface
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 splash screen with a new logo including a smoothly increasing glow effect (again, pure JavaScript!).
To come back to the new features, the settings dialog now has

• a large glowing lightcycle changing to the first user player's color and serving as the new "Enter the Grid" button,
• a different color theme,
• expandable, overhauled help texts for each tab,
• it starts on the "Players" tab when visiting for the first time (since there you find the setting you most likely want to change),
• there, it starts with the main two settings: game mode and number of players, and
• in the background is now an optionally animated game grid (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.

One small visual change to the game is that the you win / you lose 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 "analog monitor blur" font effect. 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.

Of course, I also fixed some bugs. For example, combo box selections did not update correctly in Safari. Fortunately, someone else had identified and solved the problem before. The point is that Safari is very close to the spec here, which does not allow two options of a select element to be selected at the same time. So to select a different option, you have to deselect the currently selected one first, or the change is ignored in Safari. The fix was to simply use the selectIndex property of the select element, which avoids this problem completely.

Finally, you may ask yourself, and what about the 3rd person perspective? 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 Jangaron 0.6 for curious and brave Jangaron fans, so let me know if you want me to!

Jangaron 0.52 in Firefox 3 -- but slow

About 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.
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 MouseEvent is defined. Since MouseEvent is supposed to be a constructor function, I used typeof MouseEvent=="function". For reasons beyond my imagination, Firefox 3 changes the type of MouseEvent to "object", so the check failed. Now, I simply use typeof MouseEvent!="undefined".
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 unbearably slow :-(. 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).
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, I do not recommend using Firefox 3 to play Jangaron. 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.
One last hint, if you want to use Firefox 3 for surfing and Firefox 2 to play Jangaron: just google for "firefox.2 firefox.3 parallel". Essentially, you create a separate profile 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.
After being a bit disappointed by Firefox 3, Opera 9.5 and Internet Explorer 8 are my next candidates...

Play 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!
At the request of Brian, I just uploaded a zip of the Jangaron 0.52 files (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 jangaron.html in your favorite browser.
The problem with sound is that Flash (which I use for sound only) refuses to load sounds from local file-URLs. The simplest way to make it work locally is to install a Web-server like Apache (don't be afraid, download the binary release and it's really simple!) and put all Jangaron 0.52 files and the Jangaron 0.52 sound files (3.5 MB in two subfolders) below Apache's htdocs folder. Then, start Apache and browse to http://localhost:8080/jangaron.html, and you can play Jangaron with sound, even when you are not connected to the Internet!
Please tell me if you succeeded to install Jangaron (with or without sound) or contact me if you need more detailed instructions.

From a New Perspective

While some users prefer the first person view, even after adding look left/right/aback, you sometimes miss a bit of overview in the game.
Thus, I started working on a third-person perspective for Jangaron, where you can look over the lightcycle walls. To give you an early preview of how it may look like, I used Wink 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!
What do you think?


The technical challenge of this new perspective is that CSS border slants 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).
But what about arbitrary trapezoids? The solution is to cut the trapezoid in
a zigzag, resulting in serveral right angle triangles and one terminal slant (rightmost figure).
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.
The question was if using this drawing technique degrades performance, 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!

Jangaron Promo Video Mania

It 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 rather kidding remark to TRON.dll, who, as you might remember, had already put together that great video of Jangaron on the Wii. 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 YouTube and posted it in the Tron-Sector forum thread. 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!

A Tiny New Feature for Jangaron (0.52)

This one I stole from Armagetron: 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 Grid settings | infinitely high outer rim, 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.

Fixed Flash detection for Opera / Wii

Some folks over at the Jangaron Tron-Sector thread reported that version 0.5 does not work in certain browsers and under certain circumstances.
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").
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:

Jangaron is based on CSS border slants, which are not fully functional in IE6. One crucial feature, namely transparent borders, is missing in older IE versions, and Jangaron heavily relies on that feature.
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?).
Jangaron's claim "The Tron Lightcycle Game in any modern browser" is to be emphasized on modern, and is also rather a vision than a completely proven fact. I need help for testing and debugging Jangaron in this multitude of browsers, so all you JavaScript / DHTML gurus out there, feel welcome to support!
Thank you for starting to report problems; now, let's analyse and fix them if possible!

Jangaron 0.5 is out!

Finally, its done! We arrived at a level where Jangaron version 0.5 seems stable enough to announce it to the public and offer you an updated version packed with new features!
"We", in this case, are David "Avi" Scott and Frank "Joo" Wienberg and all the others who gave valuable feedback.
Note that version 0.43 is still available at the well-know location www.jangaron.net/jangaron.html. The index page www.jangaron.net now lets you choose between the stable (0.43) and the experimental (0.5) version.
Night of the Feature Creep
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"!
To give you a quick overview of what to expect from Jangaron 0.5:

• Look Left/Right/Aback - 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.
• Sound and Music - This one is the real feature creep. I revamped Gustavo Ribeiro Amigo's Javascript Sound Kit 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!
• Team Play and Presets - I promised Brian 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!
• Save Settings - 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.
• More Accurate Lightcycle Control - 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).

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 Jangaronies! 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).
More about the technical challenges, pitfalls we had to overcome, and solutions later...
See you on the Grid!

Playing Jangaron with a Gamepad

I've been quite busy working on the next game release, but to jolly you along, I have something from the "tips & tricks" section.
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.
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.
I tried Xpadder, 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!
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 not recommend until the next Jangaron version which saves settings. 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!

User'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 previous post about the poll, 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.
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 feature request, too, and introduce configuration of teams and start positions in the next Jangaron version!
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...

Multiplayer fixed

Zaphod tried to run in several equally decisive directions simultaneously. "Right!" he said. "Er ... we've got to get manual control of this ship."

"Can you fly her?" asked Ford pleasantly.

"No, can you?"

"No."

"Trillian, can you?"

"No."

"Fine," said Zaphod, relaxing. "We'll do it together."

Sorry, users, since some minor modifications to Jangaron for the "mini" version, multiplayer was broken! Both player views were rendered, but only one could be controlled, independent of key assignment.
The reason was a stupid bug: In the switch statement for key control, I wrote

case keyMap.slower: [...]; break;
otherwise: return true;

What I meant was:

case keyMap.slower: ...; break;
default: return true;

But unfortunately, the erroneous otherwise was interpreted as a label (a JavaScript language construct I never use!), so no error was raised, but return true was never executed! This led to the first player swallowing all key presses.
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.
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". This is why I need you! If anything does not work or looks awful or is unusable, or if you have any other feed-back, let me know!
So now, please go ahead and play Jangaron with two or more users! Believe me, it's much more fun than against programs.

Wii love(s) Jangaron

Tron-Sector member TRON.dll did it - he not only tried out Jangaron on the Wii, he also made a quick video about it and put it online! 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.

After having conquered the Wii, next target is of course the iPhone:

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 iphonetester.com, rotate the "emulated" iPhone, enter the Jangaron mini URL http://www.jangaron.net/jangaron-mini.html -- and pretend to play Jangaron on an iPhone!

The Art and Science of CSS Border Slants

When reading through the games category over at Ajaxian, I stumbled across a review of James Edward's article The Art and Science of JavaScript Games. 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).
James Edwards may belong to the "seven of the greatest minds in modern JavaScript" (as quoted on his own home page), but he misses some points about CSS border slants, which leads to an unnecessary complex solution.
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 Study of Regular Polygons. I still prefer the source already mentioned in a previous post, CSS border slants, which links to the original source of Eric Meyer's Slantastic Demo.

Triangle Man Hates Particle Man
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!
To draw a simple triangle, Edwards uses a bow-tie-shape and cuts it using clipping. He uses this figure to explain his approach:He needs two nested divs and a second lengthy CSS rule to cut out the triangle (I won't repeat the details here).
If he had taken a look at the Slant How-To, or stopped and thought about the approach for a second before writing a book 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 div and one simple CSS rule suffice in both cases.

Make it complicated, and there is more to explain
But it gets even worse. In the subsequent sections of the article, two triangles and a rectangle (which is, astonishingly, constructed from a single div) are combined to form "columns" of a slanting wall:
As you can see, each column of the wall comprises of four "bricks", where the two triangle bricks are composed of two divs, which results in a total of six divs. 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 div like so:
Only the right border has a color, top and bottom border are transparent, the left border has zero width, and width is also set to zero. The full CSS rule is:

padding: 0;
margin: 0;
width: 0;
height: 5em;
border-style: solid;
border-color: transparent #E46C0A transparent transparent;
border-width: 7em 9em 7em 0;

Here is the resulting slant:

Note how using em (instead of px) 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.
You could use margin-top to simulate Edward's "top brick" (I usually prefer absolute positioning). This means we have reduced six divs to one, with much less CSS hassle.

The TRBL with CSS or: Dad, 11 o'clock!
Finally, in another section of James Edwards' article, I wasn't sure whether I was probably taken for a fool:

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.

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!
In trouble 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:

Indiana Jones: Dad, you're going to have to use the machine gun. Get it ready!
[Henry turns around and gets the gun ready]
Indiana Jones: [spotting an approaching fighter] 11 o'clock! Dad, 11 o'clock!
Professor Henry Jones: [looking at his watch] What happens at 11 o'clock?

What I want to say is that it is not exactly a new idea to specify directions clock-wise...

User's Voices

Greetings, my fellow conscripts, 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!

• save settings
  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.
• look left / right
  Yes, you can already turn left or right, but this feature is about looking left or right without turning. Might give you the strategic information you need (am I being followed?), and would simply look cool.
• 2D grid overview
  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...
• configure acceleration rate
  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?

End of line.

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!

The Meaning of "Jangaron"

Eventually, this post will unveil the meaning of the game's name, "Jangaron".
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 / ECMAScript 4 in browsers limited to JavaScript 1.x. I already mentioned the central tool, the JavaScript 2 to 1.x compiler, in a previous post.
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 "Jangaroo". The rationale for that name is like so:

• The project was initiated by a group with the nerdish and preposterous name "True Kangaroo" (which I am a member of...).
• 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 Andrew Croshaw 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 Mongolian Online Music page. Let's just hope that "Jangaron" is not a Mongolian swear word or something... but would then someone name a song like that?
  
• 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!
  

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".
As you might have already guessed, the "n" in "Jangaron" simply rhymes with "Tron".
There you go.

New Jangaron Version 0.43 Online

Greetings programs,

I just put online a new version (0.43) of Jangaron with some improvements you might like:

• You can now adjust the minimum and maximum speed of each light cycle. Program players currently always go at minimum, but at least each can race at a different speed.
• The on-screen status display has been split into one global status bar that shows the wins, deaths and current state of each player, and a head-up display inside each view port, which shows the view port's player's name, position, direction, and speed (now also graphically) [thx TRON.dll for the suggestion!].
  
• The default setting is now that all six players 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.
  
• 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 TheReelTodd! It does play better!].
• Some minor HTML and CSS changes that make the settings dialog even more flexible and accessible.

Note that you may have to refresh your browser cache to receive the updated version!

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:

Any feed-back is highly welcome! Please play the game and help improve it!
Have fun on the grid, and take care not to be derezzed...

End of line.

Jangaron Screenshot

For the very impatient, here is a quick screenshot of the game in action.

Came from Alabama with a laptop on my knee

Ooops -- 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 all same-colored players!
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 have to be fair, 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.
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.
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.
If you played the game before and still experience the bug after reloading the page, try to clear your browser cache.
Have fun!

From C-64 Till Dawn

I just joined the Tron Sector forum 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.
When browsing through their light cycle games list, I found several justifications for creating yet another one of these. My 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 filters or canvas. It had to be a challenge close to impossible.
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.
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.
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 ECMAScript 4 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.
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 CSS border slants (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:

For a dynamic example, see the Rotating Star demo. Also proves that DHTML and JavaScript are not fast enough to do wire-frame games.

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 does 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.
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 Opera "efficient JavaScript" 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).
What is said to be true for a Web-site seems to be true for a cross-browser game, too: If you do the right thing, it will be best played with any browser!
I hope we can use this blog to discuss more about what the right thing 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.
Good night.

See you on the Grid

After 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 wow browser game: JavaScript, (X)HTML, CSS, and many other technologies.
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 wow: