quiero hacer que mi grid no venga de html sino reflejar el grid creado en js que se vea en html, vamso, tener el html vacio. ya que quiero aprender mas a usar los arrays que centrarme en html. No veo como puedo hacer eso alguna sugerencia? Gracias
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);
}
}
}
//-------------------------------------------------------------//
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);
}
$('button').each(function(){
$(this).on('click', function(){
let direccion = $(this).data('action');
if (direccion === 'left') {
message2();
rover.left();
}
if (direccion === 'right') {
message2();
rover.right();
}
if (direccion === 'up') {
message2();
rover.up();
}
if (direccion === 'down') {
message2();
rover.down();
}
});
});
// Rover Object
var rover = {
direction: 'N',
position: $('.rover').data('num'),
left: function(){
rover.position[0]--;
if (rover.position[0] < 0) {
alert('no puede salirse');
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
},
right: function(){
rover.position[0]++;
if (rover.position[0] > 9) {
alert('no puede salirse');
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
},
up: function(){
rover.position[1]--;
if (rover.position[1] < 0) {
alert('no puede salirse');
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
message2();
},
down: function(){
rover.position[1]++;
if (rover.position[1] > 9) {
alert('no puede salirse');
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") );
message2();
}
};
$(document).on('keydown', function(e){
if (e.keyCode === 37) {
rover.left();
}
if (e.keyCode === 39) {
rover.right();
}
if (e.keyCode === 38 && rover.direction === 'N') {
rover.up();
}
if (e.keyCode === 40) {
rover.down();
}
});
.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%);
}
input, button{
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!-- <input type="text" name="" value="" size="40;" placeholder="F: Forward L: Left B: Back;" style="margin:0 auto; display: block;" border="1px solid black;"> -->
<!-- <button type="button" name="button" style="margin: 0 auto; display: block; margin: 20px auto;">submit</button> -->
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="up">up</button>
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="down">down</button>
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="left">left</button>
<button type="button" name="button" style="display: inline-block; margin: 0 auto; width30px; height: 30px;" data-action="right">right</button>
<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="img/rover.png" alt="rover" class="rover" data-num="[0,0]">
<p>0,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>XXX
</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>XXX
</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>XXX
</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>XXX
</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>XXX
</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>XXX
</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>XXX
</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>XXX
</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>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script>
<script src="js/app.js"></script>
</body>
</html>