ウィンドウ内のカウンタと位置をリセットする方法

Question

私はチュートリアルシリーズを実行しており、作成するプロジェクトがあります。 それは反応検査官であり、多数のグーグルの後、私は2つの問題を解決するように見えず、何か助けを望んでいました。

ゲームを開始して形状をクリックすると、クリックまでの時間が出力され、ランダムな形、色、サイズ、位置が作成されます。

シェイプをクリックするたびにカウンタをリセットして、シェイプがウィンドウから消えないようにしたいと思います。

現在のところ、新しいカウントでカウントと更新を続けているだけで、時には、シェイプがウィンドウの外側に作成されるため、スクロールして見つけなければならないことがあります。

私は、 "スタート" をクリックしたときにcurrentTimeが一度定義される運

​​

Answer 1

なしvar timeUntilClick = "";でvar timeUntilClick = +new Date() - currentTime;をリセットしようとしました。そして、それを後でnew Date()から引きます。それがカウンターが増える理由です。新しい図形を作成するときにcurrentTimeをリセットする必要があります。 quick JSFiddle forked edit

Answer 2

クリックごとにcurrentTimeを更新します。

currentTime += timeUntilClick; 

形状の位置について、基本的な解決方法は、その高さと幅を分割することです。

var w = window.innerWidth/2; 
var h = window.innerHeight/2; 

Updated Fiddle

Answer 3

窓の外の形状についてはdemo

document.getElementById("startGame").onclick = function() { 

    var currentTime = +new Date(); 

    document.getElementById("shape").onclick = function() { 

    function randomIntFromInterval(min, max) { 
     return Math.floor(Math.random() * (3500 - 500 + 1) + 500); 
    } 

    function insideWindow(position, dimension, max) { 
     if (position + dimension >= max) { 
     return max - dimension; 
     } 
     return position; 
    } 

    function getRandomColor() { 
     var letters = 'ABCDEF'; 
     var color = '#'; 
     for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
     } 
     return color; 
    } 

    var randomColor = getRandomColor(); 
    var randomShape = Math.round(Math.random()); 

    if (randomShape < 0.5) { 
     randomShape = "50%"; 
    } else { 
     randomShape = "10%"; 
    } 

    var w = window.innerWidth; 
    var h = window.innerHeight; 

    var randomLeft = Math.floor(Math.random() * w); 
    var randomTop = Math.floor(Math.random() * h); 
    var randomWidth = Math.floor(Math.random() * (w/2)); 
    var randomHeight = Math.floor(Math.random() * (h/2)); 

    var elem = document.getElementById("shape").style; 
    elem.backgroundColor = randomColor; 
    elem.left = insideWindow(randomLeft, randomWidth, w) + "px"; 
    elem.top = insideWindow(randomTop, randomHeight, h) + "px"; 
    elem.borderRadius = randomShape; 
    elem.width = randomWidth + "px"; 
    elem.height = randomHeight + "px"; 

    document.getElementById("shape").setAttribute("class", "hide"); 

    var timeUntilClick = +new Date() - currentTime; 

    if (timeUntilClick > 999) { 
     var timeUntilClick = timeUntilClick/1000 + " seconds"; 
    } else { 
     var timeUntilClick = timeUntilClick + " milliseconds"; 
    } 

    document.getElementById("printTime").innerHTML = timeUntilClick; 

    var randomDelay = randomIntFromInterval(); 

    setTimeout(delay, randomIntFromInterval()); 

    function delay() { 
     document.getElementById("shape").removeAttribute("class", "hide"); 
     currentTime = +new Date(); 
    } 

    } 

}