salesforce data migration services



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

Code Workshop,Tic-Tac Toe. Dazeworks - 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


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).


  • 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

For Checking

For Validation

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.


  • 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

For reset 

For Showing R&D

For Hiding R&D 

For Incrementing Points

For Decrementing Time

For Randomize Dot

For Randomize R

To Start Timer

On Clicking Start Button

When Mouse Enters on D

When Mouse Enters on R


dot 1

Fig 7: Dot Game Initially

dot 2

Fig 8: Final result

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


Popular Tag's

Connect with Dazeworks