ランダムな値にスピンするイメージを作るランダムな値を加算する

Question

私は幸運なホイールを持っていて、回転する矢印はランダムに回転します。問題は、（例えば）最初のクリックが400の場合は矢印が実際に400度回転するが、2回目のクリックが380の場合は矢印がちょうど20度戻ってくるので、かろうじて動くことを意味する。だから私は、さまざまなクリックを追加する方法（最初のクリック - 乱数、2番目のクリック - 1番目のクリック結果+乱数など）が必要と仮定します。

私のコードは次のようである：

CSS

img { 
    transition: transform 2s ease-out; 
} 

HTML

<div> 
    <img src="34-200.png" /> 
</div> 

はJavaScript

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


function onClick() { 
    this.removeAttribute('style'); 

    var deg = 500 + Math.round(Math.random() * 4000); 

    var css = 'transform: rotate(' + deg + 'deg);'; 

    this.setAttribute(
     'style', css 
    ); 
} 

</script> 

ヘルプ！

Answer 1

var angle = 0; 
 

 
var blocked = false; 
 

 
var wheel = document.querySelector('#wheel'); 
 
wheel.addEventListener('click',() => { 
 
    if (blocked) return; 
 

 
    var deg = 720 + Math.round(Math.random() * 2000); 
 
    angle += deg; 
 

 
    wheel.style.transform = "rotate(" + angle + "deg)"; 
 
    blocked = true; 
 
    setTimeout(function() { 
 
    blocked = false; 
 
    }, 2100); 
 
}, false);

.placeholder { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
img { 
 
    transition: transform 2s ease-out; 
 
}

<img id="wheel" class="placeholder" >