querria indudablemente mejorar este codigo tan cutre que hice, quiero una forma sencilla de que se muestren los obstaculos, el problema es que tendo muchisimo if por cada obstaculo creado, los tengo todos en un mutidimensional array en rover.obtsacles array, pero quiero hacerlo mucho mas eficiente y no caigo en como hacer para no decir cada posicion de cada obstaculo generado. Tambien si quiero 20 obstaculos creados con mi for loop no voy a hacer manualmente un if de 20 condiciones. Muchas gracias =) <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> //-------------------MESSAGES---------------------// 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); } function showLives(){ document.getElementById('lives').textContent+= parseInt(rover.lives); } //---------------------ROVER OBJECT---------------------// var rover = { obstacles: [], direction: 'N', lives: 3, position: $('.rover').data('num'), left: function(){ moveToPosition(-1, 0); }, right: function(){ moveToPosition(1, 0); }, up: function(){ moveToPosition(0, -1); }, down: function(){ moveToPosition(0, 1); } }; //---------------------MOVING---------------------// function moveToPosition(ejeX, ejeY){ let newPositionRover = [ //Calculate new position rover.position[0] + ejeX, rover.position[1] + ejeY ]; if (newPositionRover[0] <0 || newPositionRover[0] >9 || newPositionRover[1] <0 || newPositionRover[1] >9 ) { alert('no puede salirse'); return; // Stop the execution if is out of the grid } //Update new position so I accumulate values rover.position = newPositionRover; //Moving the rover $("div[data-num='[" + newPositionRover +"]']").append( $(".rover")); message2(); // Check if obstacle for(var i = 0; i < rover.obstacles.length; i++){ if (rover.obstacles[i][0] === newPositionRover[0] && rover.obstacles[i][1] === newPositionRover[1]){ $("div[data-num='[" + rover.obstacles[i] +"]']").css('background-color', 'red'); //Resting hearts when crash rover.lives--; showLives(); } } //When win if (newPositionRover[0] === 9 && newPositionRover[1] === 9) { alert('you won'); let again = confirm('want to play again?'); if (again) { rover.lives = 3; //show it in a modal } } //When lose if (rover.lives === 0) { alert('you lost') let again = confirm('want to play again?'); if (again) { rover.lives = 3; //show it in a modal } } } //-----------------MOVEMENT KEYS------------------// $(document).on('keydown', function(e){ if (e.keyCode === 37) { rover.left(); } if (e.keyCode === 39) { rover.right(); } if (e.keyCode === 38) { rover.up(); e.preventDefault(); } if (e.keyCode === 40) { rover.down(); e.preventDefault(); } }); //-----------------OBSTACLES------------------// for (var i = 0; i < 20; i++) { let axisX = Math.floor(Math.random() * 10); let axisY = Math.floor(Math.random() * 10) + 1; let obstacle = [axisX, axisY]; rover.obstacles.push(obstacle); $("div[data-num='["+ obstacle +"]']").css('background-color', 'white'); } <!-- language: lang-css --> .celda{ display: block; margin: 0 auto; border: 1px solid black; width: 50px; height: 50px; position: relative; } .container{ border-radius: 30%; } .rover{ width: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } input, button{ border: 1px solid black; } .row p{ color: white; } #lives{ /*display: none;*/ color: red; } <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <!-- <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> <p style="text-align:center;" id="lives"> ♥ </p> <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="https://d30y9cdsu7xlg0.cloudfront.net/png/269945-200.png" alt="rover" class="rover" data-num="[0,0]"> <p>0,0</p> <p style="color: black;">start</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> <p style="color: black;">end</p> </div> </div> </div> <!-- <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script> --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/app.js"></script> </body> </html> <!-- end snippet -->