1

quiero hacer que mi grid no venga de html sino reflejar el grid creado en js que se vea en html, vamso, tener el html vacio. ya que quiero aprender mas a usar los arrays que centrarme en html. No veo como puedo hacer eso alguna sugerencia? Gracias

var myGrid = [
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  ['x', 1, 2, 3, 4, 5, 6,'o', 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  [0, 1, 2,'o', 4, 5, 6, 7, 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7,'o', 9, 10],
  [0, 1, 'o', 3, 4,'o', 6, 7, 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'o']
];



for (var i = 0; i < myGrid.length; i++) {
  let row = myGrid[i];

  for (var j = 0; j < row.length; j++) {
    let column = row[j];
    if (column === 'o') {
      console.log('obstacle are in: ' + i + ',' + j);
    }
  }
}

//-------------------------------------------------------------//

setTimeout(message1, 1000);
function message1(){
  $('#message').text('Establishing communication...')
}

setTimeout(message2, 2000);
function message2(){
  $('#message').text('The rover is placed in position: ' + rover.position + ' and is facing ' + rover.direction);
}


$('button').each(function(){

  $(this).on('click', function(){

    let direccion = $(this).data('action');

    if (direccion === 'left') {
      message2();
      rover.left();
    }
    if (direccion === 'right') {
      message2();
      rover.right();
    }
    if (direccion === 'up') {
      message2();
      rover.up();
    }
    if (direccion === 'down') {
      message2();
      rover.down();
    }

  });
});



// Rover Object
var rover = {
  direction: 'N',
  position: $('.rover').data('num'),
  left: function(){
    rover.position[0]--;

    if (rover.position[0] < 0) {
      alert('no puede salirse');
    }
    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );

  },

  right: function(){

    rover.position[0]++;

    if (rover.position[0] > 9) {
      alert('no puede salirse');
    }

    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
  },


  up: function(){
    rover.position[1]--;

    if (rover.position[1] < 0) {
      alert('no puede salirse');
    }

    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
    message2();
  },


  down: function(){
    rover.position[1]++;

    if (rover.position[1] > 9) {
      alert('no puede salirse');
    }

    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );

    message2();

  }
};


$(document).on('keydown', function(e){
  if (e.keyCode === 37) {
    rover.left();

  }
  if (e.keyCode === 39) {
    rover.right();
  }
  if (e.keyCode === 38 && rover.direction === 'N') {
    rover.up();
  }
  if (e.keyCode === 40) {
    rover.down();
  }

});
.celda{
  display: block;
  margin: 0 auto;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
}

.rover{
  width: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

input, button{
  border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <title>Mars Rover</title>
</head>
<body>
  <h1 style="text-align:center;">MARS ROVER</h1>
  <p style="text-align:center;" id="message"></p>
  <!-- <input type="text" name="" value="" size="40;" placeholder="F: Forward   L: Left     B: Back;" style="margin:0 auto; display: block;" border="1px solid black;"> -->
  <!-- <button type="button" name="button" style="margin: 0 auto; display: block; margin: 20px auto;">submit</button> -->

  <button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="up">up</button>
  <button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="down">down</button>
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="left">left</button>
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="right">right</button>


  <p style="text-align: center">NORTH</p>
  <p style="position:fixed; top:50%; Left:5%;">WEST</p>
  <p style="position:fixed; top:50%; Right:5%;">EAST</p>
  <div class="container col-xs-offset-2">
    <div class="row row0">
      <div class="col-xs-1 celda" data-num="[0,0]">
        <img src="img/rover.png" alt="rover" class="rover" data-num="[0,0]">
        <p>0,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,0]">
        <p>1,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,0]">
        <p>2,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,0]">
        <p>3,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,0]">
        <p>4,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,0]">
        <p>5,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,0]">
        <p>6,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,0]">
        <p>7,0</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,0]">
        <p>8,0</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[9,0]">
        <p>9,0</p>
      </div>
    </div>

    <div class="row row1">
      <div class="col-xs-1 celda" data-num="[0,1]">
        <p>0,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,1]">
        <p>1,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,1]">
        <p>2,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,1]">
        <p>3,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,1]">
        <p>4,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,1]">
        <p>5,1</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[6,1]">
        <p>6,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,1]">
        <p>7,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,1]">
        <p>8,1</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,1]">
        <p>9,1</p>
      </div>
    </div>

    <div class="row row2">
      <div class="col-xs-1 celda" data-num="[0,2]">
        <p>0,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,2]">
        <p>1,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,2]">
        <p>2,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,2]">
        <p>3,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,2]">
        <p>4,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,2]">
        <p>5,2</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[6,2]">
        <p>6,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,2]">
        <p>7,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,2]">
        <p>8,2</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,2]">
        <p>9,2</p>
      </div>
    </div>

    <div class="row row3">
      <div class="col-xs-1 celda" data-num="[0,3]">
        <p>0,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,3]">
        <p>1,3</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[2,3]">
        <p>2,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,3]">
        <p>3,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,3]">
        <p>4,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,3]">
        <p>5,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,3]">
        <p>6,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,3]">
        <p>7,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,3]">
        <p>8,3</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,3]">
        <p>9,3</p>
      </div>
    </div>


    <div class="row row4">
      <div class="col-xs-1 celda" data-num="[0,4]">
        <p>0,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,4]">
        <p>1,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,4]">
        <p>2,4</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[3,4]">
        <p>3,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,4]">
        <p>4,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,4]">
        <p>5,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,4]">
        <p>6,4</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[7,4]">
        <p>7,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,4]">
        <p>8,4</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,4]">
        <p>9,4</p>
      </div>
    </div>



    <div class="row row5">
      <div class="col-xs-1 celda" data-num="[0,5]">
        <p>0,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,5]">
        <p>1,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,5]">
        <p>2,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,5]">
        <p>3,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,5]">
        <p>4,5</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[5,5]">
        <p>5,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,5]">
        <p>6,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,5]">
        <p>7,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,5]">
        <p>8,5</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,5]">
        <p>9,5</p>
      </div>
    </div>



    <div class="row row6">
      <div class="col-xs-1 celda" data-num="[0,6]">
        <p>0,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,6]">
        <p>1,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,6]">
        <p>2,6</p>XXX
      </div>
      <div class="col-xs-1 celda" data-num="[3,6]">
        <p>3,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,6]">
        <p>4,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,6]">
        <p>5,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,6]">
        <p>6,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,6]">
        <p>7,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,6]">
        <p>8,6</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,6]">
        <p>9,6</p>
      </div>
    </div>

    <div class="row row7">
      <div class="col-xs-1 celda" data-num="[0,7]">
        <p>0,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,7]">
        <p>1,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,7]">
        <p>2,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,7]">
        <p>3,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,7]">
        <p>4,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,7]">
        <p>5,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,7]">
        <p>6,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,7]">
        <p>7,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,7]">
        <p>8,7</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,7]">
        <p>9,7</p>
      </div>
    </div>



    <div class="row row8">
      <div class="col-xs-1 celda" data-num="[0,8]">
        <p>0,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,8]">
        <p>1,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,8]">
        <p>2,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,8]">
        <p>3,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,8]">
        <p>4,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,8]">
        <p>5,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,8]">
        <p>6,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,8]">
        <p>7,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,8]">
        <p>8,8</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,8]">
        <p>9,8</p>
      </div>
    </div>



    <div class="row row9">
      <div class="col-xs-1 celda" data-num="[0,9]">
        <p>0,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[1,9]">
        <p>1,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[2,9]">
        <p>2,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[3,9]">
        <p>3,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[4,9]">
        <p>4,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[5,9]">
        <p>5,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[6,9]">
        <p>6,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[7,9]">
        <p>7,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[8,9]">
        <p>8,9</p>
      </div>
      <div class="col-xs-1 celda" data-num="[9,9]">
        <p>9,9</p>
      </div>
    </div>


  </div>


  <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script>
  <script src="js/app.js"></script>
</body>
</html>

1 respuesta 1

0

Lo que necesitas es escribir el html directamente desde tu Javascript.

Primero, necesitas una función que tome como argumento el array y devuelva el html generado. Por ejemplo (usando tu misma estructura de código - más o menos, he cambiado el contenido de las casillas, pero puedes modificarlo fácilmente):

function array2html(grid) {
    var html = "";
    grid.forEach( function(row, i) {
        html += `<div class='row row${i}'>`;
        row.forEach( function (cell, j) {
            let char = ".";
            if( cell === "o" ) char = "o";
            if( cell === "x" ) char = "x";
            html += `<div class='col-xs-1 celda' data-num='[${j},${i}]'>${char}</div>`;
        }
        html += "</div">;
    }
    return html;
}

A continuación, necesitas modificar el DOM para insertar ese html en vez del que hubiese anteriormente.

Por ejemplo:

$('.container').html(array2html(myGrid));

La notación de cadena `..` indica "literales de plantilla", un tipo de cadena que permite interpolar variables. Más información

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.