user profile image

Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript.

This is an extension of the previous version (linked below). On this one, instead of being 2 human players, there's a player going against the computer.

The computer will play randomly in Beginner mode, but in Advanced mode, it will load scenarios, and "play" to win.

Special states have been added in order to create some "artificial intelligence", so the machine can cover certain scenarios in "Advanced mode" (although I may have missed some... leaving the player with some opportunity to win :P)

Give it a try and let me know what you think or if you find a bug.

Visit a collection of other CSS games that I have developed.

This Pen is a fork of Alvaro Montoro's Pen CSS Tic-Tac-Toe.

Comments

  1. Congratulations Alvaro. I really admire such creative use of CSS. There is so much more logic built into CSS than is immediately apparent when we first learn it. Nice work.

  2. Great code! Is it possible to make advanced mode the default?

  3. @customweb Yes, and it's actually really easy. You can have the "Advance mode" by default just by having the difficulty checkbox checked (I just made the change).

  4. What a great idea! Pretty impressive state machine you built with CSS here, and it looks great too. Well done!

    Edit: I know this has to be deterministic, but each game the computer appears to be playing in different cells even when I play the same move. Not sure how you pulled that off, but it's amazing!

  5. @MillerTime The computer does play different cells even when the player uses the same move.

    It is deterministic, but to make it more realistic I considered all the symmetric scenarios instead of limiting the game to only one (which would have saved me some time). Then I developed a simple pseudo-random CSS-only method to "pick" between the available possibilities.

  6. That makes a lot of sense, thanks! Seems like most board configurations eliminate all symmetry, so that must have helped.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...