Designing Tic-Tac-Toe

With a partner, create a design for a tic-tac-toe game. Do not worry about writing code; rather, practice your technical design skills (i.e. thinking about how you would code this).

Objectives

  • Plan and design "ideas"
  • Collaborate and communicate effectively around technical ideas

Requirements

Features to consider:

  • Game should be played on the same computer.
  • As a user, I should be able to see a tic-tac-toe board.
  • As a user, the game should alternate turns, between X and O.
  • As a user, I should be able to click in a square and play either X or O, respective of the turn.
  • As a user, when I get three in a row, I should be told I've won and the game should be over.

TIPS:

  • These designs should be so detailed that you could give them another team and they could implement it with few (if any) questions.
  • If at any time you want to validate a piece of your design (e.g. the algorithm, event handling, or UI/UX), you can create an extremely simple site that proves or disproves your idea.

Explorer Mode

Submit a full design of how to approach this problem. This should include:

  • A digital mock up (created using software, or a photo/scan of an analog drawing)
  • Implementation details, such as how you are implementing each square
  • A list of events you are listening for
  • psuedo-code describing your program (e.g. event-handling, game logic)

Adventure Mode

  • Plan the implementation of a "vs computer" mode, that picks a random square.

or

  • Take a swing at creating your tic-tac-toe game.
  • Have fun with the CSS by adding colors, animations and effects to make the game more enjoyable.

Epic Mode

  • Modify your "vs computer" mode to follow a specific strategy (of your choice).

Additional Resources

  • Adobe XD, free software from Adobe for designing and prototyping website and mobile apps.
  • Moqups, a web-based tool for collaborating on wireframes, mockups and prototypes.
  • Read about Pseudocode