Collect and total up time intervals

I'm really new to coding and have been learning Javascript and was wondering if anyone could be kind enough to help me?

So the script below makes a little game that will show you the time between clicks.

I want to learn how to: total up the time it takes in each of the intervals (rounds) into the total time it took to complete the rounds.

and

limit the game to 20 intervals (round)

If anyone has the time to educate me I would be most grateful, I'm told it can be done without an array, is this true?

Thanks

Ben

<html>
    <head>  
        <title>Reaction Timer</title>
        <style type="text/css"> 
            body {
              font-family: sans-serif;
            }

            #shape {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
                position: relative; 
            }

            .bold {
                font-weight: bold; 
            } 
        </style>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the boxes and circles as quickly as you can!</p>
        <p class="bold">Your time: <span id="timeTaken"></span></p>
        <p class="bold">Your total time: <span id="totalTime"></span</p>
        <div id="shape"></div>
        
        <script type="text/javascript">
            var start = new Date().getTime();
            function totalTimeTaken()  { }
            
            function getRandomColor() {
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
    
                return color;
 
            }
            
            function makeShapeAppear() {
                var top = Math.random() * 400;
                var left = Math.random() * 400;
                var width = (Math.random() * 200) + 100;
                
                if (Math.random() > 0.5) {
                    document.getElementById("shape").style.borderRadius = "50%";
                } else {
                    document.getElementById("shape").style.borderRadius = "0";       
                }

                document.getElementById("shape").style.backgroundColor = getRandomColor();
                
                document.getElementById("shape").style.width = width + "px";
                document.getElementById("shape").style.height = width + "px";
                document.getElementById("shape").style.top = top + "px";
                
                document.getElementById("shape").style.left = left + "px";
                document.getElementById("shape").style.display = "block";
                start = new Date().getTime();
 
            }
            
            function appearAfterDelay() {
                setTimeout(makeShapeAppear, Math.random() * 2000);
            }
            
            appearAfterDelay();
            
            document.getElementById("shape").onclick = function() {
                document.getElementById("shape").style.display = "none";
                var end = new Date().getTime();
                var timeTaken = (end - start) / 1000;
                var timeTotal = 0;
                var numAttempts=0;
                document.getElementById("timeTaken").innerHTML = timeTaken + "s";
                document.getElementById("timeTakenTotal").innerHTML = timeTaken + "s";
                appearAfterDelay();
            }
            
        </script>
    </body>
 
</html>