I spent a while on this project. At first I went about it with just regular javascript but I began to worry if I didn’t try anything new I wouldn’t learn anything. So I erased all my code and started again with the aim of using more Objects.
Turned out much better than I could have imagined. The objects made holding information and remembering where I kept it much better. As for the AI the idea of giving each square a value made the computer making choices so much easier. Instead of the computer deciding what square to play based on ALL other squares to play (seriously, I had a huge chart of every single possible game all planned out) instead I added or subtracted from the squares value based on moves the human played. Than it was as simple as telling the computer to play the square with the highest value. Possible wins were compared against what moves the player and computer had played and if 2/3 were taken it would play the third square to either block or win the game, otherwise it plays a fairly random square.
I’m just about to start this one myself. I’m curious how you all approached it. Did you go right out of the gate and look up tic tac toe perfect play strategies or did you try to figure that out on your own? I’m torn because I want to challenge myself and do as much as I can without looking anything up. OTOH, I don’t even know what the moves are for “perfect” play. On the other OTHER hand, while the video stated perfect play as a bonus, the written description omits it completely. To satisfy the requirements of the project, you could go with 100% random play.
Right now, I’m thinking of going with easy and hard versions but I was just curious what your thinking was when you sat down to solve this before coding.
If you are interested I used the first response in this article to "roll-my-own’. Its takes some amount of work but I quite enjoyed working out all the edge cases…
I personally had a lot of fun making an easy/medium/hard. Easy was just random. Medium I came up with using common sense but keeping it somewhat simple and hard I used minimax which essentially recursively goes through all of the possibilities to the end of the game. Minimax definitely adds a little time to the project but I’d say it’s well worth it in the satisfaction you get from knowing your AI literally cannot lose .
I will only take half credit for this project, but I wanted to see if there was a way to create direct CSS/html 3D figures. When I found it, I went from there. Its not finished as I didnt impliment diagonal wins as of this edit. The AI is simple. But it should be playable.
I was stuck on this for a while thanks to Javascript’s arrays taking any type of input. Sometimes I miss C++ and Java’s strict type checking. Nonetheless, once I got past that hurdle, I managed to make a (I think) unbeatable AI. It has a beatable Easy mode as well. Also, I tried to use a neat trick I saw on CodePen for the background, which looks fantastic. Check it out!
Project link:- http://codepen.io/imtoobose/full/MeJZRp
Hey I managed to beat the Sass/React one (try starting with x and then choose center then the diagnol that has an empty column and row), so maybe there’s a bug. It also doesn’t register my win as a win either.
Thanks for catching that! I guess half of that is good, because there shouldn’t need to be a game status if you win. At any rate I think I fixed it so it can’t be beaten with that strategy (or hopefully any other), now.
I have created a score visualization, but I removed it after lose all the time for the machine. Can you beat the computer? If yes, let me know, it’s probably a cpu flaw, hahah.
Not unbeatable, but it’s not dumb. I decided to leave a lot of the console.log comments in to visualize the game play logic a bit. Pretty daunting, but a reddit post helped me break it down, first building a 2-player version, then building the AI mechanics.
Since I felt loss, I’ll give some slightly spoilerish overview of my AI approach. Also inspired by the reddit post, I focused on the wikipedia TTT strategy (the easier parts). Essentially, I have an array of winning index combinations for checking if there is a win and game over. My AI first checks if it has 2/3s of a win, then makes the last move. If not, it will check if opponent has 2/3s of a win, then blocks. If neither, it makes a non “critical” move.
I’ve made a tic-tac-toe game in the past, so my focus was making something a little more visually appealing. The computer AI…let’s just say it tries to fool you into letting your guard down after a couple of rounds.
.
