Gra w "Kółko krzyżyk" z komputerem

13

Kontynuacja wpisu na mikroblogu ().

TIC-TAC-TOE lub kółko i krzyżyk z komputerem...
Mamy już tysiące takich implementacji a ja postanowiłem zrobić jeszcze jedną. Za cel jednak przyjąłem, że gra ma działać w przeglądarce wykorzystując wyłącznie HTML i CSS wykluczając jednak JavaScript. Ręczne napisanie takiego HTML oczywiście graniczy z cudem więc konieczne było napisanie kilku narzędzi pomocniczych, które po odpowiednim przemieleniu danych wejściowych "wyplują" mi odpowiedni HTML i CSS.

Efektem powyższego jest strona: https://tic-tac-toe.xksi.pl/

Jak to powstało:

Proces tworzenia składał się z kilku następujących po sobie etapów i postanowiłem go pokazać bo być może nie każdy wie jak powstają takie "dziwolągi".

  • Przygotowanie "map gry". W tym celu napisałem typowe narzędzie pomocnicze. Powstało w PHP ale kod i jego logika były tak paskudne, sypały noticami i innymi syfami więc go nie pokażę :-) Typowa jednorazówka, której celem było wygenerowanie plików map... Jak się okazało na mikroblogu miewam w nich błędy i chyba będę musiał to zrobić jak należy.
  • Przygotowaniem generatora kodu także walidującego to co wypluł poprzedni skrypt. Ten skrypt też jest brzydki ale nie musi być ładny bo nie to jest celem.
  • Tworzenie i poprawianie CSS.
  • Poprawki pod kątem zgodności ze standardami oraz testy.

Wyniki testów zgodności:

Dla zainteresowanych kod udostępniam na GIT (nie jest to wzór do naśladowania ale można zobaczyć o co chodzi):
https://bitbucket.org/xksi/tic-tac-toe-html-css/

0

Fajne. Jak to działa tak mniej więcej, że tylko HTML/CSS?

0

kiedy wsparcie dla i phone?

3
LukeJL napisał(a):

Fajne. Jak to działa tak mniej więcej, że tylko HTML/CSS?

Niestety brak "ifa" i "goto" w CSS sporo komplikuje :-)
Generalnie CSS nie działa na dynamiczne zmienne/wartości pochodzące z drzewa DOM/dokumentu.
Niemal jedynym (bo są jeszcze linki) jest element INPUT pracujący jako checkbox.
Tutaj mamy w CSS możliwość tworzenia reguł i selektorów, które uwzględniają stan tego checkboxa :checked... No i to jest jedyna "furtka", którą wykorzystałem. Jeśli mamy możliwość zmiany stanu elementu na stronie jako użytkownik a to może wpływać na wygląd innych elementów to jest komplet...
Niestety poważnym utrudnieniem jest to, że możemy wpływać tylko na elementy potomne. Nie możemy oddziaływać stylami CSS na elementy nadrzędne. Niby można wykorzystać pseudoklasę :has i taka była moja pierwsza koncepcja... szybko się jednak okazało, że to ślepy zaułek bo to nie działa w FireFox i ogólnie ma to słabe wsparcie przeglądarek: https://caniuse.com/css-has
Zatem trzeba oddziaływać tylko w dół... a skoro tak to w dole trzeba mieć wszystko... Stąd zrodziła się koncepcja zbudowania pełnej mapy rozgrywki i taka też została zaimplementowana.

Nie mam pewności czy to jedyna słuszna droga (pewnie nie) ale założony cel jakoś osiągnąłem.
Jeśli ktoś ma ciekawsze pomysły na realizację to chętnie się zapoznam.

666 napisał(a):

kiedy wsparcie dla i phone?

Na jakimś starszym iPhone od żony ogólnie działa ale rozlatują się niektóre animacje.
Niestety nie planuję ekstra wsparcia ani dla Internet Explorer 7 ani dla Safari. Niech Ci ostatni w końcu zaczną używać ogólnodostępnych dokumentacji podczas tworzenia swoich programów.
Ja swoją aplikację napisałem zgodnie z obowiązującymi standardami i to wszystko na 100% zgodności... W tej sytuacji niech inni się starają.

0

Udało się komuś wygrać?

0

Nie da się wygrać bo "algorytm (mapy)" jest doskonały

Mógłbyś napisać coś więcej jak to działa? Po kliknięciu na element wygrywasz w CSS, że jest on focus i przedstawiasz inną mapę czy jak?

5
Manna5 napisał(a):

Udało się komuś wygrać?

Był błąd w mapach i jednemu się udało ale program i tak się nie przyznał, że przegrał. Bo CSS nie ma ifa i pętli ale ma swoją dumę :-)
Tak to wyglądało: https://imgur.com/a/MrvDI1X

Obawiam się, że błędy w mapach mogą jeszcze jakieś być bo sposób ich przygotowania był daleki od doskonałego.
Jak można się domyśleć filmy na YouTube, które zainspirowały mnie do napisania tego programu oglądałem późno w nocy będąc w łóżku... Jak szybko wpadł mi do głowy pomysł tak samo szybo zacząłem na laptopie pisać generator map.
Wstępna idea była taka żeby generować wszystkie ruchy rekurencyjnie i zbierać najkrótsze ścieżki do sukcesu... Niestety w programie pisanym "na kołdrze" nie wszystko szło tak gładko jak oczekiwałem więc stwierdziłem, że wygeneruję wszystkie ścieżki a następnie te najskuteczniejsze ręcznie sobie skopiuję do gotowych plików....
Pomysł ogólnie nie był zły gdyby nie to, że podczas przerabiania pliku i "kopiowania" a właściwie kasowania tych nieoptymalnych porobiłem trochę błędów. Coś skopiowałem nie do końca, wywaliłem coś optymalnego a zostawiłem gorsze... No cóż człowiek jest omylny...
Jak już miałem wstępnie gotowe pliki map to zabrałem się za pisanie generatora HTML. Po wstępnych sukcesach oceniłem, że mapy są ok więc wywaliłem źródło pliku do ich generowania a ponieważ robiłem to na laptopie to go już nie mam :-) Potem jak wyszło, że mapy są błędne zacząłem je walidować w generatorze... no i dlatego powstał taki potworek.
Wiem, że nie jest to dobry przykład planowania pracy ale chciałem szybko z drugiej strony to tylko zabawa więc kichać na to.

anonimowy napisał(a):

Nie da się wygrać bo "algorytm (mapy)" jest doskonały

Mógłbyś napisać coś więcej jak to działa? Po kliknięciu na element wygrywasz w CSS, że jest on focus i przedstawiasz inną mapę czy jak?

Wydaje mi się, że odpowiedź masz w poście: link

Jeśli masz jakieś konkretne pytania to chętnie odpowiem.

Cała istota to ten CSS:

input:checked + b{
  display:block;
}
0

Jak dla mnie ciekawy projekt i super pomysł :)

0
darkonepl napisał(a):

Jak dla mnie ciekawy projekt i super pomysł :)

Dzięki. Choć myślę, że na miano "projektu" to to nie zasługuje. Raczej "ciekawostka" :-)
Dla uzupełnienia tematu postanowiłem jeszcze dodać opcje, w których zaczyna komputer ale najpierw muszę dopracować mapy gry.

0

Dodałem tryb, w którym zaczyna komputer.
Teraz jest na zmianę najpierw człowiek potem komputer.

1 użytkowników online, w tym zalogowanych: 0, gości: 1