How to prevent obstacles from accumulating each time you lose the game

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


setTimeout(showLives, 1000);
function showLives(){
  document.getElementById('lives').textContent = rover.lives;
  // $('#lives').text = 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');

    if (confirm('want to play again?')) play();
  }

  //When lose
  if (rover.lives === 0) {

    alert('you lost')

    if (confirm('want to play again?')) play();
  }
}

function play(){
      rover.lives = 3; // update hearts (show it in a modal)
      showLives(); // show 3 lives again in panel

      $("div[data-num='[" + [0,0] +"]']").append( $(".rover")); // re-position rover in [0,0]
      rover.position = [0,0]; // prevents last rover position to update
      message2(); // update coordinates of the rover
      random();
}

$(document).ready(function(){
  play();
});


//-----------------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------------------//
function random(){
  // Limpia los obstáculos anteriores
  $("div.celda").css('background-color', 'white');
  rover.obstacles = [];
  for (var i = 0; i < 10; 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', 'red');
  }
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1 style="text-align:center;">MARS ROVER</h1>
<p style="text-align:center;" id="message"> </p>
<p style="text-align:center;" 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>

//-------------------MESSAGES---------------------//
function message1(){
  $('#message').text('Establishing communication...')
}
function message2(){
  $('#message').text('The rover is placed in position: ' + rover.position + ' and is facing ' + rover.direction);
}
function showLives(){
  $('#lives').text(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);
  }
};

// Create board
function createBoard(){
  var $container = $('.container');
  for (var row=0; row<10; row++){
    var $row = $('<div>');
    $row.addClass('row');
    for (var column=0; column<10; column++){
      var $celda = $('<div>');
      $celda.addClass('col-xs-1 celda');
      var $text = $('<p>');
      $text.text(row + ',' + column);
      $celda.append($text);
      $row.append($celda);
    }
    $container.append($row);
  }
  getCell([0,0]).append($('<p style="color:black">start</p>'));
  getCell([9,9]).append($('<p style="color:black">end</p>'));
}

function createRover(){
  var rover = $('<img>');
  rover.addClass('rover');
  rover.attr('src', 'https://d30y9cdsu7xlg0.cloudfront.net/png/269945-200.png');
  return rover;
}

// Returns the cell at specific position
function getCell(position){
  return $('.container div.row:eq(' + position[1] + ')')
    .find('div.celda:eq(' + position[0] + ')');
}

//---------------------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
  getCell(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]){
      getCell(newPositionRover).addClass('obstacle');
    
      //Resting hearts when crash
      rover.lives--;
      showLives();
    }
  }

  //When win
  if (newPositionRover[0] === 9 && newPositionRover[1] === 9) {
    alert('you won');
    if (confirm('want to play again?')) play();
  }

  //When lose
  if (rover.lives === 0) {
    alert('you lost')
    if (confirm('want to play again?')) play();
  }
}

function play(){
      rover.lives = 3; // update hearts (show it in a modal)
      showLives(); // show 3 lives again in panel

      rover.position = [0,0]; // prevents last rover position to update
      moveToPosition(0,0); // re-position rover in [0,0]
      message2(); // update coordinates of the rover
      random();
}

var $rover;

$(document).ready(function(){
  message1();
  createBoard();
  $rover = createRover();
  setTimeout(play, 1000);
});


//-----------------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------------------//
function random(){
  // Limpia los obstáculos anteriores
  $("div.celda").removeClass('obstacle');
  rover.obstacles = [];
  for (var i = 0; i < 10; i++) {

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

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

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

.celda.obstacle{
  background-color: red;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1 style="text-align:center;">MARS ROVER</h1>
<p style="text-align:center;" id="message"> </p>
<p style="text-align:center;" 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>