Hola

I'm Miguel, a father, a husband, and a front-end web developer from the San Francisco Bay Area.

I like projects that tell a story. A good story can more effectively connect people to a brand or product, and I enjoy the challenge of telling a great story through seamless design and code.

Some of my favorite things

Making my wife and daughter giggle, SF Giant's, making flour tortillas from scratch, Hefeweizen beer, bumming around Hyrule on my Switch, running on the beach, listening to podcasts that make me giggle while I do stuff around the house, 90's Nickelodeon.

Wanna play me in Tic-Tac-Toe? (I'll go easy 😉)

Just a little coding challenge I did for funsies.

⬇️ Jump to the game ⬇️

I was inspired after seeing Rich McLaughlin's Legend of Canvas presentation on how he recreated the NES Legend of Zelda using the Canvas API. Though I didn't have time for something that ambitious, especially never having coded a game before, so I wanted to start with something simple - and what better game to dip my toes into coding a game than Tic-Tac-Toe (sorry, I had to).

Horrible puns aside, this was a humbling lesson that even the simplest of games can have complex logic under the hood. On the surface, Tic-Tac-Toe is basically nine squares, two players, and each player alternates selecting a square until one gets three in a row.

Simple enough, right?

I thought, OK, so basically the logic should be: a player clicks on a square, then the game automatically chooses an available square after that to simulate an opponent, then rinse and repeat until either letter has three in a row. I assumed the hardest part would just be keeping track of the game state after each move.

Simple enough, right?

Actually, yes, that simple logic would satisfy basic game play and you could call it a day.

But I knew it could be better. Having the computer/opponent choose a random square, while it did occasionally create a challenging game, just wasn't challenging enough. So I started thinking about what I wanted from the game as a player to make it more fun and challenging. For example:

This is where things got fun and interesting! I also decided to use jQuery just to move faster and focus on the actual logic and design.

There are definitely further improvements to be made (and likely a bug or two to fix 🤣). But not too bad for a fun little side project.

Let's play!

Your move!