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...
Posts
