Question

我正在为我的计算类制作一个游戏，玩家围绕一个网格进行移动，并根据他们的设置和他们在playerPower上移动的地形应该不同地减少。

当玩家移动时，我需要检查他们登陆的盒子的颜色是为了确定扣除的力量。我似乎无法理解如何去做。

评论：//HERE IS WHERE I NEED TO CHECK THE COLOUR是玩家移动时我需要检查框颜色的地方。

Answer 1

我强烈建议用一个单独的变量跟踪玩家的位置，因为它比尝试从CSS定位中获取它更容易/更快地访问JavaScript变量，并找出背景来自DOM本身的颜色。无论如何，这是一个快速的解决方案，我把它扔在一起，我认为它可以给你你想要的东西：

我添加了此变量来跟踪玩家位置：

// x, y coordinates of player
var playerPos = [0, 0];

然后，为了检查颜色，我利用了先前定义的map数组，该数组提供每个地图单元格的颜色。我写了一个带有两个坐标的小函数，并将它们输入到地图数组中以获取颜色。之后使用开关/外壳可以相应地响应每种颜色：

// Checks colour against predefined map
function checkCol(cell, row){
    var color = map[row][cell];

    switch (color){
        // Brown
        case "b":
            break;
        // Green
        case "g":
            break;
        // White   
        case "w":
            break;

        default:
            break;
    }
}

最后，每次按键，都会更新玩家位置的坐标。一种方法（尽管保持在地图范围内）就像这样（注意，在按键期间，相应的情况下，每个方法必须单独放在代码中）：

// Left
playerPos[0] = Math.max(0, playerPos[0] - 1);

// Up
playerPos[1] = Math.max(0, playerPos[1] - 1);

// Right (you didn't specify you wanted this in your code with a comment, so just omit it if you don't want it)
playerPos[0] = Math.min(map[0].length - 1, playerPos[0] + 1);

// Down
playerPos[1] = Math.min(map.length - 1, playerPos[1] + 1);

// After each case, just call this to check the colour at the given position:
checkCol(playerPos[0], playerPos[1]);

此解决方案将所有逻辑保留在JavaScript中，并且不需要检查任何元素的CSS。

这里有一个更新的JSFiddle，以显示已实施的代码。使用Web开发人员工具检查控制台，以防您要验证它是否返回正确的颜色。

希望这有帮助！如果您有任何问题，请告诉我。

如何检查盒子背景颜色......？

1 个答案: