For propulsionjs.com: Balloon Game

A JSFIDDLE of the sample demo game.

by erick

HTML

<script src="http://www.propulsionjs.com/propulsion_1.2.js"></script>
<h4>Let's Play With JavaScript</h4>
<canvas width="640" height="480" id="game"></canvas>

CSS

canvas {
        border-width: 1px;
        border-color: black;
        border-style: solid;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

JavaScript

(function() {
    var spr=PP.spr,rm=PP.rm,obj=PP.obj,snd=PP.snd,al=PP.al,global=PP.global,Alarm=PP.Alarm,collision=PP.collision,draw=PP.draw,init=PP.init,key=PP.key,load=PP.load,loop=PP.loop,mouse=PP.mouse,physics=PP.physics,Sound=PP.Sound,SoundEffect=PP.SoundEffect,Sprite=PP.Sprite,view=PP.view,walkDown=PP.walkDown;
    
    init('game',640,480);
    loop.rate = 30;

    // The balloon object is created to better organize the sprites
    spr.balloon = {};
     
    // The new Sprite function will return a new sprite object.
    spr.balloon.red = new Sprite('http://www.propulsionjs.com/demos/balloons/sprites/balloon_red.png',1,32,43);
    spr.balloon.blue = new Sprite('http://www.propulsionjs.com/demos/balloons/sprites/balloon_blue.png',1,32,43);
    spr.balloon.green = new Sprite('http://www.propulsionjs.com/demos/balloons/sprites/balloon_green.png',1,32,43);
    spr.background = new Sprite('http://www.propulsionjs.com/demos/balloons/sprites/background.png',1,0,0);

    // This function will be invoked when all of the resources have finished downloading
    load(function() {
        obj.balloon = {
            parent: {
                mask: spr.balloon.red.mask,
                
                // The initialization function will be invoked when an object is registered.
                initialize: function(t) {
                    // The t parameter passed to this function will hold the same value as "this" will inside a function
                    // It could be written like this in every function:
                    // var t = this;
                    // Having it passed as a parameter saves time.
                     
                    // The x and y properties determine the position of the object in game space.
                    // The x coordinates increase to the left and the y coordinates increase downwards.
                     
                    // The balloon will be randomly assigned a position
                    t.x =...