Collision with obstacle does not work

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


let obstacleA = Math.floor(Math.random() * myGrid.length);
let obstacleB = Math.floor(Math.random() * myGrid.length);
let obstacle1Array =[];
obstacle1Array.push(obstacleA , obstacleB);


let obstacleC = Math.floor(Math.random() * myGrid.length);
let obstacleD = Math.floor(Math.random() * myGrid.length);
let obstacle2Array =[];
obstacle2Array.push(obstacleC , obstacleD);


let obstacleE = Math.floor(Math.random() * myGrid.length);
let obstacleF = Math.floor(Math.random() * myGrid.length);
let obstacle3Array =[];
obstacle3Array.push(obstacleE , obstacleF);

let obstacleG = Math.floor(Math.random() * myGrid.length);
let obstacleH = Math.floor(Math.random() * myGrid.length);
let obstacle4Array =[];
obstacle4Array.push(obstacleG , obstacleH);

console.log(obstacle1Array);
console.log(obstacle2Array);
console.log(obstacle3Array);
console.log(obstacle4Array);

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





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

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

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


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

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

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

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

  });
});


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

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


    if (rover.position === obstacle1Array || rover.position === obstacle2Array || rover.position === obstacle3Array || rover.position === obstacle4Array) {
      console.log('boom');
    }

  },

  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();
    console.log(rover.position);

    
    if (rover.position === obstacle1Array || rover.position === obstacle2Array || rover.position === obstacle3Array || rover.position === obstacle4Array) {
      console.log('boom');
    }

  },


  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();
    console.log(rover.position);

    if (rover.position === obstacle1Array || rover.position === obstacle2Array || rover.position === obstacle3Array || rover.position === obstacle4Array) {
      console.log('boom');
    }

  },


  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();
    console.log(rover.position);

    if (rover.position === obstacle1Array || rover.position === obstacle2Array || rover.position === obstacle3Array || rover.position === obstacle4Array) {
      console.log('boom');
    }


  }
};


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

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

});

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

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

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

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

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


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