0
function updateKeys(event) {
    if (event.keyCode === 38)
        left -= speed;
    if (event.keyCode === 38)
        left += speed;
    if (event.keyCode === 38)
        top -= speed;
    if (event.keyCode === 38)
        top += speed;

    document.getElementById("ball").style.left = left + "px";
    document.getElementById("ball").style.top = top + "px";
}

setInterval(updateKeys, 1000/60);

<div id="section">
    <div id="ball"></div>
</div>

Нужно, чтобы с div, с id = ball, можно было взаимодействовать с помощью стрелок на клавиатуре.

Подскажите, как можно это реализовать?

5
  • Примерно так, как вы это и реализовали
    – vihtor
    30 апр 2018 в 8:15
  • @vihtor, но так не работает..
    – Lyavontiy
    30 апр 2018 в 8:16
  • так вот об этом и нужно было написать. StackOverflow - это не тот ресурс, где программисты, от него делать, выполняют разного рода "задания". Но если у вас есть проблема, тут могут помочь. Опишите подробнее, в чём заключается проблема.
    – vihtor
    30 апр 2018 в 8:19
  • @vihtor, хорошо, извините. Проблема в том, что объект не двигается из-за ошибки в консоле " TypeError: undefined has no properties"
    – Lyavontiy
    30 апр 2018 в 8:20
  • @Lyavontiy почему вы решили, что функция updateKeys будет вызываться с неким event в качестве параметра? В setInterval вы вызываете эту функцию без каких-либо параметров. Следовательно event всегда равно undefined, у которого нет свойства keyCode.
    – Regent
    30 апр 2018 в 8:32

1 ответ 1

2

document.addEventListener("keydown", updateKeys);

var leftPosition = 0;
var topPosition = 0;
var speed = 10;
var ball = document.getElementById("ball");


function updateKeys(event) {
if (event.keyCode == 38){
   topPosition -= speed; 
} 
else if(event.keyCode == 40){
  topPosition += speed; 
}
else if(event.keyCode == 37){
  leftPosition -= speed; 
}
else if(event.keyCode == 39){
  leftPosition += speed; 
}
}

function updatePosition(){
   ball.style.marginTop = topPosition+"px";
   ball.style.marginLeft = leftPosition+"px";
}

setInterval(updatePosition, 10)
#ball{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
<div id="ball"></div>

2
  • Зачем вы оставили setInterval? В вашем примере в нём нет смысла: достаточно устанавливать marginTop и marginLeft прямо в updateKeys (и название метода тогда ещё поменять).
    – Regent
    30 апр 2018 в 8:30
  • @Regent, задача была - управление объектом. Как быстрее писалось...так и сделал.
    – Dmytro
    30 апр 2018 в 8:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.