0

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

7
  • 2
    [i],[j] is not correct syntax. Perhaps you meant snake[i][j].indexOf(someInt) Commented Aug 27, 2014 at 13:22
  • 2
    Try to call it as indexOf([i,j]) Commented Aug 27, 2014 at 13:23
  • Side note: Consider setting the arrayMap points by starting with an empty array, then iterating over snake, walls, foods and set the containing points in arrayMap; so you do not search all three arrays for each and every point of your grid - and do not need indexOf at all :-) Commented Aug 27, 2014 at 13:26
  • i was wrote the code wrong here and i correct it, it not working still. Commented Aug 27, 2014 at 13:27
  • 1
    @webNeat it won't work, because arrays are objects in js and therefore their equality is checked by reference. So if you create var a =[1,0]; and var b =[1,0]; and do a === b you will get false. Commented Aug 27, 2014 at 13:57

1 Answer 1

0

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);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.