Witam, jakkolwiek kuriozalny jest zaprezentowany kod proszę o pomoc. Poznaje pewne mechanizmy dlatego nie zależy mi na efekcie a jedynie na wyjaśnieniu pewnych zachowań.
Więc przesuwam kwadracik. Działa to tak: klawiszem strzałki ustalam kierunek a kliknięcie powoduje przesunięcie. Ok, problem w tym że to nie działa całkiem dobrze; po zmianie kierunku kwadrat robi większe skoki niż tego oczekuje.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Strona</title>
<style type="text/css">
#rect {
background-color: red;
width: 100px;
height: 100px;
position:absolute;
left:200px;
top:200px;
color: white;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="rect">@MOVE ME</div>
<script>
let direct = 0;
let num = 1;
let rect = document.getElementById("rect");
function move() {
if (direct == 1) {
var move_left = 0 + num*5;
rect.style.left = 200 + move_left + "px";
console.log("right jump = " + move_left);
}
if(direct == 0) {
var move_right = 0 + num*5;
rect.style.left = 200 - move_right + "px";
console.log("left jump = " + move_right);
}
if(direct == 3) {
var move_top = 0 + num*5;
rect.style.top = 200 + move_top + "px";
console.log("down jump = " + move_top);
}
if(direct == 2) {
var move_bottom = 0 + num*5;
rect.style.top = 200 - move_bottom + "px";
console.log("up jump = " + move_bottom);
}
num++;
console.log("num = " + num);
}
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37:
direct = 0;
console.log("Left");
break;
case 39:
direct = 1;
console.log("Right");
break;
case 38:
direct = 2;
console.log("Up");
break;
case 40:
direct = 3;
console.log("Down");
break;
}
}, false);
rect.onclick = function() {
move();
}
</script>
</body>
</html>