0

quiero saber como hacer para cuando se pierda o gane como se ve ahi, haga un nuevo random de obstaculos pero que no se acumule los que tenia antes, otra cosa, hay alguna forma mejor de hacer cuando gano o pierdo de forma mas eficiente? Hay mucho codigo ahi, actualizando la posicion, mensaje, llamando a la funcion random etc.

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(){
  document.getElementById('lives').textContent = rover.lives;
}

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


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

//---------------COMMON DECISSION FOR BOTH CHOICES-----------------//
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 in panel
  random();
}

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

1 respuesta 1

1

Puedes sacar el código para iniciar un nuevo juego a una función (en mi ejemplo play) a la que puedes llamar tanto al inicio como al iniciar un nuevo juego.

En cuanto a eliminar los obstáculos anteriores no tienes más que establecer el fondo de todas las celdas como blanco y vaciar el array obstacles antes de crear los nuevos obstáculos:

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

Por si te ayuda aquí tienes otro ejemplo en el que el tablero se crea de forma dinámica y el estilo de los obstáculos se cambia a través de una clase obstacle.

También he creado una función getCell que devuelve la celda para una posición específica sin necesidad de utilizar el atributos data.

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

11
  • pero aunque los ponga blanco seguiran siendo un obstaculo el 3 mar. 2018 a las 14:15
  • Cierto, perdona. Tendrías que vaciar también el array obstacles. He modificado la respuesta para corregirlo. el 3 mar. 2018 a las 14:18
  • gracias asier =) el 3 mar. 2018 a las 14:18
  • Asier he visto tu pagina pildorasdotnet.blogspot.com.es y hablabas algo de snake, esty interesado en aprender a hacer uno muy muy sencillo no sabras algun tutorial etc? el 3 mar. 2018 a las 14:36
  • ¿En .NET? En el blog tengo un par de artículos que muestran como hacer el juego en una aplicación de consola paso a paso. El código está en C# y VB.NET. No sé si es eso lo que buscas. el 3 mar. 2018 a las 14:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.