Задача:картинка перемещается клавишами внутри элемента и не должна выходить за границы элемента.Есть функция на проверку пересечения границ элемента.Проблема в том,что я не могу привязать её к функции движения.Вот код:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#pole {
padding: 0;
margin: 0;
width: 300px;
height: 200px;
border: 1px solid black;
position:absolute;
background-image: url('fieldbg.jpg');
}
</style>
<script type="text/javascript">
//определение выхода за границы элемента.
function borderColl() {
if (left < 0 || left > 272) {
dx = -dx;
}
if (top <= 0 || top >= 172) {
dy = -dy;
}
}
function move(e) {
// Кросс-браузерное получение объекта событие:
e = e || window.event;
// Получаем keyCode:
var keyCode = e.keyCode;
// Берем элемент:
var el= document.getElementById("Player");
// Определяем нажатие клавиш "влево", "вверх"
// "вправо" и "вниз", коды клавиш 37, 38, 39, 40:
if (keyCode == 37) {
el.style.left = parseInt(el.style.left || 0) - 2;
} else if (keyCode == 38) {
el.style.top = parseInt(el.style.top || 0) - 2;
} else if (keyCode == 39) {
el.style.left = parseInt(el.style.left || 0) + 2;
} else if (keyCode == 40) {
el.style.top = parseInt(el.style.top || 0) + 2;
} else {
// Если нажаты другие клавиши: выходим
return;
}
// Отменяем действие по умолчанию:
e.preventDefault(); // Gecko, ...
e.returnValue = false; // IE
}
// Устанавливаем обработчик на весь документ:
document.onkeydown = move;
</script>
</head>
<body>
<div id="pole">
<div style="position: absolute; left: 0; top: 0;" id="Player">
<img src="1.jpg">
</div>
</div>
</body>
</html>
Может кто подскажет,как привязать проверку к скрипту движения.