Want to play without signing up? Log in using the email address
firstname.lastname@example.org and the password
Want to read about my development process? Check out my blog post about Week 3 of General Assembly.
- authentication (backed by a Rails API): register, log in, change password, log out
- a clickable game board
- a button to start a new game
- a stats tracker that displays user's total wins, losses, and tied games
- "win" display that indicates winner (x/o) or tie game
- turn tracker that indicates which player goes next
- GA WDI Boston Browser Template
Planning and development process
For more details, read my blog post
I started by looking at mobile game apps for design inspiration (particularly those designed by Dots.co). Tic-Tac-Toe is a pretty simple game at its core, and I wanted to explore what other fairly streamlined or minimalist games had done to keep gameplay straightforward but also somewhat elegant.
With respect to design, I made mobile wireframes first, and then expanded to larger screen wireframes. On the back end, I put together a tentative data model. I also developed a series of user stories to help guide feature development.
I focused on functionality first. I began with authentication: sign up, log in, log out, and change password. Once that was working, I created a very basic game board in my index.html file and added a "new game" button that, when clicked, sends a POST request to the API to create a new game. Once I was able to create a new game, I began building the "click a cell to mark it with an x or an o in the DOM" functionality, then tied this to the PATCH requests I needed to send to the API to update the game on the server. After connecting the DOM interaction with calls to the API, I built a series of functions to check the necessary win conditions, identify the winner, and send a PATCH request to the server to end the game.
After this basic functionality was in place, I spent some time on the UI, adjusting what's visible on the screen in different states (before/after logging in, during game play, etc.), moving success and error messages from
console.log() statements to elements in the DOM, laying out the template, and choosing colors and fonts.
I then briefly went back to functionality, adding the ability to get the authenticated user's total completed games and calculate their wins, losses, and tied games and a tracker that indicates whose turn it is.
After this, most of the work was making tweaks to the UI, refactoring the code in an attempt to make it cleaner/more straightforward, and bug fixing.
Cool things I learned along the way
- How to make a sticky footer
- How to pass additional data to AJAX callback functions
- It's embarrassingly easy to keep reverting to "x and y" instead of "x and o." This will cause you at least an hour of distress when building a tic-tac-toe game.
- I'd particularly like to revisit my method for checking whether a game has been won. This currently takes up around 60 lines of code, and I think there are better ways to go about this.
- Make the game multiplayer, with the ability to connect two authenticated users as opponents.
- Let the user change the color scheme.
- Super cool would be to implement this version of the game, which uses nine game boards (one board in what is normally an empty square in a basic tic-tac-toe game) and has a more complex set of rules. The provided API isn't really set up for this, but I might be able to figure out a way to sort of hack this together using localStorage. This is currently set to "iff I somehow figure out how to do everything else on the bonus list before my time is up" goal status.
- Add chat functionality.