/ Canvas

Developer Diary: Jetpack game HTML5 – Day 2

Milestone of the day:
Spawning enemies and making them move over the screen

Day 2: creating enemies

What's a game without enemies? Well, sure there are games without enemies (The Sims) but I'm creating an action game here (or at least I try to).

Anyway, there was an update for Crafty today (0.4.5) and I had to read the changes to see if nothing critical changed.

The changes can be found here: https://github.com/louisstow/Crafty/wiki/Api-Changes. A lot has been added, but not much changed.
NOTE: randRange() was renamed to math.randomInt(). Since I will be using randoms quite a lot in my game, this might be interesting to remember.
ALSO NOTE: Crafty.module() can now be used to load community components from craftycomponents.com. I suggest you go and have a look what components you can use for your games.

On to the development!

This game uses Box2D (basic stuff), so if you're unfamiliar with it I suggest you read the documentation: http://box2d.org/manual.pdf.
And the full documentation can be found here: http://www.box2dflash.org/docs/2.1a/reference/.

This is the second day of my development and I'm getting pretty familiar with Javascript and Crafty. Yesterday's code was too crappy, so I didn't post it yet. But don't fear, I've optimized my code and I will post and explain it all today.

Problem #1: Timers

First, I must point out that there are no "Timers" in Javascript. Well, you CAN use setTimeout() but this is not asynchronous. So, if you try to use setTimeout() you could end up in an infinite loop. setTimeout() will actually pause your Javascript, that's not what we need.

There is however a very simple solution. All you have to do is use the EnterFrame event, and every time a frame passes, we add 1 to a variable. When that variable reaches the frame per second rate (default 60), 1 second has passed. We then set the variable back to 0 and start again.

Let me illustrate this with some code.

[javascript]var frame_number = 0; //Count frames that have pased, used for the EnterFrame timer
var enemy_blob_delay = Crafty.math.randomInt(30,90);

//Enemy spawner (just an entity; not assigned to a variable)
Crafty.e().bind("EnterFrame", function(e) {
if(frame_number == enemy_blob_delay) {
enemy_blob_delay = Crafty.math.randomInt(30,90);
frame_number = 0;

For my game, the enemy spawns with a random interval between 0,5 and 1,5 seconds.
In this example I've created an enemy spawner. This is just a simple entity (not even assigned to a variable because that's not necessary unless we want to edit the entity).

The createEnemy() function is just a simple function I wrote to create an enemy on the stage. Well, that's pretty much it.

Problem #2: Too much code

Another problem I had today was that I had too much code in my main Javascript file, so I've split it up a bit. I made a separate Javascript file "components.js" where I declare all my game components. e.g. "player and enemy". Example: components.js


  • Define the player component
    Crafty.c("player", {
    init: function() {


  • Define the enemy component
    Crafty.c("enemy", {
    init: function() {

I've also created several functions so that I can easily maintain my "main" scene.
For example:


  • The main scene, most things will happen here
    Crafty.scene("main", function() {





Now it's very easy to see what that scene is doing.

That's pretty much all I've learned today. Feel free to add a comment or take a look at my code. [http://student.nmct.be/michiel.de.mey/html5/jetpack_diary/day_2/]

Michiel De Mey

Michiel De Mey

Full-time geek, Full Stack Engineer and Full Metal Hero. Node.js, #Docker, API design, WebSec & IoT enthusiast. Former San Francisco resident.

Read More
Developer Diary: Jetpack game HTML5 – Day 2
Share this