Week 03 Day 4 - Hack Day & Tic Tac Toe -

[mdewey]

---

title: Designing Tic-Tac-Toe draft: true

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

[Alexiskjg16]

Requirements Create a structure of page on Moqup Create the grid Create the data structure for the grid Make each element in grid player's initials Create the data structure for the winning combinations Create the players Create the player name text boxes Create the player name buttons Players can only do one action per turn Determine winner Loop through winningCombonations and see if the players positions include a winning combo Create scores Create score labels Create variables called playerOneScore and playerTwoScore Increment score if they win If score reaches 5, they are the ultimate winner Display winner Create a winner label If player wins, push their name to the DOM Create play again functionality Create the play again button Clear the player's positions Clear the DOM's grid Make initials for the grid boxes.

playerOnePositions = [4, 3] playerTwoPositions = [8] Grid = [[1, 2, 3], [4, 5, 6], [7 , 8, 9]] winningCombos = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7]...]

if (playerOnePositions > 2 || playerTwoPositions > 2) { for (let i = 0; i < winningCombos.length; i++) { if (playerOnePositions.includes(winningComobos[i][0] && playerOnePositions.includes(winningComboes[i][1] && playerOnePositions.includes(winningComboes[i][2] &&) { console.log("you won") } } }

Classes: Player Grid PlayMarks Game AddToDOM Variables: playerOnePositions playerOneScore playerOneName playerTwoPositions playerTwoScore playerTwoName winningComboes gridStructure

[mdewey]