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

Posted by Thamaraikannan

minutes read

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

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

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: