Сообщение от Rise
|
HappyLama,
А что за анимации у вас?
|
Элемент при нажатии стрелок двигается по инерции бесконечно, через стрелки ему можно менять направление, и в этом направлении он продолжает двигаться бесконечно
код не мой, просто тренируюсь на нем для самообучения. В этом коде мне все понятно
const elem = document.getElementById('elem')
const coords = {
x: innerWidth / 2,
y: innerHeight / 2,
vx: 0,
vy: 0,
}
onkeydown = handleMovement
animate()
function animate() {
coords.x += coords.vx
coords.y += coords.vy
render()
requestAnimationFrame(animate)
}
function render() {
elem.style = `left: ${coords.x}px; top: ${coords.y}px`
}
function handleMovement(e) {
switch (e.key) {
case 'ArrowUp':
coords.vy = -2
coords.vx = 0
break
case 'ArrowDown':
coords.vy = 2
coords.vx = 0
break
case 'ArrowLeft':
coords.vx = -2
coords.vy = 0
break
case 'ArrowRight':
coords.vx = 2
coords.vy = 0
break
default:
coords.vx = 0
coords.vy = 0
resetIfOut()
}
}
function resetIfOut() {
if (coords.x < 0 || coords.y < 0 || coords.x > innerWidth || coords.y > innerHeight) {
coords.x = innerWidth / 2
coords.y = innerHeight / 2
}
}
в css:
Код:
|
#elem {
position: absolute;
} |
ну и в html
Код:
|
<p id="elem">moving text</p> |