Still Game Jamming

I'm still making progress on my GitHub Game Off 2015 entry. You can play the latest version at http://caseyleonard.com/ggo15/ and look at all my code on GitHub.

Over the past few days, I've been able to add a new power-up that temporarily extends the width of the platforms and some graphical changes which make the game look more like a Gantt chart.

Thanks to the Crafty framework, these changes were relatively easy. First, the power-up. So far I've just picked random accessories from my comic to be placeholders for the different items in the game. There are hamburgers, which are just good for bonus points at the end, and a briefcase for a warp portal. I chose to use a piece of cake for the platform-extender.

To make pieces of cake appear in the game above certain platforms, I just had to create Entities for them. With a certain probability every time a platform is created, I use code like this:

Crafty.e("2D, DOM, Pickup, Cake, Image")
    .image("assets/images/cake.png");

Everything in a Crafty-based game is an entity, which is created by calling Crafty.e(string) where string is a comma-delimited list of component names. The entity created will have the features of all components in the list. In the case of the cake, I created my cake entities to be 2D, DOM, Pickup, Cake, and Image components. The Image component is what allows me to call .image on the newly created entity to set the picture to my piece of cake. Piece of cake!

To make the cake do something when it collides with my frog, I have to add a function somewhere to call when hit. Here's an example.

function onHitCake(e) {

    var entity = e[0].obj;
    entity.removeComponent("Pickup");
    entity.removeComponent("Cake", true);
    entity.destroy();
            
    Crafty("Platform").each(function (i) {
        var p = this;
        var width = 125;
        var nx = p._x - ((width - p._w)/2);
        p.attr({
            "w": width,
            "x": nx
        });
    });

}

When calling Crafty(string), it works much like jQuery to give you the one or more components that match the component ids given by the string parameter. So on line 8 above, I am getting the set of all the Platform entities and executing a function on each of them. In that function, I give them a new width and re-center them based on their new size by changing their x value.

The only thing left to do is tie it all together with collisions. The frog entity (which is still called octocat in the code - I'll rename it one of these days) is created with the Collision component, allowing me to specify behavior when hitting other entities. The example code below is simplified a bit to remove a bunch of stuff that takes place because of the other component types...

var frog = Crafty.e("2D, DOM, Player, Octocat, Physics, Collision")
    .onHit("Cake", onHitCake);

The .onHit(component, function) method tells Crafty to call the specified function when the entity collides with an other entity of type component. So whenever the frog hits a cake, onHitCake gets called.

And that was it. I think I was able to get the cake added to the game in about 30 minutes - including the time it took for me to read the Crafty API to figure some of this stuff out. I think that's pretty good, since my day job, comics, and responsibilities as a parent don't leave me with a whole lot of time to do this game jam thing...

And speaking of comics and games, today's pokes a bit of fun at a famous game from 2014...

Amphibian.com comic for 25 March 2015