Как я могу заставить div следовать изогнутой траектории? - PullRequest
Новая
       7

Как я могу заставить div следовать изогнутой траектории?

0 голосов
/ 01 ноября 2018

В настоящее время я делаю веб-игру для детей в свободное время, и у меня есть некоторый код, который рисует «частицы камня» всякий раз, когда по скале нажимают.

Вы можете посмотреть игру здесь и нажать на скалу, чтобы иметь лучшее представление о том, что я хочу: github page link здесь

Текущий код у меня такой: 

Game.drawRockParticles = (event) => {

    let div = document.createElement('div')
    div.classList.add('particle')
    let x = event.clientX
    let y = event.clientY

    div.style.left = x + 'px'
    div.style.top = y + 'px'

    let particleY = y
    let particleX = x

    let randomNumber = Math.random()
    let randomSign = Math.round(Math.random()) * 2 - 1

    let particleUp = setInterval(() => {
      particleX += randomNumber * randomSign
      particleY -= 1
      div.style.top = particleY + 'px'
      div.style.left = particleX + 'px'
    }, 10)

    setTimeout(() => {
      clearInterval(particleUp)

      let particleDown = setInterval(() => {
        particleX += randomNumber * randomSign / 2
        particleY += 1.5
        div.style.top = particleY + 'px'
        div.style.left = particleX + 'px'
      }, 10)

      setTimeout(() => {
        clearInterval(particleDown)
        if (div.parentNode) div.parentNode.removeChild(div)
      }, 1000)
    }, 100)

    s('body').append(div)
  }
}

Чтобы сэкономить некоторое время на том, что делает этот блок кода, когда вы нажимаете на камень, он генерирует частицу. Затем код определяет, должна ли частица падать влево или вправо. Затем частица немного поднимается, затем падает в соответствии с заранее определенным направлением.

Я почти уверен, что это крайне неэффективно и замедляет мою игру.

Я полагаю, что я могу достичь такого рода с помощью CSS-преобразований с кубическим Безье? Я не совсем уверен. Просто ищу другие возможные идеи для этого.

Спасибо!

1 Ответ

0 голосов
/ 07 ноября 2018

Просто некоторые идеи с использованием многократного преобразования.

Чтобы сделать это случайным с помощью CSS, используйте некоторые переменные CSS и установите их с помощью JS 

.test {
    width: 10px;
    height: 10px;
    margin: 50px;
    border-radius: 50%;
    background-color: red;
    animation: path 4s infinite linear;
}

.test:nth-child(2) {
    animation: path2 4s infinite linear;
}

@keyframes path {
    from {transform:  translate(0px, 0px)  rotate(180deg) translateX(50px);}
    to {transform:  translate(100px, 0px) rotate(360deg) translateX(50px) ;}

}

@keyframes path2 {
    from {transform:  translate(0px, 0px)  rotate(180deg) translateX(50px);}
    to {transform:  translate(50px, 60px) rotate(360deg) translateX(80px) ;}

}
<div class="test"></div>
<div class="test"></div>
...