# How to make the rover physically move through my array and see it in the console

1

Hi, I do not know how to do to see that my 'x' which is the rover of the game moves through the grid, not only update the coordinates but I want that after some movements, the 'x' change position. I have done rover.pin ++ when standing in the north, lower the rover, it works BUT only instead of positioning in [0,1] it moves diagonally [1,1], [2,2] etc and I do not know why, try only using 'B' FOR BACKWARDS since forward is still not going but I'm only interested in knowing why it moves diagonally, thank you very much

``````//UPDATE INFO
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 ) {
}
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>
<meta charset="utf-8">
<title>rover</title>
<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>``````

asked by francisco dwq 06.03.2018 в 21:41
source

2

The problem is that in this line:

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

You are using `rover.position[0]` in the two coordinates, both for the `x` and the `y` . You should use `rover.position[0]` for the first and `rover.position[1]` for the second:

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

Then the rover no longer moves diagonally (because the same value was being used for both) but only along one of the axes.

Here you can see the code working:

``````//UPDATE INFO
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) {
}
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>``````