Crack the Code Workshop – DIY Tic-Tac Toe, Dot Game

salesforce data migration services
27
Jan

Crack the Code Workshop – DIY Tic-Tac Toe, Dot Game

Posted by Thamaraikannan

As a trainee at Dazeworks, one of the things I loved about our training sessions was that we got a chance to design and develop games that I had played when I was a kid. Remember Tic-Tac-Toe and the Dot Game? Here’s how we went about doing that

Tic-Tac-Toe

For designing Tic-Tac-Toe we used following technologies:

  • HTML
  • Bootstrap
  • CSS
  • JavaScript

Things to Do in HTML:

  • Create two text boxes for Player 1 and player 2.
  • Create a table that contains three rows and three columns. All these are text boxes and should allow the user to type only one character (X,O) by using HTML property Maxlength = 1. Next, the result has to be validated using the validate key.
  • Create id for each textbox (id=1, id=2, id=3, id=4, id=5, id=6, id=7, id=8, id=9,).

Things to Do in JavaScript

  • Write a function to validate when player make (X,X,X)&(O,O,O) in a single line, i.e. from top to bottom or left to right or in cross , it will give Success pop-up for a particular player.
  • Write three functions
    • for position 1 it will check possibilities of  (1,2,3),(1,4,7),(1,5,9).
    • for position 5 it will check possibilities of  (2,5,8),(4,5,6),(3,5,7),(1,5,9).
    • for position 9 it will check possibilities of  (3,6,9),(7,8,9),(1,5,9).

Functionality

  • The main aim of Tic-Tac-Toe is to play a game between two players. Player 1 will be assigned as X and Player 2 assigned as O.
  • By using ID,you can get the value from the DOM and check the possibilities
  • Whenever all the three (X) or (O) meet in a single line by using the possibilities (1,2,3),(1,4,7),(1,5,9, (2,5,8),(4,5,6),(3,5,7),(1,5,9), (3,6,9),(7,8,9),(1,5,9), it will give an alert showing the player has won the game.

Take a look at the codes for these for a better idea
Full Codes
http://codepen.io/thams017/pen/Bjmejq
For Checking
https://gist.github.com/thams017/63a0d818cabce3b70981
For Validation
https://gist.github.com/thams017/0c71583ab9a62de985f8
Result of Tic-Tac-Toe after player X won

Fig 4: Tic-Tac-Toe after won

Dot Game

For designing Dot Game we used following technologies:

  • HTML
  • CSS
  • JavaScript

Things to Do in HTML:

  • Create two text boxes for Points, Timer and a Start button.
  • Create two classes – dot and reveal that come in another class called container.

Things to Do in CSS:

  • Give height and width and other properties to container, dot and reveal class.

Things to Do in JavaScript:

  • First function is to show and hide the dot and reveal.
  • Next Function is to increment the points from 0 and decrement the timer from 10 seconds.
  • Next function is to reset the points to 0 and timer to 10 seconds.
  • Next function is to show the random position of the dot, reveal
  • Next function is when mouse enter over reveal, showing dot and hiding reveal
  • Next function is when mouse enter over dot, showing reveal and hiding dot.

 Functionality

  • Initially if you press the Start button, timer starts to decrease from 10, and reveal will be shown if you move the mouse over the reveal. Then the dot will appear if you move mouse over the dot. Points will increment to 1 from 0 and so on.
  • mouseenter plays a major role in this game as it increments points.

Here are the codes for the Dot Game
Full Codes
http://codepen.io/thams017/pen/ZQeJGL?editors=001
For reset 
https://gist.github.com/thams017/24faf0c638303ed22771
For Showing R&D
https://gist.github.com/thams017/cc74718a01c27449ef39
For Hiding R&D 
https://gist.github.com/thams017/03302b24e0cf52f2b050
For Incrementing Points
https://gist.github.com/thams017/a110fa41afcab974f3d0
For Decrementing Time
https://gist.github.com/thams017/5943486894711307d34d
For Randomize Dot
https://gist.github.com/thams017/c07dbd4846b390075d94
For Randomize R
https://gist.github.com/thams017/57af35a29d14bcd85dcb
To Start Timer
https://gist.github.com/thams017/370f965f631f388fb5dc
On Clicking Start Button
https://gist.github.com/thams017/556e9b2e567730fa4082
When Mouse Enters on D
https://gist.github.com/thams017/944b3625225042d1d229
When Mouse Enters on R
https://gist.github.com/thams017/f7a1c8de173376cb0392
Result:

Fig 7: Dot Game Initially

Fig 8: Final result

Why don’t you give these a try and let us know your thoughts  in the comments below!