kyip-dev/game02_temp.html

## game02_temp.html
<!doctype html>
<title>Test Test</title>
<style>
#stage {
	position: relative;
}

.cell {
	position: absolute;
	width: 80px;
	height: 80px;
	border: 1px solid grey;
	background-color: white;
}
</style>
<div id="header">
Make all panel to the same Color.<br/>
Steps used: <span id="step">0</span>
</div>
<div id="stage"></div>

<script>
	//Get a reference to the stage
	var stage = document.querySelector("#stage");
	var stepOutput = document.querySelector("#step");
	//The 2D array that defines the pattern
	var pattern = [
		[ 0, 0, 0 ],
		[ 0, 0, 0 ],
		[ 0, 0, 0 ]
	];
	//The size of each cell
	var SIZE = 80;
	//The space between each cell
	var SPACE = 0;
	//Display the array
	var ROWS = pattern.length;
	var COLUMNS = pattern[0].length;

	// user used steps
	var steps = 0;
	render();

	function render() {
		for ( var row = 0; row < ROWS; row++) {
			for ( var column = 0; column < COLUMNS; column++) {
				//Create a div HTML element called cell
				var cell = document.createElement("div");
				var eid = row +"|"+ column;

				//Set its CSS class to "cell"
				cell.setAttribute("class", "cell");
				cell.setAttribute("id", eid);
				cell.setAttribute("onclick", "nextMove(this.id)");

				//Add the div HTML element to the stage
				stage.appendChild(cell);

				//Make it black if it's a "1"
				if (pattern[row][column] === 1) {
					cell.style.backgroundColor = "black";
				}
				if (pattern[row][column] === 2) {
					cell.style.backgroundColor = "blue";
				}


				//Position the cell in the correct place
				//with 10 pixels of space around it
				cell.style.top = row * (SIZE + SPACE) + "px";
				cell.style.left = column * (SIZE + SPACE) + "px";
			}
		}
	}

	function nextMove(objId) {
	steps = steps+1;
	stepOutput.innerHTML = steps;
		var obj = objId.split("|");
		var row = parseInt(obj[0]);
		var col = parseInt(obj[1]);

		pattern[row][col] = 1;

		render();
		checkWinLose();
	}

	function checkWinLose() {
		//var win = checkWinColumn() || checkWinRow();
		var win = checkWinDiagonal();
		if (win) {
			alert("success");
		}
	}

	/* check whether have a row that wins */
	function checkWinRow() {
		for ( var row = 0; row < ROWS; row++) {
			var success = true;
			for ( var column = 0; column < COLUMNS; column++) {
				if (pattern[row][column] === 1) {
					success = success && true;
				} else {
					success = false;
					break;
				}
			}
			if (success) { // return when there a row that wins
				return true;
			}

		}
		return success;
	}

	function checkWinColumn() {
		for ( var column = 0; column < COLUMNS; column++) {
			var success = true;
			for ( var row = 0; row < ROWS; row++) {
				if (pattern[row][column] === 1) {
					success = success && true;
				} else {
					success = false;
					break;
				}
			}
			if (success) { // return when there a column that wins
				return true;
			}

		}
		return success;
	}

function checkWinDiagonal(){
    //var count =0;
    var success = true;
    for(var i=0; i<pattern.length; i++)
    {
      if(pattern[i][pattern.length-i-1] === 1)
      {
         //count++;
          success = success && true;
      }
        else {
            success = false;
        }
    }
alert(success);
    return success;
}
</script>
	<!doctype html>
	<title>Test Test</title>
	<style>
	#stage {
	position: relative;
	}

	.cell {
	position: absolute;
	width: 80px;
	height: 80px;
	border: 1px solid grey;
	background-color: white;
	}
	</style>
	<div id="header">
	Make all panel to the same Color.<br/>
	Steps used: <span id="step">0</span>
	</div>
	<div id="stage"></div>

	<script>
	//Get a reference to the stage
	var stage = document.querySelector("#stage");
	var stepOutput = document.querySelector("#step");
	//The 2D array that defines the pattern
	var pattern = [
	[ 0, 0, 0 ],
	[ 0, 0, 0 ],
	[ 0, 0, 0 ]
	];
	//The size of each cell
	var SIZE = 80;
	//The space between each cell
	var SPACE = 0;
	//Display the array
	var ROWS = pattern.length;
	var COLUMNS = pattern[0].length;

	// user used steps
	var steps = 0;
	render();

	function render() {
	for ( var row = 0; row < ROWS; row++) {
	for ( var column = 0; column < COLUMNS; column++) {
	//Create a div HTML element called cell
	var cell = document.createElement("div");
	var eid = row +"\|"+ column;

	//Set its CSS class to "cell"
	cell.setAttribute("class", "cell");
	cell.setAttribute("id", eid);
	cell.setAttribute("onclick", "nextMove(this.id)");

	//Add the div HTML element to the stage
	stage.appendChild(cell);

	//Make it black if it's a "1"
	if (pattern[row][column] === 1) {
	cell.style.backgroundColor = "black";
	}
	if (pattern[row][column] === 2) {
	cell.style.backgroundColor = "blue";
	}


	//Position the cell in the correct place
	//with 10 pixels of space around it
	cell.style.top = row * (SIZE + SPACE) + "px";
	cell.style.left = column * (SIZE + SPACE) + "px";
	}
	}
	}

	function nextMove(objId) {
	steps = steps+1;
	stepOutput.innerHTML = steps;
	var obj = objId.split("\|");
	var row = parseInt(obj[0]);
	var col = parseInt(obj[1]);

	pattern[row][col] = 1;

	render();
	checkWinLose();
	}

	function checkWinLose() {
	//var win = checkWinColumn() \|\| checkWinRow();
	var win = checkWinDiagonal();
	if (win) {
	alert("success");
	}
	}

	/* check whether have a row that wins */
	function checkWinRow() {
	for ( var row = 0; row < ROWS; row++) {
	var success = true;
	for ( var column = 0; column < COLUMNS; column++) {
	if (pattern[row][column] === 1) {
	success = success && true;
	} else {
	success = false;
	break;
	}
	}
	if (success) { // return when there a row that wins
	return true;
	}

	}
	return success;
	}

	function checkWinColumn() {
	for ( var column = 0; column < COLUMNS; column++) {
	var success = true;
	for ( var row = 0; row < ROWS; row++) {
	if (pattern[row][column] === 1) {
	success = success && true;
	} else {
	success = false;
	break;
	}
	}
	if (success) { // return when there a column that wins
	return true;
	}

	}
	return success;
	}

	function checkWinDiagonal(){
	//var count =0;
	var success = true;
	for(var i=0; i<pattern.length; i++)
	{
	if(pattern[i][pattern.length-i-1] === 1)
	{
	//count++;
	success = success && true;
	}
	else {
	success = false;
	}
	}
	alert(success);
	return success;
	}
	</script>