Tic-Tac-Toe

Developer
Bob Sutton
Size
3,879 Kb
Views
26,312
  1. Tic-Tac-Toe Previews
  2. Tic-Tac-Toe HTML Codes
  3. Tic-Tac-Toe CSS Codes
  4. Tic-Tac-Toe JS Codes

How do I make an tic-tac-toe?

A basic Tic-Tac-Toe game.. What is a tic-tac-toe? How do you make a tic-tac-toe? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

Tic-Tac-Toe Previews
IQ Test

Tic-Tac-Toe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic-Tac-Toe</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Shadows%20Into%20Light'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Wendy%20One'>
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Tic-Tac-Toe</h1>
<table> <tr> <td><div id="square-1-1" class="square"><div></div></div></td> <td><div id="square-1-2" class="square"><div></div></div></td> <td><div id="square-1-3" class="square"><div></div></div></td> </tr> <tr> <td><div id="square-2-1" class="square"><div></div></div></td> <td><div id="square-2-2" class="square"><div></div></div></td> <td><div id="square-2-3" class="square"><div></div></div></td> </tr> <tr> <td><div id="square-3-1" class="square"><div></div></div></td> <td><div id="square-3-2" class="square"><div></div></div></td> <td><div id="square-3-3" class="square"><div></div></div></td> </tr>
</table> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic-Tac-Toe - Script Codes CSS Codes

body
{ background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/sayagata-400px.png") repeat;
}
h1
{ font-family: Wendy One; font-size: 50px; text-align: center; color: brown;
}
table
{ margin-top: 75px; margin-left: auto; margin-right: auto;
}
.square
{ font-family: Shadows Into Light; font-size: 75px; font-weight: bold; text-align: center; width: 100px; height: 100px; color: brown;
}
#square-1-1
{ border-right: 2px solid gray; border-bottom: 2px solid gray;
}
#square-1-2
{ border-left: 2px solid gray; border-right: 2px solid gray; border-bottom: 2px solid gray;
}
#square-1-3
{ border-left: 2px solid gray; border-bottom: 2px solid gray;
}
#square-2-1
{ border-top: 2px solid gray; border-right: 2px solid gray; border-bottom: 2px solid gray;
}
#square-2-2
{ border-top: 2px solid gray; border-left: 2px solid gray; border-right: 2px solid gray; border-bottom: 2px solid gray;
}
#square-2-3
{ border-top: 2px solid gray; border-left: 2px solid gray; border-bottom: 2px solid gray;
}
#square-3-1
{ border-top: 2px solid gray; border-right: 2px solid gray;
}
#square-3-2
{ border-left: 2px solid gray; border-right: 2px solid gray; border-top: 2px solid gray;
}
#square-3-3
{ border-left: 2px solid gray; border-top: 2px solid gray;
}

Tic-Tac-Toe - Script Codes JS Codes

var playerChar = "X";
var board = [[-1, -1, -1], [-1, -1, -1], [-1, -1, -1]];
function beep()
{ $("<audio id='beep' preload='auto' autobuffer><source src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/Beep.mp3' /><source src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/Beep.wav' /></audio>") .get(0) .play();
}
function rowInDanger(row)
{ var cCount = 0; var pCount = 0; for (var col = 0; col < 3; col++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; } return (pCount === 2 && cCount === 0);
}
function colInDanger(col)
{ var cCount = 0; var pCount = 0; for (var row = 0; row < 3; row++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; } return (pCount === 2 && cCount === 0);
}
function leftDiagonalInDanger()
{ var cCount = 0; var pCount = 0; for (var i = 0; i < 3; i++) { if (board[i][i] === 0) pCount++; else if (board[i][i] === 1) cCount++; } return (pCount === 2 && cCount === 0);
}
function rightDiagonalInDanger()
{ var cCount = 0; var pCount = 0; var col = 2; for (var row = 0; row < 3; row++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; col--; } return (pCount === 2 && cCount === 0);
}
function fillSquare(row, col)
{ board[row][col] = 1; $("#square-" + (row + 1) + "-" + (col + 1) + " div") .text(playerChar === "X" ? "O" : "X") .addClass("animated bounceIn");
}
function fillRowInDanger(row)
{ for (var col = 0; col < 3; col++) { if (board[row][col] === -1) { board[row][col] = 1; fillSquare(row, col); break; } }
}
function fillColInDanger(col)
{ for (var row = 0; row < 3; row++) { if (board[row][col] === -1) { fillSquare(row, col); break; } }
}
function fillLeftDiagonalInDanger()
{ for (var i = 0; i < 3; i++) { if (board[i][i] === -1) { fillSquare(i, i); break; } }
}
function fillRightDiagonalInDanger()
{ var col = 2; for (var row = 0; row < 3; row++) { if (board[row][col] === -1) { fillSquare(row, col); break; } col--; }
}
function dangerDetected()
{ for (var i = 0; i < 3; i++) { if (rowInDanger(i)) { fillRowInDanger(i); return true; } if (colInDanger(i)) { fillColInDanger(i); return true; } } if (leftDiagonalInDanger()) { fillLeftDiagonalInDanger(); return true; } if (rightDiagonalInDanger()) { fillRightDiagonalInDanger(); return true; } return false;
}
function fillRandomSquare()
{ var list = []; for (var row = 0; row < 3; row++) for (var col = 0; col < 3; col++) if (board[row][col] === -1) list.push({ "row": row, "col": col }); if (list.length > 0) { var entry = list[Math.floor(Math.random() * list.length)]; fillSquare(entry.row, entry.col); }
}
function winningRow(row)
{ var cCount = 0; var pCount = 0; for (var col = 0; col < 3; col++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; } return (cCount === 2 && pCount === 0);
}
function winningCol(col)
{ var cCount = 0; var pCount = 0; for (var row = 0; row < 3; row++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; } return (cCount === 2 && pCount === 0);
}
function winningLeftDiagonal()
{ var cCount = 0; var pCount = 0; for (var i = 0; i < 3; i++) { if (board[i][i] === 0) pCount++; else if (board[i][i] === 1) cCount++; } return (cCount === 2 && pCount === 0);
}
function winningRightDiagonal()
{ var cCount = 0; var pCount = 0; var col = 2; for (var row = 0; row < 3; row++) { if (board[row][col] === 0) pCount++; else if (board[row][col] === 1) cCount++; col--; } return (cCount === 2 && pCount === 0);
}
function completeRow(row)
{ for (var col = 0; col < 3; col++) if (board[row][col] === -1) { fillSquare(row, col); return; }
}
function completeCol(col)
{ for (var row = 0; row < 3; row++) if (board[row][col] === -1) { fillSquare(row, col); return; }
}
function completeLeftDiagonal()
{ for (var i = 0; i < 3; i++) if (board[i][i] === -1) { fillSquare(i, i); return; }
}
function completeRightDiagonal()
{ var col = 2; for (var row = 0; row < 2; row++) { if (board[row][col] === -1) { fillSquare(row, col); return; } col--; }
}
function canComputerWin()
{ for (var i = 0; i < 3; i++) { if (winningRow(i)) { completeRow(i); return true; } if (winningCol(i)) { completeCol(i); return true; } } if (winningLeftDiagonal()) { completeLeftDiagonal() return true; } if (winningRightDiagonal()) { completeRightDiagonal(); return true; } return false;
}
function rowFilled(row)
{ var n = board[row][0]; if (n !== -1 && board[row][1] === n && board[row][2] === n) return n; return -1;
}
function colFilled(col)
{ var n = board[0][col]; if (n !== -1 && board[1][col] === n && board[2][col] === n) return n; return -1;
}
function leftDiagonalFilled()
{ var n = board[0][0]; if (n !== -1 && board[1][1] === n && board[2][2] === n) return n; return -1;
}
function rightDiagonalFilled()
{ var n = board[0][2]; if (n !== -1 && board[1][1] === n && board[2][0] === n) return n; return -1;
}
function gameTied()
{ for (var row = 0; row < 3; row++) for (var col = 0; col < 3; col++) if (board[row][col] === -1) return false; return true;
}
function resetGame()
{ board = [[-1, -1, -1], [-1, -1, -1], [-1, -1, -1]]; for (var row = 1; row <= 3; row++) for (var col = 1; col <= 3; col++) $("#square-" + row + "-" + col + " div") .text("") .removeClass("animated bounceIn");
}
function announceGameResults(msg)
{ beep(); $("<div><p>" + msg + "</p>").dialog( { modal: true, show: true, hide: true, closeOnEscape: false, buttons: { Ok: function() { $(this) .dialog("close") .dialog("destroy") .hide(); resetGame(); } } });
}
function isGameOver()
{ for (var i = 0; i < 3; i++) { var n = rowFilled(i); if (n !== -1) { announceGameResults("Game over. " + (n === 0 ? "You have" : "Computer has") + " won."); return true; } n = colFilled(i); if (n !== -1) { announceGameResults("Game over. " + (n === 0 ? "You have" : "Computer has") + " won."); return true; } } n = leftDiagonalFilled(); if (n !== -1) { announceGameResults("Game over. " + (n === 0 ? "You have" : "Computer has") + " won."); return true; } n = rightDiagonalFilled(); if (n !== -1) { announceGameResults("Game over. " + (n === 0 ? "You have" : "Computer has") + " won."); return true; } if (gameTied()) { announceGameResults("Game is a draw."); return true; } return false;
}
function rowAvailable(row)
{ var count = 0; for (var col = 0; col < 3; col++) { if (board[row][col] === 1) count++; if (board[row][col] === 0) return false; } return (count === 1);
}
function colAvailable(col)
{ var count = 0; for (var row = 0; row < 3; row++) { if (board[row][col] === 1) count++; if (board[row][col] === 0) return false; } return (count === 1);
}
function leftDiagonalAvailable()
{ var count = 0; for (var i = 0; i < 3; i++) { if (board[i][i] === 1) count++; if (board[i][i] === 0) return false; } return (count === 1);
}
function rightDiagonalAvailable()
{ var count = 0; var col = 2; for (var row = 0; row < 3; row++) { if (board[row][col] === 1) count++; if (board[row][col] === 0) return false; col--; } return (count === 1);
}
function fillRow(row)
{ var list = []; for (var col = 0; col < 3; col++) if (board[row][col] === -1) list.push(col); fillSquare(row, list[Math.floor(Math.random() + 0.5)]);
}
function fillCol(col)
{ var list = []; for (var row = 0; row < 3; row++) if (board[row][col] === -1) list.push(row); fillSquare(list[Math.floor(Math.random() + 0.5)], col);
}
function fillLeftDiagonal()
{ var list = []; for (var i = 0; i < 3; i++) if (board[i][i] === -1) list.push(i); i = list[Math.floor(Math.random() + 0.5)]; fillSquare(i, i);
}
function fillRightDiagonal()
{ var list = []; var col = 2; for (var row = 0; row < 3; row++) { if (board[row][col] === -1) list.push({ "row": row, "col": col }); col--; } var obj = list[Math.floor(Math.random() + 0.5)]; fillSquare(obj.row, obj.col);
}
function findAvailableVector()
{ for (i = 0; i < 3; i++) { if (rowAvailable(i)) { fillRow(i); return true; } if (colAvailable(i)) { fillCol(i); return true; } } if (leftDiagonalAvailable()) { fillLeftDiagonal(); return true; } if (rightDiagonalAvailable()) { fillRightDiagonal(); return true; } return false;
}
function squareClicked(event)
{ var a = event.target.id.split("-"); var x = Number(a[1]); var y = Number(a[2]); $("#square-" + x + "-" + y + " div").text(playerChar); board[x - 1][y - 1] = 0; if (!isGameOver()) { if (!canComputerWin() && !dangerDetected()) { if (!isGameOver()) { if (!findAvailableVector()) fillRandomSquare(); } } else isGameOver(); }
}
$(".square").on("click", squareClicked);
beep();
$("<div><p>Do you want to be X or O?</p></div>").dialog(
{ modal: true, show: true, hide: true, closeOnEscape: false, buttons: { X: function() { playerChar = "X"; $(this) .dialog("close") .dialog("destroy") .hide(); }, O: function() { playerChar = "O"; $(this) .dialog("close") .dialog("destroy") .hide(); } }
});
Tic-Tac-Toe - Script Codes
Tic-Tac-Toe - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 3,879 Kb
Views 26,312
Do you need developer help for Tic-Tac-Toe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bob Sutton (anischyros) Script Codes
Name
Twitchy Twitch.tv User Display
Worldwide Meteor Strikes Map
Contiguity Graph of Countries
Demonstration of Doping in Professional Bicycle Racing
Wikipedia Lookup Page
Winston Churchill
Life in a Dungeon
Git Markup Language Editor
The Mark Twain Random Quote Machine
The Recipe Engine
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!