Как обновлять label меняя значение на число и как с помощью style.display начать отображение скрытого текста?

Не получается выводить счёт при попадании. Так же я скрыл часть кода который должен показываться в конце, а должен пропасть. field пропадает, но gameOver не показывается.

var counter = 0;

var numInvaders = 16;

var base = {
  left: 250,
  top: 500
};

var missiles = [];

var invaders = [
        { left: 100, top: 50 },
        { left: 150, top: 50 },
        { left: 200, top: 50 },
        { left: 250, top: 50 },
        { left: 300, top: 50 },
        { left: 350, top: 50 },
        { left: 400, top: 50 },
        { left: 450, top: 50 },
        { left: 100, top: 85 },
        { left: 150, top: 85 },
        { left: 200, top: 85 },
        { left: 250, top: 85 },
        { left: 300, top: 85 },
        { left: 350, top: 85 },
        { left: 400, top: 85 },
        { left: 450, top: 85 }
    ];

var score = 0;

document.onkeydown = function(e) {
  if (e.keyCode === 37) {
    // Left(Left arrow)
    base.left = base.left - 15;
  }
  if (e.keyCode === 39) {
    // Right(Right arrow)
    base.left = base.left + 15;
  }
  if (e.keyCode === 32) {
    // Fire(Space)
    missiles.push({
      left: base.left + 20,
      top: base.top - 20
    });
    displayMissiles();
  }
  displayBase();
}

function displayBase() {
  document.getElementById("base").style.left = base.left + "px";
  document.getElementById("base").style.top = base.top + "px";
}

function displayInvaders() {
  document.getElementById("invaders").innerHTML = ""
  for (var i = 0; i < invaders.length; i++) {
    document.getElementById("invaders").innerHTML += `<div class="invader" style="left:${invaders[i].left}px; top:${invaders[i].top}px"></div>`;
  }
  for (var i = 0; i < invaders.length; i++) {
    invaders[i].top = invaders[i].top + 5;
  }
}

function displayMissiles() {
  document.getElementById("missiles").innerHTML = ""
  for (var i = 0; i < missiles.length; i++) {
    document.getElementById("missiles").innerHTML += `<div class="missile" style="left:${missiles[i].left}px; top:${missiles[i].top}px"></div>`;
  }
}

function moveMissiles() {
  for (var i = 0; i < missiles.length; i++) {
    missiles[i].top = missiles[i].top - 30;
  }
}

function collisionDetection() {
  for (var invader = 0; invader < invaders.length; invader++) {
    for (var missile = 0; missile < missiles.length; missile++) {
      if (
        missiles[missile].left >= invaders[invader].left &&
        missiles[missile].left <= (invaders[invader].left + 30) &&
        missiles[missile].top <= (invaders[invader].top + 30) &&
        missiles[missile].top >= invaders[invader].top &&
      ) {
        invaders.splice(invader, 1);
        missiles.splice(missile, 1);
        score+=20;
        numInvaders--;
      }
    }
  }
}

function drawScore(){
  document.getElementById("Score").innerHTML=""+score;
}

var timer=setInterval(function(){startTimer()},500);

function startTimer(){
  if(counter == 70) {
    clearInterval(timer);
  } else {
    displayMissiles();
    moveMissiles();
    displayInvaders();
    collisionDetection();
    isGameOver();
    counter++;
    drawScore();
  }
}

function isGameOver(){
  if (numInvaders==0 || counter == 69){
    document.getElementById("field").style.display = "none";
    document.getElementById("gameOver").style.display = "inline";
  }
}
body{
      color: chartreuse;
      background: black;
    }

    .title{
      margin: 30px auto;
      margin-left: 200px;
    }

    div#field {
      top: 100px;
      width: 600px;
      height: 600px;
      background-image: url('black.gif');
      position: absolute;
      text-align: center;
      color: chartreuse;
    }
    div#base {
      width: 72px;
      height: 52px;
      background-image: url('base.png');
      background-repeat:no-repeat;
      background-size: 50%;
      position: absolute;
      left: 250px;
      top: 500px;
    }

    div#missiles {
      width: 600px;
      height: 600px;
      position: absolute;
    }

    div.missile {
      width: 10px;
      height: 28px;
      background-image: url('missile.png');
      background-repeat:no-repeat;
      background-size: 75%;
      position: absolute;
    }

    div#invaders {
      width: 50px;
      height: 50px;
      position: absolute;
    }

    div.invader {
      width: 50px;
      height: 50px;
      background-image: url('invader.png');
      background-repeat:no-repeat;
      background-size: 75%;
      position: absolute;
    }

    .Score {
      margin-top: auto;
      color: chartreuse;
    }

    #Score {
      margin-top: auto;
      color: chartreuse;
    }

    #gameOver {
      display: none;
      text-align: center;
      font-size: 80px;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Space Invaders</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="body">
  <h1 class="title">Space Invaders</h1>
  <div id="field">
    <div id="base"></div>
    <div id="missiles"></div>
    <div id="invaders"></div>
    <div class="Score">Score:
      <label id="Score">0</label>
    </div>

    <div id="gameOver">
      <div class="Score">GAME OVER!</div>
      <div class="Score">Score:
        <label id="Score">0</label>
      </div>
    </div>
  </div>
  <script lang="text/javascript" src="code.js"></script>
</body>
</html>


Ответы (0 шт):