2d Array Javascript

Question

i made this as 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>

and as JS file:

(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";

                }


            }
        }

    }
}());

My purpose is the green square to become red over the black squares. My condition to see if the green square is over the black one is ok but I cannot understand why the var "player" 's backgroundColor property can't be called in the keydown listener

thank you!

What is your question? Please be specific.

dgvid
– dgvid

2014-04-01 19:08:46 +00:00
Commented Apr 1, 2014 at 19:08 — dgvid
– dgvid, Commented Apr 1, 2014 at 19:08

Callidior · Accepted Answer · 2014-04-01 19:26:06Z

1

After changing the color of the player cell to red, you call render(), which re-creates the cell and sets it's color to green.

A quick fix is changing to following line at the end of render():

player.style.backgroundColor = "green";

to:

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

But maybe you should think about creating the elements only once and re-using them later on.

Edit: Here is a JSFiddle, that work's as I think you expect it: http://jsfiddle.net/TXbjD/

edited Apr 1, 2014 at 19:26

answered Apr 1, 2014 at 19:20

Callidior

2,9042 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

2d Array Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related