wisielec

//////////////////////////////////////////////////////////HTML/////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Wisielec</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    <link rel="icon" href="https://cdn.glitch.com/fbbbb34f-0b8d-49c9-afe0-d55182ec0908%2Fwis.png?v=1608563089741">
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>

    <div id="kontener">


    <h1>Wisielec</h1>

    <p id="gra"><!--tutaj będziemy wyświetlać zasłonięte hasło i jeśli dobrze odgadiemy to będzie odkrywana dana litera-->

    </p>


    <label>Podaj literkę</label>
    <input id="litera" type="text" maxlength="1"><!--pole do wpisywania liter-->

    <button id="ok">Ok</button>
     <!-- przycisk pojawiający się na koniec gry-->
    <button id="reset">reset </button>

    <!--tutaj będziemy wyświetlać komunikaty typu przegrana/zwycięstwo/ brak literki/ powtórzona literka-->
      <h3 id="komunikat">

      </h3>


      <div><!--miejsce gdzie będzie pojawiać się szubienica-->

          <img id="wisielec" src="https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1585147286506" width="300">

      </div>

    </div>

  </body>
</html>


//////////////////////////////////////////////////////////CSS/////////////////////////////////////////////////

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bungee+Outline&display=swap');

body {
font-family: 'Black Ops One', cursive;
  font-size:30px;
}

h1 {

  color: #373fff;

}

img{
  display:none;
}

#kontener{

  width:1000px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;

}

input{
  font-family: 'Black Ops One', cursive;
  width:50px;
  height:50px;
  font-size:35px;
}

button{
  width:200px;
  height:50px;
  background-color: #fa4a0a;
  color: white;
  cursor:pointer;
  font-size: 16px;
  border-radius: 4px;
  transition-duration: 0.4s;
  border: 2px solid #fa4a0a;
  text-transform:uppercase;
  font-family: 'Black Ops One', cursive;

}

button:hover {
  background-color: white;
  color: black;

}

p{letter-spacing:4px;}

.aktywny{

  display:block;

}

.ukryty{

   display:none;

}


//////////////////////////////////////////////////////////JS/////////////////////////////////////////////////

//tablica na wyrazy

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--;

      //pzegrana
      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';
}


document.getElementById('reset').addEventListener('click', function() {

    //odświeżenie całej strony
  window.location.reload();

});