Same Game V2

by alirizaadiyahsi

HTML

<div class="board" id="board">
		
		</div>
		<h1>Same Game</h1>
		<input type="button" id="newGame" class="button" value="New Game" /><br/>
		<input type="button" id="replayGame" class="button" value="Replay Game" />
		<br/><br/>

CSS

.cell {
	text-align: center;
	border: 3px gray ridge;
	font: bold 24px Times New Roman,Georgia,Serif;
	width: 25px;
	height: 25px;
	position: absolute;
	color: black;
	cursor: default;
}

.tableCell {
	text-align: center;
	border: 3px gray ridge;
	font: bold 24px Times New Roman,Georgia,Serif;
	width: 25px;
	height: 25px;
	color: black;
}

.board {
	border: 10px brown ridge;
	background-image: url("board_back.gif");
	background-repeat: repeat;
	position: absolute;
	width: 1046px;
	height: 495px;
	left: 200px;
		
}

.gamePoints {
	text-align: center;
	background-color: black;
	color:lime;
	border: 2px gray ridge;
	width: 180px;
	height: 60px;
	font: bold 50px Score Board,Times New Roman,Georgia,Serif;
}

.button{
	background-color: PaleTurquoise;
	outline: lightskyblue inset 1px;
	width: 180px;
	height: 35px;
}

JavaScript

TILE_COLORS = {0:"#0B03FF",1:"#FF0B03",2:"#FF00FF",3:"#FFF703",4:"#05FFF7"};
TILE_LETTERS = {0:"A",1:"B",2:"C",3:"D",4:"E"};
BOARD_WIDTH = 36;
BOARD_HEIGHT = 17;
gamePoints = 0;
onSelection = false;
gameSet = false;
curColorIndex = -1;

window.onload = initApp;

function initApp(){
	
	setUI();
	loadCells();
	newGame();
}

function setUI(){
	
	var replayButton = document.getElementById("replayGame");
	var newButton = document.getElementById("newGame");
	replayButton.setAttribute("onclick","replayGame();");
	newButton.setAttribute("onclick","newGame();");
	
	var body = document.getElementsByTagName("body");
	var table = document.createElement("table");
	table.setAttribute("style","width:180px;border: 2px gray ridge;background-image:url('oel.png');background-size:100%");
	body[0].appendChild(table);
	
	for (var i=0; i < 5; i++){
		
		var row = document.createElement("tr");
		
		var col1 = document.createElement("td");
			col1.setAttribute("style","width:30px;");
			var tile = document.createElement("div");
				tile.setAttribute("class","tableCell");
				tile.setAttribute("style","background-color:" + TILE_COLORS[i] + ";");
				tile.innerHTML = TILE_LETTERS[i];
			col1.appendChild(tile);
		
		var col2 = document.createElement("td");
			col2.setAttribute("style","width:150px;")
			var initialTileCount = document.createElement("span");
				initialTileCount.setAttribute("id","initialTileCount" + i);
				initialTileCount.setAttribute("style","color:" + TILE_COLORS[i] + "; background-color:black;");
			col2.appendChild(initialTileCount);

			var currentTileCount = document.createElement("span");
				currentTileCount.setAttribute("id","currentTileCount" + i);
				currentTileCount.setAttribute("style","color:black;background-color:white;");
			col2.appendChild(currentTileCount);
			
			var tileSelection = document.createElement("span");
				tileSelection.setAttribute("id","tileSelection" +...