Untitled
unknown
javascript
3 years ago
6.5 kB
11
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...