Typeerror: board[Row] is Undefined - Javascript

Question

Good Afternoon,

I’m asking for help for a project I’m doing in Javascript. My goal at this point is, after creating a game board, to move the pieces.

I’m not making progress right now because of this mistake: Typeerror: board[Row] is Undefined ( line 115 JS). However the variable has already been declared and used previously.

"use strict";
var tableOfGame;
var turtleBoard;
var jewels;
var wall;
var players;
var position;
var p1;
var moveUp;
var boardSize;


function main() {
    boardSize = [];
    turtleBoard = createTurtleBoard(8); //fazer o tabuleiro
    jewels = jewelsInsert(turtleBoard);  //inserir a joia precisa do tamanho do tabuleiro
    wall = wallInsert(jewels, 10);       //inserir muros no tabuleiro precisa da joias, que ja tem tabuleiro e ainda o numero de muros
    players = addPlayers(turtleBoard, 4); //adicionar jogadores às posiçoes iniciais
    tableOfGame = boardOnScreen(players); //passar para a window as linhas em diferentes colunas
    position = playerFinder(tableOfGame, 'p1');
    moveUp = moveUp(tableOfGame, position)
    document.getElementById("game").innerHTML = tableOfGame; //passar para o html

    function createTurtleBoard(boardSize) {
        let table = [boardSize];
        for (var row = 0; row < boardSize; row++) {
            table[row] = [boardSize];
            for (var column = 0; column < boardSize; column++) {
                table[row][column] = 0;
                

            }
        }
        console.log(table)
        return table
    }

    function boardOnScreen(boardSize) {
        let board = ''
        for (var row = 0; row < boardSize.length; row++) {
            for (var column = 0; column < boardSize.length; column++) {
                board += boardSize[row][column] + ' '
            }
            board = board + '</br>'
        }
        return board

    }

    function jewelsInsert(boardSize) {
        let rowA = (boardSize.length) / 2;
        let rowB = (boardSize.length) / 2 - 1;
        let columnA = (boardSize.length) / 2;
        let columnB = (boardSize.length) / 2 - 1;
        boardSize[rowA][columnA] = 'J';
        boardSize[rowB][columnB] = 'J';
        boardSize[rowA][columnB] = 'J';
        boardSize[rowB][columnA] = 'J';
        return boardSize
    }


    function addPlayers(boardSize, numPlayers) {
        let position = boardSize.length - 1;
        switch (numPlayers) {
            case 1:
                boardSize[0][0] = 'P1';
                break;
            case 2:
                boardSize[0][0] = 'P1';
                boardSize[position][0] = 'P2';
                break;
            case 3:
                boardSize[0][0] = 'P1';
                boardSize[position][0] = 'P2';
                boardSize[position][position] = 'P3';
                break;
            default:
                boardSize[0][0] = 'P1';
                boardSize[position][0] = 'P2';
                boardSize[position][position] = 'P3';
                boardSize[0][position] = 'P4';
                break;
        }
        return boardSize
    }


    function wallInsert(boardSize, numWall) {
        let size = boardSize.length - 1;
        let count = 0;
        while (count < numWall) {
            let column = Math.floor((Math.random() * size))
            let row = Math.floor((Math.random() * size))
            if (boardSize[row][column] === 0) {
                boardSize[row][column] = 'W'
                count++
            }
        }
        return boardSize
    }

    function playerFinder(boardSize, player) {
        let board = boardSize;
        for (let row = 0; row <= board.length; row++)
            for (let column = 0; column <= board.length; column++)
                if (board[row][column] == player) {
                    let position = [row, column]

                    return position
                }
    }



    function moveUp(boardSize, player) {
        var n = boardSize.length
        for (let row = 0; row <= n; row++) {
            for (let column = 0; column <= n; column++) {
                if (boardSize[row][column] === player && boardSize[row - 1][column] === 0) {
                    boardSize[row][column] = 0
                    boardSize[row - 1][column] = player
                }
                return player
            }
        }
    }
}
window.onload = main

<!DOCTYPE html>
<html lang="pt">
<head> 
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/CSS" href="style.css">    
    
</head>
<body id="total">
    
    <h3>Game</h3>
    <p id="game"></p>
    <table id="tableOfGame" class = "panel">
        <tr><td></td><td><button id='UP'>UP</button></td><td></td></tr>
        <tr><td><button id = 'Left'>Left</button></td><td></td><td><button id = 'Right'>Right</button></td></tr>
        <tr><td></td><td><button id = "Down">Down</button></td><td></td></tr>
    </table>
    
    <script id ="js" src="game.js"></script>
</body>
</html>

If anyone could help, I would really appreciate it. Although it might be a silly question, it’s what’s holding me back at the moment.

Thank you

Answer 1

First you must make sure that boardSize.legth > 0, otherwise you will not be able to travel it properly in boardOnScreen(boardSize). The first method you call is createTurtleBoard(8) that makes a for (var row = 0; row < boardSize; row++) - realize that the .lenght explicitly, hence it will consider 0. Is that what you want? Because boardSize is initialized (before) as an empty array. All this considering the main() as bootstrap. I hope it helps.