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/comicNow 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.
$ ln -s soccer /projects/comic-404/public
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 |
No comments:
Post a Comment