2013-09-27 71 views
0

當試圖引用一個不同的函數中創建的對象我得到'對象未定義'的錯誤。這聽起來像這樣,除了在不同的程序之前工作正常的範圍的問題..javascript:獲取對象未定義

錯誤我得到的是「未捕獲引用錯誤:男人是沒有定義」 ..

我的代碼部分如下表所示:請看到在buildMap()函數創建人對象,並在那裏我嘗試引用它的玩笑()函數..

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 
       ); 
      } 
     } 
    } 
} 
+0

刪除'halfHeight'的右括號後面的逗號 – valverij

+0

您確定定義了「SIZE」嗎? – Adaz

+0

我現在把所有的腳本放在這裏... – Paris

回答

1

這是因爲man是在局部範圍。因此,playGame函數不能「看到」它。

要解決這個問題,只需在buildMap函數之外聲明變量(將「var man;」放入)(在它之前,最好)。

+0

當我把'var man'在buildMap函數之外,我得到'未捕獲的類型錯誤 - 無法設置未定義的屬性vx'.. – Paris

+0

@Paris你是否調用過'buildMap' ...? – Doorknob

+0

是的,它被稱爲只是沒有在顯示的代碼.. – Paris

0

我認爲看你的代碼....你聲明的變量「」,這是當地的功能「buildMap

和您試圖訪問它的另一個功能即。 「瑣事」 ..

可能是這個問題...

你可以讓它成爲全局的......在腳本 希望工程的最上一行解決。

+0

我試圖讓男人全球但後來得到不能設置男人錯誤的財產......! – Paris

+0

我現在已經把所有的腳本放在這裏了...... – Paris

+0

@Paris所以你可能會在你的代碼中調用構建映射......? 但是就這部分代碼而言,你不能以這種方式訪問​​變量。 嘗試使用Chrome開發人員工具(「**按f12在Chrome窗口**上」)進行調試 –