tonyromarock/QueenGame.html

## QueenGame.html
<!DOCTYPE html>
<html>
<head>
	<link href='https://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
    <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
    <script>
    	var stage;
    	var chessBoard = [];
    	var Reds = [];	// holds the index of the red marked fields

    	var Queens = [];
    	var Queen_locations = [];	// store where the queen was placed on the board (numerate the board from the top left)
    	var Queen_counter = 0;


    	var tile_size = 35;			// size of a tile in pixels

    	// some of the unusual colors
    	var dark_red = "#8C2424";
    	var light_red = "#DE4747";


        function init() {
            stage = new createjs.Stage("demoCanvas");
            stage.enableMouseOver(10);
            displayBoard();


			for(var i = 0; i < chessBoard.length; i++)
			{
				chessBoard[i].on("mouseover", colorHover);
				chessBoard[i].on("mouseout", colorHover);
				chessBoard[i].addEventListener("click", placeQueen);
			}

			// UNDO Button

			var UNDO = new createjs.Text("UNDO", "30px Impact", "black");
			UNDO.x = 300;
			UNDO.y = 50;
			// add a hit box to UNDO
			var hit = new createjs.Shape();
			hit.graphics.beginFill("#000").drawRect(0,0,UNDO.getMeasuredWidth(), UNDO.getMeasuredHeight());
			UNDO.hitArea = hit;

			UNDO.on("mouseover", colorHover);
			UNDO.on("mouseout", colorHover);
			UNDO.addEventListener("click", undoMove);

			stage.addChild(UNDO);

			// A counter display
			var COUNT = new createjs.Text(Queen_counter.toString(), "30px Impact", "black");
			COUNT.x = 300;
			COUNT.y = 100;
			stage.addChild(COUNT);

			stage.update();
			createjs.Ticker.addEventListener("tick", stage);


			// additional functions

			function colorHover(event) {
		    	event.target.alpha = (event.type == "mouseover") ? 0.6 : 1;
			}

			function placeQueen(event)
			{
				x = event.stageX;
				y = event.stageY;
				// figure on which tile the queen should be placed on
				tileX = Math.floor(x / tile_size);
				tileY = Math.floor(y / tile_size);

				// alert("Clicked at " + tileX + " , " + tileY);

				drawQueen(tileX*tile_size, tileY*tile_size);
			}

			function undoMove()
			{
				if(Queens.length > 0)
				{
					stage.removeChild(Queens[Queens.length-1])
					Queens.splice(Queens.length-1,1);
					Queen_counter--;
					COUNT.text = Queen_counter.toString();
				}

				// first clear all the Reds
				clearReds();
				// redraw the Reds
				for(var i = 0; i < Queens.length; i++)
				{
					tileX = Math.floor(Queens[i].x / tile_size);
					tileY = Math.floor(Queens[i].y / tile_size);
					addReds(tileX,tileY);
				}

				drawBorder();

			}

			function displayBoard()
			{

				for(var i = 0; i < 64; i++)
				{
					// counting the top left as (0,0)
					// left to right each line (then top two bottom from line to line)
					x = i % 8;
					y = Math.floor(i/8);

					var tile = new createjs.Shape();

					if(((x + y) % 2) == 1)
					{
						tile.graphics.beginFill("black").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					} else {
						tile.graphics.beginFill("#C6CACC").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					}

					chessBoard.push(tile);
					stage.addChild(chessBoard[i]);
					stage.setChildIndex( tile, stage.getNumChildren()-1);
				}

				drawBorder();

			}

			function drawBorder()
			{
				// Draw the border lines
				var border = new createjs.Shape();
				border.graphics.setStrokeStyle(3).beginStroke("black").moveTo(0,0).lineTo(280,0).lineTo(280,280).lineTo(0,280).lineTo(0,0).endStroke();
				stage.addChild(border);
			}

			function drawQueen(x, y)
			{
				if(!checkTile(x,y)) {
					return;
				}

				var queen = new createjs.Bitmap("Queen_transparent(37x38).png");
				queen.x = x;
				queen.y = y;
				stage.addChild(queen);
				Queens.push(queen);
				addReds(tileX,tileY);	// mark tiles red

				// update the counter
				Queen_counter++;
				COUNT.text = Queen_counter.toString();
				checkWinConditions();
			}

			function displayWarning(text)
			{
				var warning = new createjs.Text(text, "15px Impact", "red");
					warning.x = 300;
					warning.y = 150;
					stage.addChild(warning);

				setTimeout(function(){stage.removeChild(warning)},2000);
			}


			function checkTile(x, y)
			{
				// check if a queen is already placed at that position
				for(var i = 0; i < Queens.length; i++)
				{
					if(Queens[i].x === x && Queens[i].y === y) {
						//alert("Already placed a Queen there!");
						displayWarning("Already placed a queen there!");
						return false;
					}
				}


				// check if the tile is red
				tileX = Math.floor(x / tile_size);
				tileY = Math.floor(y / tile_size);
				idx = CoordToIndex(tileX,tileY);

				//DEBUG
				//alert(Reds.join('\n')+'\nIdx: ' + idx)

				for(var i = 0; i < Reds.length; i++) {
					if(idx === Reds[i])
					{
						//alert("This tile is red!");
						displayWarning("This tile is red!");
						return false;
					}
				}


				return true;
			}

			// color the forbidden fields red
			// parameters: 	x - x position of the newly placed Queen
			// 				y - y position of the newly placed Queen
			function addReds(x, y)
			{
				// index of the queen
				q_idx = CoordToIndex(x,y);

				// add red horizontally
				for(var i = Math.floor((q_idx-1)/8)*8 +1; i <= (Math.floor((q_idx-1)/8)+1)*8; i++)
				{
					if(i !== q_idx)
					{
						Reds.push(i);
					}
				}

				// add red vertically
				for(var i = q_idx % 8; i < 65; i += 8) {
					if(i !== q_idx)
					{
						Reds.push(i);
					}
				}

				// add red across

				// top left and bottom right
				i = x-1; j = y-1;
				while(i > -1 && j > -1) {
					Reds.push(CoordToIndex(i,j));
					i--; j--;
				}
				i = x+1; j = y+1;
				while(i < 8 && j < 8) {
					Reds.push(CoordToIndex(i,j));
					i++;j++;
				}

				// top right and bottom left
				i = x-1; j = y+1;
				while(i > -1 && j < 8) {
					Reds.push(CoordToIndex(i,j));
					i--;j++;
				}
				i = x+1; j = y-1;
				while(i < 8 && j > -1) {
					Reds.push(CoordToIndex(i,j));
					i++;j--;
				}

				// draw Reds again
				drawReds();
			}

			function drawReds()
			{
				for(var i = 0; i < Reds.length; i++) {
					x = IndexToXCoord(Reds[i]);
					y = IndexToYCoord(Reds[i]);
					tile = new createjs.Shape();
					if(((x + y) % 2) == 1) {
						tile.graphics.beginFill(dark_red).drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					} else {
						tile.graphics.beginFill(light_red).drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					}
					stage.addChild(tile);
				}

				drawBorder();
			}

			function clearReds()
			{
				for(var i = 0; i < Reds.length; i++) {
					x = IndexToXCoord(Reds[i]);
					y = IndexToYCoord(Reds[i]);
					tile = new createjs.Shape();

					if(((x + y) % 2) == 1)
					{
						tile.graphics.beginFill("black").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					} else {
						tile.graphics.beginFill("#C6CACC").drawRect(x*tile_size,y*tile_size,tile_size,tile_size);
					}

					stage.addChild(tile);
				}

				Reds = [];
			}


			function CoordToIndex(x,y) { return y * 8 + x + 1;}

			function IndexToXCoord(idx) {return (idx-1) % 8;}

			function IndexToYCoord(idx) {return Math.floor((idx-1) / 8);}

			function checkWinConditions()
			{
				if(Queen_counter == 8)
				{
					var win_text = new createjs.Text("Congrats, you've solved\nthe 8 Queens Puzzle!", "20px Impact", "green");
					win_text.x = 300;
					win_text.y = 180;
					stage.addChild(win_text);
					var success = new createjs.Bitmap("great_success.jpg");
					success.x = 300;
					success.y = 50;
					stage.addChild(success);
				}
			}


        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="400">
        alternate content
    </canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href='https://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
	<script>
	var stage;
	var chessBoard = [];
	var Reds = []; // holds the index of the red marked fields

	var Queens = [];
	var Queen_locations = []; // store where the queen was placed on the board (numerate the board from the top left)
	var Queen_counter = 0;


	var tile_size = 35; // size of a tile in pixels

	// some of the unusual colors
	var dark_red = "#8C2424";
	var light_red = "#DE4747";


	function init() {
	stage = new createjs.Stage("demoCanvas");
	stage.enableMouseOver(10);
	displayBoard();


	for(var i = 0; i < chessBoard.length; i++)
	{
	chessBoard[i].on("mouseover", colorHover);
	chessBoard[i].on("mouseout", colorHover);
	chessBoard[i].addEventListener("click", placeQueen);
	}

	// UNDO Button

	var UNDO = new createjs.Text("UNDO", "30px Impact", "black");
	UNDO.x = 300;
	UNDO.y = 50;
	// add a hit box to UNDO
	var hit = new createjs.Shape();
	hit.graphics.beginFill("#000").drawRect(0,0,UNDO.getMeasuredWidth(), UNDO.getMeasuredHeight());
	UNDO.hitArea = hit;

	UNDO.on("mouseover", colorHover);
	UNDO.on("mouseout", colorHover);
	UNDO.addEventListener("click", undoMove);

	stage.addChild(UNDO);

	// A counter display
	var COUNT = new createjs.Text(Queen_counter.toString(), "30px Impact", "black");
	COUNT.x = 300;
	COUNT.y = 100;
	stage.addChild(COUNT);

	stage.update();
	createjs.Ticker.addEventListener("tick", stage);


	// additional functions

	function colorHover(event) {
	event.target.alpha = (event.type == "mouseover") ? 0.6 : 1;
	}

	function placeQueen(event)
	{
	x = event.stageX;
	y = event.stageY;
	// figure on which tile the queen should be placed on
	tileX = Math.floor(x / tile_size);
	tileY = Math.floor(y / tile_size);

	// alert("Clicked at " + tileX + " , " + tileY);

	drawQueen(tileXtile_size, tileYtile_size);
	}

	function undoMove()
	{
	if(Queens.length > 0)
	{
	stage.removeChild(Queens[Queens.length-1])
	Queens.splice(Queens.length-1,1);
	Queen_counter--;
	COUNT.text = Queen_counter.toString();
	}

	// first clear all the Reds
	clearReds();
	// redraw the Reds
	for(var i = 0; i < Queens.length; i++)
	{
	tileX = Math.floor(Queens[i].x / tile_size);
	tileY = Math.floor(Queens[i].y / tile_size);
	addReds(tileX,tileY);
	}

	drawBorder();

	}

	function displayBoard()
	{

	for(var i = 0; i < 64; i++)
	{
	// counting the top left as (0,0)
	// left to right each line (then top two bottom from line to line)
	x = i % 8;
	y = Math.floor(i/8);

	var tile = new createjs.Shape();

	if(((x + y) % 2) == 1)
	{
	tile.graphics.beginFill("black").drawRect(xtile_size,ytile_size,tile_size,tile_size);
	} else {
	tile.graphics.beginFill("#C6CACC").drawRect(xtile_size,ytile_size,tile_size,tile_size);
	}

	chessBoard.push(tile);
	stage.addChild(chessBoard[i]);
	stage.setChildIndex( tile, stage.getNumChildren()-1);
	}

	drawBorder();

	}

	function drawBorder()
	{
	// Draw the border lines
	var border = new createjs.Shape();
	border.graphics.setStrokeStyle(3).beginStroke("black").moveTo(0,0).lineTo(280,0).lineTo(280,280).lineTo(0,280).lineTo(0,0).endStroke();
	stage.addChild(border);
	}

	function drawQueen(x, y)
	{
	if(!checkTile(x,y)) {
	return;
	}

	var queen = new createjs.Bitmap("Queen_transparent(37x38).png");
	queen.x = x;
	queen.y = y;
	stage.addChild(queen);
	Queens.push(queen);
	addReds(tileX,tileY); // mark tiles red

	// update the counter
	Queen_counter++;
	COUNT.text = Queen_counter.toString();
	checkWinConditions();
	}

	function displayWarning(text)
	{
	var warning = new createjs.Text(text, "15px Impact", "red");
	warning.x = 300;
	warning.y = 150;
	stage.addChild(warning);

	setTimeout(function(){stage.removeChild(warning)},2000);
	}


	function checkTile(x, y)
	{
	// check if a queen is already placed at that position
	for(var i = 0; i < Queens.length; i++)
	{
	if(Queens[i].x === x && Queens[i].y === y) {
	//alert("Already placed a Queen there!");
	displayWarning("Already placed a queen there!");
	return false;
	}
	}


	// check if the tile is red
	tileX = Math.floor(x / tile_size);
	tileY = Math.floor(y / tile_size);
	idx = CoordToIndex(tileX,tileY);

	//DEBUG
	//alert(Reds.join('\n')+'\nIdx: ' + idx)

	for(var i = 0; i < Reds.length; i++) {
	if(idx === Reds[i])
	{
	//alert("This tile is red!");
	displayWarning("This tile is red!");
	return false;
	}
	}


	return true;
	}

	// color the forbidden fields red
	// parameters: x - x position of the newly placed Queen
	// y - y position of the newly placed Queen
	function addReds(x, y)
	{
	// index of the queen
	q_idx = CoordToIndex(x,y);

	// add red horizontally
	for(var i = Math.floor((q_idx-1)/8)8 +1; i <= (Math.floor((q_idx-1)/8)+1)8; i++)
	{
	if(i !== q_idx)
	{
	Reds.push(i);
	}
	}

	// add red vertically
	for(var i = q_idx % 8; i < 65; i += 8) {
	if(i !== q_idx)
	{
	Reds.push(i);
	}
	}

	// add red across

	// top left and bottom right
	i = x-1; j = y-1;
	while(i > -1 && j > -1) {
	Reds.push(CoordToIndex(i,j));
	i--; j--;
	}
	i = x+1; j = y+1;
	while(i < 8 && j < 8) {
	Reds.push(CoordToIndex(i,j));
	i++;j++;
	}

	// top right and bottom left
	i = x-1; j = y+1;
	while(i > -1 && j < 8) {
	Reds.push(CoordToIndex(i,j));
	i--;j++;
	}
	i = x+1; j = y-1;
	while(i < 8 && j > -1) {
	Reds.push(CoordToIndex(i,j));
	i++;j--;
	}

	// draw Reds again
	drawReds();
	}

	function drawReds()
	{
	for(var i = 0; i < Reds.length; i++) {
	x = IndexToXCoord(Reds[i]);
	y = IndexToYCoord(Reds[i]);
	tile = new createjs.Shape();
	if(((x + y) % 2) == 1) {
	tile.graphics.beginFill(dark_red).drawRect(xtile_size,ytile_size,tile_size,tile_size);
	} else {
	tile.graphics.beginFill(light_red).drawRect(xtile_size,ytile_size,tile_size,tile_size);
	}
	stage.addChild(tile);
	}

	drawBorder();
	}

	function clearReds()
	{
	for(var i = 0; i < Reds.length; i++) {
	x = IndexToXCoord(Reds[i]);
	y = IndexToYCoord(Reds[i]);
	tile = new createjs.Shape();

	if(((x + y) % 2) == 1)
	{
	tile.graphics.beginFill("black").drawRect(xtile_size,ytile_size,tile_size,tile_size);
	} else {
	tile.graphics.beginFill("#C6CACC").drawRect(xtile_size,ytile_size,tile_size,tile_size);
	}

	stage.addChild(tile);
	}

	Reds = [];
	}


	function CoordToIndex(x,y) { return y * 8 + x + 1;}

	function IndexToXCoord(idx) {return (idx-1) % 8;}

	function IndexToYCoord(idx) {return Math.floor((idx-1) / 8);}

	function checkWinConditions()
	{
	if(Queen_counter == 8)
	{
	var win_text = new createjs.Text("Congrats, you've solved\nthe 8 Queens Puzzle!", "20px Impact", "green");
	win_text.x = 300;
	win_text.y = 180;
	stage.addChild(win_text);
	var success = new createjs.Bitmap("great_success.jpg");
	success.x = 300;
	success.y = 50;
	stage.addChild(success);
	}
	}



	}
	</script>
	</head>
	<body onload="init();">
	<canvas id="demoCanvas" width="500" height="400">
	alternate content
	</canvas>
	</body>
	</html>