javascript: Getting object is not defined

Question

when trying to reference an object created in a different function I get 'object is not defined' error. This sounds like a scope problem except this has worked in a different program before..

Error I get is 'uncaught reference error: man is not defined'..

Part of my code is listed below: Please see where the man object is created in the buildMap() function and where I try to reference it in the playGame() function..

    var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");

var man;

// Map code

var EMPTY = 0;
var TREE_BOTTOM = 1;
var TREE_TOP = 2;
var SKY = 3;
var CLOUD = 4;
var CLOUD_LEFT = 5;
var CLOUD_RIGHT = 6;
var PLATFORM = 7;
var EGG = 8;
var CAVE = 9;
var MEAT = 10;
var MAN = 11;
var DINO = 12;
var GUARD = 13;
var GROUND = 14;

// Map array

var map = [
           [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
           [3,3,3,3,3,3,3,3,5,6,3,3,3,3,3,3,3,3,3,3,5,6,3,3],
           [3,3,5,6,3,3,4,3,3,3,3,3,3,3,5,6,3,3,3,3,3,3,3,3],
           [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,9,3,3,3],
           [3,7,7,3,3,3,3,3,3,3,3,3,3,3,3,3,7,7,7,7,7,7,3,3],
           [3,3,3,3,3,3,3,3,3,7,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
           [3,3,3,7,7,7,3,3,3,3,3,3,7,7,3,3,3,3,3,3,3,4,3,3],
           [3,3,3,3,3,3,3,3,5,6,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
           [3,3,4,3,3,3,3,3,3,3,3,3,4,3,3,7,7,7,7,7,3,3,3,3],
           [3,3,3,3,3,7,7,7,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
           [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3],
           [3,3,3,3,3,3,3,3,3,3,3,7,7,7,7,3,3,3,3,3,3,3,3,3],
           [3,3,2,3,3,3,3,3,3,3,2,3,3,3,3,3,2,3,3,3,2,3,3,3],
           [14,14,1,14,14,14,14,14,14,14,1,14,14,14,14,14,1,14,14,14,1,14,14,14]
           ];

var gameObjects = [
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,12,0,0,0,0,0,0,0,8,12,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,12,0,8,0,0,0,0],
                  [0,0,0,0,0,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                  [0,0,0,0,0,0,11,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
                  ];

// Cell size

var SIZE = 32;





// The number of rows and columns

var ROWS = map.length;
var COLS = map[0].length;

// Sprite object

var spriteObject =
{
  sourceX: 0,
  sourceY: 0,
  sourceWidth: 32,
  sourceHeight: 32,
  width: 32,
  height: 32,
  x: 0,
  y: 0,
  vx: 0,
  vy: 0,
  visible: true,

  //Getters
  centerX: function()
  {
    return this.x + (this.width / 2);
  },
  centerY: function()
  {
    return this.y + (this.height / 2);
  },
  halfWidth: function()
  {
    return this.width / 2;
  },
  halfHeight: function()
  {
    return this.height / 2;
  },
};

//arrays to store game objects

var sprites = [];
var eggs = [];
var dinos = [];
var platforms = [];

var assetsToLoad = [];
var assetsLoaded = 0;

//load the tilesheet

var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "../images/spritesheet.png";
assetsToLoad.push(image);

//Game states

var LOADING = 0;
var BUILD_MAP = 1;
var PLAYING = 2;
var OVER = 3;
var gameState = LOADING;

// key codes

var LEFT = 37;
var RIGHT = 39;
var SPACE = 32;

// Directions

var moveLeft = false;
var moveRight = false;





window.addEventListener("keydown", function(event) {
    switch(event.keyCode)
    {
        case LEFT:
            moveLeft = true;
            break;

        case RIGHT:
            moveRight = true;
            break;

            }}, false);

window.addEventListener("keyup", function(event) {
    switch(event.keyCode)
    {
        case LEFT:
            moveLeft = false;
            break;

        case RIGHT:
            moveRight = false;
            break;

            }}, false);

update();

function update() {

    requestAnimationFrame(update, canvas);

    switch (gameState) {
        case LOADING:
            console.log("loading...");
            break;

        case BUILD_MAP:
            buildMap(map);
            buildMap(gameObjects);
            gameState = PLAYING;
            break;

        case PLAYING:
            playGame();  
            break;

        case OVER:
            endGame();
            break;

    }

    render();
}

function loadHandler() {
    assetsLoaded++;
    if (assetsLoaded === assetsToLoad.length) {
        image.removeEventListener("load", loadHandler, false);
        gameState = BUILD_MAP;  
    }
}

function buildMap(map) {
    for (var row=0; row < ROWS; row++) {
        for (var col=0; col < COLS; col++) {
            var currentTile = map[row] [col];
                if (currentTile !== EMPTY) {


                switch (currentTile) {

                    case GROUND:
                        var ground = Object.create(spriteObject);
                        ground.sourceX = 0;
                        ground.sourceY = 0;
                        ground.x = col * SIZE;
                        ground.y = row * SIZE;
                        sprites.push(ground);
                        break;

                    case TREE_BOTTOM:
                        var treeBottom = Object.create(spriteObject);
                        treeBottom.sourceX = 0;
                        treeBottom.sourceY = 32;
                        treeBottom.x = col * SIZE;
                        treeBottom.y = row * SIZE;
                        sprites.push(treeBottom);
                        break;

                    case TREE_TOP:
                        var treeTop = Object.create(spriteObject);
                        treeTop.sourceX = 0;
                        treeTop.sourceY = 64;
                        treeTop.x = col * SIZE;
                        treeTop.y = row * SIZE;
                        sprites.push(treeTop);
                        break;

                    case SKY:
                        var sky = Object.create(spriteObject);
                        sky.sourceX = 0;
                        sky.sourceY = 96;
                        sky.x = col * SIZE;
                        sky.y = row * SIZE;
                        sprites.push(sky);
                        break;

                    case CLOUD:
                        var cloud = Object.create(spriteObject);
                        cloud.sourceX = 0;
                        cloud.sourceY = 128;
                        cloud.x = col * SIZE;
                        cloud.y = row * SIZE;
                        sprites.push(cloud);
                        break;

                    case CLOUD_LEFT:
                        var cloudLeft = Object.create(spriteObject);
                        cloudLeft.sourceX = 0;
                        cloudLeft.sourceY = 160;
                        cloudLeft.x = col * SIZE;
                        cloudLeft.y = row * SIZE;
                        sprites.push(cloudLeft);
                        break;

                    case CLOUD_RIGHT:
                        var cloudRight = Object.create(spriteObject);
                        cloudRight.sourceX = 0;
                        cloudRight.sourceY = 192;
                        cloudRight.x = col * SIZE;
                        cloudRight.y = row * SIZE;
                        sprites.push(cloudRight);
                        break;

                    case PLATFORM:
                        var platform = Object.create(spriteObject);
                        platform.sourceX = 0;
                        platform.sourceY = 224;
                        platform.x = col * SIZE;
                        platform.y = row * SIZE;
                        sprites.push(platform);
                        platforms.push(platform);
                        break;

                    case CAVE:
                        var cave = Object.create(spriteObject);
                        cave.sourceX = 0;
                        cave.sourceY = 288;
                        cave.x = col * SIZE;
                        cave.y = row * SIZE;
                        sprites.push(cave);
                        break;

                    case EGG:
                        var egg = Object.create(spriteObject);
                        egg.sourceX = 0;
                        egg.sourceY = 256;
                        egg.x = col * SIZE;
                        egg.y = row * SIZE;
                        sprites.push(egg);
                        eggs.push(egg);
                        break;

                    case MEAT:
                        var meat = Object.create(spriteObject);
                        meat.sourceX = 0;
                        meat.sourceY = 320;
                        meat.x = col * SIZE;
                        meat.y = row * SIZE;
                        meat.visible = false;
                        sprites.push(meat);
                        break;

                    case DINO:
                        var dino = Object.create(spriteObject);
                        dino.sourceX = 0;
                        dino.sourceY = 416;
                        dino.x = col * SIZE;
                        dino.y = row * SIZE;
                        sprites.push(dino);
                        dinos.push(dino);
                        break;

                    case GUARD:
                        var guard = Object.create(spriteObject);
                        guard.sourceX = 0;
                        guard.sourceY = 480;
                        guard.x = col * SIZE;
                        guard.y = row * SIZE;
                        sprites.push(guard);
                        break;

                    case MAN:
                        var man = Object.create(spriteObject);
                        man.sourceX = 0;
                        man.sourceY = 352;
                        man.x = col * SIZE;
                        man.y = row * SIZE;
                        sprites.push(man);
                        break;
                }
            }
        }
    }
}



function playGame() {

    if (moveLeft && !moveRight) {
        man.vx = -3;
    }

    if (moveRight && !moveLeft) {
        man.vx = 3;
    }

    if (!moveLeft && !moveRight) {
        man.vx = 0;
    } 

    man.x += man.vx;

}

function endGame() {

}

function render() {
    drawingSurface.clearRect(0, 0, canvas.width, canvas.height);

    if (sprites.length !== 0) {
        for (i=0; i < sprites.length; i++) {
            var sprite = sprites[i];
            if (sprite.visible) {
                drawingSurface.drawImage (
                    image,
                    sprite.sourceX, sprite.sourceY,
                    sprite.sourceWidth, sprite.sourceHeight,
                    Math.floor(sprite.x), Math.floor(sprite.y),
                    sprite.width, sprite.height
                );
            }
        }
    }
}

Remove the comma at the after the closing bracket of halfHeight — valverij
– valverij, Commented Sep 27, 2013 at 12:16
Hi Guys, thanks very much for the help, it was that I hadn't made the man variable global, which I tried but then hadn't taken the 'var' off the other declaration !!! — Paris
– Paris, Commented Sep 27, 2013 at 14:08

tckmn · Accepted Answer · 2013-09-27 12:18:02Z

1

That's because man is in a local scope. Therefore, the playGame function can't "see" it.

To fix this, just declare the variable (put "var man;") outside of the buildMap function (right before it, preferrably).

answered Sep 27, 2013 at 12:18

tckmn

59.7k27 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paris Over a year ago

When I put 'var man;' outside the buildMap function I get 'uncaught type error - cannot set property vx of undefined'..

tckmn Over a year ago

@Paris Did you call buildMap...?

tckmn Over a year ago

@Paris Did you call it before you called playGame?

Mayur Gupta · Accepted Answer · 2013-09-27 12:19:59Z

0

what i think looking at your code is .... you have declared the variable "man" which is local to function "buildMap"

and you are trying to access it in another function ie. "playGame"..

may be this is the problem ...

you can solve it by making it global... at the topmost line of the script hope it works.

answered Sep 27, 2013 at 12:19

Mayur Gupta

7803 gold badges9 silver badges24 bronze badges

2 Comments

Paris Over a year ago

I tried making man global but then get cannot set property of man errors...!

Mayur Gupta Over a year ago

@Paris so you may be calling the build map in your code right ...??? but as far as this part of code you cant access the variable in this way. try to debug it using chrome developer tool ("press f12 on chrome window")

Collectives™ on Stack Overflow

javascript: Getting object is not defined

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related