Gra memory w JavaScripcie - problem z końcem gry

Witam, jestem nowy na forum więc przepraszam za wszelkie błędy. Otóż jestem w trakcie tworzenia gry pamięciowej w JavaScripcie. Dopiero uczę się tego języka i jestem na bardzo podstawowym etapie więc proszę o wyrozumiałość. Mój problem polega na tym, że po zakończeniu gry ma pojawiać się ekran końcowy z napisem "Koniec gry". Jednak na żaden sposób nie mogę tego zaimplementować do mojego kodu. Próbowałem na wiele sposobów jednak wszystkie prowadziły do tego, że gra przestawała działać poprawnie. Prosiłbym o jakiekolwiek rady w tej sprawie. Głównie chodzi mi o to do jakiej zmiennej ma odwoływać się funkcja endgame(), aby mogła poprawnie zczytać stan gry i wyświetlić się po poprawnym odsłonięciu wszystkich kafli z literami.

function generuj(){
  var znaki = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
  wylosowane = [20];
  odkryte = []; // ID odkrytych kart

  var plansza= document.getElementById("square");
  var zakrywanie, traf;

  for(var i=0; i<20; i++)
{
  var los = Math.round(Math.random()*(znaki.length-1));
  wylosowane[i] = znaki[los];
  znaki.splice(los,1);
  plansza.innerHTML += "<div id='k"+i+"' onclick='odkryj(this)' class='kafelek'></div>";

}
}

function odkryj(kafel){
  if(odkryte.length == 1 && odkryte[0] == kafel.id.substr(1)){
    return;
  }
  odkryte[odkryte.length] = kafel.id.substr(1);
    kafel.style.backgroundColor = "green";
    var id = kafel.id.substr(1);
    kafel.innerHTML = wylosowane[id];

    if(odkryte.length == 3){
    clearTimeout(zakrywanie);
        if(!traf){
          document.getElementById("k"+id1).innerHTML = "";
          document.getElementById("k"+id1).removeAttribute("style");
          document.getElementById("k"+id2).innerHTML = "";
          document.getElementById("k"+id2).removeAttribute("style");
        }
        odkryte.splice(0,2);
  }

    if(odkryte.length == 2){
      if(wylosowane[odkryte[0]] == wylosowane[odkryte[1]]){
        document.getElementById("k"+odkryte[0]).style.visibility = "hidden";
        document.getElementById("k"+odkryte[1]).style.visibility = "hidden";
        traf = true;
      }
      else{
        traf = false;
        id1 = odkryte[0];
        id2 = odkryte[1];
        zakrywanie =  setTimeout(function(){
        zakryj();
      }, 1000);
    }
      }
function zakryj(){
      document.getElementById("k"+id1).innerHTML = "";
      document.getElementById("k"+id1).removeAttribute("style");
      document.getElementById("k"+id2).innerHTML = "";
      document.getElementById("k"+id2).removeAttribute("style");
}
}
function endgame(){
  var traf;
  if(traf.length == 10){
    document.getElementById('end').style.visibility = "visible";
  }
  else{
    document.getElementById('end').style.visibility = "hidden";
  }
}

Po pierwsze w endgame() zmienna traf jest inicjalizowana, a powinna być pobierana z zewnątrz. Po prostu ustaw se jakiś licznik (w głównym scopie, nie w funkcji) i po każdym poprawnym wytypowaniu go zwiększaj. A potem wywołuj funkcję endgame, gdzie będzie wartość licznika sprawdzana.