[Andrew Cay]

Here's my code, the problem is when ever I try using an object's (obj_player) step or draw functions. The creation of the object runs fine, I get no errors until I try placing the step and draw functions in.

The problem's are bolded so you won't have to bother with my code. Also If you take a look at my way of loaded images and give advice there it be much appreciated.

    // after page has loaded execute code
        $(document).ready(function(){
            var canvas = $("#canvas")[0];
            var ctx = canvas.getContext("2d");
            var width = $("#canvas").width();
            var height = $("#canvas").height();

            // image loading
                   var image_index = new Array;
                   sources = {
                   player_stand:"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR_fhNlea8E6-PakT9Osdsun7WWYajAt_es_3RmSCok-Yr58PoY",
                   player_jump:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQAdx0odYz_vupZcWI7suqPdTbds8Is9yAJTEt85QsudmBfGA6k"
                   };
                 function loadImages() {
                   var loadedImages = 0;
                   var numImages = 0;
                   // get num of sources - I was going to use this for a loading splash page, but I'm not sure this was working
                   for(var src in sources) {
                        numImages++;
                   }
                   for(var src in sources) {
                         image_index[src] = new Image();
                         image_index[src].src = sources[src];
                   }
                   }

            // player object
                function Player()
                       {
                           this.x = width/2;
                           this.y = height/2;
                           this.gravity = 0;
                           this.vspeed = 1;
                           this.floor = 0;
                           this.air = 1;
                           this.state = this.air;
                           this.sprite = {
                           stand:image_index.player_stand,
                           jump:image_index.player_jump
                           };
                           this.step = function()
                           {
                               this.gravity += this.vspeed;
                               if ( this.y > height )
                                   {
                                       this.y = height - 48;
                                       this.gravity = 0;
                                   }
                               this.y += gravity;
                           }
                           this.draw = function()
                           {
                               ctx.drawImage( sprite[state], this.x, this.y);
                           }
                       }

            // start up the game
                function init()
                {
                    loadImages();
                    obj_player = new Player();
                    background_color = "gray";
                    if(typeof game_loop != "undefined")
                         clearInterval(game_loop);
                    game_loop = setInterval( system, 1000/60);
                }
                // commence starting
                    init();

            // run the game
                function step()
                {
                    obj_player.step();
                }
                function draw()
                {
                    ctx.fillStyle= background_color;
                    ctx.rect(0, 0, width, height);
                    ctx.fill();
                    //obj_player.draw();
                }
                function system()
                {
                    // system loop here
                        step();
                        draw();
                }

        })

I'm new to javascript / html5 but it seems fairly easy.

Thanks for your help,
Cay