https://trinket.io/html/13e02fe2af19


//tablica przechowująca punkt graczy

let punkty=[];

//punkty które zdobywa gracz po każdym rzucie kością
let punktyRundy;

//zmienna sterująca graczami jeśli równa 0 gra gracz1 jeśli równa 1 gra gracz2
//jako że w programowaniu numerujemy od 0, gracz1 będzie miał wartość 0 gracz2 wartość 1 ułatwi to pobieranie punktów z tablicy
let aktualnyGracz;

//zmienna boolowska sterująca rozgrywką jeśli true możemy grać jeśli false rozgrywka będzie niemożliwa
let czyMoznaGrac;


//dodajemy tablicę, która przechowa adresy do grafik z kością
const obrazki=["kosc1.png",
              "kosc2.png",
              "kosc3.png",
              "kosc4.png",
              "kosc5.png",
              "kosc6.png"];



//funkcja odpowiedzialna za przygotowanie nowej gry
nowaGra();

function nowaGra(){
  
//zezwalamy na grę
czyMoznaGrac=true;

//grę zawsze rozpoczyna gracz 1
aktualnyGracz=0;
//ukrywamy kosc na początku gry
document.querySelector('.kosc').style.display='none';

//zerujemy wszystkie wyniki
punkty=[0,0];
punktyRundy=0;
  
//aktualizujemy interfejs użytkownika  z punktami
document.getElementById('wynik-0').textContent='0';
document.getElementById('wynik-1').textContent='0';
document.getElementById('aktualne-punkty-0').textContent='0';
document.getElementById('aktualne-punkty-1').textContent='0';

//zmieniamy nazwy na Gracz1 i Gracz2 ponieważ podczas rozgrywki będziemy modyfikować te elementy ustawiająć tekst zwycięstwo
document.getElementById('nazwa-0').textContent = 'Gracz 1';
document.getElementById('nazwa-1').textContent = 'Gracz 2';
//usuwamy klasę zwycięstwo odpowiedzialną za podmianę tekstu Gracz1/2 na zwycięstwo
document.querySelector('.gracz-0-panel').classList.remove('zwyciestwo');
document.querySelector('.gracz-1-panel').classList.remove('zwyciestwo');

// usuwamy klasę aktywny odpowiedzialną za wskazywanie aktualnego gracza
document.querySelector('.gracz-0-panel').classList.remove('aktywny');
document.querySelector('.gracz-1-panel').classList.remove('aktywny');

//dodajemy klasę aktywny do Gracza1 ponieważ to on zawsze zaczyna grę
document.querySelector('.gracz-0-panel').classList.add('aktywny');
  
  
}


//dodajemy wykrywacz zdarzeń na naszej stronie, ten konkretny będzie wykrywać kliknięcie na przycisk Rzuć kością
//tworzymy funkcję anonimową- taką bez nazwy, którą wykorzystamy tylko w tym danym kontekście i nie będziemy z niej mogli skorzystać poza 
document.querySelector('.btn-rzuc').addEventListener('click',function(){
  
  
  
  if(czyMoznaGrac){
    
    //rzucamy kością, losujemy wartość 1-6
const liczbaOczek=Math.floor(Math.random()*6)+1;
  
  //tworzymy zmienną koscObrazek przechowującą odwolanie do elemnetu kosci na stronie i wyświetlamy kostke
  
  const koscObrazek=document.querySelector('.kosc');
  //wybieramy odpowiednią grafike
  koscObrazek.src=obrazki[liczbaOczek-1];

  //wyświetlamy kość
  koscObrazek.style.display='block';

  
  //aktualizujemy wynik rundy jeśli na kości nie zostało wyrzucone jedno oczko
  
  if(liczbaOczek!=1){
    
    //dodajemy wynik
    punktyRundy += liczbaOczek;
    document.querySelector('#aktualne-punkty-'+aktualnyGracz).textContent=punktyRundy;
    
  }
  else{
	
    nastepnyGracz();
  }
    
  }
  
});