sprite management w/ test

fiddle.html

<div id="qunit"></div>
<div id="qunit-fixture"></div>

fiddle.js

window.onload = init;

function init() {
     var rectangular_intersection = function(r1, r2){
          var t1 = [r1[0], r1[0] + r1[2], r1[1], r1[1] + r1[3]];
          var t2 = [r2[0], r2[0] + r2[2], r2[1], r2[1] + r2[3]];
          return !(t2[0] > t1[1] || 
                   t2[1] < t1[0] || 
                   t2[2] > t1[3] ||
                   t2[3] < t1[2]);
    };
    
    var ImageLoader = function(args, callback){
        // Usage: new ImageLoader({
        //                'img1':'/url/to/img1',
        //                'img2':'/url/to/img2',}, cb);
        // Returns: {'img1': [Image], 'img2': [Image]}
        
        var self = this;
        this.loaded = 0;
        
        this.images = {};
      
        for(var entry in args){
            var _img = new Image();
            this.images[entry] = _img;
            _img.onload = function() {
                   self.loaded +=1;
                   if(self.loaded == Object.keys(args).length)
                       callback(self.images);
            }
            _img.src = args[entry];
        }
    };
    
    var SpriteGroup = function(){
        var self = this;
        this.children = [];
        
        this.render = function(args){
            for(var i=0;i<this.children.length;i++){
                 this.children[i].render(args);   
            }
        };
        
        this.add = function(sprite){
            this.children.push(sprite);
        };
        
        this.remove_index = function(index){
            this.children.splice(index, 1);
        }
        
        this.remove = function(sprite){
            for(var i=0;i<this.children.length;i++){
                if(this.children[i] == sprite){
                    this.children.splice(i, 1);    
                    break;
                }
            }
        }
        
        this.collides_with_sprite = function(sprite, callback){
            var collisions = [];
            for(var i=0;i<this.children.length;i++){
                var target = this.children[i];
                if(target.collides_with(sprite)){
                    collisions.push(target);
                    if(callback) callback(target);
                }
            }
            return collisions;
        }
        
        this.collides_with_group = function(group, callback){
            var _source_collisions = [];
            var _target_collisions = [];
            for(var i=0;i<group.children.length;i++){
                var sprite = group.children[i];
                var _collisions = self.collides_with_sprite(sprite, callback);
                if(_collisions.length){
                    _source_collisions.push(sprite);
                    for(var j=0; j<_collisions.length;j++)
                        if(_target_collisions.indexOf(_collisions[j])==-1)
                            _target_collisions.push(_collisions[j]);
                }
            }
            return [_target_collisions, _source_collisions];
        };
    };
    
    var Sprite = function(args){
        var self = this;
        this.x = args.x || 0;
        this.y = args.y || 0;
        this.image = args.image;
        
        if(args.group) args.group.add(this);
    
        this.rect = function() {
            var target = self.image || args;
            return [
                this.x,
                this.y,
                target.width,
                target.height];
        };
        
        this.collides_with = function(sprite){
            return rectangular_intersection(
                    self.rect(),
                    sprite.rect());
        };
    };
    
    // Test
    test("Sprite creation", function () {
        var sprite = new Sprite({x:0, y:0, width:10, height:10});
        
        equal(sprite.x, 0);
        equal(sprite.rect()[3], 10);
    });
    
    test("Sprite creation with image", function () {
        var img = new Image();
        img.width = 200;
        img.height = 100;
        
        var sprite = new Sprite({x:0, y:0, image:img});
        
        equal(sprite.x, 0);
        equal(sprite.rect()[3], 100);
    });
    
    test("Sprite collision success", function () {
        var s1 = new Sprite({x:0, y:0, width:10, height:10});
        var s2 = new Sprite({x:5, y:5, widht:10, height:10});
        
        ok(s1.collides_with(s2));
    });
    
    test("Sprite collision fail", function () {
        var s1 = new Sprite({x:0, y:0, width:10, height:10});
        var s2 = new Sprite({x:11, y:11, width:10, height:10});
        
        ok(!s1.collides_with(s2));
    });
    
    test("Sprite group collision with sprite", function () {
        var group = new SpriteGroup();
        var s1 = new Sprite({group:group, x:0, y:0, width:10, height:10});
        var s2 = new Sprite({group:group, x:15, y:15, width:10, height:10});
        var s3 = new Sprite({group:group, x:20, y:20, width:10, height:10});
        
        var target = new Sprite({x:8, y:8, width:10, height:10});
        
        collisions = group.collides_with_sprite(target);
        
        equal(collisions.length, 2);
    });
    
    test("Sprite group collision with sprite group", function () {
        var group = new SpriteGroup();
        var s11 = new Sprite({group:group, x:0, y:0, width:10, height:10});
        var s12 = new Sprite({group:group, x:15, y:15, width:10, height:10});
        var s13 = new Sprite({group:group, x:20, y:20, width:10, height:10});
    
        var group2 = new SpriteGroup();
        var s21 = new Sprite({group:group2, x:0, y:0, width:10, height:10});
        var s22 = new Sprite({group:group2, x:15, y:15, width:10, height:10});
        var s23 = new Sprite({group:group2, x:20, y:20, width:10, height:10});
        var s24 = new Sprite({group:group2, x:0, y:0, width:50, height:50});
        
        
        collisions = group.collides_with_group(group2);
        console.log(collisions);
        equal(collisions.length, 2);
        equal(collisions[0].length, 3);
        equal(collisions[1].length, 4);
    });

}

fiddle.manifest

authors:
  - Omar Abou Mrad
resources:
  - http://code.jquery.com/qunit/qunit-1.12.0.js
  - http://code.jquery.com/qunit/qunit-1.12.0.css

Click here to run on jsfiddle