//UPDATE INFO
$(document).ready(function() {
setTimeout(messages, 1000);
update();
resetGame();
});
function messages() {
with(document){
let mensajeDireccion = getElementById('direction').textContent = 'rover is facing ' + rover.direction;
let mensajePosicion = getElementById('direction2').textContent = rover.position[0] + ',' + rover.position[1];
let mensajeVidas = getElementById('lives').textContent = rover.lives + ' lives';
}
}
//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]
];
//ROVER OBJECT
let rover = {
direction: 'N',
position: [0, 0],
obstacles: [],
lives: 3,
travelLog: []
};
// RANDOM OBSTACLES PLACEMENT
for (var i = 0; i < 30; i++) {
let row = randomObstacle();
let column = randomObstacle();
let obstacles = grid[row][column] = 'o';
let obstacle = [row, column];
rover.obstacles.push(obstacle);
}
function randomObstacle(){
return Math.floor(Math.random() * 10);
}
//ROVER PLACEMENT ON GRID
function update() {
grid[rover.position[0]].splice(rover.position[1], 1, 'x');
//check if crash
for (var i = 0; i < rover.obstacles.length; i++) {
if (rover.obstacles[i][0] === rover.position[0] && rover.obstacles[i][1] === rover.position[1]) {
rover.lives--;
$('.alerta').addClass('visible');
$('.alerta').text('you hit an obstaclle ' + rover.lives + ' lives left');
setTimeout(function(){
$('.alerta').removeClass('visible');
},1500);
messages();
}
}
//when lose
if (rover.lives === 0) {
if (confirm('game over, want to play again?')) {
resetGame();
}
}
}
//RESET
function resetGame(){
grid[rover.position[0]].splice(rover.position[1], 1, 'x');
rover.lives = 3;
rover.position = [0,0];
messages();
}
//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;
}
//TRAVEL LOG (splice method so doesnt update the same value always)
rover.travelLog.push(rover.position.slice());
console.log(rover.travelLog);
if (rover.position[0] < 0 || rover.position[0] > 9 || rover.position[1] < 0 || rover.position[1] > 9) {
alert('out of boundries');
}
return; //NO FUNCIONA
};
//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;
}
messages();
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;
}
messages();
update();
}
//MOVE FORWARD
function moveForward(rover) {
switch (rover.direction) {
case 'N':rover.position[0]--;break;
case 'W':rover.position[1]--;break;
case 'S':rover.position[0]++;break;
case 'E':rover.position[1]++;break;
}
messages();
update();
}
//MOVE BACKWARDS
function moveBackwards(rover) {
switch (rover.direction) {
case 'N':rover.position[0]++;break;
case 'W':rover.position[0]++;break;
case 'S':rover.position[0]--;break;
case 'E':rover.position[0]--;break;
}
messages();
update();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rover</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input id="decision" type="text" name="" value="" placeholder="l: Left, r: Right, f: Forward, b: Backwards" autocomplete="off">
<p id="direction"></p>
<p id="direction2"></p>
<p id="lives"></p>
<div class="alerta"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script> -->
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>