Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer)
-
Presented without further comment:
0_1507086229228_tic-tac-toe.html(those who missed the first iteration of "things that shouldn't be done in pure CSS" can find it in the WTF Bites thread, here.)
(edit: the bug that @MZH found has been corrected. I also fixed a condition where the computer could've played a winning move but didn't.)
-
-
I tried this on IE 6 and my computer caught fire.
-
Fuckin' magic
-
It works.
-
I'm wondering if this means each and every state was precomputed, and therefore the only outcomes are Human loss or Cat.
-
@tsaukpaetra you should view the source.
-
@anotherusername said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
@tsaukpaetra you shouldn't view the source.
-
The computer cheats.
The computer's final move was to erase my X at bottom center and draw an O.
-
@mzh let's play "find the error"...
<!--​ State 516: X plays bottom left; O plays in center. Parent: 513. Children: N/A. (Win) X plays top left; O plays middle left to block. X plays middle right to block; O plays top middle. O plays bottom middle to block; O plays bottom right to block. X plays top right. Game over. X | O | X ---+---+--- O | O | X ---+---+--- X | O | O --> <input type="radio" name="radio" id="r516" class="xc1 ob2 xa1 ob1 xb3 oa2 oc2 oc3 xa3 win v2"><label for="r516" class="a3"></label>
-
@anotherusername
#copypastacoding
-
@izzion the really funny part is, the first time I wrote it, the HTML comment was incorrect (similar to above) but the diagram was correct and the class list (which actually controls how the game plays) was also correct.
The first time I copied and pasted it (with a transformation), the HTML comment was still incorrect, but the diagram and class list were, since they were originally correct, transformed correctly.
Then I wrote a fancy editor to help me, so I could basically just type out the "X plays ... Y plays ..." and it generated the diagram and class list based on those, so when I copied and pasted it, that's where it got messed up.
-
@anotherusername Guess you should have used TLA+.
-
@greybeard I used this.
(The bugs were made when I was doing it by hand, though, before I started using that.)
-
@anotherusername You're doing it wrong
-
@tsaukpaetra said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
I'm wondering if this means each and every state was precomputed, and therefore the only outcomes are Human loss or Cat.
If the computer is programmed correctly, there's no way you can win.
@MZH That means the computer is programmed incorrectly. And the programmer is so bad at tic-tac-toe (or obsessed with winning) he felt the need to cheat.
-
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
If the computer is programmed correctly, there's no way you can win.
Correct.
In fact, I didn't even include code for X to win. X can't win.
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
the programmer is so bad at tic-tac-toe (or obsessed with winning) he felt the need to cheat
Nowhere near so bad: it was a simple typo. :P
-
@anotherusername said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
Nowhere near so bad: it was a simple typo. :P
I didn't think of that explanation, my apologies (I also didn't get that you made this yourself).
-
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
you made this yourself
Yes... apparently I didn't have enough to do. And it was a fun exercise in fiendishly abusing poor CSS, until it got too repetitive, and then I made a nifty Javascript-driven editor to write 95% of the code for me and let me do most of the rest of it by copy-and-paste.
-
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
If the computer is programmed correctly, there's no way you can win.
In my family we had a house rule that you can't take the middle except to complete or block a line (or if it's the last space). Made the game marginally less boring.
-
@carrievs said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
In my family we had a house rule that you can't take the middle except to complete or block a line (or if it's the last space). Made the game marginally less boring.
I bet it still ended in draws, unless one player made a mistake.
-
@carrievs said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
If the computer is programmed correctly, there's no way you can win.
In my family we had a house rule that you can't take the middle except to complete or block a line (or if it's the last space). Made the game marginally less boring.
That makes it even more boring. The player who goes first can always win, if they play in a corner.
-
@carrievs @khudzlin here's the house rules version.
- center is only allowed in order to win or block.
- computer always goes first (because whoever goes first can always win).
- to save me the effort of adding a whole bunch of extra win states, I made it so if you can play a blocking move, you must play a blocking move (any other move would just result in the computer winning anyway).
-
@anotherusername My mistake, then.
-
@khudzlin said in Next iteration of "things that shouldn't be done in pure CSS": Tic-Tac-Toe (vs. computer):
I bet it still ended in draws, unless one player made a mistake.
We were quite little when we used to play it. When we learned the correct strategy it no longer held any vestige of interest.