Tengo que hacer un ejercicio de un rovers en marte que tiene que moverse dependiendo del input (f:forward, b: back etc), consigo que se actualice la dirección y se cambie el array de la posición del rover pero quiero que se cambie de celda fisicamente.
Éste es mi código:
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(function() {
$('#message').text('Rover successfully landed on mars...');
// $('.celda[data-num="[0,0]"').append('<img src="img/rover.png" class="rover" data-num="[0,0]">');
}, 3000);
$('.celda').each(function() {
let esta = this.dataset.num;
// console.log(esta);
});
let choice = $('input').val();
$('button').on('mouseenter', function() {
if (choice == 'l') {
message2();
rover.turnLeft();
}
if (choice == 'r') {
message2();
rover.turnRight();
}
if (choice == 'f') {
message2();
rover.moveForward();
}
if (choice == 'b') {
message2();
rover.moveBackwards();
}
});
var myGrid = [
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
['x', 1, 2, 3, 4, 5, 6, 'o', 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 'o', 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 'o', 9, 10],
[0, 1, 'o', 3, 4, 'o', 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'o']
];
for (var i = 0; i < myGrid.length; i++) {
let row = myGrid[i];
for (var j = 0; j < row.length; j++) {
let column = row[j];
if (column === 'o') {
console.log('obstacle are in: ' + i + ',' + j);
}
}
}
// $('.celda').each(function(){
// let a = $(this).data('num');
// console.log(a);
// });
// Rover Object
var rover = {
direction: 'N',
position: $('.rover').data('num'),
turnLeft: function() {
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;
}
},
turnRight: function() {
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;
}
},
moveForward: function() {
switch (rover.direction) {
case 'N':
rover.position[1]++;
console.log(rover.position);
break;
case 'E':
rover.position[0]++;
break;
case 'S':
rover.position[1]--;
break;
case 'W':
rover.position[0]--;
break;
}
},
moveBackwards: function() {
switch (rover.direction) {
case 'N':
rover.position[1]--;
break;
case 'E':
rover.position[0]--;
break;
case 'S':
rover.position[1]++;
break;
case 'W':
rover.position[0]++;
break;
}
}
};
// $(document).on('keyup', function(e){
// if (e.keyCode === 37) {
// rover.position-- ;
// console.log(rover.position);
// console.log('left');
// }
// if (e.keyCode === 39) {
// rover.position++ ;
// console.log(rover.position);
// console.log('Right');
// }
// if (e.keyCode === 38) {
// rover.position++ ;
// console.log(rover.position);
// console.log('up');
// }
// if (e.keyCode === 40) {
// rover.position++ ;
// console.log(rover.position);
// console.log('down');
// }
//
// });
//
// function turnLeft(rover){
// console.log("turnLeft was called!");
// }
//
// function turnRight(rover){
// console.log("turnRight was called!");
// }
//
// function moveForward(rover){
// console.log("moveForward was called")
// }
.celda {
display: block;
margin: 0 auto;
border: 1px solid black;
width: 50px;
height: 50px;
position: relative;
}
.rover {
width: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*opacity: 0;*/
}
/*.rover.show{
opacity: 1;
}*/
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<h1 style="text-align:center;">MARS ROVER</h1>
<p style="text-align:center;" id="message"></p>
<input type="text" name="" value="" size="40;" placeholder="F: Forward L: Left B: Back;" style="margin:0 auto; display: block;">
<button type="button" name="button" style="margin: 0 auto; display: block; margin-top: 30px;">submit</button>
<div class="container col-xs-offset-3">
<div class="row row0">
<div class="col-xs-1 celda" data-num="[0,0]">
<img src="img/rover.png" alt="rover" class="rover" data-num="[0,0]">
<p>1,0</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>
</div>
</div>
</div>