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:
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,).
- 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
Result of Tic-Tac-Toe after player X won
Fig 4: Tic-Tac-Toe after won
For designing Dot Game we used following technologies:
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.
- 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
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
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!