1

Hola buenas no se como hacer para ver que mi 'x' que es el rover del juego se mueva por el grid, no solo actualizar las coordenadas sino quiero que despues de algunos movimientos, la 'x' cambie de posicion. he hecho rover.pin++ cuando estando en direccion norte, baje el rover, funciona PERO solo en lugar de posicionarse en [0,1] se mueve en diagonal [1,1] , [2,2] etc y no se porque, probad solo usando 'B' PARA BACKWARDS ya que forward aun no va pero solo me interesa por ahora saber porque se mueve en diagonal, muchas gracias

introducir la descripción de la imagen aquí

//UPDATE INFO
$(document).ready(function(){
  message2();
  update();
});

function message2(){
  let mensajeDireccion = document.getElementById('direction').textContent = 'rover is facing ' + rover.direction;
  let mensajePosicion = document.getElementById('direction2').textContent = rover.position[0] + ',' + rover.position[1];
}

//ROVER GRID
let grid = [
  [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]
];

//RANDOM OBSTACLES
// for (var i = 0; i < 8; i++) {
//   let row = randomObstacle();
//   let column = randomObstacle();
//   let obstacles = grid[row][column] = 'o';
// }
//
// function randomObstacle(){
//   return Math.floor(Math.random() * 10);
// }


//ROVER OBJECT
let rover = {
  direction: 'N',
  position: [0,0],
  pin: [0,0]
};

//ROVER PLACEMENT ON GRID
function update(){
  grid[rover.position[0]].splice(rover.position[0],1, 'x');
}


//LOGIC DECISSIONS
document.getElementById("decision").onkeyup = function(e){

  let texto = e.target.value;

  let textoSanedo = texto.replace(" ", "").toUpperCase();

  e.target.value = textoSanedo;

  let commands;
  for (var i = 0; i < textoSanedo.length; i++) {
    commands = textoSanedo[i];
  }

  switch (commands) {
    case 'L':
    forward(rover);
    break;
    case 'R':
    turnRight(rover);
    break;
    case 'F':
    moveForward(rover);
    break;
    case 'B':
    moveBackwards(rover);
    break;
  }

  if (rover.position[0] < 0 || rover.position[0] > 9 || rover.position[1] < 0 || rover.position[1] > 9 ) {
    alert('out');
  }
  return;
};



//TURN LEFT
function turnLeft(rover){
  switch (rover.direction) {
    case 'N':
    rover.direction = 'W';
    break;
    case 'W':
    rover.direction = 'S';
    break;
    case 'S':
    rover.direction = 'E';
    break;
    case 'E':
    rover.direction = 'N';
    break;
  }
  message2();
  update();
}

//TURN RIGHT
function turnRight(rover){
  switch (rover.direction) {
    case 'N':
    rover.direction = 'E';
    break;
    case 'E':
    rover.direction = 'S';
    break;
    case 'S':
    rover.direction = 'W';
    break;
    case 'W':
    rover.direction = 'N';
    break;
  }
  message2();
  update();
}

//MOVE FORWARD
function moveForward(rover){
  switch (rover.direction) {
    case 'N':
    rover.position[0]--;
    rover.pin[0]--;

    break;
    case 'W':
    rover.position[0]--;
    rover.pin[0]--;

    break;
    case 'S':
    rover.position[0]++;
    rover.pin[0]++;

    break;
    case 'E':
    rover.position[0]++;
    rover.pin[0]++;

    break;
  }
  message2();
  update();
}

//MOVE BACKWARDS
function moveBackwards(rover){
  switch (rover.direction) {
    case 'N':
    rover.position[0]++;
    rover.pin[0]++;
    console.log(rover.pin);
    console.log(rover.position);

    break;
    case 'W':
    rover.position[0]++;
    rover.pin[0]++;


    break;
    case 'S':
    rover.position[0]--;
    rover.pin[0]--;


    break;
    case 'E':
    rover.position[0]--;
    rover.pin[0]--;


    break;
  }
  message2();
  update();
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>rover</title>
  </head>
  <body>
    <input id="decision" type="text" name="" value="" placeholder="l: Left, r: Right, f: Forward, b: Backwards">
    <p id="direction"></p>
    <p id="direction2"></p>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/app.js" charset="utf-8"></script>
  </body>
</html>

6
  • Si pongo B me sale [0, 1] no [1,1] Commented el 6 mar. 2018 a las 20:52
  • ya si eso va bien, rover.position y rover.pin que es la 'x' que supuestamente quiero que se mueva se actualiza bien, pero mira la foto que acabo de añadir, doy a backwards dos veces y es 0,1 0,2 respectivamente pero el recorrido de la 'x' es en forma diagonal en lugar de posicionarse en 0,1 y despues 0,2 Commented el 6 mar. 2018 a las 21:03
  • Pensaba que ya habías solucionado este problema
    – Alvaro Montoro
    Commented el 6 mar. 2018 a las 21:16
  • @AlvaroMontoro antes estaba haciendolo con key events ahora solo quiero moverlo por el grid de js no de html, mi problema esta por lo visto en grid[rover.position[0]].splice(rover.position[0],1, 'x'); en el que quiero posicionar una 'x' en 0,0 pero no consigo que se mueva la 'x' por la grid Commented el 6 mar. 2018 a las 21:19
  • Yo veo la x moverse por el grid (solo que se multiplica), ¿quieres que desaparezca de la posición anterior? ¿o cómo? Deberías editar la pregunta para aclarar mejor el problema.
    – Alvaro Montoro
    Commented el 6 mar. 2018 a las 21:22

1 respuesta 1

2

El problema es que en esta línea:

grid[rover.position[0]].splice(rover.position[0],1, 'x');

estás usando rover.position[0] en las dos coordenadas, tanto para la x como para la y. Deberías usar rover.position[0] para la primera y rover.position[1] para la segunda:

grid[rover.position[0]].splice(rover.position[1],1, 'x');
//                                            ^ este valor

Entonces el rover ya no se mueve en diagonal (porque se estaba usando el mismo valor para ambas) sino sólo a lo largo de uno de los ejes.

Aquí puedes ver el código funcionando:

//UPDATE INFO
$(document).ready(function() {
  message2();
  update();
});

function message2() {
  let mensajeDireccion = document.getElementById('direction').textContent = 'rover is facing ' + rover.direction;
  let mensajePosicion = document.getElementById('direction2').textContent = rover.position[0] + ',' + rover.position[1];
}

//ROVER GRID
let grid = [
  [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]
];

//RANDOM OBSTACLES
// for (var i = 0; i < 8; i++) {
//   let row = randomObstacle();
//   let column = randomObstacle();
//   let obstacles = grid[row][column] = 'o';
// }
//
// function randomObstacle(){
//   return Math.floor(Math.random() * 10);
// }


//ROVER OBJECT
let rover = {
  direction: 'N',
  position: [0, 0],
  pin: [0, 0]
};

//ROVER PLACEMENT ON GRID
function update() {
console.log("UPDATE" + rover.position);
  grid[rover.position[0]].splice(rover.position[1], 1, 'x');
}


//LOGIC DECISSIONS
document.getElementById("decision").onkeyup = function(e) {

  let texto = e.target.value;

  let textoSanedo = texto.replace(" ", "").toUpperCase();

  e.target.value = textoSanedo;

  let commands;
  for (var i = 0; i < textoSanedo.length; i++) {
    commands = textoSanedo[i];
  }

  switch (commands) {
    case 'L':
      forward(rover);
      break;
    case 'R':
      turnRight(rover);
      break;
    case 'F':
      moveForward(rover);
      break;
    case 'B':
      moveBackwards(rover);
      break;
  }
  
  console.log(grid)

  if (rover.position[0] < 0 || rover.position[0] > 9 || rover.position[1] < 0 || rover.position[1] > 9) {
    alert('out');
  }
  return;
};



//TURN LEFT
function turnLeft(rover) {
  switch (rover.direction) {
    case 'N':
      rover.direction = 'W';
      break;
    case 'W':
      rover.direction = 'S';
      break;
    case 'S':
      rover.direction = 'E';
      break;
    case 'E':
      rover.direction = 'N';
      break;
  }
  message2();
  update();
}

//TURN RIGHT
function turnRight(rover) {
  switch (rover.direction) {
    case 'N':
      rover.direction = 'E';
      break;
    case 'E':
      rover.direction = 'S';
      break;
    case 'S':
      rover.direction = 'W';
      break;
    case 'W':
      rover.direction = 'N';
      break;
  }
  message2();
  update();
}

//MOVE FORWARD
function moveForward(rover) {
  switch (rover.direction) {
    case 'N':
      rover.position[0]--;
      rover.pin[0]--;

      break;
    case 'W':
      rover.position[0]--;
      rover.pin[0]--;

      break;
    case 'S':
      rover.position[0]++;
      rover.pin[0]++;

      break;
    case 'E':
      rover.position[0]++;
      rover.pin[0]++;

      break;
  }
  message2();
  update();
}

//MOVE BACKWARDS
function moveBackwards(rover) {
  switch (rover.direction) {
    case 'N':
      rover.position[0]++;
      rover.pin[0]++;
      console.log(rover.pin);
      console.log(rover.position);

      break;
    case 'W':
      rover.position[0]++;
      rover.pin[0]++;


      break;
    case 'S':
      rover.position[0]--;
      rover.pin[0]--;


      break;
    case 'E':
      rover.position[0]--;
      rover.pin[0]--;


      break;
  }
  message2();
  update();
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<input id="decision" type="text" name="" value="" placeholder="l: Left, r: Right, f: Forward, b: Backwards">
<p id="direction"></p>
<p id="direction2"></p>

3
  • genial gracias again =) Commented el 6 mar. 2018 a las 21:57
  • Una ultima cosa alvaro, perdona por tanta pregunta igual me ayudo lo que me dijiste pero publique un problema sobre el travelLog, me guarda obviamente las coordenadas acrtules y no me sale que me muestre por las que he pasado es.stackoverflow.com/questions/144101/… Commented el 7 mar. 2018 a las 13:01
  • alvaro montotro podrias ayudarme con el mismo juego en la pregunta es.stackoverflow.com/questions/145058/… no me sale los boundries ahora, porque obviamente el return debe parar la ejecucion de moverse PERO al tener de forma separada cada movimiento no se como hacerlo Commented el 10 mar. 2018 a las 14:07

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.