Question

我目前正在业余时间制作小型网页游戏，并且我有一些代码可以在点击岩石时绘制“岩石粒子”。

您可以在此处查看游戏并单击岩石，以便对我想要的内容有更好的了解：github pages link here

我当前拥有的代码是这样：

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转换来实现这种效果？我不是很确定。只是为此寻找其他可能的想法。

谢谢！

Answer 1

只是一些使用多重变换的想法。

要使用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>

如何使div遵循弯曲的轨迹？

1 个答案: