API tools faq
paste
giganciprogramowania

tic tac toe

giganciprogramowania
Jun 9th, 2021 (edited)
301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.57 KB | None | 0 0
raw download clone embed print report
  1. ////////////////////////////////HTML////////////////////////////////////////
  2. <!DOCTYPE html>
  3. <html lang="pl">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9. <title>Tic Tac Toe</title>
  10.  
  11. <!-- import the webpage's stylesheet -->
  12. <link rel="stylesheet" href="/style.css">
  13.  
  14.  
  15. <link rel="icon" href="https://cdn.glitch.com/3a64b184-c0e3-4213-8a2d-7907a1bdbabe%2Ffav.JPG?v=1623189441713">
  16.  
  17. <!-- import the webpage's javascript file -->
  18. <script src="/script.js" defer></script>
  19. </head>
  20. <body>
  21.  
  22. <h1>Tic Tac Toe</h1>
  23.  
  24. <table>
  25. <!-- pierwszy wiersz w tabeli-->
  26. <tr>
  27. <td><button class="przyciskGry"></button></td>
  28. <td><button class="przyciskGry"></button></td>
  29. <td><button class="przyciskGry"></button></td>
  30.  
  31. </tr>
  32. <!--drugi wiersz w tabeli-->
  33. <tr>
  34. <td><button class="przyciskGry"></button></td>
  35. <td><button class="przyciskGry"></button></td>
  36. <td><button class="przyciskGry"></button></td>
  37.  
  38. </tr>
  39. <!--trzeci wiersz w tabeli-->
  40. <tr>
  41. <td><button class="przyciskGry"></button></td>
  42. <td><button class="przyciskGry"></button></td>
  43. <td><button class="przyciskGry"></button></td>
  44.  
  45. </tr>
  46.  
  47. </table>
  48.  
  49. <!-- miejsce wyświetlania informacji z gry-->
  50. <h2 id="infoGry"></h2>
  51.  
  52. </body>
  53. </html>
  54.  
  55.  
  56. ////////////////////////////////CSS////////////////////////////////////////
  57.  
  58. @import url('https://fonts.googleapis.com/css2?family=Seymour+One&display=swap');
  59. body{
  60. background-color:#184353;/*kolor tła dla całej strony*/
  61. font-family: 'Seymour One', sans-serif;/*ustawiamy czcionkę dla całej strony*/
  62.  
  63. }
  64.  
  65. table{
  66.  
  67. margin-left:auto;/*wyśrodkowanie tabeli*/
  68. margin-right:auto;/*wyśrodkowanie tabeli*/
  69. margin-top:60px;/*odstęp z góry*/
  70.  
  71. }
  72.  
  73. .przyciskGry{
  74. width:150px;
  75. height:150px;
  76. border:none;/*wyłączone obramowanie przycisku*/
  77. background-color:#171a21;
  78. color:#c5c3c0;
  79. font-size:80px;
  80. font-family: 'Seymour One', sans-serif;
  81.  
  82.  
  83. }
  84.  
  85. .przyciskGry:hover{
  86. cursor:pointer;/*zmiana kursora myszki po najechaniu*/
  87. opacity:0.8;/*zmiana przezroczystości elementu*/
  88. }
  89.  
  90. td{
  91. width:160px;
  92. height:160px;
  93. text-align:center;/*wyśrodkowanie przycisków w komórkach tabeli*/
  94. padding:0px;
  95. }
  96.  
  97. h1,h2{
  98. color:#c5c3c0;/*kolor czcionki*/
  99. width:450px;
  100. margin-left:auto;
  101. margin-right:auto;
  102. text-align:center;
  103. text-transform:uppercase;
  104. }
  105.  
  106.  
  107. ////////////////////////////////////////////////////JS///////////////////////////////////////////////////
  108.  
  109. /*grę zawsze rozpoczynać będzie krzyżyk, dzięki tej zmiennej będziemy zmieniać graczy*/
  110. let graczKrzyzyk=true;
  111. /*zmienna, dzięki której będziemy sprawdzać remis w naszej grze*/
  112. let licznik=0;
  113. /*kolor czcionki, który ustawimy dla zwycięskiej kombinacji*/
  114. const kolor='#d21841';
  115. /*zmienna mająca dostęp do NodeList czyli kolekcji węzłów, dzięki niej mamy dostęp do wszystkich naszych przycisków które posiadają klasę .przyciskGry*/
  116.  
  117. const przyciski=document.querySelectorAll('.przyciskGry');
  118. /*pokazujemy uczestnikom jak wygląda taka kolekcja i zwracamy uwagę, że numeracja elementów rozpoczyna się od 0, dlatego na naszych przyciskach również wyświetlamy cyfry od 0*/
  119. console.log(przyciski);
  120. /*zmienna mająca dostęp do nagłówka h2 w którym będziemy wyświetlać info z gry*/
  121. const info=document.getElementById('infoGry');
  122.  
  123. /*początkowy tekst-grę rozpoczyna X*/
  124. info.textContent='Aktualnie gra:X';
  125.  
  126.  
  127. /*dla każdego elementu, czyli naszego każdego przycisku, dodajemy zdarzenie na kliknięcie myszką, a następnie wywołujemy funkcję wstawZnak, do której przekazujemy konkretny obiekt przycisk*/
  128. przyciski.forEach(function(przycisk){
  129.  
  130.  
  131. przycisk.addEventListener('click',function(){
  132. console.log('kliknięto')
  133.  
  134. wstawZnak(przycisk);
  135.  
  136. });
  137.  
  138. });
  139.  
  140. /*tworzymy funkcję, która będzie ustawiać odpowiedni znak na przycisku i wyświetlać komunikat. Do funkcji będziemy przesyłać odwołanie do aktualnie klikniętego przycisku, bo to jego chcemy w danej chwili zmodyfikować*/
  141.  
  142. function wstawZnak(przycisk){
  143.  
  144. if (graczKrzyzyk){
  145.  
  146. przycisk.textContent="X";
  147. graczKrzyzyk=false;
  148. info.textContent='Aktualnie gra:O';
  149. }
  150.  
  151. else{
  152. przycisk.textContent="O";
  153. graczKrzyzyk=true;
  154. info.textContent='Aktualnie gra:X';
  155.  
  156. }
  157.  
  158. przycisk.disabled=true;
  159. sprawdzWygrana();
  160. }
  161.  
  162.  
  163. /*sprawdzenie zwycięstwa oraz remiusu. W grze mamy 8 kombinacji na zwycięstwo te same znaki obok siebie mogą być w 3 wierszach/ 3 kolumnach oraz 2 na skos*/
  164. function sprawdzWygrana(){
  165.  
  166. licznik++;
  167.  
  168. if(przyciski[0].textContent==przyciski[1].textContent && przyciski[1].textContent==przyciski[2].textContent &&przyciski[1].textContent!=''){
  169.  
  170. przyciski[0].style.color=kolor;
  171. przyciski[1].style.color=kolor;
  172. przyciski[2].style.color=kolor;
  173. wygrana();
  174. }
  175. else if(przyciski[3].textContent==przyciski[4].textContent && przyciski[3].textContent==przyciski[5].textContent && przyciski[4].textContent!=''){
  176. przyciski[3].style.color=kolor;
  177. przyciski[4].style.color=kolor;
  178. przyciski[5].style.color=kolor;
  179. wygrana();
  180. }
  181.  
  182. else if(przyciski[6].textContent==przyciski[7].textContent && przyciski[7].textContent==przyciski[8].textContent && przyciski[7].textContent!=''){
  183. przyciski[6].style.color=kolor;
  184. przyciski[7].style.color=kolor;
  185. przyciski[8].style.color=kolor;
  186. wygrana();
  187. }
  188.  
  189. else if(przyciski[0].textContent==przyciski[3].textContent && przyciski[3].textContent==przyciski[6].textContent && przyciski[3].textContent!=''){
  190. przyciski[0].style.color=kolor;
  191. przyciski[3].style.color=kolor;
  192. przyciski[6].style.color=kolor;
  193. wygrana();
  194. }
  195.  
  196. else if(przyciski[1].textContent==przyciski[4].textContent && przyciski[4].textContent==przyciski[7].textContent && przyciski[4].textContent!=''){
  197. przyciski[1].style.color=kolor;
  198. przyciski[4].style.color=kolor;
  199. przyciski[7].style.color=kolor;
  200. wygrana();
  201. }
  202.  
  203. else if(przyciski[2].textContent==przyciski[5].textContent && przyciski[5].textContent==przyciski[8].textContent && przyciski[5].textContent!=''){
  204. przyciski[2].style.color=kolor;
  205. przyciski[5].style.color=kolor;
  206. przyciski[8].style.color=kolor;
  207. wygrana();
  208. }
  209.  
  210. else if(przyciski[0].textContent==przyciski[4].textContent && przyciski[4].textContent==przyciski[8].textContent && przyciski[8].textContent!=''){
  211. przyciski[0].style.color=kolor;
  212. przyciski[4].style.color=kolor;
  213. przyciski[8].style.color=kolor;
  214. wygrana();
  215. }
  216.  
  217. else if(przyciski[2].textContent==przyciski[4].textContent && przyciski[4].textContent==przyciski[6].textContent && przyciski[4].textContent!=''){
  218. przyciski[2].style.color=kolor;
  219. przyciski[4].style.color=kolor;
  220. przyciski[6].style.color=kolor;
  221. wygrana();
  222. }
  223.  
  224. else if(licznik==9){
  225.  
  226. info.textContent='remis!';
  227. }
  228.  
  229. }
  230.  
  231.  
  232.  
  233.  
  234. /*kiedy padnie zwycięstwo dezaktywujemy wszystkie przyciski i wyświetlamy info kto zwyciężył*/
  235. function wygrana(){
  236.  
  237. przyciski.forEach(function(przycisk){
  238.  
  239. przycisk.disabled=true;
  240. przycisk.classList.remove('hover');
  241. console.log('usuwam');
  242. });
  243.  
  244.  
  245. if (graczKrzyzyk){
  246.  
  247. info.textContent='wygrywa kółko';
  248. }
  249. else{
  250.  
  251. info.textContent='wygrywa krzyżyk!';
  252. }
  253.  
  254. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!