0

Tengo que hacer un ejercicio de un rovers en marte que tiene que moverse dependiendo del input (f:forward, b: back etc), consigo que se actualice la dirección y se cambie el array de la posición del rover pero quiero que se cambie de celda fisicamente.

Éste es mi código:

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

setTimeout(function() {
  $('#message').text('Rover successfully landed on mars...');

  //  $('.celda[data-num="[0,0]"').append('<img src="img/rover.png" class="rover" data-num="[0,0]">');
}, 3000);

$('.celda').each(function() {
  let esta = this.dataset.num;
  // console.log(esta);
});




let choice = $('input').val();

$('button').on('mouseenter', function() {

  if (choice == 'l') {
    message2();
    rover.turnLeft();
  }

  if (choice == 'r') {
    message2();
    rover.turnRight();
  }

  if (choice == 'f') {
    message2();
    rover.moveForward();
  }

  if (choice == 'b') {
    message2();
    rover.moveBackwards();
  }

});



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


// $('.celda').each(function(){
// let a = $(this).data('num');
// console.log(a);
// });

// Rover Object
var rover = {
  direction: 'N',
  position: $('.rover').data('num'),
  turnLeft: function() {
    switch (rover.direction) {
      case 'N':
        rover.direction = 'W';
        break;
      case 'W':
        rover.direction = 'S';
        break;
      case 'S':
        rover.direction = 'E';
        break;
      case 'E':
        rover.direction = 'N';
        break;
    }
  },
  turnRight: function() {
    switch (rover.direction) {
      case 'N':
        rover.direction = 'E';
        break;
      case 'E':
        rover.direction = 'S';
        break;
      case 'S':
        rover.direction = 'W';
        break;
      case 'W':
        rover.direction = 'N';
        break;
    }
  },
  moveForward: function() {
    switch (rover.direction) {
      case 'N':
        rover.position[1]++;
        console.log(rover.position);
        break;
      case 'E':
        rover.position[0]++;
        break;
      case 'S':
        rover.position[1]--;
        break;
      case 'W':
        rover.position[0]--;
        break;
    }
  },
  moveBackwards: function() {
    switch (rover.direction) {
      case 'N':
        rover.position[1]--;
        break;
      case 'E':
        rover.position[0]--;
        break;
      case 'S':
        rover.position[1]++;
        break;
      case 'W':
        rover.position[0]++;
        break;
    }
  }
};


// $(document).on('keyup', function(e){
//   if (e.keyCode === 37) {
//     rover.position-- ;
//     console.log(rover.position);
//     console.log('left');
//   }
//   if (e.keyCode === 39) {
//     rover.position++ ;
//     console.log(rover.position);
//     console.log('Right');
//   }
//   if (e.keyCode === 38) {
//     rover.position++ ;
//     console.log(rover.position);
//     console.log('up');
//   }
//   if (e.keyCode === 40) {
//     rover.position++ ;
//     console.log(rover.position);
//     console.log('down');
//   }
//
// });





//
// function turnLeft(rover){
//   console.log("turnLeft was called!");
// }
//
// function turnRight(rover){
//   console.log("turnRight was called!");
// }
//
// function moveForward(rover){
//   console.log("moveForward was called")
// }
.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%);
  /*opacity: 0;*/
}


/*.rover.show{
  opacity: 1;
}*/
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>

<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;">
<button type="button" name="button" style="margin: 0 auto; display: block; margin-top: 30px;">submit</button>


<div class="container col-xs-offset-3">
  <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>1,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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>

5
  • El código JS compartido contiene un error que hace que no funcione. ¿Estás compartiendo el código más reciente que tienes?
    – Alvaro Montoro
    Commented el 27 feb. 2018 a las 17:55
  • si, deberia funcionar, igual viendo el codigo entiendes? intento de cualquier manera pasarle las nuevas coordenadas al rover.position cuand odoy a girar asi le hago append al nuevo cuadrado pero nada Commented el 27 feb. 2018 a las 17:57
  • Entiendo el código, sé qué es lo que quieres, y sé que tiene un problema en el JS que hace que no se actualice el array correctamente. Por eso preguntaba.
    – Alvaro Montoro
    Commented el 27 feb. 2018 a las 18:02
  • pues no lo veo ahora el problema... otra cosa, el ejercicio originalmente era solo mover el rover por el array multidimensional y ya per oqueria hacerlo fisicamente, ese grid de arrays ya ni me hace falta no? Commented el 27 feb. 2018 a las 18:11
  • data no tiene modalidad setter no? quiero actualizar el data-num y ponerle la nueva coordenada para que se plasme ahi... Commented el 27 feb. 2018 a las 18:13

1 respuesta 1

1

El código que compartes tiene varios problemas:

  • Para empezar el array no se actualiza nunca porque el let choice = $('input').val(); está fuera del controlador del evento del botón, por lo que siempre será igual a "" y nunca se ejecutará ninguna de las acciones.

    Esto se soluciona moviendo el let choice = $('input').val(); dentro del controlador del botón (lo he cambiado a click en lugar mouseenter para que sea más fácil para mí, puedes ponerlo de nuevo como estaba).

  • Ya se actualiza el array en las funciones moveForward y moveBackwards pero esa actualización tiene problemas: como no se controlan los bordes, el rover puede salirse de la matriz y desaparecer (causando un error).

    La solución es añadir unos condiciones para asegurarse que el valor es mayor que 0 cuando se va a decrementar o menor que 9 cuando se vaya a aumentar.

  • Por último, para hacer que el rover se mueva, lo que haces es moverlo de la casilla en la que esté a la casilla nueva de destino. Eso lo puedes hacer con la función .append(), seleccionando la casilla de destino gracias al data-value único que cada celda tiene. Algo como esto:

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

    que debes añadir tanto en moveForward como en moveBackwards.

Y con eso ya se mueve el rover (en este caso gato):

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

setTimeout(function() {
  $('#message').text('Rover successfully landed on mars...');

  //  $('.celda[data-num="[0,0]"').append('<img src="https://lorempixel.com/40/40/cats/1/" class="rover" data-num="[0,0]">');
}, 3000);

$('.celda').each(function() {
  let esta = this.dataset.num;
  // console.log(esta);
});


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


  let choice = $('input').val();

  if (choice == 'l') {
    message2();
    rover.turnLeft();
  }

  if (choice == 'r') {
    message2();
    rover.turnRight();
  }

  if (choice == 'f') {
    message2();
    rover.moveForward();
  }

  if (choice == 'b') {
    message2();
    rover.moveBackwards();
  }

});



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


// Rover Object
var rover = {
  direction: 'N',
  position: $('.rover').data('num'),
  turnLeft: function() {
    switch (rover.direction) {
      case 'N':
        rover.direction = 'W';
        break;
      case 'W':
        rover.direction = 'S';
        break;
      case 'S':
        rover.direction = 'E';
        break;
      case 'E':
        rover.direction = 'N';
        break;
    }
  },
  turnRight: function() {
    switch (rover.direction) {
      case 'N':
        rover.direction = 'E';
        break;
      case 'E':
        rover.direction = 'S';
        break;
      case 'S':
        rover.direction = 'W';
        break;
      case 'W':
        rover.direction = 'N';
        break;
    }
  },
  moveForward: function() {
    switch (rover.direction) {
      case 'N':
        if (rover.position[1]<9) rover.position[1]++;
        console.log(rover.position);
        break;
      case 'E':
        if (rover.position[0]<9) rover.position[0]++;
        break;
      case 'S':
        if (rover.position[1]>0) rover.position[1]--;
        break;
      case 'W':
        if (rover.position[0]>0) rover.position[0]--;
        break;
    }
    // mueve el rover a la nueva posicion
    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
  },
  moveBackwards: function() {
    switch (rover.direction) {
      case 'N':
        if (rover.position[1]>0) rover.position[1]--;
        break;
      case 'E':
        if (rover.position[0]>0) rover.position[0]--;
        break;
      case 'S':
        if (rover.position[1]<9) rover.position[1]++;
        break;
      case 'W':
        if (rover.position[0]<9) rover.position[0]++;
        break;
    }
    // mueve el rover a la nueva posicion
    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
  }
};
.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%);
  /*opacity: 0;*/
}


/*.rover.show{
  opacity: 1;
}*/
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>

<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;">
<button type="button" name="button" style="margin: 0 auto; display: block; margin-top: 30px;">submit</button>


<div class="container col-xs-offset-3">
  <div class="row row0">
    <div class="col-xs-1 celda" data-num="[0,0]">
      <img src="https://lorempixel.com/40/40/cats/1/" alt="rover" class="rover" data-num="[0,0]">
      <p>1,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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </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>

8
  • Como comentario: el código de la pregunta/respuesta se repite, podrías simplificarlo mucho (por ejemplo haciendo que moveForward y moveBackwards sean la misma función pero en negativo, o usando switch o if else if en lugar de varios ifs).
    – Alvaro Montoro
    Commented el 27 feb. 2018 a las 18:24
  • muchas gracias por tu respuesta alvaro, otra cosa, la variable myGrid no sirve de nada no? no me esty moviendo en base a ella Commented el 27 feb. 2018 a las 18:43
  • La variable myGrid no la estás usando ahora mismo, pero en ella tienes una lista de obstáculos que seguramente deberías estar comprobando antes de mover el rover.
    – Alvaro Montoro
    Commented el 27 feb. 2018 a las 18:45
  • pero eso da igual no? nos estamos moviendo en base al grid de html no al de js... otra cosa, data no tiene modalidad setter? Commented el 27 feb. 2018 a las 18:50
  • Que yo sepa, el dataset no tiene métodos get/set para los data-atributos, se pueden acceder como lo haces o con una notación de corchete (p.e. this.dataset.num es equivalente a this.dataset["num"])
    – Alvaro Montoro
    Commented el 27 feb. 2018 a las 18:55

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.