我想做一个2d汽车动画，像爬山赛车，使用滚动轮前进和倒退。我使用javascript、html和css

Question

我只是想知道如何使用鼠标滚动监听器。如果你向下滚动，汽车加速前进，如果你向上滚动，汽车减速，然后倒转。

如何用JavaScript编写；当鼠标滚轮向下滚动时，汽车的生成速度。当鼠标滚轮滚动起来时，汽车失去了速度，谢谢！

Answer 1

您可以尝试push滚动值数组并计算元素的平均值(可能是您的速度)，从例如10‘0开始。过了一段时间，如果有太多的项，您可能会开始使用流行的最后值，甚至接合。我在下面添加了一些示例代码，这样你就可以得到这个想法了。当然，这是非常简单的方法。

const arr = new Array(10).fill(0);
document.addEventListener('wheel', (e) => {
  arr.unshift(e.deltaY);
});

setInterval(() => {
  let sum = arr.reduce((previous, current) => current += previous);
  let avg = sum / arr.length;
  console.log(avg);
  if(arr.length > 100) arr.splice(30);
}, 2000);

Answer 2

侦听wheel事件，并使用deltaY确定用户正在滚动的方向并修改速度。

​

let velocity = 0
document.querySelector('html').addEventListener('wheel', e => {
  velocity += e.deltaY * -1
  document.querySelector('span').innerText = velocity
})

Velocity: <span></span>
<pre>(Scroll Here)</pre>

​