Otherwise I’m still enjoying San Francisco this summer.  The weather has been accomodating for development but I’m looking forward to fall where it should heat up.  Wow, did I just say that?

Thanks Bill.

It only took me about 24 hours of work to get a good version of the game running. It took an extra 15 hours to try and polish out the rough edges. Honestly I could probably use another 24 hours to polish but at this point I feel happy with the game and feel like releasing it and moving on to my next game. Supposedly there is a bug that causes the ship to lock up though I have not experienced it. If you do please let me know and try in detail what was happening at the time of the lockup. Or download the source and fix it yourself.  Enjoy!

Controls:

Space – Fire
Left – Rotate Left
Right – Rotate Right
Up – Forward Thrust
Ctrl – Hyperspace

First off was console output. The simple console.log() method supported by Safari and FireBug is what I use in much of my code. Though supported on the iPhone one cannot view the console at the same time. Instead of falling back to alert() I instead redirect the console output to the server. John Hewitt built a solution similar to mine which is to have your web server accept log messages. Since I’m working on a Java web server I wrote a Servlet that accepts a URL of the form

http://localhost/app/logger.js?msg=Hello%20World

and logs the output to a local file, in my case /tmp/logger.log. Here’s the Servlet code.

public class LoggerServlet extends HttpServlet {
@Override
protected void doGet(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {

   response.addHeader("Cache-Control", "no-cache");
   response.addHeader("pragma", "no-cache");
   response.addHeader("Expires", "-1");
   response.setContentType("text/javascript");
   response.getWriter().write("//Done");
   response.setContentLength(6);

   String message = request.getParameter("msg");
   message = message.replaceAll("rn", "n").replaceAll("r", "n");

  try {
    File x = new File("/tmp/logger.log");
    FileOutputStream fos = new FileOutputStream(x, true);
    PrintWriter pw = new PrintWriter(fos);
    pw.println(message);
    pw.close();
  } catch (java.io.FileNotFoundException fnfe) {
}
} }

On the client I detect if I’m using an iPhone and redirect console.log() to GET this URL instead using a SCRIPT GET. Perhaps using the Image object is better as it doesn’t clutter the DOM. That’s an optimization. Here’s the code.

// This causes browsers without a console or the iPhone to log on the server.
if (typeof console == "undefined" || /iPhone/.test(navigator.platform)) {
var oldConsole = window['console'];
if (typeof console == "undefined")
window.console = { };

console.log = function(msg) {
// Might be too early to do this - can we add directly to the body?
if (typeof document.body == "undefined") {
if (oldConsole) oldConsole.log(msg);
return;
}
var script = document.createElement("script");
script.type = 'text/javascript';
script.src = './logger.js?msg=' + encodeURIComponent(msg);
document.body.appendChild(script);
}
}

It’s simple and works well for my scenarios. To see the log output I just open a Terminal window and run ‘tail -f -n 50 /tmp/logger.log’ which continuously displays new log output.

Trapping Enter Key

I’ve got lots of key handlers that check for the enter key by looking for (event.charCode || event.keyCode) == 13. Sadly this fails on the iPhone as it returns 10 (line-feed) instead of 13 (carriage return). I find it odd that Safari returns 13 like IE and FireFox but the iPhone is different.  If you are handling the enter key then you must check for 10 on the iPhone and 13 on other browsers, or check for both which seems safe.
No Scroll bars with CSS Overflow

The next thing I’ve found but have no fix for is displaying scroll bars on block elements with overflowing content. I use this as do many sites and it’s really too bad the iPhone won’t display a scroll bar. Below is an example that, when viewed on the iPhone, shows no scroll bars but does in all other browsers.