Форум

Temcher · #1 (**permalink**) 13.02.2018, 20:47

Всем привет! Пытаюсь написать код, чтобы квадрат(div) можно было перемещать влево и вправо с помощью стрелочек на клавиатуре. Двигаться квадрат я заставил, но получается криво. Получилось так:
1) Если я нажимаю стрелочку вправо, то квадрат двигается вправо. Если во время движения вправо я захочу развернуть квадрат влево, то квадрат сразу перескакивает на стартовую позицию, и уже после его можно двигать влево.
2) Если я изначально двигаю квадрат влево, а потом захочу развернуть его вправо, то ничего не происходит. прикладываю код.

<div id="kvadrat">
	<div id="kvadr" ></div>
</div>

var left = 0;
var right = 0;
window.onkeydown = function move_left(){
	if(event.keyCode==37){
		left=left-10;
		document.getElementById('kvadr').style.left = left + 'px';
	}
		else if(event.keyCode==39){
			right=right-10;
			document.getElementById('kvadr').style.right= right + 'px';
		};

}

Пытался уже по разному менять код, и ничего не получается.
P.S. Я новичок в программировании

j0hnik · #2 (**permalink**) 13.02.2018, 20:53

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		position: absolute;
	}
	</style>
</head>
<body>
	<div id="kvadrat">
    <div id="kvadr">1</div>
</div>
</body>
<script>
var left = 0;
window.onkeydown = function move_left(){
	if(event.keyCode==37){
		left=left-10;
		document.getElementById('kvadr').style.left = left + 'px';
	}
		else if(event.keyCode==39){
			left=left+10;
			document.getElementById('kvadr').style.left= left + 'px';
		}

};

</script>
</html>

j0hnik · #3 (**permalink**) 13.02.2018, 20:56

и кстати
left=left+10;
эквивалентно
left+=10;

Temcher · #4 (**permalink**) 13.02.2018, 22:51

Спасибо! сработало

Temcher · #5 (**permalink**) 14.02.2018, 15:57

Еще один вопрос. Если я хочу сделать тоже самое, но уже с кнопками вверх и вниз. Где нужно создать функцию. Понятно, что для движения нужно создать новую переменную со значением 0, а дальше не получается.Просто пытаюсь сам додуматься, но безуспешно.

j0hnik · #6 (**permalink**) 14.02.2018, 16:30

все тоже самое, только эта условная ось x а вторая y.
Создаем новую переменную или массив [0,0] или даже объект {x:0,y:0}
проверяем не только вправо влево, но и вверх вниз, можно так же через else if

Temcher · #7 (**permalink**) 14.02.2018, 16:46

я так и делал, просидел 2 часа, а нужно было использовать другое имя переменной.
Почему такой вариант не работал?
var top = 0;
else if(event.keyCode==40){
top=top-10;
document.getElementById('kvadr').style.top= top + 'px';

}

а такой работает
var y = 0;
else if(event.keyCode==40){
y=y-10;
document.getElementById('kvadr').style.top= y + 'px';
}

Nexus · #8 (**permalink**) 14.02.2018, 16:54

Сообщение от j0hnik

Создаем новую переменную или массив [0,0] или даже объект {x:0,y:0}

Можно же обойтись вовсе без хранения значения в переменной.

window.onkeydown = function (event) {
    var code = event.keyCode || event.charCode;
    if (code != 37 && code != 39)
        return;

    var prop = document.getElementById('kvadr').style;
    prop.left = +prop.left.replace(/[^\d\-]+?/g, '') + (code == 37 ? -10 : 10) + 'px';
};

Nexus · #9 (**permalink**) 14.02.2018, 16:57

Temcher, "top" - ссылка на корневое окно (window) в иерархии окон, её нельзя переопределить в глобальной ОВ.

j0hnik · #10 (**permalink**) 14.02.2018, 19:03

Nexus, replace и регулярки тут тоже не особо нужны.

window.onkeydown = function (event) {
		var code = event.keyCode || event.charCode;
		if (code != 37 && code != 39)
			return;
		var prop = document.getElementById('kvadr');
		prop.style.left = prop.offsetLeft+ (code == 37 ? -10 : 10) + 'px';
	};

Форум

Справочник

Discord чат

Курсы javascript