Javascript large array hangs

Question

I've been working on a project for my class and I've completed it theoretically but it has some problems where it does not execute as fast as I'd like. The task is as follows: You have a 10x10 board to make moves on. You go up, down, left or right randomly. If a move takes you off the board skip it. Do this until 1,000,000 steps are taken or you reach the top right of the board. We are also supposed to count the max number of steps that a single tile received and the same with the minimum. I have done this using a 2D array and it counts sometimes and will output however it takes multiple button clicks to get an output. I'm not sure if this is a memory allocation error related to how I am accessing the 2D array to keep track of number of steps or not. I am relatively new to javascript so I don't know if my way was all that efficient.

Code

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h1>Path Game</h1>

    <!-- Starts Game -->
    <button onclick="doGame()">Click Here to start Game</button>
    <p id="MaxSteps"></p>
    <p id="MinSteps"></p>
    <p id="totalSteps"></p>
    <p id="reachedSteps"></p>
    <p id="reachedSquare"></p>
    <p id="reachedBoth"></p>



    <!-- JS -->
    <script>

        function doGame()
        {
            var gameBoard = [0,0];
            var stepCount = 0;
            //10x10 array to hold step counts (may be a better way. check back later)

            //Cell counter
            var cells = [
                         [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,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]
                        ];




            while(true)
            {
                var oneMove = Math.floor(1+(Math.random()*4));

                //Conditional checks

                //Check if both square and step counts are satisfied
                if(gameBoard[0] == 9 && gameBoard[1] == 9 && stepCount == 1000000)
                {
                    document.getElementById("reachedBoth").innerHTML = "Reached 1,000,000 steps and top square";
                    break;
                }
                //Reached Top right before 1,000,000 steps
                else if(gameBoard[0] == 9 && gameBoard[1] == 9)
                {
                        document.getElementById("reachedSquare").innerHTML = "Reached Top right square";
                        break;
                }
                //Reached 1,000,000 steps before top right
                else if(stepCount == 1000000)
                {
                    document.getElementById("reachedSteps").innerHTML = "Reached 1,000,000 steps";
                    break;
                }

                //Movement on the board
                var x = gameBoard[0];
                var y = gameBoard[1];
                cells[x][y] += 1;



                    //Move left
                    if(oneMove == 1)
                    {
                        //Initialized at 1 so less than is suitable
                        if(gameBoard[0] < 0)
                        {
                            gameBoard[0] = 0; //Reset
                        }
                        else{
                            gameBoard[0]--;//Goes left
                        }
                    }
                    //Move right
                    else if(oneMove == 2)
                    {
                        //If its at the edge, keep it there or keeps from going over
                        if(gameBoard[0] >= 9)
                        {
                            gameBoard[0] = 9; //Reset
                        }
                        else{
                            gameBoard[0]++;//Goes right
                        }
                    }
                    //Move up
                    else if(oneMove == 3)
                    {
                        //If its at the edge, keep it there or keeps from going over
                        if(gameBoard[1] >= 9)
                        {
                            gameBoard[1] = 9; //Reset
                        }
                        else{
                            gameBoard[1]++;//Goes up
                        }
                    }
                    //Move down
                    else if(oneMove == 4)
                    {
                        //Initialized at 1 so less than is suitable
                        if(gameBoard[1] < 0)
                        {
                            gameBoard[1] = 0; //Reset    
                        }
                        else{
                            gameBoard[1]--;//Goes down
                        }
                    }


                stepCount++; //Count the steps

            }


           var max = 0;
           var min = Infinity;

            //Find max
            for(var i = 0; i < cells.length;i++)
            {
                for(var j = 0; j < cells[i].length; j++)
                {
                    if(max < cells[i][j])
                        {
                            max = cells[i][j];
                        }
                }
            }


            //Find min
            for(var i = 0; i < cells.length;i++)
            {
                for(var j = 0; j < cells[i].length; j++)
                {
                    if(min > cells[i][j])
                        {
                            min = cells[i][j];
                        }
                }
            }



            //Total Steps print
            document.getElementById("MaxSteps").innerHTML = "Max steps were: " + max;

            document.getElementById("MinSteps").innerHTML = "Min steps were: " + min;

            document.getElementById("totalSteps").innerHTML = "Total steps were: " + stepCount;


        }
    </script>


</body>
</html>

I see a few issues with your code, but no reason why it should hang. I made some edits and ran it locally without issue. Issues: the array indices are 0 to 9, not 1 to 10, you never use x or y, min will always be 0 because it starts at 0 (start it at Infinity or something) — csander
– csander, Commented Aug 24, 2016 at 0:24
@csander Thanks for the help. I've tried to fix what you found but I'm not sure if I have done it correctly. I fixed minimum always being 0. However im not sure about the array indices being 0 to 9. I updated that in my conditionals to what I think you were describing. Also, I use x and y when I increment the cells[][] array using what space the person is currently on. Let me know if im missing anything. — bkedge
– bkedge, Commented Aug 24, 2016 at 0:43
I think you also have the possibility right now of elements in gameBoard being -1 (since if they are 0, you are fine subtracting one from them). I think you can make the logic simpler, e.g. "if (gameBoard[0]) gameboard[0]--" in the oneMove == 1 case. — csander
– csander, Commented Aug 24, 2016 at 1:02
Ah yes, the -1 in gameboard was what was tripping it up. Thanks for the clarification. — bkedge
– bkedge, Commented Aug 24, 2016 at 1:12

Nate Vaughan · Accepted Answer · 2016-08-24 00:48:51Z

This block is the one that strikes me as particularly inefficient:

                if(oneMove == 1)
                {
                    //Initialized at 1 so less than is suitable
                    if(gameBoard[0] < 1)
                    {
                        gameBoard[0] = 1; //Reset
                    }
                    else{
                        gameBoard[0]--;//Goes left
                    }
                }
                //Move right
                else if(oneMove == 2)
                {
                    //If its at the edge, keep it there or keeps from going over
                    if(gameBoard[0] >= 10)
                    {
                        gameBoard[0] = 10; //Reset
                    }
                    else{
                        gameBoard[0]++;//Goes right
                    }
                }
                //Move up
                else if(oneMove == 3)
                {
                    //If its at the edge, keep it there or keeps from going over
                    if(gameBoard[1] >= 10)
                    {
                        gameBoard[1] = 10; //Reset
                    }
                    else{
                        gameBoard[1]++;//Goes up
                    }
                }
                //Move down
                else if(oneMove == 4)
                {
                    //Initialized at 1 so less than is suitable
                    if(gameBoard[1] < 1)
                    {
                        gameBoard[1] = 1; //Reset    
                    }
                    else{
                        gameBoard[1]--;//Goes down
                    }
                }

This is for a class, so I won't offer you an answer directly, but can you think of a solution that instead of incrementing or decrementing your gameboard counters directly using the random value that was generated?

For example, if I had a simple 1-dimension gameboard like so:

var gameboard = [0,0,0];
var position = 0,
    direction = 0;

function move() {
    direction = Math.round(Math.random()) * 2 - 1;
    position += direction;
}

The only thing that is missing is to account for the possibility that I have moved off the gameboard. If the requirement were to start your marker on the other side of the board (think PacMan), this could also be accomplished using the modulo operator, which in JS is %:

function move() {
    direction = Math.round(Math.random()) * 2 - 1;
    position += direction;
    position = (position + 3) % 3;
}

Unfortunately, given your requirements, I don't see a way around if conditions to stay on the board:

    position = position < 0 ? 0 : position;
    position = position > 2 ? 2 : position;

Hopefully this should get you going in the right direction. The above three lines of code could actually be combined into one line, though I prefer to make them a bit more readable.

A few more notes:

Storing your x and y positions in a two-element array called gameBoard is just confusing. Just call them x and y (as you do at the end of your code).
Though the requirements don't call for it, try generating the game board and performing all math so that instead of 10 elements, the game could be changed to n elements by changing only one value in your code. It's good to have the smallest set of controls as possible.

Good luck with your class!

Thanks for the help @jakeblues. I have seemed to have fixed it but I did take your suggestion and got rid of using gameboard as an array and simply used x and y as variables. As far as using a function to generate direction, I had thought about that but since im so new to javascript I just thought I'd do the messy way and use if statements. I'll be sure to think about your suggestion though. Seems like a clever way to get it done.

Collectives™ on Stack Overflow

Javascript large array hangs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related