Hello Friends, In this article I will create a game for all of you. This is a simple game and many of us play it in our free time. Name of the game is Tic Tac toe. And it is used as school or college assignment or project . I have created the tic tac toe game using HTML JavaScript and CSS.
Tic tac toe game using HTML JavaScript and CSS
Below are the requirements of the game.
Your assignment is to create a tic-tac-toe game out of HTML, CSS and JavaScript. You should have a single HTML page, one accompanying JS file, and one accompanying CSS file.
- When the page loads, only the game board should be displayed (draw the game board any way you see fit).
- When a user clicks within the game board (in an empty space) their mark (either “X” or “O” should appear there). “X” goes first. So the first valid click on the game board should produce an “X”. The second should produce an “O”, and then they should trade off.
- The “X” s should be red, and the “O”s should be black.
- If someone wins (gets three in a row), you should make a dialog box appear on the screen that says either “X has won!” or “O has won!” And when the dialog box is closed, the game should be reset to its beginning state.
- If all the areas of the board get filled but nobody wins, a dialog box appear on the screen that says either “Cats game!” And when the dialog box is closed, the game should be reset to its beginning state. (What does cat’s game mean?)
Quite simple , isn’t it?
You can play the live version of the game here at the below link:
http://tictactoejs.s3-website-us-east-1.amazonaws.com/
And if you are one of the curious fellow. The code for the game is present in belwo link:
https://github.com/vikramvee/JavaScript/tree/master/HA%238
Hope you will like the game and enjoyed creating it.