Saturday, April 19, 2008
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...
Friday, April 18, 2008
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?"
"Trillian, can you?"
"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;What I meant was:
otherwise: return true;
default: return true;
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.
Monday, April 14, 2008
After having conquered the Wii, next target is of course the iPhone:
Friday, April 11, 2008
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;Here is the resulting slant:
border-color: transparent #E46C0A transparent transparent;
border-width: 7em 9em 7em 0;
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!What I want to say is that it is not exactly a new idea to specify directions clock-wise...
[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?
Thursday, April 10, 2008
- 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?
Tuesday, April 8, 2008
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.
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">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!
Sunday, April 6, 2008
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?
As you might have already guessed, the "n" in "Jangaron" simply rhymes with "Tron".
There you go.
Saturday, April 5, 2008
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.
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.