• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript Kółko i Krzyżyk

VPS Starter Arubacloud
0 głosów
1,109 wizyt
pytanie zadane 16 stycznia 2018 w C i C++ przez BinaryMan Stary wyjadacz (12,620 p.)

Witam !
Jestem w trakcie tworzenia gry kółko i krzyżyk, jednak utknąłem w martwym punkcie. Przypisuje w kodzie kolejne numery id do poszczególnych pól tabeli, jednak nie jestem w stanie nic z tym zrobić. Chciałbym aby po naciśnięciu na poszczególne pole, zmieniała się jego wartość i pokazał się obrazek/napis adekwatny do tury gracza

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Kółko vs. Krzyżyk </title>
</head>

<body>
  <center>
    <h1>
      <span id="napis1">Kółko</span> <span id="napis2">vs.</span> <span id="napis3">Krzyżyk</span>
    </h1>
    </br>
    <h2>Kto następny: </h2>
    <p id="kto">.</p>

    <script type="text/javascript">
      id_pola = 0; // tu jest zmienna ktora podczas rysowania tableli daje kolejne numery id polom

      var czyja_kolej = 1;
      // 1 to Kółko, a 2 to Krzyżyk

      var tablica_id =[]; //przechowuje numery id poszczególnych pól

      // wczytywanie i rysowanie tabeli
      document.write("<table>");

      for (i = 1; i <= 3; i++) {
        document.write("<tr>");
        for (y = 1; y <= 3; y++) {
          tablica_id[y]=id_pola;
          id_pola++; // kolejne pole ma numer id piększy o 1 od poprzedniego
          document.write("<td id="+id_pola+" onClick=\"ruch("+id_pola+");\">"+id_pola+"</td>");
        }
        document.write("</tr>");
      }

      document.write("</table>");




      function ruch(id_pola) //czyja kolej
      {

        if (czyja_kolej == 1)
        {
          alert("kółko");
          czyja_kolej = 2;
          document.getElementById('id_pola').innerHTML = "<img src='kółko.png' alt='kółko'>";
          alert(id_pola);
          document.getElementById('kto').innerHTML = "krzyżyk";
        }
        else
        {
          alert("krzyżyk");
          czyja_kolej = 1;
          document.getElementById('id_pola').innerHTML = "krzyżyk";
          document.getElementById('kto').innerHTML = "kółko";
        }
      }


      function sprawdzenie() //sprawdzenie czy nie ma końca gry
      {

      }
    </script>
  </center>
</body>

</html>

 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: rgb(50, 50, 54);
}

table {
  border: 2px solid;
  width: 50%;
  height: 50%;
  margin: 10%;
  border-collapse: collapse;
  background-color: rgb(202, 208, 191);
}

td, tr {
  border: 5px solid;
  text-align: center;
  border-color: rgb(237, 237, 237);
  color: black;
}

h1 {
  text-align: center;
  background-color: rgb(43, 46, 43);
  height: 10%;
  font-size: 400%;
}

#napis1 {
  color: rgb(47, 103, 210);
}

#napis2 {
  color: white;
}

#napis3 {
  color: rgb(193, 49, 35);
}

#kto {
  color: white;
}

h2 {
  color: rgb(118, 69, 167);
  background-color: rgb(43, 46, 43);
}

Prosił bym także o jakieś podpowiedzi co należy zrobić aby wszystko działało :) 

1 odpowiedź

+1 głos
odpowiedź 16 stycznia 2018 przez dwadolary Gaduła (4,650 p.)

Cześć, 

document.getElementById('id_pola').innerHTML = "<img src='kółko.png' alt='kółko'>";

Zmienne w getElementById bez apostrofów, Inaczej skrypt stara się znaleźć element o id ='id_pola', a nie np.  id = '6'

 

 

komentarz 16 stycznia 2018 przez BinaryMan Stary wyjadacz (12,620 p.)
Dzięki bardzo, nie zauważyłem takiej drobnostki :)
komentarz 17 stycznia 2018 przez BinaryMan Stary wyjadacz (12,620 p.)

@dwadolary, A mógłbyś zerknąć na ten kod, bo nie wiem jak zablokować dane pole, w sensie że jak postawie gdzieś kółko, to żeby nie można było go zmienić. Próbowałem z if-em na value w funkcji ruch() ale coś nie działa 
 

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Kółko vs. Krzyżyk </title>
</head>

<body>
  <center>
    <h1>
      <span id="napis1">Kółko</span> <span id="napis2">vs.</span> <span id="napis3">Krzyżyk</span>
    </h1>
    <br/>
    <h2>Kto następny: </h2>
    <p id="kto"></p>
    <br/>
    <p id="winner"></p>

    <script type="text/javascript">
      var czyja_kolej = 1;
      // 1 to Kółko, a 2 to Krzyżyk
      id_pola = 0; // tu jest zmienna ktora podczas rysowania tableli daje kolejne numery id polom



      // wczytywanie i rysowanie tabeli
      document.write("<table>");

      for (i = 1; i <= 3; i++) {
        document.write("<tr>");
        for (y = 1; y <= 3; y++) {
          id_pola++; // kolejne pole ma numer id piększy o 1 od poprzedniego

          document.write("<td id="+id_pola+" onClick=\"ruch("+id_pola+");\" value='0'></td>");
        }
        document.write("</tr>");
      }

      document.write("</table>");




      function ruch(id_pola) //czyja kolej
      {

        if (czyja_kolej == 1)
        {
          if(document.getElementById(id_pola).value == "0")
          {
          czyja_kolej = 2;
          document.getElementById(id_pola).innerHTML = "kółko"/*"<img src='kółko.png' alt='kółko'>"*/;
          document.getElementById('kto').innerHTML = '<span id="napis3">krzyżyk</span>';
          document.getElementById(id_pola).value = "1";
          sprawdzenie(id_pola);
        }
        }
        else
        {
          if(document.getElementById(id_pola).value == "0")
          {
          czyja_kolej = 1;
          document.getElementById(id_pola).innerHTML = "krzyżyk";
          document.getElementById('kto').innerHTML = '<span id="napis1">kółko</span>';
          document.getElementById(id_pola).value = "2";
          sprawdzenie(id_pola);
        }
        }

      }


      function sprawdzenie(id_pola) //sprawdzenie czy nie ma końca gry
      {
        //alert("sprawdz");
if((document.getElementById(1).value=="1" && document.getElementById(2).value=="1" &&  document.getElementById(3).value=="1") ||
  (document.getElementById(4).value=="1" && document.getElementById(5).value=="1" &&  document.getElementById(6).value=="1") ||
  (document.getElementById(7).value=="1" && document.getElementById(8).value=="1" &&  document.getElementById(9).value=="1") ||
  (document.getElementById(1).value=="1" && document.getElementById(4).value=="1" &&  document.getElementById(7).value=="1") ||
  (document.getElementById(2).value=="1" && document.getElementById(5).value=="1" &&  document.getElementById(8).value=="1") ||
  (document.getElementById(3).value=="1" && document.getElementById(6).value=="1" &&  document.getElementById(9).value=="1") ||
  (document.getElementById(1).value=="1" && document.getElementById(5).value=="1" &&  document.getElementById(9).value=="1") ||
  (document.getElementById(3).value=="1" && document.getElementById(5).value=="1" &&  document.getElementById(7).value=="1"))
          {
            document.getElementById('winner').innerHTML = '<span id="zwyciesca"> Batalię wygrało Kółko !</span>';
          }
          else if

            ((document.getElementById(4).value=="2" && document.getElementById(5).value=="2" &&  document.getElementById(6).value=="2") ||
            (document.getElementById(7).value=="2" && document.getElementById(8).value=="2" &&  document.getElementById(9).value=="2") ||
            (document.getElementById(1).value=="2" && document.getElementById(2).value=="2" &&  document.getElementById(3).value=="2") ||
            (document.getElementById(1).value=="2" && document.getElementById(4).value=="2" &&  document.getElementById(7).value=="2") ||
            (document.getElementById(2).value=="2" && document.getElementById(5).value=="2" &&  document.getElementById(8).value=="2") ||
            (document.getElementById(3).value=="2" && document.getElementById(6).value=="2" &&  document.getElementById(9).value=="2") ||
            (document.getElementById(1).value=="2" && document.getElementById(5).value=="2" &&  document.getElementById(9).value=="2") ||
            (document.getElementById(3).value=="2" && document.getElementById(5).value=="2" &&  document.getElementById(7).value=="2"))
          {
            document.getElementById('winner').innerHTML = '<span id="zwyciesca"> Batalię wygrał Krzyżyk !</span>';

          }
          else if
          (
(document.getElementById(1).value=="1" || document.getElementById(1).value=="2")  && (document.getElementById(2).value=="1" || document.getElementById(2).value=="2") &&  (document.getElementById(3).value=="1" || document.getElementById(3).value=="2") &&
(document.getElementById(4).value=="1" || document.getElementById(4).value=="2")  && (document.getElementById(5).value=="1" || document.getElementById(5).value=="2") &&  (document.getElementById(6).value=="1" || document.getElementById(6).value=="2") &&
(document.getElementById(7).value=="1" || document.getElementById(7).value=="2")  && (document.getElementById(8).value=="1" || document.getElementById(8).value=="2") &&  (document.getElementById(9).value=="1" || document.getElementById(9).value=="2")
          )
          {
            document.getElementById('winner').innerHTML = '<span id="zwyciesca"> Bitwa zakończona remisem !</span>';
          }
      }
    </script>
  </center>
</body>

</html>

 

Podobne pytania

+1 głos
2 odpowiedzi 1,077 wizyt
+1 głos
6 odpowiedzi 2,563 wizyt
pytanie zadane 16 kwietnia 2018 w C i C++ przez macias17 Nowicjusz (190 p.)
0 głosów
0 odpowiedzi 206 wizyt

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...