Frog Soccer with Phaser - the Finishing Touches

I'm finally finishing up Frog Soccer, my 404 page game. There were a few outstanding bugs with it that I was able to fix this week (be sure to tell me if you find more!) and I also had to make the page a little nicer. I now include links to play it in full-screen mode as well as a link to the repository on GitHub.

There were two main issues.

WebGL fail! Ignore!

1. If the web fonts could not be loaded, the game never started. It has come to my attention that some proxies (like the kind used in schools and businesses) prevent the web fonts from loading. Besides totally ruining the look of my comic, this actually causes the soccer game to fail since I wait on the active callback from the Typekit Web Font Loader before initializing the game. I fixed this by adding a callback for inactive, which is called when the fonts fail to load. Why the fonts fail to load is a problem for another day.
2. If a frog stood in the corner of the field and blocked a ball toss-in twice in a row, the ball would end up in an endless toss-in loop. This was because a timer was being set to go off one second after the ball went out-of-bounds which assumed the ball had not re-entered play in between. If the ball toss-in bounced off a frog in less than a second, another toss cycle would begin which would be interrupted by the timer, which would move the ball back out-of-bounds and the cycle could continue without end. Crazy. I put a check in to see if the ball was already back in play before starting the toss. Maybe not the most eloquent solution but it works.

There was one additional minor issue. When I tried playing the game on my phone, a Samsung Galaxy S3, it always failed because of some WebGL problem. I believe this to happen in Phaser's startup process which checks to see if it should render with WebGL or Canvas. I changed the code to always use Canvas instead of auto-detecting and now it works...but I still sometimes see the error anyway. I'm going to chalk this one up to a device-specific annoyance and let it go for now. Could be something weird with Phaser's detection method too. I might look into it more if it's happening to other people as well.

var game = new Phaser.Game(width, height, Phaser.CANVAS, "gameArea", {
    preload: preload,
    create: create,
    update: update,
    render: render
});

One more thing - on the comic site, I changed the meta tag on the 404 page to set the page width to the width of the game's canvas. I don't usually set the width for responsive sites, but it made sense for this one page.

<meta name="viewport" content="width=800,user-scalable=1">

So what's next? I might tinker with this game from time to time, but I think I might start working on another one soon. This was my first experience using Phaser and I was very happy with it for the most part. I'm thinking of maybe making a (gasp!) Facebook game to integrate with Amphibian.com. Don't hate me. Look, here's today's comic...

Amphibian.com comic for 4 September 2015