I'd been having some trouble displaying text in sixty second shooter. There's some stuff Google's working on that's still in development that worked well but I don't want to rely on it. A couple versions of Chrome ago, using browser text on top of the native client stuff seemed to hash my framerate - but either it was my imagination or they fixed it. Browser text is pretty decent now, particularly if your game isn't CPU bound - you can check it out by playing the game with the about:flags framerate counter enabled and turning the "browser text" option on and off.
But searching websites for how to arrange text left me with no clue how to make it look "videogamey" - but eventually, with some advice from Gregg Tavares and others, I found what I was looking for, and here it is.
For a lot of this, jsfiddle.net was awesome for just mucking around with a decent iteration loop.
You can check this all out in the field, by the way, by going to the game sixtysecondshootertest.appspot.com and choosing 'view source' - (you can also see how I did the game's audio.)
I'm a rank amateur at this stuff, so if you know better ways, I'd love to hear them.
Web fonts are cool. My wife picked out 'Comfortaa' for sixty second shooter. It does seem to add a second or two to the load time, which is a problem, but I'll work that out someday - the game really needs a loading bar.
I just wanted to overlay text on top of the game area, for a start. Could HTML even do that? I wondered. The old HTML I knew was only good for arranging witihin a single layer. Overlap wasn't its thing.
Eventually I tracked down the "position: absolute;" style in CSS. It's just what I needed - there's even a z-index if I want to control the order things are displayed, though I didn't seem to need it. It feels good just knowing its there.
For example, to put the player's score and whatever other useful in-game information in the upper-left hand corner...
Creating Elements On The Fly
Sometimes these would stick off the screen, and ugly scroll bars would pop in. Using overflow: hidden on them wouldn't fix it - so I used overflow: hidden on the entire page. Which will mess people up with screensizes smaller than 1024x768, but according to my stat reporting nobody's running that small ... so far.
Resizing The Game To Fit The Window
And that was all I needed, up until I wanted the game to resize with the window. Up until now I'd been doing everything in absolute pixels.
The hard part was putting text in the right place - particularly centered text. One way is to use absolute: position, left: 50%, text-align: center, width: arbitrarypx, margin-left: -onehalfarbitrarypx. (Resize that window to see it in action.)
But some of my text, I didn't just want to center it absolutely - I wanted it centered in the middle of the larger, left-hand pane. And it had all sorts of tabley stuff and radio button lists and doodads inside it. This was the biggest pain. This was where I broke out the new flex box stuff which is differently supported in different browsers ... on the bright side, since I'm only supporting Chrome, I only had to use -webkit-box. On the dark side, I discovered interesting things like it's hard to combine flex box with absolute position - look what happens (Chrome/webkit only) if you flex box a list at the bottom of the screen. (My solution for the lower nav bar was to use display: inline and lots of padding-right - they don't spread out exactly the way I wanted but whatev.)
For the box-centered-in-a-pane, I ended up faking it with padding. There's got to be a better way:
I learned almost everything I know about CSS from CSS: The Missing Manual... and a lot of Googling.