1

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

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

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

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

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

0

10 ответов 10

5

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

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++;
}

0
4

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

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>';

0
1

Такой вариант через генератор

function* generateFirTree(height) {
  let blanks = ' '.repeat(height - 1), // (1)
  asterisks = "*"                      // (2)
  
  for (let i = 0; i < height; i++) {
    yield blanks + asterisks + blanks  // (3)
    blanks = blanks.slice(0, -1)       // (4)
    asterisks += "**"                  // (5)
  }                                    // (6)
}

for (let line of generateFirTree(34)) {
  console.log(line)
}

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

  1. Инициализируем начальное количество пробелов равное высота дерева - 1
  2. Инициализируем начальное количество звезд
  3. В цикле генератор возвращает строку равную blanks + asterisks + blanks
  4. Через .slice() убираем из blanks один пробел справа
  5. Добавляем в asterisks две звездочки
  6. Повторяем проход
1

Рисуем еловый лес в стиле ASCII-art

Сначала указываем размеры изображения, затем указываем координаты вершин елей.

Еловый лес:

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

Try it online!

function spruceForest(width, height) {
  let forest = {
    plot: [],
    addSpruce: function(x, y) {
      for (let i = 0; i < height - y; i++)
        for (let j = -i; j <= i; j++)
          if (x + j >= 0 && x + j < width)
            this.plot[y + i][x + j] = 1;
      return this;
    },
    output: function() {
      for (let i = 0; i < height; i++) {
        let row = this.plot[i];
        let line = '';
        for (let j = 0; j < width; j++)
          line += row[j] == 1 ? '*' : ' ';
        console.log(line);
      }
    }
  }; // заполняем пустую делянку
  for (let i = 0; i < height; i++) {
    forest.plot[i] = [];
    for (let j = 0; j < width; j++)
      forest.plot[i][j] = '';
  }
  return forest;
}

spruceForest(80, 9) // рисуем еловый лес в стиле ASCII-art
  .addSpruce(6, 0).addSpruce(15, 1).addSpruce(23, 0)
  .addSpruce(33, 1).addSpruce(44, 2).addSpruce(55, 4)
  .addSpruce(64, 3).addSpruce(74, 1).output();

0

var lines = 5;
var star = 1;
var space = 15;
for (var i = 0; i < lines; i++) {
  for (let j = 0; j < space; j++) {
    document.write("&nbsp;")
  }
  for (let j = 0; j < star; j++) {
    document.write('<b>*</b>')
  }
  star += 2;
  space--;
  document.write("<br>");
}

0

Вот мой пример, выводит вот такой треугольник:

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

var w = 25;
var h = (w - (w % 2)) / 2 + (w % 2);
var spaces = w;

for (i = h; i > 0; i--) {
  var str = "";
  for (j = i; j <= w; j++) {
    if (i === 1) {
      str += "*";
    } else if (j === w || j === spaces) {
      str += "*";
    } else {
      str += "&nbsp&nbsp";
    }
  }
  spaces -= 2;
  document.write(str + "<br/>");
}

0

var n = "&nbsp"
for (let i = 0; i < 8; i++) {
  for (let k = 8; k > i - 1; k--) {
    document.write(n, n)
  }
  for (let j = 0; j < i + 1; j++) {
    document.write("*", n, n)
  }
  document.write("<br>")
}

0

var line = 5;  // Quantity of lines
var space = 4; // Quantity of gaps in the first line
var star = 1;  // Quantity of stars in the first line

for (var h = 0; h < line; h++) {
  for (var wsp = 0; wsp < space; wsp++) {
    document.write("&nbsp\n");
  }
  for (var wst = 0; wst < star; wst++) {
    document.write("*");
  }
  space -= 1;
  star += 2;
  document.write("<br>");
}

0

Здесь в консоли не работает, но судя по https://caniuse.com/mdn-api_console_log_substitution_strings работает везде кроме IE. Можно вывести изображение ЁЛКИ в консоль, назначив выводимому тексту (здесь это просто пробел) background-image. Ширину и высоту выводимого искусственно расширяю за счет padding.

Можно проверить работу здесь: https://jsfiddle.net/n8ouk6d0/

const image = new Image();
image.src = 
    'https://img1.freepng.ru/20171221/vye/'+
    'beautiful-christmas-tree-with-ornaments-png-clip-art-'+
    'image-5a3c2923040fb9.8481126115138921310166.jpg';
image.onload = function(){
    console.log("%c ", `padding:${this.height/2}px ${this.width/2-3}px;'+
    ' line-height:0px; background:url("${this.src}")`);
}

Исходная идея здесь: https://github.com/adriancooney/console.image

1
  • 1
    Ответ немного по вопросу, но перебирать ересь со звездочками с разной степенью извращения не хотелось. Результат все равно - никому не нужная гадость. С помощью JS можно пользователя поместить в целый 3Д еловый лес и дать возможность иголки подергать, а вы в консоль треугольники...
    – Leonid
    17 авг 2021 в 20:20
0
var i = 0,
    max = 5,
    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++;
}
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 26 июн 2022 в 17:05

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.