Untitled

 avatar
unknown
javascript
3 years ago
6.5 kB
8
Indexable
//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;

// zmienna sprawdzajaca czy gracz ma za duze szczescie i rzuca 2 6-tki
let ostatniRzut;

//dodajemy tablicę, która przechowa adresy do grafik z kością
const obrazki = [
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-1.png?v=1610038358032",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-2.png?v=1610038358080",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-3.png?v=1610038358032",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-4.png?v=1610038358142",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-5.png?v=1610038358032",

  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-6.png?v=1610038358193",
];

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

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

  //grę zawsze rozpoczyna gracz 1
  aktualnyGracz = 0;

  //ukrywamy kość 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ąc 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");
  
  //pokazujemy panel w którym ustawimy punkty rozgrywki
  document.querySelector('.punkty-max').style.display='block';
  //punkty które trzeba zdobyć żeby zwyciężyć
  punktyMax=document.getElementById('wartosc').value;
  if (punktyMax!=0){
    //zezwalamy na grę
    czyMoznaGrac=true;
  }
}

// zmienna na input max punktow dla 1 gry
var punktyMax = 0;

//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) {
    
    document.querySelector('.punkty-max').style.display='none';
    punktyMax=document.getElementById('wartosc').value;
    
    //rzucamy kością, losujemy wartość 1-6
    const liczbaOczek = Math.floor(Math.random() * 6) + 1;
    //tworzymy zmienną koscObrazek przechowującą odwołanie do elementu kosci na stronie i wyświetlamy kostkę
    const koscObrazek = document.querySelector(".kosc");
    //wybieramy odpowiednią grafikę
    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==6 && ostatniRzut==6){
      punkty[aktualnyGracz]=0;
      document.querySelector('#wynik-'+aktualnyGracz).textContent='0';
      nastepnyGracz();
    }
    else if (liczbaOczek != 1) {
      //dodajemy wynik
      punktyRundy += liczbaOczek;
      document.querySelector("#aktualne-punkty-" + aktualnyGracz).textContent =
        punktyRundy;
    } else {
      //TODO
      nastepnyGracz();
    }
  }
});

//mechanizm przełączania gracza
function nastepnyGracz() {
  //operator warunkowy- sprawdzany jest warunek jeśli zwrócony zostanie true to wykonuje się część po ? jeśli false to część po :
  aktualnyGracz == 0 ? (aktualnyGracz = 1) : (aktualnyGracz = 0);

  //zerujemy punkty rundy
  punktyRundy = 0;

  //zerujemy punkty w interfejsie użytkownika
  document.getElementById("aktualne-punkty-0").textContent = "0";
  document.getElementById("aktualne-punkty-1").textContent = "0";

  //przełączamy klasę tak żeby wskazywać aktualnego gracza toggle działa także jeśli jest już wskazana klasa to ją usuwa a jeśli jej nie ma to zostaje dodana do danego elementu
  document.querySelector(".gracz-0-panel").classList.toggle("aktywny");
  document.querySelector(".gracz-1-panel").classList.toggle("aktywny");
}

//programujemy co ma się wykonać w momencie kliknięcia przycisku zatrzymaj
document.querySelector(".btn-zatrzymaj").addEventListener("click", function () {
  if (czyMoznaGrac) {
    //dodajemy punkty dla konkretnego gracza
    punkty[aktualnyGracz] += punktyRundy;

    //aktualizujemy UI
    document.querySelector("#wynik-" + aktualnyGracz).textContent =
      punkty[aktualnyGracz];

    //sprawdzamy czy gracz wygrał
    if (punkty[aktualnyGracz] >= punktyMax) {
      //blokujemy rozgrywkę
      czyMoznaGrac = false;

      //ustawiamy dla zwycięzcy tekst Zwycięstwo!
      document.querySelector("#nazwa-" + aktualnyGracz).textContent =
        "Zwycięstwo!";

      //ukrywamy kostkę
      document.querySelector(".kosc").style.display = "none";

      //dodajemy do aktualnego gracza klasę zwycięstwo która zmodyfikuje tekst wygranej
      document
        .querySelector(".gracz-" + aktualnyGracz + "-panel")
        .classList.add("zwyciestwo");
    } else {
      //jeśli gracz nie uzyskał wymaganych punktów żeby wygrać to następuje przełączenie gracza
      nastepnyGracz();
    }
  }
});

//kliknięcie przycisku nowa gra uruchamia funkcję poczatkoweUstawienia
document.querySelector(".btn-nowa-gra").addEventListener("click", nowaGra);
Editor is loading...