//-------------------MESSAGES---------------------//
setTimeout(message1, 1000);
function message1(){
$('#message').text('Establishing communication...')
}
setTimeout(message2, 2000);
function message2(){
// if (rover.position !== ) {
//
// }
$('#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(){
rover.position[0]--;
if moveToPosition(rover.position[0] <-1, 0) {
alert('no puede salirse');
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover"));
right: message2function();{
if moveToPosition(rover.position[0] === rover.obstacles[0][0] &&
rover.position[1] === rover.obstacles[0][1] ||
rover.position[0] === rover.obstacles[1][0] &&
rover.position[1] === rover.obstacles[1][1] ||
rover.position[0] === rover.obstacles[2][0] &&
rover.position[1] === rover.obstacles[2][1] ||
rover.position[0] === rover.obstacles[3][0] &&
rover.position[1] === rover.obstacles[3][1]1, ||0);
rover.position[0] === rover.obstacles[4][0] &&},
rover.position[1] ===up: rover.obstacles[4][1]function() {
console.logmoveToPosition('THERE IS AN OBSTACLE0, THERE'-1);
}
},
rightdown: function(){
rover.position[0]++;
if (rover.position[0] > 9) {
alertmoveToPosition('no puede0, salirse'1);
}
$("div[data-num='[" + rover.position[0] +","+rover.position[1]+"]']").append( $(".rover") )};
message2();
if//---------------------MOVING---------------------//
function moveToPosition(rover.position[0] === rover.obstacles[0][0]ejeX, &&ejeY){
let newPositionRover = rover.position[1][ ===//Calculate rover.obstacles[0][1]new ||position
rover.position[0] === rover.obstacles[1][0]+ &&ejeX,
rover.position[1] === rover.obstacles[1][1]+ ||ejeY
rover.position[0] === rover.obstacles[2][0] &&];
rover.position[1]if ===(newPositionRover[0] rover.obstacles[2][1]<0 ||
rover.position[0] === rover.obstacles[3][0] &&
rover.position[1] ===newPositionRover[0] rover.obstacles[3][1]>9 ||
newPositionRover[1] <0 || rover.position[0]newPositionRover[1] ===>9 rover.obstacles[4][0]) &&{
rover.position[1]alert('no ===puede rover.obstacles[4][1]salirse') {;
return; // console.log('THEREStop ISthe ANexecution OBSTACLEif THERE');
is out of the }grid
},
up: function(){
//Update new position rover.position[1]--;
so I accumulate values
if (rover.position[1] <position 0)= {newPositionRover;
alert('no puede salirse');
//Moving the }
rover
$("div[data-num='[" + rover.position[0]newPositionRover +","+rover.position[1]+"]']"+"]']").append( $(".rover") );
message2();
if (rover.position[0] === rover.obstacles[0][0] &&
rover.position[1] === rover.obstacles[0][1] ||
rover.position[0]// ===Check rover.obstacles[1][0]if &&obstacle
for(var i = 0; i < rover.position[1] === roverobstacles.obstacles[1][1]length; ||i++){
if (rover.position[0]obstacles[i][0] === rover.obstacles[2][0]newPositionRover[0] &&
rover.position[1]obstacles[i][1] === rover.obstacles[2][1] ||newPositionRover[1]){
rover.position[0] === rover.obstacles[3][0] &&
$("div[data-num='[" + rover.position[1] ===obstacles[i] rover+"]']").obstacles[3][1]css('background-color', ||'red');
rover.position[0]//Resting ===hearts rover.obstacles[4][0]when &&crash
rover.position[1] === rover.obstacles[4][1]) {lives--;
console.logshowLives('THERE IS AN OBSTACLE THERE');
}
},
down://When function(){win
rover.position[1]++;
if (newPositionRover[0] === 9 if&& (rover.position[1]newPositionRover[1] >=== 9) {
alert('no puede'you salirse'won');
}
$("div[data-num='[" +let rover.position[0]again +","+rover.position[1]+"]']").append(= $confirm(".rover") );
'want to play message2(again?');
if (rover.position[0] === rover.obstacles[0][0]again) &&{
rover.position[1] === rover.obstacles[0][1] ||
lives = 3; //show rover.position[0]it ===in rover.obstacles[1][0]a &&modal
rover.position[1] === rover.obstacles[1][1] ||}
rover.position[0] === rover.obstacles[2][0] &&}
//When lose
if (rover.position[1]lives === rover.obstacles[2][1]0) ||{
rover.position[0] === rover.obstacles[3][0]alert('you &&lost')
let again = rover.position[1]confirm('want ===to rover.obstacles[3][1]play ||again?');
rover.position[0] ===if rover.obstacles[4][0](again) &&{
rover.position[1] === rover.obstacles[4][1]) {
lives = 3; console.log('THERE//show ISit ANin OBSTACLEa THERE');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 < 10;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+"]']"num='["+ obstacle +"]']").css('background-color', 'red''white');
}
.celda{
display: block;
margin: 0 auto;
border: 1px solid black;
width: 50px;
height: 50px;
position: relative;
}
p{
font-size: 10px;
}
.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;
}
<!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"><id="message"> </p>
<p style="text-align:center;" id="lives"> ♥ </p>
<!-- <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="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>