Happy Hour

Happy Hour

A fun and sim­ple alco­hol-themed game of Tic Tac Toe, made with JavaScript & jQuery.

The Story

This was one of our indi­vid­ual dai­ly assign­ments dur­ing a Bit­mak­er (GA Toron­to) Web Devel­op­ment Immer­sive course, fol­low­ing an intro­duc­tion to jQuery and a les­son on JavaScript events, call­backs, and clo­sures.

Since the require­ments were pret­ty open-end­ed, this was our first chance to get cre­ative with JavaScript on the front end, and that is indeed what I did. I knew right away that I want­ed to use icons as play­er mark­ers, so I turned to Font Awe­some, since I’d used it before and could include it quick­ly. Look­ing for a fun pair of icons that worked togeth­er, I came up with the idea of pair­ing the beer mug and mar­ti­ni glass in a hap­py hour-themed game.

The Process

Know­ing that the func­tion­al­i­ty of the game would be run by JavaScript (and thus would not require run­ning a serv­er), I decid­ed to code and build the game direct­ly on Code­Pen. That was fun. Almost too fun.

Screenshot of Happy Hour Tic Tac Toe on CodePen on an iPad
Screen­shot of Hap­py Hour Tic Tac Toe on Code­Pen

Since I got so into the appear­ance and theme of the game—check out the back­ground blur incre­ment­ing with each play! Get it?—I got car­ried away with the front-end code and neglect­ed to have the game actu­al­ly end. That is, it was pos­si­ble to play back and forth, but the game would not stop to acknowl­edge a win­ner or declare a draw. Oh well, I fig­ured the point was to prac­tice JS & jQuery, and I felt I’d done that, at least from a “front end” per­spec­tive.

And yet.…

It nagged at me that the game nev­er end­ed. I hadn’t been able to work out a win­ning strat­e­gy, and when I looked over solu­tions devel­oped by my class­mates, I couldn’t apply their approach­es, due to the way I had engi­neered the game from the front end in. Final­ly, months lat­er, I final­ly took the time to go back and work out a strat­e­gy to sort out com­ple­tion of the game, so that it was ful­ly and sat­is­fy­ing­ly playable.

Tools & Tech

  • Code­Pen
  • JavaScript
  • jQuery
  • Font Awe­some
  • Google Fonts

Lessons Learned

  • There are many ways to solve a prob­lem, and there is a dif­fer­ence in the way that back-end thinkers and front-end thinkers approach a prob­lem. It[s worth fig­ur­ing out what your goals are and what your approach will be to know how you are going to solve some­thing.

See it

Source Play it