https://codepen.io/cornel777/pen/GRZWEMq
Hi, can anyone tell me why this code runs with a delay?
More specifically, after the first PROMPT to input a direction, the red circle is not moved (even though the console log writes the correct value - the subtracted/added top/left of the player element).
This first user-inputted direction value (left - for example) is executed after the next one is prompted and submitted.
And so the player will always move with one user-inputted command delay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Escape</title>
<link rel="stylesheet" type="text/css" href="RPG.css">
</head>
<body>
<h1 id="title">Escape!!!</h1>
<div class="board">
<div id="player"></div>
<div id="exitRound"></div>
<div id="exitTriang"></div>
<div id="exitSquare"></div>
</div>
<button onclick="play()" class="restart">START</button>
<script>
// var board = document.getElementById("board");
var player = document.getElementById("player");
// var exit1 = document.getElementById("exitTriang");
var exit2 = document.getElementById("exitRound");
// var exit3 = document.getElementById("exitSquare");
// play();
function play() {
confirm('ready?');
var posT = player.offsetTop;
var posL = player.offsetLeft;
var posT1 = exit2.offsetTop;
var posL1 = exit2.offsetLeft;
var x = player.offsetParent;
console.log(posT, posL, posT1, posL1);
console.log("offsetParent is " + x + "because it has position css property, otherwise it is body");
while (posT !== posT1 && posL !== posL1) {
console.log(posT !== posT1 && posL !== posL1);
var direction = prompt("Enter direction:\n left, right, up, down");
switch (direction) {
case 'left':
player.style.left = (posL - 50) + 'px';
console.log(player.style.left = (posL - 50) + 'px');
posL = posL - 50;
break;
case 'right':
player.style.left = (posL + 50) + 'px';
break;
case 'up':
player.style.top = (posT - 50) + 'px';
break;
case 'down':
player.style.top = (posT + 50) + 'px';
break;
default:
alert("you need to move!");
break;
}
}
if (posT === posT1 && posL === posL1) {
alert("YOU WIN!!!");
}
}
</script>
</body>
</html>
I guess the thread is blocked and css doesn't finish execution immediatly.
A suggested solution would be something like this:
https://codepen.io/abozanona/pen/oNxZeLY
// var board = document.getElementById("board");
var player = document.getElementById("player");
// var exit1 = document.getElementById("exitTriang");
var exit2 = document.getElementById("exitRound");
// var exit3 = document.getElementById("exitSquare");
// play();
function gameLoop() {
var posT = player.offsetTop;
var posL = player.offsetLeft;
var posT1 = exit2.offsetTop;
var posL1 = exit2.offsetLeft;
var direction = prompt("Enter direction:\n left, right, up, down");
switch (direction) {
case 'left':
player.style.left = (posL - 50) + 'px';
console.log(player.style.left = (posL - 50) + 'px');
setTimeout(gameLoop, 500);
break;
case 'right':
player.style.left = (posL + 50) + 'px';
setTimeout(gameLoop, 500);
break;
case 'up':
player.style.top = (posT - 50) + 'px';
setTimeout(gameLoop, 500);
break;
case 'down':
player.style.top = (posT + 50) + 'px';
setTimeout(gameLoop, 500);
break;
default:
alert("you need to move!");
setTimeout(gameLoop, 500);
break;
}
if (posT === posT1 && posL === posL1) {
alert("YOU WIN!!!");
return; // gets out of a loop
}
}
I'm using setTimeout(gameLoop, 500); now to give the main thread 500 ms to apply css changes to the DOM before I block the thread again.