Nephew of CSS Shooter (Game Programming)

André Jaenisch (e-acute! and ae not a-umlaut) of https://firefoxosundich.wordpress.com had some comments about my CSS Shooter post at http://firefoxosgaming.blogspot.com/2014/03/css-shooter-game-programming.html that were very useful.

I had used

    document.documentElement.
      style.overflow = 'hidden';

to hide the scrollbars. Because there isn't any "don't show scrollbars" command in Firefox, that seemed like a good idea. Generally people don't use it to hide scrollbars, they use it to clip content outside a particular window.

However, the CSS 2.1 spec, section 11, does define overflow = "hidden" like this:

This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

Because I'm defining the contents of the region, I know there's nothing outside it, so I'm happy to use this when I'm looking at the very edge of the window.

Also, I found an old reference from 2005 to

     overflow: -moz-scrollbars-none 

but it seems to have disappeared and I can't find it on MDN. Anyone know where it went?

André had a different approach, which, rather than use an little-known and possibly not supported in the future API, suggested that I simply reverse the motion slightly before you get to the edge! This works too, with only a little bit of alteration in the code.

Here's his code for the target restart when it hits the left edge:

      // Right edge hit, restart.
      if (tarHor > boardWidth-25) {
        console.log("Target hit right edge!" +
          "Turned around at " + tarHor +
          " + " + boardWidth);
        tarHor = 10;
      }

And here's his code for the bullet:

      // Left edge hit, reverse direction.
      if (ballHor + changeHor < 10) {
        console.log("Ball hit left edge!" +
        "Turned around at " + ballHor +
          " + " + changeHor);
        changeHor = -changeHor;
        ballHor = 10;
        console.log(ballHor + " " + ballVer);
      }
   
      // Right edge hit, reverse direction.
      if (ballHor + changeHor >
        boardWidth - 20) {
          console.log("Ball hit right edge!" +
          "Turned around at " + ballHor +
            " + " + changeHor);
          changeHor = -changeHor;
          // Compensate for unknown width.
          // We want multiples of 10.
          flr = Math.floor(boardWidth / 10);
          ballHor = 10 * flr-30;
        console.log(ballHor + " " + ballVer);
      }

This is perfectly valid and reminds me of the old phrase, "If you can't raise the bridge, lower the river." Games are all about solving problems, and there are usually more than one way to solve a problem.

André suggested that I add this code for the viewport in the head:

      <meta name="viewport"
        content="user-scalable=no,
        initial-scale=1,
        maximum-scale=1,
        width=device-width" />

I'm still not up on viewports but you can read about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.


I'm going to be investigating this a lot more as I look more at responsive web design (RWD). Although for games, adaptive web design might be more appropriate. I will be getting a Firefox OS tablet soon and I'll want to write apps that run on it, the two phones I have, and the nearly-forgotten APC Rock I have sitting lonely in a corner. See my post on APC Rock here http://firefoxosgaming.blogspot.com/2014/01/apc-rock-hardware-review.html.

Other Problems

When I was testing André's code, the bullet at the bottom didn't display! At first I thought it was the code and then it was pointed out that maybe the bitmap wasn't there. It wasn't.

In future code, I'll either avoid bitmaps (probably not likely) or write some code that determines whether the bitmap was actually loaded.  There are some ways to do this by loading the bitmap as an Image and then checking to see if it loaded by having an event handler on the image.

André also had an interesting idea of creating a ball by using a CSS rectangle and rounding the corners so it looks like a ball, from Stack Overflow. https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page/6921838#6921838.

Moving Forward

I've been thinking about where to take this blog. My influences are:

1. Tablet - responsive web design needed!
2. A return of my love for SVG.
3. Playing way too much Starbound http://playstarbound.com/
4. Remembering Sigma Star Saga http://en.wikipedia.org/wiki/Sigma_Star_Saga

So what I'm going to do is create a serious large game in several parts that will consist of the following:

SVG all the way! Why not?

1. A space shooter that you can fly around in.
2. Land on other planets in a side-scrolling view.
3. Enter cities in a top-down view with tiles
4. Make it an actual RPG with statistics, fighting, upgrades, stores, etc.

Stay tuned, but not iTuned!