The theme was "change" which made me immediately think of frogs. In fact, almost everything makes me immediately think of frogs. I decided to make a game about the life-cycle of frogs. Starting as a tadpole, you have to grab food and avoid being eaten by fish. Other tadpoles are also out to get you. It's a hard life for tadpoles. So in my game, you move your tadpole around in a pond trying to catch falling food and grow into a tadpole with legs, a froglet, and finally a full-grown frog. Once you are a frog you leave the pond, but you have to return to complete the cycle. The game completely changes (see, the "change" thing again) when you are a frog and now it's about jumping back in the water and catching bugs.
I drew some tadpoles and fish and plants and stuff, and found some great music from Incompetech and sound effects on Freesound.org. I can't say enough good things about Kevin MacLeod of Incompetech. The library of extremely high-quality music that he offers royalty-free is just awesome. And his graph paper is pretty cool too.
But what about the code? What did I do? How did I throw something together so fast?
For starters, I didn't use any game development systems. I know some that are very popular and allow you to publish your game as HTML5 and for iOS and Android and a whole bunch of other stuff, but I don't know how to use them. I admit it. I'm not a professional game developer. It's more of a hobby. I am a professional software engineer, and I do know how to write decent JavaScript so I just went with what I knew. I also kept it simple. When the game is simple, the code is simple, and doesn't require a lot of overhead from tools. Here's a quick overview of the basics. You can probably use the outline to make some simple HTML5 games yourself.
There are two absolutely essential packages for making HTML5 games: jQuery and SoundManager2. Well, jQuery might be essential for any type of web development these days. But games aren't much fun without sound and SoundManager2 is the library when you want to do sound from JavaScript. Stop what you're doing, download it, learn it, and love it. Right now.
That being said, making a simple game on an HTML5 canvas element is probably easier than you thought. To begin, create a web page with a canvas element.
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<style>
canvas { border: 1px solid #000000; }
</style>
</head>
<body>
<div>
<canvas id="game" width="800" height="450"></canvas>
</div>
</body>
</html>
You're halfway there! Okay, maybe not halfway. The next thing to do is set up some JavaScript to start working with the canvas. The basic outline of any game is to make a loop that updates the objects on the screen and draws them. In modern browsers, we have a nice utility for that - the window.requestAnimationFrame() function. This method has been added specifically for the purposes of doing animations on web pages, and it is the most efficient way of doing so. The following is a bare-bones version of a game. Note that you have to explicitly call requestAnimationFrame again after each call to your run function (or it will only run once!).
(function(window) {
function Game() {
this.lastTime = null;
this.paused = false;
this.canvas = null;
this.ctx = null;
this.setup = function(options) {
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
var me = this;
window.requestAnimationFrame(function(e) { me.run(e); });
};
this.run = function(timestamp) {
var elapsed;
if (this.lastTime === null) this.lastTime = timestamp;
elapsed = timestamp - this.lastTime;
this.lastTime = timestamp;
this.gameLoop(elapsed)
var me = this;
window.requestAnimationFrame(function(e) { me.run(e); });
};
this.gameLoop = function(elapsed) {
// update all your objects here
this.gameDraw();
};
this.gameDraw = function() {
// clear your canvas
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
this.ctx.save();
// draw all your objects here
this.ctx.restore();
};
} // Game()
game = new Game();
window.game = game;
}(window));
After saving this code (I saved it as "main.js") you can fire it up by adding the following scripts into your HTML file with the canvas element:
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(function() {
game.setup({
canvas: document.getElementById("game")
});
});
</script>
Now as soon as your page is loaded, your setup function is called. It is passed the canvas element and starts looping and drawing. To complete your game, just add some objects to be moved around and drawn!
If you'd like to see my completed code, it's here on GitHub: cwleonard / game-off-2013.
If you'd like to play the completed game, you can find it here: The Frog Lifecycle Game.
Leave a comment below with your scores! A really good time for becoming a frog is about 135 seconds.
