topical media & game development
sample-js-color.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>eyehook - games : COLOR box</title>
<meta name="description" content="COLOR box: a color theory puzzle game (requires javascript)">
<style type="text/css">
html, body {
margin: 5px;
padding: 0px;
}
a {
color: #666;
}
#banner {
background: #eeeeee;
border: 1px solid #cccccc;
padding: 10px;
font: 14pt arial, sans-serif;
color: #666;
text-align: center;
vertical-align: middle;
}
#scoreTable {
font-family: arial, sans-serif;
font-size: 12pt;
color: #666666;
vertical-align: top;
background: #fff;
border: none;
}
#colorKey {
font-family: arial, sans-serif;
font-size: 12pt;
color: #666666;
}
#levelBox {
width: 100%;
}
#scoreBox {
width: 100%;
}
.swatch {
width: 15px;
height: 15px;
border: 1px solid #000000;
}
</style>
<script language="JavaScript" type="text/javascript">
var KEY_ENUM = new Array();
var NUM_ROWS = 6; // top row is where you drop the block from
var NUM_COLS = 5;
var START_COL = 2;
var DROP_INTERVAL = 50; // animation speed for dropping blocks
var SCORE_INTERVAL = 250; // amt of time the score is displayed
// colors within this range are "white" (0-255)
// higher TOLERANCE = easier
var TOLERANCE = 16;
// gloval variables
var SCORE = 0;
var LEVEL = 1;
var BLOCK_COUNT = 0; // used to determine level up
var LEVEL_UP = 25; // level up every 25 blocks
var MULTIPLIER = 0; // increases for every converted block
var BOARD; // the playing board
var KEY; // currently pressed key
var CUR_CELL; // the active cell
var DROP_CELL; // the cell that it will be dropped to
var PAUSE = true; // update in progress, freeze user input
function init() {
PAUSE = true;
initGlobals();
initBoard();
newCell();
showScore();
PAUSE = false;
}
function initGlobals() {
KEY_ENUM.NONE = 0;
KEY_ENUM.LEFT = 1;
KEY_ENUM.RIGHT = 2;
KEY_ENUM.DOWN = 3;
KEY = KEY_ENUM.NONE;
SCORE = 0;
LEVEL = 1;
BLOCK_COUNT = 0;
BOARD = new Array();
CUR_CELL = new Array();
DROP_CELL = new Array();
WHITE_DROP = false;
}
function showScore() {
var ll = document.getElementById('levelLabel');
var llHTML = "<b>";
if (BLOCK_COUNT >= 5 || BLOCK_COUNT == 0) {
llHTML += "<font style='color: #BB0000'>L</font>";
} else {
llHTML += "L";
}
if (BLOCK_COUNT >= 10 || BLOCK_COUNT == 0) {
llHTML += "<font style='color: #FFBB00'>E</font>";
} else {
llHTML += "E";
}
if (BLOCK_COUNT >= 15 || BLOCK_COUNT == 0) {
llHTML += "<font style='color: #00BB00'>V</font>";
} else {
llHTML += "V";
}
if (BLOCK_COUNT >= 20 || BLOCK_COUNT == 0) {
llHTML += "<font style='color: #00BBFF'>E</font>";
} else {
llHTML += "E";
}
if (BLOCK_COUNT >= 25 || BLOCK_COUNT == 0) {
llHTML += "<font style='color: #0000BB'>L</font>";
} else {
llHTML += "L";
}
llHTML += ": </b>";
ll.innerHTML = llHTML;
var lb = document.getElementById('levelBox');
lb.innerHTML = LEVEL;
var sb = document.getElementById('scoreBox');
sb.innerHTML = SCORE;
}
function showGameOver() {
for (var col=0; col<5; col++) {
for (var row=2; row<=4; row++) {
colorCell(row,col,"#cc0000");
}
}
cellText(2,0,"G","#fff");
cellText(2,1,"A","#fff");
cellText(2,2,"M","#fff");
cellText(2,3,"E","#fff");
cellText(3,1,"O","#fff");
cellText(3,2,"V","#fff");
cellText(3,3,"E","#fff");
cellText(3,4,"R","#fff");
cellText(4,2,"<a href='#' onclick='javascript:init()' style='color: #fff;'>New Game</a>");
}
function initBoard() {
// initialize the playing board
for (var rows=0; rows<NUM_ROWS; rows++) {
BOARD[rows] = new Array();
for (var cols=0; cols<NUM_COLS; cols++) {
BOARD[rows][cols] = new Array();
BOARD[rows][cols].EMPTY = true;
BOARD[rows][cols].COLOR = '#ffffff';
}
}
// create the HTML table (else reset it)
if (document.getElementById('boardTable') == null) {
var boardTable = document.createElement("table");
boardTable.id = 'boardTable';
boardTable.style.fontFamily = 'arial, sans-serif';
boardTable.style.fontSize = '12pt';
boardTable.style.visibility = 'visible';
var tbody = document.createElement("tbody");
boardTable.appendChild(tbody);
for (var rows=0; rows<NUM_ROWS; rows++) {
var row = document.createElement("tr");
for (var cols=0; cols<NUM_COLS; cols++) {
var cell = document.createElement("td");
cell.style.padding = '0px';
cell.style.width = '54px';
cell.style.height = '54px';
if (rows == 0) {
cell.style.border = '1px solid #fff';
cell.style.background = '#fff'; // top row
} else {
cell.style.border = '1px solid #ccc';
cell.style.background = '#ffffff';
}
cell.style.verticalAlign = 'middle';
cell.style.textAlign = 'center';
cell.innerHTML = ' ';
row.appendChild(cell);
}
tbody.appendChild(row);
}
document.getElementById("boardContainer").appendChild(boardTable);
} else {
var boardTable = document.getElementById('boardTable');
for (var row=0; row<NUM_ROWS; row++) {
for (var col=0; col<NUM_COLS; col++) {
var cell = boardTable.rows[row].cells[col];
if (row == 0) {
cell.style.border = '1px solid #ffffff';
} else {
cell.style.border = '1px solid #cccccc';
}
cell.style.background = '#ffffff';
cell.innerHTML = ' ';
}
}
}
}
var ACCEPT_KEY=true;
function handleKeyUp(e) {
// fix for Safari
ACCEPT_KEY = true;
}
function handleKeyDown(e){
if (!ACCEPT_KEY) {
return false;
}
ACCEPT_KEY = false;
var key=e.keyCode? e.keyCode : e.charCode;
switch (key) {
case 37: KEY = KEY_ENUM.LEFT; break; // left arrow
case 65: KEY = KEY_ENUM.LEFT; break; // a
case 39: KEY = KEY_ENUM.RIGHT; break; // right arrow
case 68: KEY = KEY_ENUM.RIGHT; break; // d
case 40: KEY = KEY_ENUM.DOWN; break; // down arrow
case 83: KEY = KEY_ENUM.DOWN; break; // s
default: KEY = KEY_ENUM.NONE; break;
}
if (!PAUSE && KEY != KEY_ENUM.NONE) {
move();
KEY = KEY_ENUM.NONE;
}
}
function cellText(row,col,text,color) {
if (color == null || color == '') {
color = "#999";
}
var boardTable = document.getElementById('boardTable');
var cell = boardTable.rows[row].cells[col];
cell.style.color = color;
cell.innerHTML = text;
return;
}
function colorCell(row,col,color) {
var boardTable = document.getElementById('boardTable');
var cell = boardTable.rows[row].cells[col];
cell.style.background = color;
if (!isWhite(color)) {
cell.style.border = '1px solid #000';
} else if (row == 0) {
cell.style.border = '1px solid #fff';
} else {
cell.style.border = '1px solid #ccc';
}
cell.title = color;
}
function isCellEmpty(row,col) {
return BOARD[row][col].EMPTY;
}
function newCell() {
CUR_CELL.ROW=0;
CUR_CELL.COL=START_COL;
var color;
if (LEVEL <= 5) {
var color = Math.floor(Math.random() * 3 * LEVEL);
switch (color) {
case 0: CUR_CELL.COLOR='#ff0000'; break; // level 1
case 1: CUR_CELL.COLOR='#00ff00'; break;
case 2: CUR_CELL.COLOR='#0000ff'; break;
case 3: CUR_CELL.COLOR='#000000'; break; // level 2
case 4: CUR_CELL.COLOR='#444444'; break;
case 5: CUR_CELL.COLOR='#888888'; break;
case 6: CUR_CELL.COLOR='#888800'; break; // level 3
case 7: CUR_CELL.COLOR='#008888'; break;
case 8: CUR_CELL.COLOR='#880088'; break;
case 9: CUR_CELL.COLOR='#cc7733'; break; // level 4
case 10: CUR_CELL.COLOR='#33cc77'; break;
case 11: CUR_CELL.COLOR='#77cc33'; break;
case 12: CUR_CELL.COLOR='#cc3377'; break; // level 5
case 13: CUR_CELL.COLOR='#3377cc'; break;
case 14: CUR_CELL.COLOR='#7733cc'; break;
default: alert("ERROR: Invalid Color for R,G,B");
}
} else {
CUR_CELL.COLOR='#' + randHex(136) + randHex(136) + randHex(136);
}
colorCell(CUR_CELL.ROW, CUR_CELL.COL, CUR_CELL.COLOR);
findDropCell();
}
function isWhite(color) {
var r = hexToDec(color.substring(1,3));
var g = hexToDec(color.substring(3,5));
var b = hexToDec(color.substring(5,7));
return ((r >= 255 - TOLERANCE) &&
(g >= 255 - TOLERANCE) &&
(b >= 255 - TOLERANCE));
}
function randHex(max) {
var x = Math.floor(Math.random() * max);
var hex = x.toString(16);
return twoDigitHex(hex);
}
// makes sure it returns a 2 digit number
function twoDigitHex(hex) {
if (hex.length == 1) {
hex = '0' + hex;
}
return hex;
}
function hexToDec(val) {
var retVal = parseInt(val,16);
return parseInt(retVal.toString(10));
}
function addColors(c1,c2) {
var c1r = hexToDec(c1.substring(1,3));
var c1g = hexToDec(c1.substring(3,5));
var c1b = hexToDec(c1.substring(5,7));
var c2r = hexToDec(c2.substring(1,3));
var c2g = hexToDec(c2.substring(3,5));
var c2b = hexToDec(c2.substring(5,7));
var r = c1r + c2r;
if (r > 255) { r = 255 }
var g = c1g + c2g;
if (g > 255) { g = 255 }
var b = c1b + c2b;
if (b > 255) { b = 255 }
var color = "#";
color += twoDigitHex(r.toString(16));
color += twoDigitHex(g.toString(16));
color += twoDigitHex(b.toString(16));
return color;
}
function showDropCell() {
var dcr = DROP_CELL.ROW;
var dcc = DROP_CELL.COL;
var boardTable = document.getElementById('boardTable');
var cell = boardTable.rows[dcr].cells[dcc];
// borders around neighboring cells
if (dcr < NUM_ROWS-1) {
boardTable.rows[dcr+1].cells[dcc].style.border = '1px dashed #cccccc';
}
if (dcr > 0) {
cell.style.border = '1px dashed #000000';
if (dcc > 0 && !BOARD[dcr][dcc-1].EMPTY) {
boardTable.rows[dcr].cells[dcc-1].style.border = '1px dashed #cccccc';
}
if ((dcc < NUM_COLS-1) && !BOARD[dcr][dcc+1].EMPTY) {
boardTable.rows[dcr].cells[dcc+1].style.border = '1px dashed #cccccc';
}
}
}
function clearDropCell() {
var dcr = DROP_CELL.ROW;
var dcc = DROP_CELL.COL;
if (dcr != null && dcc != null) {
var boardTable = document.getElementById('boardTable');
var cell = boardTable.rows[dcr].cells[dcc];
// restore borders around neighboring cells
if (dcr < NUM_ROWS-1) {
boardTable.rows[dcr+1].cells[dcc].style.border = '1px solid #000000';
}
if (dcr > 0) {
cell.style.border = '1px solid #cccccc';
if (dcc > 0 && !BOARD[dcr][dcc-1].EMPTY) {
boardTable.rows[dcr].cells[dcc-1].style.border = '1px solid #000000';
}
if ((dcc < NUM_COLS-1) && !BOARD[dcr][dcc+1].EMPTY) {
boardTable.rows[dcr].cells[dcc+1].style.border = '1px solid #000000';
}
}
}
}
function findDropCell() {
DROP_CELL.ROW = CUR_CELL.ROW;
DROP_CELL.COL = CUR_CELL.COL;
while(true) {
if (DROP_CELL.ROW < (NUM_ROWS) &&
isCellEmpty(DROP_CELL.ROW, DROP_CELL.COL)) {
DROP_CELL.ROW += 1;
} else {
DROP_CELL.ROW -= 1;
break;
}
}
showDropCell();
}
function dropCell() {
findDropCell();
if (DROP_CELL.ROW == 0) {
// row is full
return;
}
PAUSE = true;
BLOCK_COUNT++;
if (BLOCK_COUNT == LEVEL_UP) {
BLOCK_COUNT = 0;
LEVEL++;
}
showScore();
animateDrop();
}
// move the current block down, until it is in the drop cell
function animateDrop() {
colorCell(CUR_CELL.ROW, CUR_CELL.COL, '#ffffff');
CUR_CELL.ROW += 1;
colorCell(CUR_CELL.ROW, CUR_CELL.COL, CUR_CELL.COLOR);
if (CUR_CELL.ROW != DROP_CELL.ROW) {
setTimeout("animateDrop()",DROP_INTERVAL);
return;
} else {
dropDone();
return;
}
}
// determine the effects of the drop
var DROP_BLOCKS;
function dropDone() {
// put the block in the drop cell
BOARD[DROP_CELL.ROW][DROP_CELL.COL].EMPTY = false;
BOARD[DROP_CELL.ROW][DROP_CELL.COL].COLOR = CUR_CELL.COLOR;
colorCell(DROP_CELL.ROW, DROP_CELL.COL, CUR_CELL.COLOR);
// DROP_BLOCKS contains all blocks that have fallen
// more blocks can be added if a cascade occurs
DROP_BLOCKS = new Array();
var db = new Array();
db.ROW = DROP_CELL.ROW;
db.COL = DROP_CELL.COL;
DROP_BLOCKS.push(db);
MULTIPLIER = 0;
updateColors();
}
// iterate over the drop blocks and update the colors in the table
var DO_DROP;
function updateColors() {
DO_DROP = false;
for (var i=0; i<DROP_BLOCKS.length; i++) {
var db = DROP_BLOCKS[i];
updateColor(db.ROW+1,db.COL,BOARD[db.ROW][db.COL].COLOR);
updateColor(db.ROW,db.COL-1,BOARD[db.ROW][db.COL].COLOR);
updateColor(db.ROW,db.COL+1,BOARD[db.ROW][db.COL].COLOR);
}
// drop floating blocks
DROP_BLOCKS = new Array();
if (DO_DROP) {
setTimeout("dropBlocks()",SCORE_INTERVAL);
return;
} else if (isGameOver()) {
showGameOver();
return;
} else {
// otherwise player's next move
newCell();
PAUSE = false;
}
}
function dropBlocks() {
// find blocks floating above empty cells
for (var row=1; row<NUM_ROWS; row++) {
for (var col=0; col<NUM_COLS; col++) {
// remove score display
cellText(row,col," ");
if (row == 1) {
continue;
}
// found one
if (BOARD[row][col].EMPTY && !BOARD[row-1][col].EMPTY) {
// iterate for each block in the column
for (var bRow=row; bRow>1; bRow--) {
if (BOARD[bRow-1][col].EMPTY) {
// hit the top of the column
break;
}
BOARD[bRow][col].EMPTY = false;
BOARD[bRow][col].COLOR = BOARD[bRow-1][col].COLOR;
BOARD[bRow-1][col].EMPTY = true;
BOARD[bRow-1][col].COLOR = '#ffffff';
colorCell(bRow,col,BOARD[bRow][col].COLOR);
colorCell(bRow-1,col,BOARD[bRow-1][col].COLOR);
// bRow,col is now the location of the dropped block
var db = new Array();
db.ROW = bRow;
db.COL = col;
DROP_BLOCKS.push(db);
}
}
}
}
if (DROP_BLOCKS.length > 0) {
// still more blocks to process
setTimeout("updateColors()",SCORE_INTERVAL);
return;
} else {
// no need to check game over, since blocks fell
// player's next move
newCell();
PAUSE = false;
}
}
// determine if the block at row, col is a drop block
function isDropBlock(row,col) {
for (var i=0; i<DROP_BLOCKS.length; i++) {
var db = DROP_BLOCKS[i];
if (db.ROW == row && db.COL == col) {
return true;
}
}
return false;
}
function updateColor(row,col,color) {
//alert("updateColor: " + row + "," + col + "," + color);
if (row >= NUM_ROWS || col < 0 || col >= NUM_COLS) {
// outside board
return;
}
if (BOARD[row][col].EMPTY) {
// don't update empty cells
return;
}
if (isDropBlock(row,col)) {
// don't update drop blocks
return;
}
var newColor = addColors(BOARD[row][col].COLOR,color);
// if the new block is white, update score & remove from the board
if (isWhite(newColor)) {
// allow for tolerance, make it "true" white
newColor = "#ffffff";
// blocks will need to drop
DO_DROP = true;
// remove it from the board
BOARD[row][col].EMPTY = true;
// update the score
MULTIPLIER++;
var blockScore = (25 * MULTIPLIER);
cellText(row,col,"<b>+" + blockScore + "</b>");
SCORE += blockScore;
showScore();
}
BOARD[row][col].COLOR = newColor; // update the board
colorCell(row,col,newColor); // render the cell
}
function isGameOver() {
var gameOver = true;
game_over:
for (var row=1; row<NUM_ROWS; row++) {
for (var col=0; col<NUM_COLS; col++) {
if (BOARD[row][col].EMPTY) {
gameOver = false;
break game_over;
}
}
}
return gameOver;
}
function move() {
// remove the cell before the move
colorCell(CUR_CELL.ROW, CUR_CELL.COL, '#ffffff');
switch (KEY) {
case KEY_ENUM.LEFT:
clearDropCell();
CUR_CELL.COL = CUR_CELL.COL - 1;
if (CUR_CELL.COL < 0) {
CUR_CELL.COL = 0;
}
findDropCell();
break;
case KEY_ENUM.RIGHT:
clearDropCell();
CUR_CELL.COL = CUR_CELL.COL + 1;
if (CUR_CELL.COL >= NUM_COLS) {
CUR_CELL.COL = NUM_COLS - 1;
}
findDropCell();
break;
case KEY_ENUM.DOWN:
dropCell();
break;
}
// display the cell after the move
colorCell(CUR_CELL.ROW, CUR_CELL.COL, CUR_CELL.COLOR);
}
</script>
<script src="osd.js" type="text/javascript"></script></head><body onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
<table align="center">
<tbody><tr>
<td style="border: medium none ; background: rgb(255, 255, 255) none repeat scroll 0% 0%; vertical-align: top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<div id="boardContainer">
<table style="font-family: arial,sans-serif; font-size: 12pt; visibility: visible;" id="boardTable"><tbody><tr><td style="border: 1px solid rgb(255, 255, 255); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(255, 255, 255); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td title="#0000ff" style="border: 1px solid rgb(0, 0, 0); padding: 0px; background: rgb(0, 0, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(255, 255, 255); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(255, 255, 255); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px dashed rgb(0, 0, 0); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td><td style="border: 1px solid rgb(204, 204, 204); padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 54px; height: 54px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; vertical-align: middle; text-align: center;"> </td></tr></tbody></table></div></td>
<td id="scoreTable">
<table style="width: 225px;">
<tbody><tr>
<td style="height: 50px; width: 225px; text-align: center; font-size: 16pt;">
<b><font style="color: rgb(187, 0, 0);">C</font><font style="color: rgb(255, 187, 0);">O</font><font style="color: rgb(0, 187, 0);">L</font><font style="color: rgb(0, 187, 255);">O</font><font style="color: rgb(0, 0, 187);">R</font></b>box
<br>
<font style="color: rgb(153, 153, 153); font-size: 10pt;">the color theory
game</font></td>
</tr>
</tbody></table>
<table style="width: 225px;">
<tbody><tr>
<td id="levelLabel"><b><font style="color: rgb(187, 0, 0);">L</font><font style="color: rgb(255, 187, 0);">E</font><font style="color: rgb(0, 187, 0);">V</font><font style="color: rgb(0, 187, 255);">E</font><font style="color: rgb(0, 0, 187);">L</font>: </b></td>
<td id="levelBox">1</td>
</tr>
<tr>
<td><b>SCORE: </b></td>
<td id="scoreBox">0</td>
</tr>
</tbody></table>
<br>
<table style="width: 225px;">
<tbody><tr>
<td style="width: 50%;">
<table>
<tbody><tr>
<td class="swatch" style="background: rgb(255, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(0, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(255, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(0, 0, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 0, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(0, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(0, 0, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(0, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
</tbody></table>
</td>
<td style="width: 50%;">
<table align="right">
<tbody><tr>
<td class="swatch" style="background: rgb(255, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(0, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(0, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(255, 0, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(0, 0, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(255, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td style="width: 50%;">
<table>
<tbody><tr>
<td class="swatch" style="background: rgb(204, 136, 51) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(51, 119, 204) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(136, 51, 204) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(119, 204, 51) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(51, 204, 136) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(204, 51, 119) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
</tbody></table>
</td>
<td style="width: 50%;">
<table align="right">
<tbody><tr>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(191, 191, 191) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(64, 64, 64) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
<tr>
<td class="swatch" style="background: rgb(127, 127, 127) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>+</td>
<td class="swatch" style="background: rgb(127, 127, 127) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
<td>=</td>
<td class="swatch" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>
<div style="text-align: center; font-size: 10pt;"><a href="http://www.eyehook.com/games/colorBox/index.html">help</a>
<!--
| <a href="http://www.eyehook.com/games/colorBox/colorBoxClassic.html">COLORbox
Classic</a>
-->
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"> <br>
</td>
</tr>
</tbody></table>
<!--
<div style="font-family: arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(102, 102, 102); text-align: center;">
<br>
<a href="http://www.eyehook.com/index.html">home</a> | <a href="http://www.eyehook.com/games/index.html">games</a>
| <a href="http://www.eyehook.com/free/index.html">free image library</a> | <a href="http://www.eyehook.com/contact.html">contact</a></div>
-->
<script language="JavaScript" type="text/javascript">
init();
</script>
</body></html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
