Javascript旋转箭头动画

Question

我有一个这样的旋转轮：

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');
    var deg = Math.floor(Math.random() * ((1440 - 1080) + 1) + 1080);
    var css = '-webkit-transform: rotate(' + deg + 'deg);';
    this.setAttribute('style', css);
}

https://jsfiddle.net/imsy041/efum927n/8/

问题是如何制作一个箭头/指针，当它接触角落周围的蓝点/针脚时会翻转？我想要达到的结果类似于https://www.youtube.com/watch?v=Gm9kftOieYI

另外，请在gamedev社区查看此thread。我对javascript并不擅长...有没有比使用物理引擎更简单的方法？

廉

Answer 1

哦，我的，复杂的方式来制作一个直接的项目 我建议你使用 deg 为翻盖设置动画。

为了使翻盖以更逼真的方式进行交互：翻转的蓝点和轮子必须是单独的元素。