Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Arizona
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    What is the error you get?

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

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Arizona
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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);

  • Users who have thanked devnull69 for this post:

    Andrew Cay (12-11-2012)

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Arizona
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank's so much devnull!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •