Untitled

const wyrazy = ['giganci programowania','wisielec','funkcja','konkatenacja'];
 
//tablica na adresy do grafik
const tabObrazki=['https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F0.png?v=1623760735527',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1623760735604',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F2.png?v=1623760735890',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F3.png?v=1623760735703',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F4.png?v=1623760735867',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F5.png?v=1623760735857',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F6.png?v=1623760735876',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F7.png?v=1623760735751',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F8.png?v=1623760735918',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F9.png?v=1623760735966',
                  'https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F10.png?v=1623760735998'];

// losowy wyraz z tablicy wyrazy

const wyraz = wyrazy[Math.floor(Math.random() * wyrazy.length)];
 
// tablica z odpowiedziami zawiera przesłonięte hasło które stopniowo będziemy odsłaniać w grze
const odpowiedzi = [];
 
//zmienna informująca czy po podaniu literki udało isę trafić
let czyTrafiony = false;
 
//szanse w grze musi być taka wartość ponieważ mamy tyle grafik
let szanse = 11;
 
//tablica przechowująca użyte już litery
 
const uzyte=[];
 
//zmienna licząca ilość odstępów pomiędzy wyrazami
let spacje = 0;
 
 
 
//przygotowanie zakrytego wylosowanego wyrazu
for (let i = 0; i < wyraz.length; i++) {
 
    if (wyraz[i] == " ") {
    odpowiedzi[i] = "|";
    spacje++;
  } else {
    odpowiedzi[i] = "_";
  }
 
}
 
//zmienna przechowująca info ile pozostało liter do odgadnięcia
let pozostaleLitery = wyraz.length - spacje;
 
//wyświetlanie tablicy zasłoniętego hasła każdy element w tablicy czyli _ łączymy ze spacją
document.getElementById('gra').textContent = odpowiedzi.join(' ');
 
//zdarzenie na kliknięcie przycisku ok
document.getElementById('ok').addEventListener('click', function() {
 
    // przed każdym nowym zatwierdzeniem literki ustawiamy tą zmienna na false
    czyTrafiony = false;
 
  //czyścimy wyświetlanie komunikatu
  document.getElementById('komunikat').textContent = '';
 
  //zmienna przechowująca literkę gracza
  const strzal = document.getElementById('litera').value;
 
 
  document.getElementById('litera').value = '';
 
  if (strzal.length == 0) {
    document.getElementById('komunikat').textContent =
      "Proszę, podaj jedną literkę";
  } 
 
  else if(uzyte.includes(strzal)){
 
    document.getElementById('komunikat').textContent =
      'Ta litera została już podana'; 
  }
  else {
 
    uzyte.push(strzal);
 
    //przeszukujemy dane slowo litera po literce i sprawdzamy czy gdzieś jest ta sama litera co nasz strzal jeśli tak to odsłaniamy w tablicy odpowiedzi tą literę
    for (let j = 0; j < wyraz.length; j++) {
      if (wyraz[j] == strzal) {
        czyTrafiony = true;
        odpowiedzi[j] = strzal;;//odsłonięcie litery w haśle
        pozostaleLitery--;
 
        //aktualizujemy wyświetlanie naszego hasła
        document.getElementById('gra').textContent = odpowiedzi.join(' ');
      }
    }
 
    //zwyciestwo
    if (pozostaleLitery == 0) {
      document.getElementById('ok').disabled = true;
      document.getElementById('litera').disabled = true;
      document.getElementById('komunikat').textContent =
        'Brawo odgadnięte hasło to:' + wyraz;
    }
    
    //utrata szansy, rysowanie wisielca 
    if (czyTrafiony == false) {
      ustawObrazek();
      szanse--;
 
      //przegrana
      if (szanse == 0) {
        document.getElementById('ok').disabled = true;
        document.getElementById('litera').disabled = true;
        document.getElementById('komunikat').textContent =
          'Przegrana,szukane słowo to:' + wyraz;
      }
    }
  }
});
 
 
 
function ustawObrazek() {
 
  //wybieramy z tablicy odpowiedni adres zdjęcia i ustawiamy jako source obrazka
  document.getElementById('wisielec').src= tabObrazki[szanse-1];
  //wyświetlanie obrazka
  document.getElementById('wisielec').style.display= 'block';
}

// Obsluga przycisku reset 
document.getElementById('reset').addEventListener('click', function() {
    //odświeżenie całej strony
  window.location.reload();
 
});

// Zmienia kolor tla dla strony
document.getElementById('zmienTlo').addEventListener('click', function() {
  document.body.style.backgroundColor = 'rgba(' + randomcolor() + ',' + randomcolor() + ',' + randomcolor() + '\)';

});

function randomcolor() {
  return Math.floor(Math.random() * 255);
}