Week 03 - Day 4 - Tic Tac Toe

gstark commented 5 years ago

With a partner, create a design for a tic-tac-toe game. Practice your technical design skills (i.e. thinking about how you would code this).

Objectives

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.

WITH your partner: 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)

Finally, also with your partner:

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

or

[ ] Have fun with the CSS by adding colors, animations and effects to make the game more enjoyable.

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

PEDAC
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

mrected commented 5 years ago

tic-frankdiaz.surge.sh

gstark commented 5 years ago

Nicely done!

Code like playerOne ? currentPlayer = 'O' : currentPlayer = 'X' should really be currentPlayer = playerOne ? 'O' : 'X'

playerOne ? playerOne = false : playerOne = true can be: playerOne = !playerOne

gstark commented 5 years ago

Your homework was marked: Meets Expectations

Well done!

“Well done!” — via Gavin Stark