Scribd
Upload
22 views

In HTML and Javascript

This document summarizes how a Tic-Tac-Toe game is built using HTML and JavaScript. The game uses a 3x3 grid table made with HTML and JavaScript functions to randomly determine the first player, update the board and display messages when a player takes a turn, check for a winner, and allow restarting the game. Key functions include setMessage(), nextMove(), winnerCheck(), and boxRowCheck() to manage the game play and check for winning combinations.

Uploaded by

VINEETH Vinnu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

In HTML and Javascript

This document summarizes how a Tic-Tac-Toe game is built using HTML and JavaScript. The game uses a 3x3 grid table made with HTML and JavaScript functions to randomly determine the first player, update the board and display messages when a player takes a turn, check for a winner, and allow restarting the game. Key functions include setMessage(), nextMove(), winnerCheck(), and boxRowCheck() to manage the game play and check for winning combinations.

Uploaded by

VINEETH Vinnu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

-In HTML AND JAVASCRIPT

Mentor: Dr.Haider Banka Sir

SUBMITTED BY:
PENTAKOTA ACHYUTH
16JEOO2581
BTECH CSE 3rd Sem.
Tic-Tac-Toe is a game where two players , X and
O, take turns marking the spaces in a 33 grid.
The player who succeeds in placing three of
their marks in a horizontal, vertical, or diagonal
row wins the game.
This is the table which is made using basic html
attributes.
Each time the game starts the player who goes
first is decided by the random function present
in the math class.
By clicking the heading(TIC-TAC-TOE),you can go on
to the Wikipedia page where you can find the
detailed description about the game.
Directly below the title, in red is where all the
messages regarding the game are conveyed to the
players which is done using the javascript function
( setmessage() ).Here in the picture it is showing
whose turn is.
Below the box is a line saying RESTART which once
clicked will take you to the beginning of a new
game.This is done by linking it to the javascript
function which starts the game.
The table has 9 boxes where the input goes.
When the players turn comes he can select and click
on any of the boxes in the table which will
automatically display the players variable( X or O
).The boxes have id as s1,s2,...so on for easy
accessing.
This is done by using the html attribute onclick
which links the box of the table with the javascript
function( nextmove() ) which in return updates the
text of the box using the javascript
attributeinnerTextand changes the message above
the box.
If by mistake the player clicks on a box which is
already filled,then a message shows up sayingThat
square is already used.
Now if all the squares are filled and there isnt any
winner the message line shows that the game is a
draw and to click restart to continue playing.
This is done by checking all the boxes if they are
occupied or not by the javascript
attributegetElementByIdwhich checks for a
specific id which were earlier given to each of the 9
boxes in the table.
Finally,if any of the winning conditions of the game
are satisfied then the message line reads as( X or
O ),you win.
This is achieved by javascript functions
winnercheck() -> boxrowcheck() -> box() by
checking the innerText of the boxes.
Now, X already won the game but there is a box left
empty.Even if its clicked it wont be updated because
the game is over.
So it shows up a messageGAME OVER!( X or O )
has already won the game
This is done by taking a variable winner and
storing the winner if there is one or null.
Some other cases of a win:
THE END

You might also like