0

quise crear un árbol y mensaje de "feliz navidad 2024", los cuales están formados por asteriscos, dentro de JavaScript, pero no logro juntar el mensaje y el árbol en una misma fila, siempre me sale uno arriba del otro, quisiera saber cómo puedo unir los dos. ya intenté unir todo en mismo ciclo for , pero no imprime nada. He creado tres ciclos for , uno para el mensaje que es el más grande, y los otros dos son el cuadrado y el triángulo. lo que deseo que imprima es que el mensaje salga al lado izquierdo de las figuras que forman un arbol

<!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        
        <body>
            <script>
            var cero = [2, 3, 4, 6, 10, 11, 15, 16, 20, 22, 23, 24]
            var dos = [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 16, 21, 22, 23, 24, 25]
            var cuatro = [1, 5, 6, 10, 11, 12, 13, 14, 15, 20, 25]
            var letf = [1,2,3,4,5,6,11,12,13,14,15,16,21]
            var lete = [1,2,3,4,5,6,11,12,13,14,15,16,21,22,23,24,25]
            var letl = [1,6,11,,16,21,22,23,24,25]
            var leti = [1,2,3,4,5,8,13,18,,21,22,23,24,25]
            var letz = [1,2,3,4,5,9,13,17,,21,22,23,24,25]
            var letn = [1,5,6,7,10,11,13,,15,16,19,,20,21,25]
            var leta = [2,3,4,6,10,11,12,13,14,15,16,20,21,25]
            var letv = [1,5,6,10,12,14,18,23]
            var letd = [1,2,3,4,6,10,11,15,16,20,21,22,23,24]
        
        
        
        
            
        
        
        
        
              for (var x = 1; x <= 5; x++) {
        
                //Feliz
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letf.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (lete.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letl.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (leti.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letz.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                document.write("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp") //espacios 
        
                //2024
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (dos.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (cero.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (dos.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (cuatro.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                document.write("<br>")
              }
        
              document.write("<br>")
        
        
              for (var x = 1; x <= 5; x++) {
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letn.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (leta.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letv.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (leti.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letd.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (leta.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
        
                for (var y = 1; y <= 6; y++) {
                  if (y % 6 == 0) {
                    document.write("&nbsp&nbsp")
                    continue
                  }
                  if (y > 6) {
                    z = y % 6
                  } else {
                    z = y
                  }
                  if (letd.includes(5 * (x - 1) + z)) {
                    document.write("*")
                  } else {
                    document.write("&nbsp&nbsp")
                  }
                }
                
                document.write("<br>")
              }
        
        
        
                //triangulo
        
                const alturaTriangulo = 10;
        
                // Bucle para cada fila del triángulo
                for (let i = 1; i <= alturaTriangulo; i++) {
                    document.write("&nbsp&nbsp")
                    let espacios = '&nbsp '.repeat(alturaTriangulo - i); // Añade espacios antes de los asteriscos
                    let asteriscos = '*'.repeat(i * 2 - 1); // Añade asteriscos
        
                    document.write(espacios + asteriscos + '<br>');
                }
        
        
                //cuadrado
        
                for (var x = 1; x <= 10; x++) {
        
                    document.write("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp")
        
                    for (var y = 1; y <= 10; y++) {
                        document.write('*')
        
                    }
                    document.write("<br>")
                }
        
            </script>
        </body>
        
        </html>

1 respuesta 1

0

Esta pregunta es casi lo mismo que tenias en tu otra pregunta del reloj y repites los mismos problemas.

La programación no es colocar una lista de comandos o instrucciones, de lo contario vas a terminar con un código de un millón de líneas.

Fíjate en mi respuesta a tu otra pregunta, yo tomo ese código y con unas mínimas modificaciones ya tengo el 90% realizado, básicamente cambio el array de array, por un objeto a modo de diccionario

const letras ={
 "0" :  [2, 3, 4, 6, 10, 11, 15, 16, 20, 22, 23, 24],
 "2" :  [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 16, 21, 22, 23],
 "4" :  [1, 5, 6, 10, 11, 12, 13, 14, 15, 20, 25],
 "a" :  [2,3,4,6,10,11,12,13,14,15,16,20,21,25],
 "d" :  [1,2,3,4,6,10,11,15,16,20,21,22,23,24],
 "e" :  [1,2,3,4,5,6,11,12,13,14,15,16,21,22,23,24,25],
 "f" :  [1,2,3,4,5,6,11,12,13,14,15,16,21],
 "i" :  [1,2,3,4,5,8,13,18,,21,22,23,24,25],
 "l" :  [1,6,11,,16,21,22,23,24,25],
 "n" :  [1,5,6,7,10,11,13,,15,16,19,20,21,25],
 "v" :  [1,5,6,10,12,14,18,23],
 "z" :  [1,2,3,4,5,9,13,17,,21,22,23,24,25],
 " ":   [],
};


function getLine(arreglo,y){
  let resp ="";
  for(var x=1;x<=5;x++){
    if(arreglo.includes(5 * (y-1) + x)){
        resp+="*";
    }else{
        resp+="&nbsp&nbsp";
    }
  }
  return resp+"&nbsp&nbsp" ;
  
}

function Imprimir(texto){
  let salida="";
  for(var y=1;y<=5;y++){
    for(let n of texto){ 
       const arrayNums = letras[n];
       salida+=getLine(arrayNums,y);
    }
    salida+="<br>";
  }


textoCode.innerHTML+= salida;
}
Imprimir("feliz navidad");
<div id="textoCode"></div>


Ahora el problema está en generar un árbol de navidad, para lo cual debes entender la lógica de lo que estas haciendo y en que radica tu problema.

Tu estas imprimiendo punto a punto, tal como lo hacían las impresoras antiguas, va de izquierda a derecha y luego baja a la siguiente línea.

Cada carácter le has dado una dimensión de una matriz de 5x5, es decir una línea tiene 5 puntos de alto.

Entonces tu no puedes imprimir el texto y el árbol de manera separada (al menos no de la manera que lo estas haciendo)

Lo que te recomiendo para crear un árbol que sea de mayor tamaño a una fila, es separar el árbol en partes y cada parte representa un carácter

Por ejemplo, un árbol formado por 9 (3x3) caracteres:

introducir la descripción de la imagen aquí

Entonces hay que crear 9 array que representen cada parte y listo

const letras ={
 "0" :  [2, 3, 4, 6, 10, 11, 15, 16, 20, 22, 23, 24],
 "2" :  [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 16, 21, 22, 23],
 "4" :  [1, 5, 6, 10, 11, 12, 13, 14, 15, 20, 25],
 "a" :  [2,3,4,6,10,11,12,13,14,15,16,20,21,25],
 "d" :  [1,2,3,4,6,10,11,15,16,20,21,22,23,24],
 "e" :  [1,2,3,4,5,6,11,12,13,14,15,16,21,22,23,24,25],
 "f" :  [1,2,3,4,5,6,11,12,13,14,15,16,21],
 "i" :  [1,2,3,4,5,8,13,18,,21,22,23,24,25],
 "l" :  [1,6,11,,16,21,22,23,24,25],
 "n" :  [1,5,6,7,10,11,13,,15,16,19,20,21,25],
 "v" :  [1,5,6,10,12,14,18,23],
 "z" :  [1,2,3,4,5,9,13,17,,21,22,23,24,25],
 " ":   [],
 "➀" : [20,24,25],
 "➁" : [3,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
 "➂" : [16,21,22],
 "➃" : [3,4,5,7,8,9,10,11,12,13,14,15],
 "➄" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,17,18,19,22,23,24],
 "➅" : [1,2,3,6,7,8,9,11,12,13,14,15],
 "➆" : [],
 "➇" : [2,3,4,7,8,9,12,13,14,17,18,19,22,23,24],
 "➈": []
};


function getLine(arreglo,y,l){
  let resp ="";
  for(var x=1;x<=5;x++){
    if(arreglo.includes(5 * (y-1) + x)){
        resp+="*";
    }else{
        resp+="&nbsp&nbsp";
    }
  }
  if(l.match(/[a-z0-9]| /i)){ //Separación entre caracteres
    return resp+"&nbsp&nbsp" ;
  }
  return resp ; //Cuando no es una letra o número, no habrá separación, así se puede imprimir dibujos compuestos
  
}

function Imprimir(texto){
  let salida="";
  for(var y=1;y<=5;y++){
    for(let n of texto){ 
       const arrayNums = letras[n];
       salida+=getLine(arrayNums,y,n);
    }
    salida+="<br>";
  }


textoCode.innerHTML+= salida;
}
Imprimir("              ➀➁➂");
Imprimir("feliz navidad ➃➄➅");
Imprimir("              ➆➇➈");
<div id="textoCode"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.