Показать сообщение отдельно
  #7 (permalink)  
Старый 13.01.2023, 18:48
Новичок на форуме
Отправить личное сообщение для HappyLama Посмотреть профиль Найти все сообщения от HappyLama
 
Регистрация: 13.01.2023
Сообщений: 6

Сообщение от 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>
Ответить с цитированием