lsitters/TicTacToe

## TicTacToe
<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>

    <style type="text/css">
        .cell{width: 60px; height:60px; background: #efefef; border: 1px solid #fff; display: inline-block}
        .cell.o{background: skyblue}
        .cell.x{background: teal}
    </style>
</head>

<body>

<div id="board"></div>


<script type="application/x-javascript">

        function Board() {
            this.x = 3;
            this.y = 3;
            this.gameOver = false;
            this.cells = new Array();
            this.activeSymbol = false; // false = O , true = X
        }

        Board.prototype.gameStatus = function(){

            // This logic can be cleaned up considerably. :/

            // top row
            if (this.cells[0].symbol != undefined && this.cells[1].symbol != undefined && this.cells[2].symbol != undefined) {
                if (this.cells[0].symbol == this.cells[1].symbol && this.cells[1].symbol == this.cells[2].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // mid row
            if (this.cells[3].symbol != undefined && this.cells[4].symbol != undefined && this.cells[5].symbol != undefined) {
                if (this.cells[3].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[5].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // bottom row
            if (this.cells[6].symbol != undefined && this.cells[7].symbol != undefined && this.cells[8].symbol != undefined) {
                if (this.cells[6].symbol == this.cells[7].symbol && this.cells[7].symbol == this.cells[8].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // left col
            if (this.cells[0].symbol != undefined && this.cells[3].symbol != undefined && this.cells[6].symbol != undefined) {
                if (this.cells[0].symbol == this.cells[3].symbol && this.cells[3].symbol == this.cells[6].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // mid col
            if (this.cells[1].symbol != undefined && this.cells[4].symbol != undefined && this.cells[7].symbol != undefined) {
                if (this.cells[1].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[7].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // right col
            if (this.cells[2].symbol != undefined && this.cells[5].symbol != undefined && this.cells[8].symbol != undefined) {
                if (this.cells[2].symbol == this.cells[5].symbol && this.cells[5].symbol == this.cells[8].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // diag top to down
            if (this.cells[0].symbol != undefined && this.cells[4].symbol != undefined && this.cells[8].symbol != undefined) {
                if (this.cells[0].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[8].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            // diag down to top
            if (this.cells[2].symbol != undefined && this.cells[4].symbol != undefined && this.cells[6].symbol != undefined) {
                if (this.cells[2].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[6].symbol) {
                    console.log(this.activeSymbol);
                    this.gameOver = true;
                    return this.gameOver;
                }
            }

            return this.gameOver;
        }

        Board.prototype.updateSymbol = function(cell){
            if (!cell.occupied && !this.gameOver) {
                cell.occupied = true;
                cell.symbol = this.activeSymbol;

                if (!this.activeSymbol) {  // O plays
                    cell.el.classList.add("o");
                }else{
                    cell.el.classList.add("x");
                }

                if (this.gameStatus(cell)) {
                    if (this.activeSymbol) {
                        alert('X is the winner');
                    }
                    else{
                        alert('O is the winner')
                    }

                    return true;
                }

                this.activeSymbol = !this.activeSymbol;
            }
            return false;
        }

        Board.prototype.create = function(){
            var myBoard = document.getElementById('board');
            var thisBoard = this;
            for (var yi=0; yi<this.y; yi++) {

                var row = document.createElement("div");
                row.classList.add("row");

                for (var xi = 0; xi < this.x; xi++) {
                    var cell = document.createElement("div");
                    cell.classList.add("cell");
                    row.appendChild(cell);

                    var newCell = new Cell(xi,yi,cell)
                    this.cells.push(newCell);

                    cell.onclick = (function() {
                        var currentCell = newCell;
                        return function() {
                            thisBoard.updateSymbol(currentCell);
                        }
                    })();
                }
                myBoard.appendChild(row);
            }
        }

        function Cell(x, y, el) {
            this.x = x;
            this.y = y;
            this.symbol;
            this.el = el;
            this.occupied = false;
        }


        var gameBoard = new Board();

        gameBoard.create();


</script>

</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Page Title</title>

	<style type="text/css">
	.cell{width: 60px; height:60px; background: #efefef; border: 1px solid #fff; display: inline-block}
	.cell.o{background: skyblue}
	.cell.x{background: teal}
	</style>
	</head>

	<body>

	<div id="board"></div>


	<script type="application/x-javascript">

	function Board() {
	this.x = 3;
	this.y = 3;
	this.gameOver = false;
	this.cells = new Array();
	this.activeSymbol = false; // false = O , true = X
	}

	Board.prototype.gameStatus = function(){

	// This logic can be cleaned up considerably. :/

	// top row
	if (this.cells[0].symbol != undefined && this.cells[1].symbol != undefined && this.cells[2].symbol != undefined) {
	if (this.cells[0].symbol == this.cells[1].symbol && this.cells[1].symbol == this.cells[2].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// mid row
	if (this.cells[3].symbol != undefined && this.cells[4].symbol != undefined && this.cells[5].symbol != undefined) {
	if (this.cells[3].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[5].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// bottom row
	if (this.cells[6].symbol != undefined && this.cells[7].symbol != undefined && this.cells[8].symbol != undefined) {
	if (this.cells[6].symbol == this.cells[7].symbol && this.cells[7].symbol == this.cells[8].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// left col
	if (this.cells[0].symbol != undefined && this.cells[3].symbol != undefined && this.cells[6].symbol != undefined) {
	if (this.cells[0].symbol == this.cells[3].symbol && this.cells[3].symbol == this.cells[6].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// mid col
	if (this.cells[1].symbol != undefined && this.cells[4].symbol != undefined && this.cells[7].symbol != undefined) {
	if (this.cells[1].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[7].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// right col
	if (this.cells[2].symbol != undefined && this.cells[5].symbol != undefined && this.cells[8].symbol != undefined) {
	if (this.cells[2].symbol == this.cells[5].symbol && this.cells[5].symbol == this.cells[8].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// diag top to down
	if (this.cells[0].symbol != undefined && this.cells[4].symbol != undefined && this.cells[8].symbol != undefined) {
	if (this.cells[0].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[8].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	// diag down to top
	if (this.cells[2].symbol != undefined && this.cells[4].symbol != undefined && this.cells[6].symbol != undefined) {
	if (this.cells[2].symbol == this.cells[4].symbol && this.cells[4].symbol == this.cells[6].symbol) {
	console.log(this.activeSymbol);
	this.gameOver = true;
	return this.gameOver;
	}
	}

	return this.gameOver;
	}

	Board.prototype.updateSymbol = function(cell){
	if (!cell.occupied && !this.gameOver) {
	cell.occupied = true;
	cell.symbol = this.activeSymbol;

	if (!this.activeSymbol) { // O plays
	cell.el.classList.add("o");
	}else{
	cell.el.classList.add("x");
	}

	if (this.gameStatus(cell)) {
	if (this.activeSymbol) {
	alert('X is the winner');
	}
	else{
	alert('O is the winner')
	}

	return true;
	}

	this.activeSymbol = !this.activeSymbol;
	}
	return false;
	}

	Board.prototype.create = function(){
	var myBoard = document.getElementById('board');
	var thisBoard = this;
	for (var yi=0; yi<this.y; yi++) {

	var row = document.createElement("div");
	row.classList.add("row");

	for (var xi = 0; xi < this.x; xi++) {
	var cell = document.createElement("div");
	cell.classList.add("cell");
	row.appendChild(cell);

	var newCell = new Cell(xi,yi,cell)
	this.cells.push(newCell);

	cell.onclick = (function() {
	var currentCell = newCell;
	return function() {
	thisBoard.updateSymbol(currentCell);
	}
	})();
	}
	myBoard.appendChild(row);
	}
	}

	function Cell(x, y, el) {
	this.x = x;
	this.y = y;
	this.symbol;
	this.el = el;
	this.occupied = false;
	}


	var gameBoard = new Board();

	gameBoard.create();


	</script>

	</body>
	</html>