1

querria indudablemente mejorar este codigo tan cutre que hice, quiero una forma sencilla de que se muestren los obstaculos, el problema es que tendo muchisimo if por cada obstaculo creado, los tengo todos en un mutidimensional array en rover.obtsacles array, pero quiero hacerlo mucho mas eficiente y no caigo en como hacer para no decir cada posicion de cada obstaculo generado. Tambien si quiero 20 obstaculos creados con mi for loop no voy a hacer manualmente un if de 20 condiciones. Muchas gracias =)

//-------------------MESSAGES---------------------//

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


function showLives(){
  document.getElementById('lives').textContent+= parseInt(rover.lives);
}


//---------------------ROVER OBJECT---------------------//
var rover = {
  obstacles: [],
  direction: 'N',
  lives: 3,
  position: $('.rover').data('num'),
  left: function(){
    moveToPosition(-1, 0);
  },
  right: function(){
    moveToPosition(1, 0);
  },
  up: function(){
    moveToPosition(0, -1);
  },
  down: function(){
    moveToPosition(0, 1);
  }
};

//---------------------MOVING---------------------//
function moveToPosition(ejeX, ejeY){
  let newPositionRover = [ //Calculate new position
    rover.position[0] + ejeX,
    rover.position[1] + ejeY
  ];
  if (newPositionRover[0] <0 || newPositionRover[0] >9 || newPositionRover[1] <0 || newPositionRover[1] >9 ) {
    alert('no puede salirse');
    return; // Stop the execution if is out of the grid
  }

  //Update new position so I accumulate values
  rover.position = newPositionRover;

  //Moving the rover
  $("div[data-num='[" + newPositionRover +"]']").append( $(".rover"));

  message2();


  // Check if obstacle
  for(var i = 0; i < rover.obstacles.length; i++){
    if (rover.obstacles[i][0] === newPositionRover[0] && rover.obstacles[i][1] === newPositionRover[1]){

      $("div[data-num='[" + rover.obstacles[i] +"]']").css('background-color', 'red');

      //Resting hearts when crash
      rover.lives--;
      showLives();
    }
  }

  //When win
  if (newPositionRover[0] === 9 && newPositionRover[1] === 9) {
    alert('you won');
    let again = confirm('want to play again?');
    if (again) {
      rover.lives = 3; //show it in a modal
    }
  }

  //When lose
  if (rover.lives === 0) {
    alert('you lost')
    let again = confirm('want to play again?');
    if (again) {
      rover.lives = 3; //show it in a modal
    }
  }
}

//-----------------MOVEMENT KEYS------------------//
$(document).on('keydown', function(e){
  if (e.keyCode === 37) {
    rover.left();
  }
  if (e.keyCode === 39) {
    rover.right();
  }
  if (e.keyCode === 38) {
    rover.up();
    e.preventDefault();
  }
  if (e.keyCode === 40) {
    rover.down();
    e.preventDefault();
  }
});

//-----------------OBSTACLES------------------//
for (var i = 0; i < 20; i++) {

  let axisX = Math.floor(Math.random() * 10);
  let axisY = Math.floor(Math.random() * 10) + 1;

  let obstacle = [axisX, axisY];
  rover.obstacles.push(obstacle);

  $("div[data-num='["+ obstacle +"]']").css('background-color', 'white');
}
.celda{
  display: block;
  margin: 0 auto;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
}

.container{
  border-radius: 30%;
}

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

input, button{
  border: 1px solid black;
}

.row p{
  color: white;
}

#lives{
  /*display: none;*/
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <!-- <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>
  <p style="text-align:center;" id="lives"> &hearts; </p>


  <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="https://d30y9cdsu7xlg0.cloudfront.net/png/269945-200.png" alt="rover" class="rover" data-num="[0,0]">
        <p>0,0</p>
        <p style="color: black;">start</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>
        <p style="color: black;">end</p>
      </div>
    </div>


  </div>


  <!-- <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

2 respuestas 2

3

Lo que yo haría es tener toda la lógica de moverse a una posición en una única función. De esta forma, al pulsar las teclas, podrías llamar a esta función indicándole simplemente hacia donde tiene que desplazarse.

Ahí podrías calcular la nueva posición, ver si ésta es correcta (está dentro del tablero) y mover el elemento a la nueva posición.

Para comprobar si la nueva posición coincide con la de un obstáculo podrías utilizar el método find del objeto Array para buscar un obstáculo con la misma posición que la posición calculada. Si existe algún elemento muestras el mensaje correspondiente:

//-------------------MESSAGES---------------------//

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

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



//---------------------ROVER OBJECT---------------------//
var rover = {
  obstacles: [],
  direction: 'N',
  position: $('.rover').data('num'),
  left: function(){
    moveToPosition(-1, 0);
  },
  right: function(){
    moveToPosition(1, 0);
  },
  up: function(){
    moveToPosition(0, -1);
  },
  down: function(){
    moveToPosition(0, 1);
  }
};

function moveToPosition(incX, incY){
    // Calcula la nueva posición
    var newPosition = [
      rover.position[0] + incX,
      rover.position[1] + incY];
    // Comprueba si la nueva posición es correcta
    if (newPosition[0] < 0 || newPosition[0] > 9
      || newPosition[1] < 0 || newPosition[1] > 9){
      alert('no puede salirse');
      return;
    }
    
    // Establece la nueva posición
    rover.position = newPosition;
    $("div[data-num='[" + rover.position + "]']").append( $(".rover") );
    message2();
    
    // Comprueba si está en un obstáculo
    if (rover.obstacles.find(o => 
        o[0]===newPosition[0] && o[1]===newPosition[1])){
      console.log('THERE IS AN OBSTACLE THERE');
    }
}


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

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

});


//-----------------OBSTACLES------------------//
for (var i = 0; i < 10; i++) {

  let axisX = Math.floor(Math.random() * 10);
  let axisY = Math.floor(Math.random() * 10);

  let obstacle = [axisX, axisY];
  rover.obstacles.push(obstacle);

  $("div[data-num='["+obstacle+"]']").css('background-color', 'red');
}
.celda{
  display: block;
  margin: 0 auto;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
}
p{
  font-size: 10px;
}

.container{
  border-radius: 30%;
}

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

input, button{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1 style="text-align:center;">MARS ROVER</h1>
  <p style="text-align:center;" id="message"></p>

  <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="https://d30y9cdsu7xlg0.cloudfront.net/png/269945-200.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>
      </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>

Si no quieres utilizar el método find puedes utilizar un bucle for para hacer lo mismo:

//-------------------MESSAGES---------------------//

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

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



//---------------------ROVER OBJECT---------------------//
var rover = {
  obstacles: [],
  direction: 'N',
  position: $('.rover').data('num'),
  left: function(){
    moveToPosition(-1, 0);
  },
  right: function(){
    moveToPosition(1, 0);
  },
  up: function(){
    moveToPosition(0, -1);
  },
  down: function(){
    moveToPosition(0, 1);
  }
};

function moveToPosition(incX, incY){
    // Calcula la nueva posición
    var newPosition = [
      rover.position[0] + incX,
      rover.position[1] + incY];
    // Comprueba si la nueva posición es correcta
    if (newPosition[0] < 0 || newPosition[0] > 9
      || newPosition[1] < 0 || newPosition[1] > 9){
      alert('no puede salirse');
      return;
    }
    
    // Establece la nueva posición
    rover.position = newPosition;
    $("div[data-num='[" + rover.position + "]']").append( $(".rover") );
    message2();
    
    // Comprueba si está en un obstáculo
    for(var i = 0; i < rover.obstacles.length; i++){
      if (rover.obstacles[i][0] === newPosition[0]
          && rover.obstacles[i][1] === newPosition[1]){
        console.log('THERE IS AN OBSTACLE THERE');
        break;
      }
    }
}


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

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

});


//-----------------OBSTACLES------------------//
for (var i = 0; i < 10; i++) {

  let axisX = Math.floor(Math.random() * 10);
  let axisY = Math.floor(Math.random() * 10);

  let obstacle = [axisX, axisY];
  rover.obstacles.push(obstacle);

  $("div[data-num='["+obstacle+"]']").css('background-color', 'red');
}
.celda{
  display: block;
  margin: 0 auto;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
}
p{
  font-size: 10px;
}

.container{
  border-radius: 30%;
}

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

input, button{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1 style="text-align:center;">MARS ROVER</h1>
  <p style="text-align:center;" id="message"></p>

  <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="https://d30y9cdsu7xlg0.cloudfront.net/png/269945-200.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>
      </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>

10
  • no otra forma de hacerlo sin metodo find? el 3 mar. 2018 a las 9:44
  • He añadido a la respuesta un ejemplo que no utiliza el método find el 3 mar. 2018 a las 10:03
  • vale gracias, oye porque usas return cuando comprobamos si se sale o no? no queremos retornar nada solo poner la alerta el 3 mar. 2018 a las 10:27
  • Para que salga de la función y no ejecute el resto del código. Si la nueva posición está fuera del tablero no quiero que se establezca como posición del elemento ni comprobar si hay obstáculos. Si el movimiento no se puede hacer simplemente muestra el mensaje y sale (return) el 3 mar. 2018 a las 10:29
  • si entiendo lo que hace el return pero no le veo sentido aqui, va a funcionar igual si no lo pongo, es solo para que el js no siga ejecutando cosas que no quiero que haga o como? el 3 mar. 2018 a las 10:34
0

La mejor manera de resolver este tipo de problemas es la estrategia divide y vencerás:

  • Tienes un objeto rover que tiene una posición [x,y].
  • Tienes una matriz de casillas, algunas de las cuales tienen un obstáculo.
  • Tienes una lista obstáculos con sus posiciones.

Por tanto podemos empezar por crear una función que, dadas las coordenadas del rover, compruebe que coincidan con las de un obstáculo:

let rover= { obstacles: [], position:[0,0]};
rover.onObstacle= function () {
  return !!this.obstacles.find(obstacle => obstacle[0]===this.position[0] &&
    obstacle[1]===this.position[1]);
}

for (var i = 0; i < 10; i++) {

  let axisX = Math.floor(Math.random() * 10);
  let axisY = Math.floor(Math.random() * 10);

  let obstacle = [axisX, axisY];
  rover.obstacles.push(obstacle);
}

//console.log(rover.obstacles);
console.log(rover.onObstacle());

//añadimos un obstáculo donde está, para comprobar

rover.obstacles.push([0,0]);
console.log(rover.onObstacle());

Una vez tienes esta función, moverse se vuelve más sencillo, por ejemplo, moverse a la izquierda quedaría algo como:

  left: function(){
    this.position[0]--;

    if (this.position[0] < 0) {
      alert('no puede salirse');
      this.position[0]++;
      return;
    }

    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover"));
    message2();
    if (rover.onObstacle()) {
      console.log('THERE IS AN OBSTACLE THERE');
    }

  }

Del mismo modo puedes seguir buscando qué código tienes repetido entre tus funciones y volver a extraerlo a una función/método para reutilizarlo. Creo que con este ejemplo ha quedado ya claro...

5
  • no hay otra forma aparte del metodo find? el 3 mar. 2018 a las 9:44
  • Usé el método find por brevedad, pero puedes hacer un bucle que recorra el array, por supuesto el 3 mar. 2018 a las 10:40
  • claro yo tenia problemas para chequear no iba a jacerlo uno por uno obvio pero entonces el metodo find busca en un array multidimensional? si hay coincidencia? el 3 mar. 2018 a las 10:41
  • El método find busca en un array el primer elemento que cumple una condición. La condición la defines en la función que pasas como parámetro. Te enlazaría a la página de MDN, pero desde el móvil es complicado el 3 mar. 2018 a las 10:44
  • no te preocupes =) una ultima cosa porque no me va el parseInt, quiero restar vidas y se acumula el 3 mar. 2018 a las 12:39

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.