Untitled

<html>
<head>
<title> Array and Loop Practice </title>
<!-- by James Feng 11/18/2015 -->
<link rel=stylesheet type="text/css" href=gameProjectFeng.css>
</script>
</head>
<body>
	<div class = "gameHeader">
		COLOR GAME
	</div>

	<div class = "gameFooter">
		<a href="gameProjHomePage.html"> Home </a>
	</div>
</body>
</html>

<script type = "text/JavaScript">

	var colorNames = new Array("Alice Blue", "Antique White", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "Blanched Almond", "Blue", "Blue Violet", "Brown", "Burlywood", "Cadet Blue", "Chartreuse", "Chocolate", "Coral", "Cornflower Blue", "Cornsilk", "Crimson", "Cyan", "Dark Blue", "Dark Cyan", "Dark Goldenrod", "Dark Gray", "Dark Green", "Dark Khaki", "Dark Magenta", "Dark Olive Green", "Dark Orange", "Dark Orchid", "Dark Red", "Dark Salmon", "Dark Sea Green", "Dark Slate Blue", "Dark Slate Gray", "Dark Turquoise", "Dark Violet", "Deep Pink", "Deep Sky Blue", "Dim Gray", "Dodger Blue", "Firebrick", "Floral White", "Forest Green", "Fuchsia", "Gainsboro", "Ghost White", "Gold", "Goldenrod", "Gray", "Green", "Green Yellow", "Honeydew", "Hot Pink", "Indian Red", "Indigo", "Ivory", "Khaki", "Lavender", "Lavender Blush", "Lawn Green", "Lemon Chiffon", "Light Blue", "Light Coral", "Light Cyan", "Light Goldenrod", "Light Gray", "Light Green", "Light Pink", "Light Salmon", "Light Sea Green", "Light Sky Blue", "Light Slate Gray", "Light Steel Blue", "Light Yellow", "Lime", "Lime Green", "Linen", "Magenta", "Maroon", "Medium Aquamarine", "Medium Blue", "Medium Orchid", "Medium Purple", "Medium Sea Green", "Medium Slate Blue", "Medium Spring Green", "Medium Turquoise", "Medium Violet Red", "Midnight Blue", "Mint Cream", "Misty Rose", "Moccasin", "Navajo White", "Navy", "Old Lace", "Olive", "Olive Drab", "Orange", "Orangered", "Orchid", "Pale Goldenrod", "Pale Green", "Pale Turquoise", "Pale Violet Red", "Papaya Whip", "Peach Puff", "Peru", "Pink", "Plum", "Powder Blue", "Purple", "Rebecca Purple", "Red", "Rosy Brown", "Royal Blue", "Saddle Brown", "Salmon", "Sandy Brown", "Sea Green", "Sea Shell", "Sienna", "Silver", "Sky Blue", "Slate Blue", "Slate Gray", "Snow", "Spring Green", "Steel Blue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "White Smoke", "Yellow", "Yellow Green");
	var colorIds = new Array('#F0F8FF', '#FAEBD7', '#00FFFF', '#7FFFD4', '#F0FFFF', '#F5F5DC', '#FFE4C4', '#000000', '#FFEBCD', '#0000FF', '#8A2BE2', '#A52A2A', '#DEB887', '#5F9EA0', '#7FFF00', '#D2691E', '#FF7F50', '#6495ED', '#FFF8DC', '#DC143C', '#00FFFF', '#00008B', '#008B8B', '#B8860B', '#A9A9A9', '#006400', '#BDB76B', '#8B008B', '#556B2F', '#FF8C00', '#9932CC', '#8B0000', '#E9967A', '#8FBC8F', '#483D8B', '#2F4F4F', '#00CED1', '#9400D3', '#FF1493', '#00BFFF', '#696969', '#1E90FF', '#B22222', '#FFFAF0', '#228B22', '#FF00FF', '#DCDCDC', '#F8F8FF', '#FFD700', '#DAA520', '#808080', '#008000', '#ADFF2F', '#F0FFF0', '#FF69B4', '#CD5C5C', '#4B0082', '#FFFFF0', '#F0E68C', '#E6E6FA', '#FFF0F5', '#7CFC00', '#FFFACD', '#ADD8E6', '#F08080', '#E0FFFF', '#FAFAD2', '#D3D3D3', '#90EE90', '#FFB6C1', '#FFA07A', '#20B2AA', '#87CEFA', '#778899', '#B0C4DE', '#FFFFE0', '#00FF00', '#32CD32', '#FAF0E6', '#FF00FF', '#800000', '#66CDAA', '#0000CD', '#BA55D3', '#9370DB', '#3CB371', '#7B68EE', '#00FA9A', '#48D1CC', '#C71585', '#191970', '#F5FFFA', '#FFE4E1', '#FFE4B5', '#FFDEAD', '#000080', '#FDF5E6', '#808000', '#6B8E23', '#FFA500', '#FF4500', '#DA70D6', '#EEE8AA', '#98FB98', '#AFEEEE', '#DB7093', '#FFEFD5', '#FFDAB9', '#CD853F', '#FFC0CB', '#DDA0DD', '#B0E0E6', '#800080', '#663399', '#FF0000', '#BC8F8F', '#4169E1', '#8B4513', '#FA8072', '#F4A460', '#2E8B57', '#FFF5EE', '#A0522D', '#C0C0C0', '#87CEEB', '#6A5ACD', '#708090', '#FFFAFA', '#00FF7F', '#4682B4', '#D2B48C', '#008080', '#D8BFD8', '#FF6347', '#40E0D0', '#EE82EE', '#F5DEB3', '#FFFFFF', '#F5F5F5', '#FFFF00', '#9ACD32');

	var numColors;
	var randomIdsArray = [];
	var points = 0;

	function promptNumColors() {
		var x = prompt("How many colors would you like to play with?");
		numColors = parseInt(x);
	}

	function alertTooMany() {
		var answer = confirm ("Please input a number less than or equal to 140.") ;

		if(answer){
			window.location="gameProjGamePage.html";
		}
	}

	function alertZero() {
		var answer = confirm ("Please input a number larger than 0.") ;

		if(answer){
			window.location="gameProjGamePage.html";
		}
	}

	function generateRandomId() {

		randomIdsArray = [];
		var min = 0;
		var max = 140;

		while(randomIdsArray.length < numColors){

				var randomId = Math.floor(Math.random() * (max - min + 1) + min);
				var found = false;
					for(var i = 0; i < randomIdsArray.length; i++){
						if(randomIdsArray[i] == randomId){
							found = true;
							break;
						}
					}

			    if(!found)randomIdsArray[randomIdsArray.length] = randomId;
		}

		return randomIdsArray;
	}

	function loadGamePage() {
		if(numColors > 140) {
			alertTooMany();
		}

		else if(numColors == 0) {
			alertZero();
		}

		else {
			generateDivs();
		}
	}

	function generateDivs() {

		var randomIdGenerated = generateRandomId();
		var randomColorFromArray = Math.floor(Math.random() * (numColors - 1 - 0 + 1) + 0);

		var colorToClick = document.createElement("div");
		colorToClick.style.width = "100%";
		colorToClick.style.height = "40px";
		colorToClick.style.cssFloat = "left";
		colorToClick.style.background = "#484848";
		colorToClick.style.color = "white";
		colorToClick.style.textAlign = "center";
		colorToClick.style.lineHeight = "40px";
		colorToClick.style.fontFamily = "Gill Sans";
		document.body.appendChild(colorToClick);


		for(i = 0; i < numColors; i++) {

			var div = document.createElement("div");
			div.style.width = 100/numColors + "%";
			div.style.height = "calc(100% - (75px + 50px + 40px + 40px))";
			div.style.cssFloat = "left";
			div.style.background = colorIds[randomIdGenerated[i]];

			if(colorNames[randomIdGenerated[i]] == colorNames[randomIdGenerated[randomColorFromArray]]) {
				div.onclick = addPoints;
			}
			else {
				div.onclick = subtractPoints;
			}

			document.body.appendChild(div);

		}

		//MAKE THIS CHOOSE A RANDOM NUMBER BETWEEN 0 AND THE SIZE OF THE ARRAY.
		//RIGHT NOW, IT ALWAYS IS THE FIRST OPTION.

		colorToClick.innerHTML = colorNames[randomIdGenerated[randomColorFromArray]];

		var numPointsDiv = document.createElement("div");
		numPointsDiv.style.width = "100%";
		numPointsDiv.style.height = "40px";
		numPointsDiv.style.cssFloat = "left";
		numPointsDiv.style.background = "#484848";
		numPointsDiv.style.color = "white";
		numPointsDiv.style.textAlign = "center";
		numPointsDiv.style.lineHeight = "40px";
		numPointsDiv.innerHTML = "Points: " + points;
		numPointsDiv.style.fontFamily = "Gill Sans";
		document.body.appendChild(numPointsDiv);
	}

	function addPoints() {
		points += 100;
		generateDivs();
	}

	function subtractPoints() {
		points -= 50;
		generateDivs();
	}

	promptNumColors();
	loadGamePage();

</script>