Skip to content

Instantly share code, notes, and snippets.

@lot224

lot224/TTT2.html

Created October 7, 2019 05:11
Show Gist options
  • Save lot224/67f73d8925b5e9e108c67b3f62503815 to your computer and use it in GitHub Desktop.
Save lot224/67f73d8925b5e9e108c67b3f62503815 to your computer and use it in GitHub Desktop.
Download ZIP
Sam's TTT2.html
Raw
TTT2.html
<!doctype html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
button {
font-size: 40px;
height: 100px;
width: 100px;
}
.winclass {
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn3x3" onClick="createButtons(3,3)" value="3X3 Grid">
<input type="button" id="btn4x4" onClick="createButtons(4,4)" value="4X4 Grid">
<input type="button" id="btn5x5" onClick="createButtons(5,5)" value="5X5 Grid">
<input type="button" id="btn5x5" onClick="createButtons(6,6)" value="6X6 Grid">
<input type="button" id="btnNewGame" onClick="resetButtons()" value="Reset Buttons" /></input>
<div id="buttonArea"></div>
</body>
</html>
<script>
var maxButtons = 0;
function createButtons(row, col) {
maxButtons = row * col;
var counter = 1;
var element = document.getElementById("buttonArea");
element.innerHTML = "";
for (var R = 0; R < row; R++) {
for (var C = 0; C < col; C++) {
var newButton = document.createElement("button");
newButton.setAttribute("id", "btn" + counter++);
newButton.setAttribute("type", "button");
newButton.setAttribute("onClick", "selected(this)");
newButton.innerHTML = "&nbsp;";
element.appendChild(newButton);
}
var breakLine = document.createElement("br");
element.appendChild(breakLine);
}
}
function gameOver(msg) {
alert(msg);
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
function selected(butObj) {
butObj.innerHTML = "X";
butObj.disabled = true;
if (checkWin("X") == true) {
gameOver('You Win');
} else {
AITurn();
if (checkWin("O") == true) {
gameOver("You Lose");
} else {
drawCheck();
}
}
}
function AITurn() {
for (var count = 1; count <= maxButtons; count++) {
var randInt = Math.floor(Math.random() * maxButtons) + 1;
var randButObj = document.getElementById("btn" + randInt);
if (randButObj.disabled == false) {
randButObj.innerHTML = "O";
randButObj.disabled = true;
break;
}
}
}
function resetButtons() {
setButtonX = true;
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < (buttons.length); i++) {
buttons[i].innerHTML = "&nbsp;";
buttons[i].disabled = false;
buttons[i].removeAttribute("class");
}
}
function checkWinOriginal(player, row, col) {
var counter = 0;
var btn = document.getElementsByTagName("button");
// Check the rows
for (countR = 0; countR < row; countR++) {
// check the columns
for (countC = 0; countC < col; countC++) {
if (player != btn[counter].innerHTML) {
counter += col - countC;
break;
}
else if (countC + 1 == col) {
for (countW = 0; countW < col; countW++) {
btn[counter - countW].setAttribute("class", "winclass");
}
alert("You Won");
}
else {
counter++;
}
}
}
}
function checkWin(player) {
var buttons = document.getElementsByTagName("button");
var sqrt = Math.sqrt(buttons.length);
var s1, s2, index, horizontal, vertical;
var d1 = [];
var d2 = [];
for (s1 = 0; s1 < sqrt; s1++) {
// reset the arrays.
horizontal = [];
vertical = [];
// When this for loop completes we will have identified a horizontal line and a vertical line
// and wether or not the player has won the game.
//
// A 3x3 layout and what lines are reviewed for each main loop
// [x][x][x] [ ][x][ ] [ ][ ][x]
// [x][ ][ ] [x][x][x] [ ][ ][x]
// [x][ ][ ] [ ][x][ ] [x][x][x]
// A 4x4 layout and what lines are reviewed for each main loop
// [x][x][x][x] [ ][x][ ][ ] [ ][ ][x][ ] [ ][ ][ ][x]
// [x][ ][ ][ ] [x][x][x][x] [ ][ ][x][ ] [ ][ ][ ][x]
// [x][ ][ ][ ] [ ][x][ ][ ] [x][x][x][x] [ ][ ][ ][x]
// [x][ ][ ][ ] [ ][x][ ][ ] [ ][ ][x][ ] [x][x][x][x]
// A 5x5 layout and what lines are reviewed for each main loop
// [x][x][x][x][x] [ ][x][ ][ ][ ] [ ][ ][x][ ][ ] [ ][ ][ ][x][ ] [ ][ ][ ][ ][x]
// [x][ ][ ][ ][ ] [x][x][x][x][x] [ ][ ][x][ ][ ] [ ][ ][ ][x][ ] [ ][ ][ ][ ][x]
// [x][ ][ ][ ][ ] [ ][x][ ][ ][ ] [x][x][x][x][x] [ ][ ][ ][x][ ] [ ][ ][ ][ ][x]
// [x][ ][ ][ ][ ] [ ][x][ ][ ][ ] [ ][ ][x][ ][ ] [x][x][x][x][x] [ ][ ][ ][ ][x]
// [x][ ][ ][ ][ ] [ ][x][ ][ ][ ] [ ][ ][x][ ][ ] [ ][ ][ ][x][ ] [x][x][x][x][x]
for (s2 = 0; s2 < sqrt; s2++) {
// CHECKING HORIZONTAL LINES
// [ ][ ][ ]
// [x][x][x]
// [ ][ ][ ]
// Get the index of the button to validate.
index = (s1 * sqrt) + s2;
// If the button is assigned to the player, we'll add the index to the current horizontal array.
if (buttons[index].innerHTML === player) {
horizontal.push(index);
}
// If the current horizontal array length matches the size of the grid then we have a winner.
if (horizontal.length == sqrt) {
for (index = 0; index < horizontal.length; index++) {
buttons[horizontal[index]].setAttribute("class", "winclass");
}
return true;
}
// CHECKING VERTICAL LINES
// [ ][x][ ]
// [ ][x][ ]
// [ ][x][ ]
// Get the index of the button to validate.
index = (s2 * sqrt) + s1;
// If the button is assigned to the player, we'll add the index to the current vertical array.
if (buttons[index].innerHTML === player) {
vertical.push(index);
}
// If the current vertical array length matches the size of the grid then we have a winner.
if (vertical.length == sqrt) {
for (index = 0; index < vertical.length; index++) {
buttons[vertical[index]].setAttribute("class", "winclass");
}
return true;
}
}
// Checking diagonals top-left -> bottom-right (\), and top-right -> bottom-left (/)
// We dont have to place this inside the second loop because were only checking {{sqrt}} buttons for each line.
// Lets check the top right to bottom left diagonal. (/)
// [ ][ ][x]
// [ ][x][ ]
// [x][ ][ ]
// Get the index of the button to validate.
index = (s1 * sqrt) + ((sqrt - 1) - s1);
// If the button is assigned to the player, we'll add the index to the current diagonal 1 array.
if (buttons[index].innerHTML === player) {
d1.push(index);
}
// If the current diagonal 1 array length matches the size of the grid then we have a winner.
if (d1.length == sqrt) {
for (index = 0; index < d1.length; index++) {
buttons[d1[index]].setAttribute("class", "winclass");
}
return true;
}
// Lets check the top left to bottom right diagonal. (\)
// [x][ ][ ]
// [ ][x][ ]
// [ ][ ][x]
// Get the index of the button to validate.
index = (s1 * sqrt) + s1;
// If the button is assigned to the player, we'll add the index to the current diagonal 2 array.
if (buttons[index].innerHTML === player) {
d2.push(index);
}
// If the current diagonal 2 array length matches the size of the grid then we have a winner.
if (d2.length == sqrt) {
for (index = 0; index < d2.length; index++) {
buttons[d2[index]].setAttribute("class", "winclass");
}
return true;
}
}
}
function drawCheck() {
var btns = document.getElementsByTagName("button");
var btn;
for (btn in btns) {
if (btns[btn].disabled == false) {
return;
}
}
alert("Draw Game Over");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment