В этой статье мы научимся передвигать объект внутри какой-то области при помощи клавиш со стрелками на клавиатуре. Создадим файл index.html и две папки: js и css. В папке js создадим файл main.js, а в папке css создадим файл style.css.
Теперь в файле index.html создадим начальную разметку и подключим файл стилей style.css и файл скрипта main.js .
В теге body создадим div с классом app, а в нем создадим div с классом ball.
DIV с классом app - это область, внутри которой будет перемещаться объект. DIV с классом ball - это наш объект, который мы оформим в виде шара.
Перейдем к описанию стилей.
Уберем все отступы у документа и зададим высоту в 100%. Блоку с классом app назначим относительное позиционирование. Фон сделаем черным (121212), а высоту и ширину зададим в 100%. Блоку с классом ball назначим абсолютное позиционирование, позицию по вертикале и горизонтали установим в ноль. Ширину и высоту сделаем в 50px. Скругление углов сделаем на 50%, тем самым мы образуем шар. Фон сделаем радиальным градиентом от зеленого (0f0) к черному (000).
Перейдем к файлу main.js
На объект window повесим событие load. В событии создадим четыре константы left, right, top и down, которым присвоим коды клавиш. Затем переменной app присвоим ссылку на элемент с классом app, а переменной ball присвоим ссылку на элемент с классом ball. Теперь повесим на объект window событие keydown. Получим при помощи метода getBoundingClientRect() размеры нашего шара и присвоим результат переменной bl. Выполним проверку: если нажата кнопка со стрелкой влево, то выполним еще одну проверку, является ли координата по оси X нашего шара больше нуля. Это условие не позволит уйти нашему шару за пределы блока с классом app с левой стороны. Если это так, то сдвинем наш шар на один пиксель влево, уменьшив значение свойства left на единицу. Если первое условие оказалось ложным, проверим, не нажата ли клавиша со стрелкой в вправо. Если это так, то проверим, является ли позиция нашего шара по оси X меньше чем ширина блока с классом app минус ширина нашего шара. Это условие не позволит уйти шару за пределы блока app справа. Если это так, то сдвигаем шар на один пиксель вправо, увеличив свойство lreft на единицу. Если первые два условия оказались ложными, проверим, не нажата ли клавиша со стрелкой вниз. Если это так, проверим. не достиг ли наш шар нижней границы блока app. и если это условие оказывается верным, сдвигаем наш шар по оси Y на один пиксель вниз. Если все предыдущие условия оказались ложными, проверим, не нажата ли клавиша со стрелкой вверх. Если это так, то проверяем, не находится ли шар у верхней границы блока app, и если это верно, двигаем шар на один пиксель вверх.
В результате в браузере наше приложение будет иметь вот такой вид: