Untitled
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...