На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Управление движением картинки с клавиатуры на JavaScript


В этой заметке мы разберемся, как управлять (двигать) картинку с помощью клавиатуры на JavaScript. Данная задача редко появляется при работе с обычными сайтами, чаще всего её можно встретить, когда работаешь с онлайн играми. Что у нас должно получиться в итоге: подвигайте человечка с помощью стрелок на клавиатуре:



Как обычно, разберем задачу на составляющие. Нам надо:

1) Вывести изображение
2) Обработать нажатия клавиш
3) Изменить координаты изображения

Обратим внимание сначала на 3-й пункт: изменение координат. Для того, чтобы менять расположение элемента, необходимо задать ему абсолютное позиционирование. С этого и начинаем 1-й пункт. Код, 1 часть:

<!DOCTYPE html>
<html>
<head>
<title>Управление изображением с помощью JavaScript</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<style>
#chel {
position: absolute;
left:50%;
top:50%;
}
</style>
<img src="img/art209-1.png" id="chel"/>
Теперь надо обработать нажатия клавиш. Каждая клавиша на клавиатуре имеет свой уникальный код, этим мы и воспользуемся. Код, 2 часть:

<script language="javascript" type="text/javascript">
document.onkeydown = function checkKeycode(event)
{
var keycode;
if(!event) var event = window.event;
if (event.keyCode) keycode = event.keyCode; // IE
else if(event.which) keycode = event.which; // все браузеры
if (keycode==39) {
$('#chel').animate({left: '+=20'},1000);
}
if (keycode==38) {
$('#chel').animate({top: '-=20'},1000);
}
if (keycode==37) {
$('#chel').animate({left: '-=20'},1000);
}
if (keycode==40) {
$('#chel').animate({top: '+=20'},1000);
}
}
</script>     
</body>
</html>
Пояснение к 5-й и 6-й строке. 5-я строка получает код для IE, а 6-я - для всех остальных браузеров - мы же делаем кроссбраузерный код, не правда ли? Далее мы задействуем jQuery - чтобы переход из одного состояния в другое был плавным. Вот и все - код довольно прост для понимания. Возможно, я его включу в новую онлайн игру, идея уже есть. А может и нет :)

Если вам требуется решить какую-либо задачу на JavaScript, то пишите на up777up@yandex.ru - за небольшое вознаграждение в денежном эквиваленте вам будет оказана первая быстрая помощь.




тегизаметки, javascript, анимация





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Хостинг за 60 рублей
Свой скрипт для чужого сайта


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.