character jumping

fiddle.js

window.onload = init;

function init(){

    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;
        self.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 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 canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    
    canvas.width = 400;
    canvas.height = 300;
    
    var ctx = canvas.getContext('2d');
    
    document.addEventListener('keydown', function(evt){
        pressed[evt.keyCode] = true;
    }, true);
    
    document.addEventListener('keyup', function(evt){
        pressed[evt.keyCode] = false;
    }, true);

    var Character = function(x, y, sheet, partitions){
        var self = this;
        this.x = x;
        this.y = y;
        this.sheet = sheet;
        this.partitions = partitions;
        this.at = 0;
        this.elapsed = 0;
        this.facing = 1;
        this.start_index = [6, 0, 0];
        this.facing_index = [9, 0, 2];
        this.current = [];

        this.render = function(dt, direction){
            self.elapsed += dt;
            if(direction == 0){
                self.at = self.facing_index[self.facing+1];
            }else {
                self.facing = direction;
                if(self.elapsed > 200){
                    self.at = this.start_index[direction+1] + ++self.at % 6;
                    self.elapsed = 0;
                }
            }
            var offset_x = this.partitions[this.at][0];
            ctx.drawImage(
                this.sheet,
                offset_x, 0,
                this.partitions[this.at][2], this.partitions[this.at][3],
                this.x, this.y, 
                this.partitions[this.at][2], this.partitions[this.at][3]
                );

            this.current = this.partitions[this.at];
        };
    }
    
    var update = function(){
        for(var i=0; i<platforms.length; i++){
            var platform = platforms[i];
            var r1 = [platform[0], platform[1], platform[2], brick.height];
            var r2 = [
                mario.x, 
                mario.y + mario.current[3] -2, 
                mario.current[2], 
                4
            ];
    
            var _intersect = rectangular_intersection(r1,r2);
            if(_intersect && vy > 0){
                mario.y = platform[1] - mario.current[3];
                vy = 0;
                ground = true;
                current_platform = platform;
            }
        }

        if(current_platform
           && (current_platform[0] > mario.x + mario.current[2]
               || current_platform[0] + current_platform[2] < mario.x)){
            ground = false;
            current_platform = null;
        }

        if(!ground){
            vy += g;
            mario.y += vy;
        }
    };
    
    var draw = function(dt){
        ctx.fillStyle = '#89cbff';
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.fillStyle = '#95532d';
        ctx.fillRect(0,canvas.height-30,canvas.width, 30);

        ctx.drawImage(cloud, 50,50);
        ctx.drawImage(cloud, 250,100); 

        if(ground){
            ctx.fillStyle = '#000000';
            ctx.fillText('On ground', 20, canvas.height-10);
        }
        
        ctx.fillStyle = '#000000';
        for(var i=0;i<platforms.length;i++){
            var platform = platforms[i];
            for(var j=0;j<platform[2]/brick.width;j++){
                var img = null;
                if(platform[3] === 0) img = floor;
                else img = brick;
                ctx.drawImage(img, platform[0] + j*brick.width, platform[1]);
            }
        }
            
        //ctx.fillStyle = '#FF0000';
        //ctx.fillRect(x, y, 20,40);
        var direction = 0;
        if(pressed[39]) direction = 1;
        if(pressed[37]) direction = -1;
        mario.render(dt, direction);
        ctx.fillStyle = '#FF0000';
        ctx.fillText(mario.x + ',' + ~~mario.y, 100, canvas.height-10);
    }
    
    var handle = function(){
        if(pressed[32]){
            if(ground){
                vy = -10;
                ground = false;
            }
        }else {
            if(vy < -3) vy = -3;   
        }
        
        if(pressed[39]) mario.x += vx;       
        if(pressed[37]) mario.x -= vx;
    }
    
    var start = new Date();
    var last = new Date();
    
    var pressed = {};
    var ground = true;
    var jumping = false;
    var current_platform = null;
    var vx = 2;
    var vy = 0;
    var g = 0.4;
    var brick = null;
    var floor = null;
    var cloud = null;
    var mario = null;
    var platforms = [];
    
    var loop = function() {
        var now = new Date();
        var dt = now - last;
        last = now;
        update();
        draw(dt);
        handle();
    };
    

    var loader = new ImageLoader({
        'brick': "http://aboumrad.info/images/jump/brick.png",
        'ground': "http://aboumrad.info/images/jump/ground.png",
        'cloud':"http://aboumrad.info/images/jump/cloud.png",
        'mario':"http://aboumrad.info/images/jump/mario.png"

    }, function(images){
        brick = images['brick'];
        floor = images['ground'];
        cloud = images['cloud'];
        var x = 100;
        var y = canvas.height - 50 - images['mario'].height;
        var partitions = [];

        for(var i=0;i<12;i++)
            partitions.push([i*27,0,27,36]);

        mario = new Character(x, y, images['mario'], partitions);

        for(var i=0; i<5; i++){
            var _x = Math.random()*canvas.width;
            var _y = Math.random()*(canvas.height - 100);
            var length = 1 + 4*Math.random();
            platforms.push([_x, _y, (~~length)*brick.width, 1]);
        }
        
        platforms.push([-1200, 250, 100*24, 0]);
        setInterval(loop, 1000/60);
    });
}

Click here to run on jsfiddle