Friday, August 14, 2015

Integration of the Frog Soccer Game

After getting some testers to try out my frog soccer game (mostly children) and making a few tweaks to the physics of the frogs and the ball, I decided that it was good enough to replace the old 404 page on Amphibian.com. Not that I'm completely done with it, but it's good enough that if someone finds it I'm not too upset.

It turns out that was easier said than done.

I have been keeping the source code for the game in its own repository separate from the comic repo. I want to keep the two mostly separate so that I can update the game independently of the comic. How, then, should I go about having them combined from a user perspective when visiting the site? It might not be the best, but I came up with this plan...

First, I moved the variables that control the width and height of the game canvas out of the game2.js file. I put them inside a script tag in the index.html.

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>Froggy 404</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>

    <script>
    
    var width = window.innerWidth;
    var height = window.innerHeight;

    </script>
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
    <script src="js/phaser.min.js"></script>
    <script src="js/game2.js"></script>
    
</head>
<body>

<p>This is the 404 Page for Amphibian.com</p>

<div id="gameArea"></div>

<p>Thanks for playing!</p>
  
</body>
</html>

As you can see, I also added a div with the id "gameArea" to the HTML so that I can explicitly place the canvas when the Phaser Game object is created.

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

I made these changes so that I could include the game2.js file from a totally different HTML page and the game will still work.

The next step was to create a symbolic link in the main directory of the comic to the public directory of the 404-page game. I keep clones of both repositories under the /projects directory on my Ubuntu Linux server.
$ cd /projects/comic
$ ln -s soccer /projects/comic-404/public
Now my comic app can peer into the public folder of the 404-page app using the alias "soccer." This allows me access to the JavaScript, audio, and images as if they were part of the comic without them actually being part of the comic. I also added /soccer to the .gitignore file in the comic's main directory - so git doesn't think soccer is actually part of this repo.

Now I changed the code for the comic app. I set up a special route for the game under the path /404. If http://amphibian.com/404/ is requested, I respond with a special Jade template named "missing." Any requests for other files under that path, such as http://amphibian.com/404/js/game2.js for example, will be served as static content out of the "soccer" path on disk - which is the symbolic link to the public directory of the game's repository.

var soccerRoutes = express.Router();

soccerRoutes.get("/", function(req, res, next) {

    res.render("missing", {
        title: "404 Frog Soccer"
    });

});

soccerRoutes.use(express.static("soccer"));

app.use("/404", soccerRoutes);

The "missing" template has the same style, header, and footer as the rest of Amphibian.com but also includes the "gameArea" div and sets the width and height just like the index.html file in the 404 app does. Now the code in game2.js doesn't care which page is actually including it and works both ways! I can continue to update both apps independently as well. Go to http://amphibian.com/404/ to see it for yourself.

That was my solution. It works well enough, but if you have any better suggestions please leave them in the comments below! Thanks, and don't forget to read today's comic. You won't want to hit the Undo button!

Amphibian.com comic for 14 August 2015