Перемещение объекта с помощью клавиатуры
Всем привет! Пытаюсь написать код, чтобы квадрат(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. Я новичок в программировании |
<!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>
|
и кстати
left=left+10; эквивалентно left+=10; |
Спасибо! сработало:)
|
Еще один вопрос. Если я хочу сделать тоже самое, но уже с кнопками вверх и вниз. Где нужно создать функцию. Понятно, что для движения нужно создать новую переменную со значением 0, а дальше не получается.Просто пытаюсь сам додуматься, но безуспешно.
|
все тоже самое, только эта условная ось x а вторая y.
Создаем новую переменную или массив [0,0] или даже объект {x:0,y:0} проверяем не только вправо влево, но и вверх вниз, можно так же через else if |
я так и делал, просидел 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'; } |
Цитата:
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';
};
|
Temcher, "top" - ссылка на корневое окно (window) в иерархии окон, её нельзя переопределить в глобальной ОВ.
|
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';
};
|
| Часовой пояс GMT +3, время: 20:38. |