Кто поможет нарисовать вот такой треугольник на JavaScript?

284
25 марта 2017, 01:26

Как нарисовать такой треугольник на JavaScript?

     * 
    ***
   *****
  *******
 *********

Буду признателен, если объясните как это работает.

Пока у меня такой код получается:

var lines = 7;
var str = " ";
var star = "*";
for(var i = 0; i < lines; i++){
    str += star;
    console.log(str);
}
Answer 1

Например так:

var i = 0, j = 0;
// Желаемое количество строк
var max = 15;
var space = "",
    star = "";
while (i < max) {
    space = "";
    star = "";
    for (j = 0; j < max - i; j++) space += " ";
    for (j = 0; j < 2 * i + 1; j++) star += "*";
    console.log(space + star);
    i++;
}
Answer 2

А вот ещё так можно:

var lines = line = 5, a='.', b='*';
while(line-->0) console.log(Array(line+1).join(a) +Array(2*(lines-line)).join(b) +Array(line+1).join(a));

Получится:

....*....
...***...
..*****..
.*******.
*********

Как это работает:

Цикл while уменьшает переменную line на 1 и выполняется пока она (до уменьшения, т.к. "--" после переменной) больше 0. При начальном значении 5, внутри цикла line принимает значения 4,3,2,1,0

Выводим в консоль очередную строку: console.log()

Аргументом в него передаём сумму трёх строк: что-то до звёздочек, звёздочки, и что-то после них (если выводим только звёздочки и пробелы, то третья часть «после них» не нужна).

Пробелы до звёзд. Их нужно столько же, какое значение принимает переменная line. Напр., для первой строки line=4 и пробелов нужно 4. Для последней - 0 и 0.

Чтобы получить N символов подряд, можно воспользоваться таким трюком: создаём пустой массив из N+1 элементов, и «склеиваем» его, используя наш символ в качестве разделителя. Напр., массив из трёх элементов [1,2,3], склеив разделителем ":", получим:

[1,2,3].join(":")  //  "1:2:3"

А если массив состоит из пустых элементов, то в итоге будет строка, состоящая только из разделителей:

Array(3).join(":") //  "::"

Итак, line пробелов даст выражение Array(line+1).join(" ").

Звёзды. Число звёзд начинается с 1 и увеличивается шагами по два: 1,3,5. А для трюка с .join() понадобится ещё на единицу больше: 2,4,6... Надо из ряда 4,3,2,1,0 получить 2,4,6,8,10. Т.к. line уменьшается, а нужно возрастание, наверное, line надо взять со знаком "–": -4, -3, -2. «Приподнять», прибавив начальное lines: lines-line = 1,2,3.. и сделав подъём покруче, умножив на 2: 2,4,6.. – то, что нужно. Итого, выражение числа элементов в массиве для звёзд: (lines-line)*2, и звёзды в строке будут: Array((lines - line) * 2)

Оформить это в виде функции можно так:

/** 
 * Возвращает массив строк для рисования ёлки  
 * 
 * @param int n число строк 
 * @param string optional символ для заполнения левее дерева, по умолчанию пробел 
 * @param string optional символ дерева, по умолчанию звёздочка 
 * @param string optional символ правее дерева, по умолчанию пробел 
 * 
 * @return array массив строк 
 */ 
function elka(n) { 
  var prefix = arguments.length > 1 ? arguments[1] : ' ' 
    ,star    = arguments.length > 2 ? arguments[2] : '*' 
    ,suffix  = arguments.length > 3 ? arguments[3] : ' ' 
    ,line    = n 
    ,result  = [] 
  ; 
   
  while(line-- > 0) { 
    result.push( 
      Array(line + 1).join(prefix) 
      + 
      Array((n - line) * 2).join(star) 
      + 
      Array(line + 1).join(suffix) 
    ); 
  } 
  return result; 
} 
 
// вывод в консоль 
elka(5).map( function(el){ console.log(el)}); 
 
// вывод в HTML документ 
document.body.innerHTML = '<pre>' + elka(4,'_','X','_').join("<br>\n") + '</pre>';

READ ALSO
Сортировка динамической таблицы

Сортировка динамической таблицы

Есть таблица, которая создается динамически от JSON, это значит, что нет постоянных столбцов и значения могут быть разными(числа, строки), помогите,...

265
Какие есть способы обмен данными? [требует правки]

Какие есть способы обмен данными? [требует правки]

Какие есть способы обмен данными помимо socket?

203
Вложенный список [React]

Вложенный список [React]

Из массива объектов

359
Как добавить класс в тег хтмл при скроле? [требует правки]

Как добавить класс в тег хтмл при скроле? [требует правки]

Мне нужно сделать шапку, как на этом шаблоне: http://demohashthemes

240