0

当试图引用在不同函数中创建的对象时，我得到“对象未定义”错误。这听起来像是一个范围问题，除了之前在不同的程序中工作过..

我得到的错误是'未捕获的参考错误：未定义人'..

下面列出了我的部分代码：请查看 man 对象在 buildMap() 函数中的创建位置以及我尝试在 playGame() 函数中引用它的位置。

    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
                );
            }
        }
    }
}
4

2 回答 2

1

那是因为man在本地范围内。因此，该playGame功能无法“看到”它。

var man;要解决这个问题，只需在函数外部声明变量（放置“ ”） buildMap（最好在它之前）。

于 2013-09-27T12:18:02.353 回答
0

我认为查看您的代码是....您已声明变量“ man ”，该变量是函数“ buildMap ”的本地变量

并且您正在尝试在另一个功能中访问它，即。“玩游戏”..

可能是这个问题...

您可以通过使其成为全局来解决它......在脚本的最上面一行希望它有效。

于 2013-09-27T12:19:59.783 回答