How to add a team (time counter) in Game

Question

I got this little game in HTML + Javascript + CSS a while ago, I would like to implement in it a team at the top corner of the screen (anywhere) but I always end up bugging every game!

Here the function that the Start in the game, I think about implementing the difficulty after being able to add this team onscreen:

function newGame() {
    block = 0
    angle = 2
    tempX = 0
    tempY = 0
    square = 0
    squareTop = 0
    squareLeft = 0
    squareMotion = 1
    nextScore = 0
    score = 0
    count = 0
    collisionOne = 0
    collisionTwo = 0
    collisionThree = 0

    clearTimeout(timeoutOne)
    clearInterval(intervalOne)
    clearInterval(intervalTwo)
    document.getElementById("square0").style.left = "0px"
    document.getElementById("square0").style.top = "0px"
    document.getElementById("square0").style.display = "block"
    document.getElementById("square1").style.left = "0px"
    document.getElementById("square1").style.top = "0px"
    document.getElementById("square1").style.display = "block"
    document.getElementById("pad").style.top = (gameHeight - 40) + "px"
    document.getElementById("pad").innerHTML = ""
    document.getElementById("notepad").innerHTML = ""

    intervalOne = setInterval("playGame()", speed)
  }

Follow the Game running:

Jsfiddle

The initial idea is to implement a team Start by clicking Play! Still have some bugs... little experience yet rsrsrs!

Answer 1

Here is a simple implementation example.

div to present the time:

  <div style="z-index:1; 
              background:rgb(50, 50, 255); 
              opacity: 0.7; 
              width:70px; 
              height:20px;">
  <p id="display_tempo" style="font-color:black; text-align:center;"></p>
  </div>

Variables:

// início do jogo
var tempo = 0;

// referência ao timer
var tempo_controle = 0;

// está parado (=1) ou não (=0)
var parado = 1;

A function to update the div of time:

function atualiza_tempo()
{
    if (parado)
        return;
    var tempo_segundos = Math.floor((+new Date() - tempo) / 1000);
    var display = tempo_segundos.toString() + " seg";
    document.getElementById("display_tempo").innerHTML = display;
    return;
}

At the end of the function newGame() (start of the game), start the time count:

...
tempo = +new Date(); 
parado = 0;
atualiza_tempo();
tempo_controle = window.setInterval(atualiza_tempo, 600);   
...

In the last function block checkCollision() (when collision occurs), stop the stopwatch:

window.clearInterval(tempo_controle);
parado = 1;

Note: there are other ways (more accurate or more compatible) to implement this stopwatch.

See working on jsfiddle