Skip to main content
se eliminaron 2193 caracteres en el cuerpo
Origen Enlace
francisco dwq
  • 525
  • 1
  • 8
  • 20
//-------------------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);
}


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


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

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

    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover"));
   right: message2function();{
    if moveToPosition(rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] || 
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1]1, ||0);
        rover.position[0] === rover.obstacles[4][0] &&},
        rover.position[1] ===up: rover.obstacles[4][1]function() {
      console.logmoveToPosition('THERE IS AN OBSTACLE0, THERE'-1);
    }

  },
 
  rightdown: function(){
 
    rover.position[0]++;

    if (rover.position[0] > 9) {
      alertmoveToPosition('no puede0, salirse'1);
    }
 
    $("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") )};
    message2();
    if//---------------------MOVING---------------------//
function moveToPosition(rover.position[0] === rover.obstacles[0][0]ejeX, &&ejeY){
     let newPositionRover = rover.position[1][ ===//Calculate rover.obstacles[0][1]new ||position
        rover.position[0] === rover.obstacles[1][0]+ &&ejeX,
        rover.position[1] === rover.obstacles[1][1]+ ||ejeY
        rover.position[0] === rover.obstacles[2][0] &&];
        rover.position[1]if ===(newPositionRover[0] rover.obstacles[2][1]<0 ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] ===newPositionRover[0] rover.obstacles[3][1]>9 ||
     newPositionRover[1] <0 || rover.position[0]newPositionRover[1] ===>9 rover.obstacles[4][0]) &&{
        rover.position[1]alert('no ===puede rover.obstacles[4][1]salirse') {;
    return; // console.log('THEREStop ISthe ANexecution OBSTACLEif THERE');
is out of the }grid
  },


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

so I accumulate values
 if (rover.position[1] <position 0)= {newPositionRover;
      alert('no puede salirse');
  //Moving the }
rover
    $("div[data-num='[" + rover.position[0]newPositionRover +","+rover.position[1]+"]']"+"]']").append( $(".rover") );
   
  message2();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0]// ===Check rover.obstacles[1][0]if &&obstacle
  for(var i = 0; i < rover.position[1] === roverobstacles.obstacles[1][1]length; ||i++){
       if (rover.position[0]obstacles[i][0] === rover.obstacles[2][0]newPositionRover[0] &&
        rover.position[1]obstacles[i][1] === rover.obstacles[2][1] ||newPositionRover[1]){
        rover.position[0] === rover.obstacles[3][0] &&
      $("div[data-num='[" + rover.position[1] ===obstacles[i] rover+"]']").obstacles[3][1]css('background-color', ||'red');
   
      rover.position[0]//Resting ===hearts rover.obstacles[4][0]when &&crash
        rover.position[1] === rover.obstacles[4][1]) {lives--;
      console.logshowLives('THERE IS AN OBSTACLE THERE');
    }
 
  },


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

if (newPositionRover[0] === 9 if&& (rover.position[1]newPositionRover[1] >=== 9) {
      alert('no puede'you salirse'won');
    }

    $("div[data-num='[" +let rover.position[0]again +","+rover.position[1]+"]']").append(= $confirm(".rover") );
 'want to play message2(again?');
 
     if (rover.position[0] === rover.obstacles[0][0]again) &&{
        rover.position[1] === rover.obstacles[0][1] ||
    lives = 3; //show rover.position[0]it ===in rover.obstacles[1][0]a &&modal
        rover.position[1] === rover.obstacles[1][1] ||}
        rover.position[0] === rover.obstacles[2][0] &&}
   
  //When lose
  if (rover.position[1]lives === rover.obstacles[2][1]0) ||{
        rover.position[0] === rover.obstacles[3][0]alert('you &&lost')
     let again = rover.position[1]confirm('want ===to rover.obstacles[3][1]play ||again?');
        rover.position[0] ===if rover.obstacles[4][0](again) &&{
        rover.position[1] === rover.obstacles[4][1]) {
   lives = 3; console.log('THERE//show ISit ANin OBSTACLEa THERE');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 < 10;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+"]']"num='["+ obstacle +"]']").css('background-color', 'red''white');
}
.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;
}

.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"><id="message"> </p>
  <p style="text-align:center;" id="lives"> &hearts; </p>

  <!-- <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="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>
//-------------------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(){
    rover.position[0]--;

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

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

  },
 
  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") );
    message2();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
  },


  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();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
 
  },


  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();
 
     if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][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;
}
<!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>

  <!-- <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="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>


  <!-- <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>
//-------------------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>
ordenar un poco el código
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
//-------------------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(){
    rover.position[0]--;

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

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

  },

  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") );
    message2();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
  },


  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();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }

  },


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

     if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][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;
}
<!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>

  <!-- <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="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>


  <!-- <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>
//-------------------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(){
    rover.position[0]--;

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

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

  },

  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") );
    message2();
    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
  },


  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();
    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }

  },


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

    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][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;
}
<!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>

  <!-- <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="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>


  <!-- <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>
//-------------------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(){
    rover.position[0]--;

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

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

  },

  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") );
    message2();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
  },


  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();
    if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }

  },


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

     if (rover.position[0] === rover.obstacles[0][0] &&
        rover.position[1] === rover.obstacles[0][1] ||
        rover.position[0] === rover.obstacles[1][0] &&
        rover.position[1] === rover.obstacles[1][1] ||
        rover.position[0] === rover.obstacles[2][0] &&
        rover.position[1] === rover.obstacles[2][1] ||
        rover.position[0] === rover.obstacles[3][0] &&
        rover.position[1] === rover.obstacles[3][1] ||
        rover.position[0] === rover.obstacles[4][0] &&
        rover.position[1] === rover.obstacles[4][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;
}
<!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>

  <!-- <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="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>


  <!-- <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>
Origen Enlace
francisco dwq
  • 525
  • 1
  • 8
  • 20

Como podria mejorar el codigo en la parte de los if?

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(){
  // 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(){
    rover.position[0]--;

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

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

  },

  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") );
    message2();
    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }
  },


  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();
    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][1]) {
      console.log('THERE IS AN OBSTACLE THERE');
    }

  },


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

    if (rover.position[0] === rover.obstacles[0][0] && rover.position[1] === rover.obstacles[0][1] || rover.position[0] === rover.obstacles[1][0] && rover.position[1] === rover.obstacles[1][1] || rover.position[0] === rover.obstacles[2][0] && rover.position[1] === rover.obstacles[2][1] || rover.position[0] === rover.obstacles[3][0] && rover.position[1] === rover.obstacles[3][1] || rover.position[0] === rover.obstacles[4][0] && rover.position[1] === rover.obstacles[4][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;
}
<!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>

  <!-- <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="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>


  <!-- <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>