浏览器在运行JavaScript时冻结

当我运行此代码时，窗口/选项卡冻结，我不确定如何调试/修复它，帮助

//此函数在页面加载完成后激发

function gameLoop() {
// Initializing all Global Variables
edge = Math.sqrt(levelArray.length);

// Canvas setup function calls here, including calls to assign input handlers
setupGhostWorkerArray();
setupCanvas(levelArray);

// Adding direct user input to a Canvas Element
canvas.addEventListener("keyup", keyHandler, false);

//实际的游戏循环

while (isPlayerAlive && boxFound) {
    addHumanPause();
    hauntLevel(levelArray);
}
}

function setupGhostWorkerArray() {
workerArray = new Array();
ghostLocationArray = new Array();
// Assuming a level has 2 ghosts
for (i = 0, j = 0; i < levelArray[0].length; i++) {
    if (levelArray[i] == "ghost") {
        ghostArray[j] = i;
        workerArray[j] = new Worker("gameWorker.js");
        j++;
    }
}
}

function setupCanvas(levelArray) {
var currentX = 0,
    currentY = 0;

emptyTile = document.getElementById('empty');
ghostTile = document.getElementById('ghost');
playerTile = document.getElementById('boy');
wallTile = document.getElementById('wall');
boxTile = document.getElementById('box');

for (var i = 0; i < edge; i++) {
    for (var j = 0; j < edge; j++) {
        switch (levelArray[i][j]) {
            case "empty":
                // empty location
                ctx.drawImage(emptyTile, currentX, currentY);
                break;
            case "wall":
                // wall block
                ctx.drawImage(wallTile, currentX, currentY);
                break;
            case "box":
                // box block
                ctx.drawImage(boxTile, currentX, currentY);
                break;
            case "ghost":
                // enemy sprite
                ctx.drawImage(ghostTile, currentX, currentY);
                break;
            case "player":
                // player sprite
                ctx.drawImage(playerTile, currentX, currentY);
                break;
        }
        currentX += elementEdge;
    }
    currentY += elementEdge;
}
}

//玩家并没有踩到一个盒子

function boxFound(levelArray) {
return checkFor("box");
}

function checkFor(checkFor) {
var found = false;

for (var i = 0; i < levelArray.length; i++) {
    if (levelArray[i] == checkFor);
    found = true;
}

return found;
}

//将数组传递到工作区，以在地图上获取重影的新位置

function hauntLevel(levelArray) {
var subArrayEdge = 7;
var arrayEdge = Math.sqrt(levelArray.length);
var ghostFound = false,
    subArray;

for (var i = 0, l = 0; i < levelArray.length; i++) {
    ghostFound = false;
    if (levelArray[i] == "ghost") {
        subArray = new Array();
        ghostFound = true;
        // Ghost found, start constructing a 7x7 composed of the blocks surrounding
        // the ghost (blocks out of bounds on the levelArray are represented as walls).
        // Start from the upper left corner, left to right, top to bottom(like a page in a book)
        var blockIndex = i - (arrayEdge * 3) - 3;
        for (var j = 0; j < 49; j++) //A 7x7 array will have 0-48 indices
        {
            for (var k = 0; k < subArrayEdge; k++) {
                if (blockIndex < 0 || blockIndex > (levelArray.length - 1)) {
                    subArray[j] = "wall";
                } else {
                    subArray[j] = levelArray[blockIndex];
                }
                blockIndex++;
            }
            // Next row, start from the left again
            blockIndex = blockIndex + arrayEdge - subArrayEdge;
        }
    }

    if (ghostFound) {
        workerArray[l].onmessage = function (event) {
            moveObject(ghostLocationArray[l], event.data);
        }
        workerArray[l].postMessage(subArray);
        l++;
    }
}
}

function keyHandler(theEvent) {
var direction;
switch (theEvent.keyCode) {
    case 87:
        // w key to move up
        direction = "up";
        break;
    case 83:
        // s key to move down
        direction = "down";
        break;
    case 65:
        // a key to move left
        direction = "left";
        break;
    case 68:
        // d key to move right
        direction = "right";
        break;
    case 82:
        // r key to restart the level
        // NOT IMPLEMENTED
        break;
    case 81:
        // q key to restart the game
        // NOT IMPLEMENTED
        break;
}

moveObject(playerLocation, direction);
}

---

这会无限期地阻塞

while (isPlayerAlive && boxFound) {
    addHumanPause();
    hauntLevel(levelArray);
}

您希望将游戏循环设置为每隔一段时间触发一次的滴答事件。在打勾期间，执行所有逻辑和更新

您已经编写了很多代码，这些代码显示了您的能力，所以我只想让您检查setInterval或setTimeout，而不是试图为您拼凑所有这些

祝你好运

此外，永远不要这样做：

// Slow down the game to a human playable level
// Long Working Loop
function addHumanPause() {
    for (var i = 0; i < 10000; i++) {
        for (var j = 0; j < 10000; j++) {
            // Do Nothing
        }
    }
}

---

所有这一切只是让CPU旋转一段时间，不让浏览器响应任何事件。即使是按键、单击或关闭此%@$之类的重要操作，都会让我的膝盖灼伤

您应该调试自己的代码。首先在首选浏览器环境Firebug中使用开发人员工具，即开发人员工具、Chrome开发人员工具，并在JavaScript代码中插入断点，以查看执行何时达到这些点。我的第一个猜测是，您在其中的某个地方创建了一个无限循环。检查您的while循环。在Chromium上，我得到未捕获的InvalidStateError：试图使用不可用或不再可用的对象。而不是Chrome的无限循环俚语？我一生中从未遇到过这样的错误

function hauntLevel(levelArray) {
var subArrayEdge = 7;
var arrayEdge = Math.sqrt(levelArray.length);
var ghostFound = false,
    subArray;

for (var i = 0, l = 0; i < levelArray.length; i++) {
    ghostFound = false;
    if (levelArray[i] == "ghost") {
        subArray = new Array();
        ghostFound = true;
        // Ghost found, start constructing a 7x7 composed of the blocks surrounding
        // the ghost (blocks out of bounds on the levelArray are represented as walls).
        // Start from the upper left corner, left to right, top to bottom(like a page in a book)
        var blockIndex = i - (arrayEdge * 3) - 3;
        for (var j = 0; j < 49; j++) //A 7x7 array will have 0-48 indices
        {
            for (var k = 0; k < subArrayEdge; k++) {
                if (blockIndex < 0 || blockIndex > (levelArray.length - 1)) {
                    subArray[j] = "wall";
                } else {
                    subArray[j] = levelArray[blockIndex];
                }
                blockIndex++;
            }
            // Next row, start from the left again
            blockIndex = blockIndex + arrayEdge - subArrayEdge;
        }
    }

    if (ghostFound) {
        workerArray[l].onmessage = function (event) {
            moveObject(ghostLocationArray[l], event.data);
        }
        workerArray[l].postMessage(subArray);
        l++;
    }
}
}

function keyHandler(theEvent) {
var direction;
switch (theEvent.keyCode) {
    case 87:
        // w key to move up
        direction = "up";
        break;
    case 83:
        // s key to move down
        direction = "down";
        break;
    case 65:
        // a key to move left
        direction = "left";
        break;
    case 68:
        // d key to move right
        direction = "right";
        break;
    case 82:
        // r key to restart the level
        // NOT IMPLEMENTED
        break;
    case 81:
        // q key to restart the game
        // NOT IMPLEMENTED
        break;
}

moveObject(playerLocation, direction);
}

while (isPlayerAlive && boxFound) {
    addHumanPause();
    hauntLevel(levelArray);
}

// Slow down the game to a human playable level
// Long Working Loop
function addHumanPause() {
    for (var i = 0; i < 10000; i++) {
        for (var j = 0; j < 10000; j++) {
            // Do Nothing
        }
    }
}