Question

我将其设为HTML

<!doctype html>
<head>
    <meta charset="utf-8">  
    <script src="jQuery 2.1.js"></script>

    <title>2d array</title>
</head>

<body>
    <div id="stage"></div>
    <p id="output"></p>
    <script src="2D_ARRAY ch color.js"></script>
</body>

<style>
#stage {
    position: relative;
}

.cell {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid black;
    background-color: white;
}

.player {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid black;
    background-color: white;
}

p {
    position: relative;
    top: 240px;
    width: 400px;
}

</style>

和JS文件：

(function(){


    var stage = document.querySelector("#stage");
    var output = document.querySelector("#output");

    window.addEventListener("keydown" , keydownHandler , false);

    var map = 
    [
    [0, 1, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, 3]        
    ];  

    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, 2]

    ];  



    var UP = 38;
    var DOWN = 40;
    var RIGHT = 39;
    var LEFT = 37;

    var SHIP = 2;
    var PERETE = 1;


    var ROWS = map.length;
    var COLUMNS = map[0].length;

    var playerRow;
    var playerColumn;


    var SIZE = 40;
    render();

    function keydownHandler(event) {
        var player = document.querySelector(".player");

        switch (event.keyCode) {

            case UP:

            if (playerRow > 0) {

                gameObjects[playerRow][playerColumn] = 0;
                playerRow --;
                gameObjects[playerRow][playerColumn] = SHIP;


            }

            break;

            case DOWN:
            if (playerRow < 7) {

                gameObjects[playerRow][playerColumn] = 0;
                playerRow ++;
                gameObjects[playerRow][playerColumn] = SHIP;

            }

            break;

            case LEFT:
            if (playerColumn > 0) {

                gameObjects[playerRow][playerColumn] = 0;
                playerColumn --;
                gameObjects[playerRow][playerColumn] = SHIP;


            }
            break;

            case RIGHT:
            if (playerColumn < 7) {

                gameObjects[playerRow][playerColumn] = 0;
                playerColumn ++;
                gameObjects[playerRow][playerColumn] = SHIP;

            }
            break;
        }

        if (map[playerRow][playerColumn] === PERETE) {  

            player.style.backgroundColor = "red";   

        }       

        render();
    }




    function render() {


        for (rows = 0; rows < ROWS; rows++) {

            for (columns = 0; columns < COLUMNS; columns++) {

                var cell = document.createElement("div");
                cell.setAttribute("class" , "cell");
                stage.appendChild(cell);

                pereteRow = rows;
                pereteColumn = columns; 

                cell.style.top = (rows * SIZE) + "px";
                cell.style.left = (columns * SIZE) + "px";

                if (map[rows][columns] === 1) {

                    cell.style.backgroundColor = "black";               

                }                               

                if (gameObjects[rows][columns] === SHIP) {

                    var player = document.createElement("div");
                    player.setAttribute("class" , "player");

                    stage.appendChild(player);



                    playerRow = rows;
                    playerColumn = columns;

                    player.style.top = (rows * SIZE) + "px";
                    player.style.left = (columns * SIZE) + "px";

                    player.style.backgroundColor = "green";

                }


            }
        }

    }
}());

我的目的是在黑色方块上变成红色的绿色方块。我的条件是看绿色正方形是否超过黑色正方形，但我无法理解为什么无法在player监听器中调用var“keydown”的backgroundColor属性

谢谢你！

Answer 1

将播放器单元格的颜色更改为红色后，调用render()，重新创建单元格并将其颜色设置为绿色。

快速修复正在更改为render()末尾的以下行：

player.style.backgroundColor = "green";

为：

if  (map[playerRow][playerColumn] === PERETE)
    player.style.backgroundColor = "red";
else
    player.style.backgroundColor = "green";

但也许你应该考虑只创建一次元素并在以后重新使用它们。

编辑：这是一个JSFiddle，我认为你的工作正常：http://jsfiddle.net/TXbjD/

2d数组Javascript

1 个答案: