Question

在此代码中，window.onload用于延迟脚本的执行，以防止在加载画布之前对画布的引用。使用start()代码map.fillStyle="CCFFEE按预期运行。在声明var变量时，我没有使用map，以便使其他函数（例如draw()和start()）引用整数。但是，出于某种原因，start()按原样接受变量，并按预期使用它，将矩形（在本例中为背景）绘制到屏幕，而draw()在尝试使用变量时抛出错误。错误：Uncaught ReferenceError: map is not defined。这也发生在update()函数以及任何函数之外的全局范围中。已经使用console.log("Map: " + map);对此进行了测试。我希望这很简洁，你可以提供帮助。

window.onload=function() {
    init();
}

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

function Player(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

function Collider(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

function init() {
    canvas = document.getElementById('map');
    map = canvas.getContext('2d');
    start();
}

function start() {
    //Player Object
    player1 = new Player(gameMap.w / 3, (gameMap.h / 7) * 5, 30, 30);

    //Player Collider Object
    p1Collider = new Collider(player1.x - 15, player1.y - 5, player1.w + 30, player1.h + 130);

    //fillStyle and fillRect work here
    map.fillStyle="#CCFFEE";
    map.fillRect(0, 0, 1280,800);
}

function update(){
    //Error happens here too
}

function draw() {
    requestAnimationFrame(draw);
    now = Date.now();
    delta = now - then

    if (delta > interval) {
        then = now - (delta % interval);
    }

    //Character Collider
    //fillStyle and fillRect do not work here
    //Throws error:  Uncaught ReferenceError: map is not defined
    map.fillStyle="#CCFFEE";
    map.fillRect(p1Collider.x, p1Collider.y, p1Collider.w, p1Collider.h);
}

update();
draw;

Answer 1

我假设列表行是draw();。

您看到此错误是因为您在调用 update();之前呼叫draw()和init() 并设置map。

解决方案：确保在调用 update后调用draw和init 。例如，将调用放在load事件处理程序中。

在函数中声明的全局对象不能被其他函数访问

1 个答案: