Ruch i JavaScript

0

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>
0

Każde wywołanie move() pobija Ci num. Przy pierwszym naciśnięciu będzie to 1, a potem 2 (nawet jak zmieniasz kierunek), więc var move_top = 0 + num*5; zwróci Ci 10, potem 15 itd.

0

ma podpijać o 5 by wykonał się ruch
ale czemu przy zmianie kierunku kwadrat za dużo skacze?

1
Pangeon napisał(a):

ma podpijać o 5 by wykonał się ruch
ale czemu przy zmianie kierunku kwadrat za dużo skacze?

Pierwsze wciśnięcie rect spowoduje, że będzie ono miało left: 195px;

var move_right = 0 + num*5; // 5
rect.style.left = 200 - move_right + "px"; // 195px

Teraz zmiana (prawa strzałka)

Wciśnięcie rect spowoduje, że left będzie równe 210px (skok o 15px, im więcej razy wciśniesz kwadarat tym skok będzie większy z racji podbijania num), bo:

var move_left = 0 + num*5; // 10
rect.style.left = 200 + move_left + "px"; // 210px

Żeby zmienić kierunek po prostu pobierz aktualną pozycję kwadrata, +/- o ile chcesz i ustaw jako nową pozycję. Num Ci kompletnie niepotrzebny.

BTW. Zmień sobie tego switcha na normalne nazwy 0 = 'left' itd. Kwadrat przesuwasz w lewo, a piszesz var move_right..

1 użytkowników online, w tym zalogowanych: 0, gości: 1