Ember Tic Tac Toe 22 Jul 2013
Every now and then it’s nice to build something completely and utterly useless just for the hell of it.
On Sunday, I sat down and spent a couple of hours building Tic-Tac-Toe in EmberJS. Although Ember is almost definitely the wrong hammer for the nail, it gave me a chance to refresh the basics.
To check out the final product and code visit http://bl.ocks.org/bradleypriest/6051289.
There are plenty of Ember getting started tutorials out there, but they all seem a little too useful for my tastes, so let’s walk through building Tic-Tac-Toe in Ember.
I started out with the JSBin template from the official Ember contributing guide.
Firstly, we’re going to need nine objects to represent the tic-tac-toe squares, so we’ll set up the IndexRoute’s model function to return an array of empty objects.
Then we’ll make sure to set the
App.IndexController to be an
Ember.ArrayController, so we get all the
And we’ll also add some CSS to wrap them into a 3x3 grid.
Next up let’s set up the basic template and CSS:
So far, so good. As long as you’re happy drawing on your monitor with a whiteboard marker, we’ve got a perfectly functional board… not so much? Ok, let’s keep going instead.
X Marks the spot
A little bit of interactivity perhaps. Ok, well let’s say if you click on a box, we mark it with an X.
So how do we go about that, let’s set a
userSelected flag on the object once you’ve clicked.
JS Bin Great, so now when we select a square, we get a nice pretty X in it. However, it’s pretty easy to win a game when you don’t have an opponent.
To make sure we don’t get shown up too badly, we’ll start with a pretty dumb AI opponent, it’ll just pick at random from all of the available moves.
While we’re at it we’ll make things a little easier on ourselves by defining an
App.Box so we can use Ember’s magical computed properties.
Now let’s add an
unselectedContent property to our controller, and then every time the player
takes a turn the computer will take theirs.
As you can see, we make a quick check to be sure the player has chosen an empty square, and then your opponent randomly chooses one..
Winning is Everything
Ok, now we have a two player tic-tac-toe game. I trust you all to play fair and square, but let’s let the computer decide when the game has been won to be safe.
We’ll start by hardcoding all the possible winning combinations (I’m sure there’s a smarter way of doing this but YOLO)
And we’ll write some code to compare the player’s square’s indices against all of the possible winning layouts.
We have a function
userWins which calculates all the player’s indices and intersects them with all the possible winning rows.
Basically, if the intersection returns 3 values then the game has been won.
Now let’s call
computerWins every time a move is taken.
Now wasn’t that easy, if you read the final codebase, you’ll see I made a couple more tweaks.
- Adding a reset board button
- Changing the wrapper div’s to anchor tags so it works on mobile
Check out the final code and give it a go at http://bl.ocks.org/bradleypriest/6051289
The next step would be to make the UI a little smarter, I would probably check for any intersections that return two matches and see if the missing index is still empty, but I’ll leave that as an exercise for the reader.
Have a great day, now go building something utterly useless and let me know @bradleypriestTweet