Untitled

<?xml version="1.0" encoding="utf-8"?>
<html xmlns = "http://www.w3.org/1999/xhtml">
	<head>
		<title>ISM002 Lab10</title>
		<style type="text/css">
			span  { font-size: 3em;
				font-weight: bold;
				font-family: Helvetica, Arial, sans-serif;
				color: blue }
		</style>

		<script type="text/javascript">
			<!--
			var rowsize=5, colsize=5;
			var cells;
			var count=0;
			var gamestatus=0; //0=continue, 1=human won, 2=computer won, 3=drawgame

			//initialize ALL the parameters
			function startgame(){
				clearboard();
				count=0;
				gamestatus=0;
				if (document.setting.whofirst[1].checked==true)
					computerplay();
			}

function setup(){
	cells = new Array( 
			new Array(cell00,cell01,cell02,cell03,cell04),
			new Array(cell10,cell11,cell12,cell13,cell14),
			new Array(cell20,cell21,cell22,cell23,cell24),
			new Array(cell30,cell31,cell32,cell33,cell34),
			new Array(cell40,cell41,cell42,cell43,cell44));
	clearboard();
	document.onclick = processClick;  
}

function clearboard(){
	for(var i=0;i<rowsize;i++)
		for(var j=0;j<colsize;j++)
			cells[i][j].innerText="-";	
}

	function processClick(){
		if (gamestatus!=0)
			window.alert("Game Over!");
		else {
			for(var i=0;i<rowsize;i++)
				for(var j=0;j<colsize;j++){
					if ((cells[i][j].id==window.event.srcElement.id)&&(cells[i][j].innerText=="-")) {
						cells[i][j].innerText="X";
						count++;
						gamestatus=checkwin(i,j);
						if (gamestatus==0)
							computerplay();
						if (gamestatus==1)
							window.alert("You Win");
						if(gamestatus==2)
							window.alert("computer win");
						if(gamestatus==3)
							window.alert("draw game");

					}
				}
		}
		//		window.alert("window.event.srcElement.id="+window.event.srcElement.id +"\n"+"cells[0][0].id="+cells[0][0].id );
	}

//return 0 for continue
//return 1 if human win
//return 2 if computer win
//return 3 if draw game
function checkwin(x,y){

	//human diagonally win

	var win=0, lose=0;
	for(var i=0;i<rowsize;i++){
		var j =0;
		//window.alert(cells[i][y+j].innerText);
		if(cells[i][y+j].innerText=="X"){
			win++;

			//window.alert(win);
			if(win==4)
			{
				return 1;
			}

		}else win =0;
		//if x=0 && you win
		if(cells[i][y+j].innerText=="O"){
			lose++;
			if(lose==4)
			{return 2;}

		}else lose=0;//if 

	}//for rowsize roop 
	win =0;
	win2=0;
	lose=0;
	i=0;
	j=0;

	for(var j=0;j<colsize;j++)
	{

		if(x+j>=0 && x+j<colsize && y+j>=0 && y+j<rowsize ){
			if(cells[x+j][y+j].innerText=="X"){
				win2++;
				if(win2==4)
				{return 1}
			}else win2=0;
		}



		if(cells[i+x][j].innerText=="X"){
			win++;
			if(win==4)
			{return 1}

		}else win =0;
		if(cells[i+x][j].innerText=="O"){
			lose++;
			if(lose==4)
			{return 2}
		}else lose=0;

	}

	var v; 
	v=x+5-y;
	var r;
	r=x+5+y;
	var a;
	a=x;
	var b;
	b=y;
	if(v==5){
		a=0;
		b=0;
	}
	if(v==4){
		a=0;
		b=1;
	}
	if(v==6){
		a=1;
		b=0;
	}
	if(r==8){
	a=0;
	b=3;
	}

	for(a;a<colsize;a++)
	{			
		for(b;b<rowsize;b++)
		{

			if(cells[a][b].innerText=="X"){
				win++;
					if(win==4)
					{return 1;}
			}else win=0;
		}
	}


	var count= 0
		for(var j=0;j<colsize;j++)
			for(var i=0;i<rowsize;i++){
				if(cells[i][j].innerText!="-")
				{
					count++;
					if (count ==25)
						return 3;
				}
			}


	return 0;
}

function computerplay(){
	var k=Math.floor(1+Math.random()*(rowsize*colsize-count));
	for (var row=0;row<rowsize;row++)
		for (var col=0;col<colsize;col++){
			if (cells[row][col].innerText=="-"){
				if (--k==0) {
					i=row;
					j=col;
				}
			}
		}
	cells[i][j].innerText="O";
	count++;
	gamestatus=checkwin(i,j);
}
// -->
</script>
	 </head>

	 <body onload="setup()">
		 <h2>ISM002 Lab10</h2>
		 <form name="setting">
			 <table border="1">
				 <tr>
					 <td><label><input type="radio" name="whofirst" value="1" checked/>Human First</label></td>
					 <td><input type=button value="Start" onclick="startgame()"/></td>
				 </tr>
				 <tr>
					 <td><label><input type="radio" name="whofirst" value="0"/>Computer First</label></td>
				 </tr>
			 </table>
		 </form>

		 <table border="1">
			 <colgroup><col span="5" width="50" align="center" valign="middle" /></colgroup>	
			 <tr>
				 <td><span id = "cell00"></span></td>
				 <td><span id = "cell01"></span></td>
				 <td><span id = "cell02"></span></td>
				 <td><span id = "cell03"></span></td>
				 <td><span id = "cell04"></span></td>
			 </tr>
			 <tr>
				 <td><span id = "cell10"></span></td>
				 <td><span id = "cell11"></span></td>
				 <td><span id = "cell12"></span></td>
				 <td><span id = "cell13"></span></td>
				 <td><span id = "cell14"></span></td>
			 </tr>
			 <tr>
				 <td><span id = "cell20"></span></td>
				 <td><span id = "cell21"></span></td>
				 <td><span id = "cell22"></span></td>
				 <td><span id = "cell23"></span></td>
				 <td><span id = "cell24"></span></td>
			 </tr>
			 <tr>
				 <td><span id = "cell30"></span></td>
				 <td><span id = "cell31"></span></td>
				 <td><span id = "cell32"></span></td>
				 <td><span id = "cell33"></span></td>
				 <td><span id = "cell34"></span></td>
			 </tr>
			 <tr>
				 <td><span id = "cell40"></span></td>
				 <td><span id = "cell41"></span></td>
				 <td><span id = "cell42"></span></td>
				 <td><span id = "cell43"></span></td>
				 <td><span id = "cell44"></span></td>
			 </tr>
		 </table>
	 </body>
 </html>