Управление движением картинки с клавиатуры на 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 - за небольшое вознаграждение в денежном эквиваленте вам будет оказана ~~первая~~ быстрая помощь.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

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

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

Программирование up

Мои услуги