Skip to content

TicTacToe using Html, Css, Js #990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 12, 2024
Merged

TicTacToe using Html, Css, Js #990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions TicTacToeGame/sanathan-git/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# A website built with HTML,CSS,Javascript

## How to use
- click on setting icon set the difficulty level
- select one option
- Player which made the straight line first wins.

## How to start
- open the index.html file in your browser.

66 changes: 66 additions & 0 deletions TicTacToeGame/sanathan-git/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic_tac_toe</title>
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-tac-toe</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="shortcut icon" href="" type="image/x-icon">
</head>
<body onload="initialize()">
<h1> ◥◣ Tic-Tac-Toe ◢◤</h1>
<table id="table_game">
<tr><td class="td_game"><div id="cell0" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell1" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell2" onclick="cellClicked(this.id)" class="fixed"></div></td></tr>
<tr><td class="td_game"><div id="cell3" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell4" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell5" onclick="cellClicked(this.id)" class="fixed"></div></td></tr>
<tr><td class="td_game"><div id="cell6" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell7" onclick="cellClicked(this.id)" class="fixed"></div></td><td class="td_game"><div id="cell8" onclick="cellClicked(this.id)" class="fixed"></div></td></tr>
</table>
<div id="restart" title="Start new game" onclick="restartGame(true)"><span style="vertical-align:top;position:relative;top: 10px;font-size: 15px;">⚙️</span></div>
<table>
<tr><th class="th_list">Robot </th><th class="th_list" style="padding-right:10px;padding-left:10px">Tie</th><th class="th_list">You</th></tr>
<tr><td class="td_list" id="computer_score">0</td><td class="td_list" style="padding-right:10px;padding-left:10px" id="tie_score">0</td><td class="td_list" id="player_score">0</td></tr>
</table>
<!-- The modal dialog for announcing the winner -->
<div id="winAnnounce" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" onclick="closeModal('winAnnounce')">&times;</span>
<p id="winText"></p>
</div>
</div>
<!-- The dialog for getting feedback from the user -->
<div id="userFeedback" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p id="questionText"></p>
<p><button id="yesBtn">Yes</button>&nbsp;<button id="noBtn">No</button></p>
</div>
</div>
<!-- The options dialog -->
<div id="optionsDlg" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h2>Configuration ⚙️ </h2>
<h3>Difficulty:</h3>
<label><input type="radio" name="difficulty" id="r0" value="0">Peaceful🍀&nbsp;</label>
<label><input type="radio" name="difficulty" id="r1" value="1" checked>Extreme😈</label><br>
<h3>Play as:</h3>
<label><input type="radio" name="player" id="rx" value="x" checked>X (go first)&nbsp;</label>
<label><input type="radio" name="player" id="ro" value="o">O<br></label>
<p><button id="okBtn" onclick="getOptions()">Play</button></p>
</div>
</div>

<script src="main.js"></script>

</body>
</html>
</body>
</html>
Loading