CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Problem with Object Function (http://www.codingforums.com/showthread.php?t=283897)

Andrew Cay 12-10-2012 01:58 PM

Problem with Object Function
 
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.
Code:

    // 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 12-10-2012 03:26 PM

What is the error you get?

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

Andrew Cay 12-11-2012 03:32 AM

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 :
Code:

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 :
Code:

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
Code:

ctx.drawImage( this.sprite[ this.state ] , this.x, this.y);
But it doesn't work, any help? Thanks in advance!

devnull69 12-11-2012 07:06 AM

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
Code:

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 12-11-2012 01:24 PM

Thank's so much devnull!


All times are GMT +1. The time now is 08:48 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.