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
$(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>