sirkraigers/gist:4010415

## gistfile1.js
<html>
 <head>
 <style>
	body {background-image:url('http://hunternuttall.com/blog/wp-content/uploads/2010/01/connect-four.jpg');
	      background-size: 992px 668px;
	      background-repeat:no-repeat;
	      background-position: 185px 50px;
	      }
</style>
	<script type="application/javascript">


	var Empty = 0;
	var Red = 1;
	var Black = 2;
    var blocking = false;
	var canvas;

	var ColorNames = new Array(3);
	ColorNames[0] = "Empty";
	ColorNames[1] = "Red";
	ColorNames[2] = "Black";

var board = new Array(6);
function boardInit()
{
 for(var i = 0 ; i < 6 ; ++i)
  {
   board[i] = new Array(7);
   for(var j = 0 ; j < 7 ; ++j)
    board[i][j] = Empty;
  }

  canvas = document.getElementById("canvas");

}

function boardDraw()
{
 for(var i = 0; i < 6 ; ++i)
  for(var j = 0 ; j < 7 ; ++j)
  {
   draw(j, i, board[i][j] );
  }
}


function draw(x,y,state)
{
 var ctx = canvas.getContext ("2d");

var px = 76*x;
var py = 76*y;

ctx.fillStyle = ("#FFFF00");
ctx.fillRect (px, py, 76, 76);

switch(state)
{
 case Empty: ctx.fillStyle = "rgba(255,255,255,1)"; break;
 case Red: ctx.fillStyle = "rgba(230,0,0,1)"; break;
 case Black: ctx.fillStyle = "rgba(0,0,0,1)"; break;
}

ctx.beginPath();
ctx.arc(px+38,py+38,30,0,2*Math.PI);
ctx.fill();

ctx.strokeStyle = ("#BDDD0B");
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(px+38,py+38,30,0,2*Math.PI);
ctx.stroke();
}

 function Init()
 {

/*var canvas = document.getElementById("canvas");
 alert(canvas);
 alert(canvas.getBoundingClientRect().top);
 alert(canvas.getBoundingClientRect().left);*/

 boardInit();
  boardDraw();

  /*
  fall(0);
  fall(1);
  fall(2);
  fall(3);
  fall(4);
  fall(5);
  fall(6);
  */
 }

 function fall(x)
 {
    boardDraw();
    setTimeout("actualfall("+x+",0)",500);
 }

 function actualfall(x,i)
 {
   if(i < 5 && board[i+1][x] == Empty)
   {
    board[i+1][x] = board[i][x];
	board[i][x] = Empty;
	setTimeout("actualfall("+x+","+(i+1)+")",300);
   }
   else
   {
	canvas.onmousemove = move;
	canvas.onclick = play;
	check(i);
   }
   boardDraw();
 }
	var block = false;

	function check(played_row)
	{
	if(played_row <= 2) // Vertical check
	{
	 if (board[played_row][played_position] == played_color &&
		 board[played_row+1][played_position] == played_color &&
		 board[played_row+2][played_position] == played_color &&
		 board[played_row+3][played_position] == played_color )
		{
		 alert(ColorNames[played_color] + " Wins!");
		}
	}

	var j = 1;
	var k = 1;

	while(played_position + j < 7 && board[played_row][played_position + j] == played_color) {++j};
    while(played_position - k >= 0 && board[played_row][played_position - k] == played_color) {++k};
	if(j+k-1 >= 4)
	{
	 alert(ColorNames[played_color] + " Wins!");
	}

	var j = 1;
	var k = 1;

    while(played_position + j < 7 && played_row + j < 6 && board[played_row + j][played_position + j] == played_color) {++j};
    while(played_position - k >= 0 && board[played_row - k][played_position - k] == played_color) {++k};
	if(j+k-1 >= 4)
	{
	 alert(ColorNames[played_color] + " Wins!");
	}

	//HELP HERE
	var j = 1;
	var k = 1;

    while(played_position - k >= 0 && played_row - k >= 0 && board[played_row - k][played_position + k] == played_color) {++k};
	while(played_position + j < 7 && played_row + j < 6 && board[played_row + j][played_position - j] == played_color) {++j};
	//alert(j);
	//alert(k);
	//HELP HERE

	}


	var player_position = -1;
	var player_color = Black;
    var played_position = -1;
	var played_color = Empty;

	function do_nothing()
	{

	}

	function play()
	{
	 if(player_position < 0)
	  return;

	 canvas.onmousemove = null;
	 canvas.onclick = do_nothing;
 	 played_position = player_position;
	 player_position = -1;

	 played_color = player_color;
	 switch(player_color)
	 {
	  case Red: player_color = Black; break;
	  case Black: player_color = Red; break;
	  case Empty: alert("Problem!"); break;
	 }

     actualfall(played_position,0);

	}


	function move(e)
	{
	if(!e)
		{
			e = window.event;
		}
		var mx = e.clientX;
		mx = mx - canvas.getBoundingClientRect().left;
		var j = e.clientX - canvas.getBoundingClientRect().left;

        if(player_position >= 0)
        {
		 board[0][player_position] = Empty;
        }

        player_position = Math.floor(j/76);
		if(board[0][player_position] == Empty)
		{
		 board[0][player_position] = player_color;
		 boardDraw();
		}
		else player_position = -1;
	}


	</script>
  </head>
  <body onload="Init();">
  <center>
  <h1>Connect Four</h1>
  <h2>Kraig McGee, Mitchell Silverman, Gino Maneri </h2>
	<canvas id="canvas" width="532" height="456" onmousemove="move();" onclick="play();"> </canvas>
  </center>
 </body>
</html>
	<html>
	<head>
	<style>
	body {background-image:url('http://hunternuttall.com/blog/wp-content/uploads/2010/01/connect-four.jpg');
	background-size: 992px 668px;
	background-repeat:no-repeat;
	background-position: 185px 50px;
	}
	</style>
	<script type="application/javascript">


	var Empty = 0;
	var Red = 1;
	var Black = 2;
	var blocking = false;
	var canvas;

	var ColorNames = new Array(3);
	ColorNames[0] = "Empty";
	ColorNames[1] = "Red";
	ColorNames[2] = "Black";

	var board = new Array(6);
	function boardInit()
	{
	for(var i = 0 ; i < 6 ; ++i)
	{
	board[i] = new Array(7);
	for(var j = 0 ; j < 7 ; ++j)
	board[i][j] = Empty;
	}

	canvas = document.getElementById("canvas");

	}

	function boardDraw()
	{
	for(var i = 0; i < 6 ; ++i)
	for(var j = 0 ; j < 7 ; ++j)
	{
	draw(j, i, board[i][j] );
	}
	}


	function draw(x,y,state)
	{
	var ctx = canvas.getContext ("2d");

	var px = 76*x;
	var py = 76*y;

	ctx.fillStyle = ("#FFFF00");
	ctx.fillRect (px, py, 76, 76);

	switch(state)
	{
	case Empty: ctx.fillStyle = "rgba(255,255,255,1)"; break;
	case Red: ctx.fillStyle = "rgba(230,0,0,1)"; break;
	case Black: ctx.fillStyle = "rgba(0,0,0,1)"; break;
	}

	ctx.beginPath();
	ctx.arc(px+38,py+38,30,0,2*Math.PI);
	ctx.fill();

	ctx.strokeStyle = ("#BDDD0B");
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(px+38,py+38,30,0,2*Math.PI);
	ctx.stroke();
	}

	function Init()
	{

	/*var canvas = document.getElementById("canvas");
	alert(canvas);
	alert(canvas.getBoundingClientRect().top);
	alert(canvas.getBoundingClientRect().left);*/

	boardInit();
	boardDraw();

	/*
	fall(0);
	fall(1);
	fall(2);
	fall(3);
	fall(4);
	fall(5);
	fall(6);
	*/
	}

	function fall(x)
	{
	boardDraw();
	setTimeout("actualfall("+x+",0)",500);
	}

	function actualfall(x,i)
	{
	if(i < 5 && board[i+1][x] == Empty)
	{
	board[i+1][x] = board[i][x];
	board[i][x] = Empty;
	setTimeout("actualfall("+x+","+(i+1)+")",300);
	}
	else
	{
	canvas.onmousemove = move;
	canvas.onclick = play;
	check(i);
	}
	boardDraw();
	}
	var block = false;

	function check(played_row)
	{
	if(played_row <= 2) // Vertical check
	{
	if (board[played_row][played_position] == played_color &&
	board[played_row+1][played_position] == played_color &&
	board[played_row+2][played_position] == played_color &&
	board[played_row+3][played_position] == played_color )
	{
	alert(ColorNames[played_color] + " Wins!");
	}
	}

	var j = 1;
	var k = 1;

	while(played_position + j < 7 && board[played_row][played_position + j] == played_color) {++j};
	while(played_position - k >= 0 && board[played_row][played_position - k] == played_color) {++k};
	if(j+k-1 >= 4)
	{
	alert(ColorNames[played_color] + " Wins!");
	}

	var j = 1;
	var k = 1;

	while(played_position + j < 7 && played_row + j < 6 && board[played_row + j][played_position + j] == played_color) {++j};
	while(played_position - k >= 0 && board[played_row - k][played_position - k] == played_color) {++k};
	if(j+k-1 >= 4)
	{
	alert(ColorNames[played_color] + " Wins!");
	}

	//HELP HERE
	var j = 1;
	var k = 1;

	while(played_position - k >= 0 && played_row - k >= 0 && board[played_row - k][played_position + k] == played_color) {++k};
	while(played_position + j < 7 && played_row + j < 6 && board[played_row + j][played_position - j] == played_color) {++j};
	//alert(j);
	//alert(k);
	//HELP HERE

	}


	var player_position = -1;
	var player_color = Black;
	var played_position = -1;
	var played_color = Empty;

	function do_nothing()
	{

	}

	function play()
	{
	if(player_position < 0)
	return;

	canvas.onmousemove = null;
	canvas.onclick = do_nothing;
	played_position = player_position;
	player_position = -1;

	played_color = player_color;
	switch(player_color)
	{
	case Red: player_color = Black; break;
	case Black: player_color = Red; break;
	case Empty: alert("Problem!"); break;
	}

	actualfall(played_position,0);

	}


	function move(e)
	{
	if(!e)
	{
	e = window.event;
	}
	var mx = e.clientX;
	mx = mx - canvas.getBoundingClientRect().left;
	var j = e.clientX - canvas.getBoundingClientRect().left;

	if(player_position >= 0)
	{
	board[0][player_position] = Empty;
	}

	player_position = Math.floor(j/76);
	if(board[0][player_position] == Empty)
	{
	board[0][player_position] = player_color;
	boardDraw();
	}
	else player_position = -1;
	}


	</script>
	</head>
	<body onload="Init();">
	<center>
	<h1>Connect Four</h1>
	<h2>Kraig McGee, Mitchell Silverman, Gino Maneri </h2>
	<canvas id="canvas" width="532" height="456" onmousemove="move();" onclick="play();"> </canvas>
	</center>
	</body>
	</html>