Управление объектом

200

01 мая 2018, 00:52

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, можно было взаимодействовать с помощью стрелок на клавиатуре.

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

Answer 1

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Скриптом не меняется картинка более чем 2 раза

Делаю блок для выбора типа окна, и при клике должно меняться изображение, срабатывает только 2 раза

196

javascript

Как передать саму функцию в bind JavaScript

Всем привет! Как и все, кто волею судьбы и руководства изучает JavaScript, столкнулся с передачей параметров в addEventListenerПроблема легко решается...

185

javascript

VueJS Разница между Methods и Computed

Недавно начал учить Vue и сразу-же застрял на таком моменте

189

javascript

Изменения при клике JS

Мне надо проверить были ли изменения при клике в iteminfo0_item_name или в iteminfo1_item_name

189