Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z prostą grą.

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Problem z prostą grą.

Post 02.07.2017, 22:06:48

Witam.
Na wstępie chciałem zaznaczyć, że się uczę i jestem zielony w JS.
Napisałem prostą gre "kółko i krzyżyk" i mam problem z jednym element, mianowicie opisanie warunków zwycięstwa.
Kod: Zaznacz cały
  <html>
<head>
<meta charset="UTF-8">
<style type="text/css">
button {
width: 100px;
height: 100px;
font-size: 30px;

}

body {
background-color: rgb(0, 233, 180);
}

</style>
</head>

<body>

<center>
<h1>kólko i krzyżyk</h1>
<p id="gracz"></p>
<p id="wygrana"></p>


<button id="pole1" onclick="zaznaczenie(1);"</button><button id="pole2"  onclick="zaznaczenie(2);"  ></button><button id="pole3"  onclick="zaznaczenie(3);"  ></button><br>
<button   id="pole4" onclick="zaznaczenie(4);"  ></button><button   id="pole5"  onclick="zaznaczenie(5);"  ></button><button id="pole6" onclick="zaznaczenie(6);"></button><br>
<button  id="pole7"   onclick="zaznaczenie(7);" ></button><button    id="pole8"  onclick="zaznaczenie(8);"></button><button   id="pole9"  onclick="zaznaczenie(9);"   ></button><br>
<hr>
</center>


<script>
var aktualny_gracz = "x";

var pole1 = document.getElementById("pole1");
var pole2 = document.getElementById("pole2");
var pole3 = document.getElementById("pole3");
var pole4 = document.getElementById("pole4");
var pole5 = document.getElementById("pole5");
var pole6 = document.getElementById("pole6");
var pole7 = document.getElementById("pole7");
var pole8 = document.getElementById("pole8");
var pole9 = document.getElementById("pole9");

var warunek1, warunek2, warunek3, warunek4, warunek5, warunek6, warunek7, warunek8, warunek9;


function zaznaczenie(p) {

   if (p == 1)   {
   pole1.innerHTML = aktualny_gracz;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   warunek1 = 1;
   wygrana();
   }
   else if (p == 2)   {
   pole2.innerHTML = aktualny_gracz;
  warunek2 = 1;
     if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   wygrana();
   }
   else if (p == 3)   {
   pole3.innerHTML = aktualny_gracz;
   warunek3 = 1;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   wygrana();
   }
   else if (p == 4) {
   pole4.innerHTML = aktualny_gracz;
   warunek4 = 1;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   wygrana();
   }
   else if (p == 5) {
   pole5.innerHTML = aktualny_gracz;
   warunek5 = 1;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   wygrana();
   }
   else if (p == 6) {
   pole6.innerHTML = aktualny_gracz;
   warunek6 = 1;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   wygrana();
   }
   else if (p == 7) {
   pole7.innerHTML = aktualny_gracz;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   }
   else if (p == 8) {
   pole8.innerHTML = aktualny_gracz;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   }
   else {
   pole9.innerHTML = aktualny_gracz;
      if (aktualny_gracz == "x") {
      aktualny_gracz = "o";
      }
      else {
      aktualny_gracz = "x";
      }
   }
   
   document.getElementById("gracz").innerHTML = "aktualny gracz: " + aktualny_gracz;
}
function wygranaIn() {
document.getElementById("wygrana").innerHTML = "wygrał gracz: " + aktualny_gracz;
}


function wygrana()
{
   if (warunek1 == warunek2 && warunek1 == warunek3)
   {
   wygranaIn();
   }
   if (warunek4 == warunek5 && warunek4 == warunek6) {
   wygranaIn();
   }
}


</script>





</body>
</html>


 


Mimo zapisanych warunków w IFie informacja o wygranej pokazuje sie już po kliknięciu jednego "buttona". Nie moge dostrzec gdzie jest błąd.
Pozdrawiam.
krukero
Posty: 1
Dołączył(a): 02.07.2017

Re: Problem z prostą grą.

Post 04.07.2017, 08:28:26

Tak na szybko można to zrobić w ten sposób

Kod: Zaznacz cały
<script>
    var aktualny_gracz = "x";
     
    var buttons = Array.from(document.querySelectorAll('button'));
     
    buttons.forEach(function (button) {
      button.addEventListener('click', function () {
        this.innerHTML = aktualny_gracz;
        check_win();
        aktualny_gracz = aktualny_gracz === 'x' ? 'o' : 'x';
      })
    });

   
    function check_win() {
      var winSequences = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8],
        [0, 3, 6], [1, 4, 7], [2, 5, 8],
        [0, 4, 8], [2, 4, 6]
      ];
     
      var winner = '';
     
      for (var i = 0; i < winSequences.length; i++) {
        var sequence = winSequences[i];
       
        if (buttons[sequence[0]].innerHTML === buttons[sequence[1]].innerHTML &&
                buttons[sequence[1]].innerHTML === buttons[sequence[2]].innerHTML) {
          winner = buttons[sequence[0]].innerHTML;
          break;
        }
      }
     
      document.getElementById("wygrana").innerHTML = winner ? "wygrał gracz: " + winner : '';
    }


    </script>
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Bing [Bot] i 2 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935001 wiadomości
  • w 246320 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)


cron