Блог

Я пытаюсь напечатать настольную игру под названием snake and ladders. Мне удалось напечатать только первый простой столбец.

 var multiArray=[[" ___","|   |", "|   |","|___|"],
                ["|   |","|   |", "|___|","|   |"],
               ["| E |", "|___|","|   |","|   |"],
               ["|___|","|   |","|   |","|___|"],
               ["|   |","|   |","|___|","|   |"],
                ["| P |","|___|","|   |","|   |"],
                ["|___|"]];


for(var i=0; i<multiArray.length;i  ){
    for(var j=0; j<multiArray[i].length;j  ){
        print(multiArray[i][j]);
    }
}
  

Выполнение:

  ___ 
|   |
|   |
|___|
|   |
|   |
|___|
|   |
| E |
|___|
|   |
|   |
|___|
|   |
|   |
|___|
|   |
|   |
|___|
|   |
| P |
|___|
|   |
|   |
|___|
  

Как я могу сделать это так, чтобы один и тот же столбец печатался еще 7 раз рядом с ним, чтобы выглядеть следующим образом:

  ___ ___
|   |   |
|   |   |
|___|___|
|   |   |
|   |   |
|___|___|
|   |   |
| E |   |
|___|___|
|   |   |
|   |   |
|___|___|
|   |   |
|   |   |
|___|___| 
|   |   |
|   |   |
|___|___|  
|   |   |
| P |   |
|___|___|
|   |   |
|   |   |
|___|___|
  

Я пытался использовать .concat, но он просто добавляет его в нижнюю часть другого столбца. .join и .push также не работают, если я не использую их неправильно.

Один из способов, который я могу придумать, заключается в следующем

 var multiArray =
[
    [" ____",   "|   |",    "|   |",    "|___|"],
    ["|   |",   "|   |",    "|___|",    "|   |"],
    ["| E |",   "|___|",    "|   |",    "|   |"],
    ["|___|",   "|   |",    "|   |",    "|___|"],
    ["|   |",   "|   |",    "|___|",    "|   |"],
    ["| P |",   "|___|",    "|   |",    "|   |"],
    ["|___|"]
];

for (var i = 0; i < multiArray.length; i  ) {
    for(var j = 0; j < multiArray[i].length; j  ){
        // storing the second column. first col = second col
        var secondColumn    = multiArray[i][j];
        // checking if the column has E or P in it
        if (secondColumn.match(/(E|P)/)) {
            // if it does, change the column to empty one
            secondColumn = "|   |";
        }
        // print the same column twice (without E or P)
        console.log(multiArray[i][j]   secondColumn);
    }
}
  

Поскольку вы хотите напечатать один и тот же столбец дважды, но без буквы E или P, простое регулярное выражение решит проблему.

Если вы хотите использовать это на html-странице, а не в консоли или ‘codeboot.org ‘, у вас возникнут проблемы с вашими столбцами. Вы не можете использовать несколько пробелов в строке. HTML-страница будет анализировать его как единый пробел. Вам нужно заменить пробелы с помощью amp;nbsp; . amp;nbsp; означает один пробел. Вы можете использовать это несколько раз.

Вы можете увидеть проблему с пространством здесь: fiddle.

РЕДАКТИРОВАТЬ: Вы сказали, что хотите распечатать это 7 раз. Подойдет приведенный ниже код.

 for (var i = 0; i < multiArray.length; i  ) {
    for(var j = 0; j < multiArray[i].length; j  ){
        var col = multiArray[i][j];
        if (col.match(/(E|P)/)) {
            col = "|   |";
        }
        console.log(multiArray[i][j]   col   col   col   col   col   col);
    }
}
  

Я не знаю, что означает E или P, поэтому остальные столбцы пусты.

ПРАВКА2:

Если вы хотите добавить в столбцы текущий код или удалить из них, это может вызвать проблемы. Обращение к нужному столбцу было бы затруднительным, поскольку столбцы не организованы. Я даю вам альтернативный способ.

 <div id="container"></div>
  

 var container = document.getElementById("container");
var rows = 7;
var cols = 8;

for (var i = 0; i < rows; i  ) {
    container.innerHTML  = '<div class="row"></div>';
    var curRow = container.getElementsByClassName("row")[i];
    for (var j = 0; j < cols; j  ){
        curRow.innerHTML  = '<div class="col"></div>';
    }
}

function addPlayer(p ,r, c) {
    var row = container.getElementsByClassName("row")[r-1];
    var col = row.getElementsByClassName("col")[c-1];
    col.innerHTML = p;
}

function clearColumn(r, c) {
    var row = container.getElementsByClassName("row")[r-1];
    var col = row.getElementsByClassName("col")[c-1];
    col.innerHTML = "";
}

// try passing player name, row number and column number
// in the given order
addPlayer("E", 3, 4);
addPlayer("P", 5, 2);

// you can also clear a specified column
// enter row number and column number
// clearColumn(5,2);
  

Вам следует создать свою собственную HTML-страницу и работать с HTML / CSS, если вы хотите улучшить это. Онлайн-переводчик не сильно поможет.

Вы можете посмотреть живую демонстрацию здесь: fiddle.

Возможно, было бы проще распечатать доску по строкам, а не по столбцам. Таким образом, вы используете проблему с возможностью печати только ниже в качестве решения, намеренно печатая каждую строку под предыдущей строкой.

Для этого потребуется переопределить ваш многомассив, но первая строка может выглядеть примерно так:

 var upperBound  = '  _______________________'
var side        =  '|  |  |  |  |  |  |  |  | '
var bottomBound =  '|__|__|__|__|__|__|__|__|'
console.log(upperBound, 'n', side, 'n', bottomBound)
  

Затем вы могли бы повторить это еще 7 раз (без верхней границы) и получить свою доску!

 console.log(upperBound, 'n', side, 'n', bottomBound)
for(var i = 0; i < 7; i  ){
    console.log(side, 'n', bottomBound)
}
  

Надеюсь, это поможет!