Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2018, 20:47
Новичок на форуме
Отправить личное сообщение для Temcher Посмотреть профиль Найти все сообщения от Temcher
 
Регистрация: 13.02.2018
Сообщений: 9

Перемещение объекта с помощью клавиатуры
Всем привет! Пытаюсь написать код, чтобы квадрат(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. Я новичок в программировании
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2018, 20:53
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2018, 20:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

и кстати
left=left+10;
эквивалентно
left+=10;
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2018, 22:51
Новичок на форуме
Отправить личное сообщение для Temcher Посмотреть профиль Найти все сообщения от Temcher
 
Регистрация: 13.02.2018
Сообщений: 9

Спасибо! сработало
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2018, 15:57
Новичок на форуме
Отправить личное сообщение для Temcher Посмотреть профиль Найти все сообщения от Temcher
 
Регистрация: 13.02.2018
Сообщений: 9

Еще один вопрос. Если я хочу сделать тоже самое, но уже с кнопками вверх и вниз. Где нужно создать функцию. Понятно, что для движения нужно создать новую переменную со значением 0, а дальше не получается.Просто пытаюсь сам додуматься, но безуспешно.
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2018, 16:30
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

все тоже самое, только эта условная ось x а вторая y.
Создаем новую переменную или массив [0,0] или даже объект {x:0,y:0}
проверяем не только вправо влево, но и вверх вниз, можно так же через else if
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2018, 16:46
Новичок на форуме
Отправить личное сообщение для Temcher Посмотреть профиль Найти все сообщения от Temcher
 
Регистрация: 13.02.2018
Сообщений: 9

я так и делал, просидел 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';
}
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2018, 16:54
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,748

Сообщение от 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';
};
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2018, 16:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,748

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

Последний раз редактировалось Nexus, 14.02.2018 в 17:07.
Ответить с цитированием
  #10 (permalink)  
Старый 14.02.2018, 19:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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';
	};
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать анимацию объекта на сайте с помощью TouchSwipe agalar Работа 2 11.01.2016 19:05
Перемещение плавное объекта programmwriter jQuery 3 17.09.2014 11:54
Перемещение по списку с помощью стрелок Research Элементы интерфейса 4 26.01.2013 03:07
Расширение объекта с помощью ф-ции DELTA Общие вопросы Javascript 2 02.12.2012 23:35
перемещение по элементом с клавиатуры vladitot Events/DOM/Window 2 14.02.2012 00:28