lot224/TTT2.html

## 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>
	<!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 = " ";
	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 = " ";
	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>