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.