javascript - 重绘网格的二级激活问题（游戏逻辑）

Question

我正在构建一个带有第二级钥匙/门的 2D js pacman。这个想法是在抓住钥匙后有能力进入下一个级别。一旦 pacman 上门，网格就会更新。游戏数据是一个包含两个网格的数组。重新绘制网格的最佳方法是什么？也有人可以建议创造鬼魂的好资源吗？先感谢您。

电平变化逻辑

let level = 0;

let grid = gameData[0]

function levelChange() {
    console.log(grid[pacman.y][pacman.x] === grid[door.y][door.x])
    if (grid[pacman.y][pacman.x] === grid[door.y][door.x]) {
        grid = gameData[1];
        level += 1;
    }
    console.log(level)
    console.log(grid)
}

let map;

let pacman = {
    x: 6,
    y: 4,
    direction: 'right'
};

let door = {
    x: 11,
    y: 8,
}

绘图网格

function drawMap() {
    map = document.createElement('div');
    // console.log(grid)
    let tiles = createTiles(grid);
    tiles.forEach(tile => { 
        map.appendChild(tile);
    });
    document.getElementById('body').appendChild(map)
    // document.body.appendChild(map);
}

调用级别更改

function setupKeyboardControls() {
    document.addEventListener('keydown', function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 37) {
            moveLeft();
        } else if (e.keyCode === 38) {
            moveUp();
        } else if (e.keyCode === 39) {
            moveRight();
        } else if (e.keyCode === 40) {
            moveDown();
        }
        eraseMap();
        drawMap();
        screenScore();
        doorUnlock();
        levelChange();
    });
}

function main() {
    drawMap();
    setupKeyboardControls();
}

main();

标签： javascript

Answer 1

只需将 drawMap/eraseMap 移动到 setupKeyboardControls() 的底部