Problem with Object Function

[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

[devnull69]

What is the error you get?

Where are the definitions of the (supposedly global) variables gravity, height, width, image_index and sprite?

[Andrew Cay]

The error isn't defined, the page simply doesn't finish compiling the code when I put
obj_player.step() or obj_player.draw() inside the system functions.

I fixed it right now though., looking back at my code. It seems I forgot to add a "this" statement infront of a variable

Thanks devnull!

I have new question , still in relation to objects so I'll continue it here.


So, I got the drawing script to work :

 this.draw = function()
 {
 ctx.drawImage( this.sprite.spr_stand , this.x, this.y);
}

I want to use a state for my sprite, so I have this set up :

this.floor = 0;
this.air = 1;
this.state = this.air;
this.sprite = {
 spr_stand: image_index.player_stand,
 spr_jump: image_index.player_jump
};

But I don't know how to implant this in side the drawImage, I've tried this

 ctx.drawImage( this.sprite[ this.state ] , this.x, this.y);

But it doesn't work, any help? Thanks in advance!

[devnull69]

In order to access a key/value pair out of an object literal with a dynamically generated key you'll have to specify the key (not an index) as a string. Try this

this.floor = "spr_stand";
this.air = "spr_jump";
this.state = this.air;
this.sprite = {
 spr_stand: image_index.player_stand,
 spr_jump: image_index.player_jump
};

ctx.drawImage( this.sprite[ this.state ] , this.x, this.y);

[Andrew Cay]

Thank's so much devnull!