finding an array in another Multidimensional array in javascript

Question

I'm writing a simple snakes game using JavaScript and HTML5 canvas. I have a Multidimensional array that hold snake block like this:

snake=[[1,1],[1,2]];

and set it on arrayMap using (snake.indexOf([i],[j])!=-1) then draw arrayMap on canvas.

        for (var i = 0; i < blocksHeightCount; i++) {
            for (var j = 0; j < blocksWidthCount; j++) {

                if ((snake.indexOf(i,j)!=-1)||
                    (walls.indexOf(i,j)!=-1)||
                    (foods.indexOf(i,j)!=-1)) {
                        arrayMap[i][j]=1;
                } else {
                        arrayMap[i][j]=0;
                }
            }
        }

        for (var i = 0; i < blocksHeightCount; i++) {
            for (var j = 0; j < blocksWidthCount; j++) {
                    Block = arrayMap[i][j];
                    if (Block!=0){
                        ctx.fillStyle = (Block != 9) ? colors[Block]
                            : "#bdc3c7";
                        ctx.fillRect(j * cubeWidth, i * cubeHeight
                            , cubeWidth-.4,cubeHeight-.4);
                    }
            }
        }

the problem is indexOf isn't working when I set array on it! It works fine when I set indexOf("i,j") but i need it to be array.

please help, thx

Answer 1

First solution : using Array.map

Each element of your arrays snake, walls and foods is an array with 2 elements. So to check if an [x,y] exists in one of the arrays you need a simple way to compare two arrays [x1, y1] and [x2, y2]. Comparing arrays directly using the operator == will compare their references and not values (Thanks @Elena for the remarque). A way to compare values would be to affect a hash to each array and compare hashes. By hash I mean a number which is unique for each array of type [x, y]. That could be x * blocksWidthCount + y in your case and the code will be :

function getHash(x, y){
    return x * blocksWidthCount + y;
}
var blockHashes = snake.concat(walls).concat(foods).map(function(cell) {
    return getHash(cell[0], cell[1]);
}); // hashes of all blocks in one array

for (var i = 0; i < blocksHeightCount; i++) {
    for (var j = 0; j < blocksWidthCount; j++) {
        if (blockHashes.indexOf(getHash(i, j)) != -1) {
                arrayMap[i][j]=1;
        } else {
                arrayMap[i][j]=0;
        }
    }
}

Second Solution Changing the way we see things

Instead of looping over all cells and verifying if every single cell is a block which gives a complexity of O(N * M) (N number of cells and M number of blocks). We can do better simply by supposing that there is no block and then loop over blocks and mark them as blocks which is in O(N + M) !

function markBlock(cell){
    arrayMap[cell[0]][cell[1]] = 1;
}
for (var i = 0; i < blocksHeightCount; i++)
    for (var j = 0; j < blocksWidthCount; j++)
        arrayMap[i][j] = 0;
snake.forEach(markBlock);
walls.forEach(markBlock);
foods.forEach(markBlock);