robinfai/gist:9383871

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
        ul {
            height: 20px;
            margin: 0;
        }

        li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="grid">

</div>
<script>
    function getNum() {
        return Math.round((Math.random() * 10)) % 4 + 1;
    }

    function initData(length) {
        var data = [];
        for (var i = 0; i < length; i++) {
            data[i] = [];
            for (var j = 0; j < length; j++) {
                data[i][j] = getNum();
            }
        }
        return data;
    }
    var length = 80;
    var data = initData(length);

    function compare(group) {
        var sample = [1, 2, 3, 4];
        for (var i in group) {
            i = parseInt(i)
            var result = 0;
            for (var j in group) {
                j = parseInt(j)
                if (group[(i + j) % group.length] == sample[j]) {
                    result++;
                }
                if (!result) {
                    break;
                }
            }
            if (result == 4) {
                return true;
            }
        }
        return false;
    }
    var colorSet = {};
    var exception = {};
    for (var i = 0; i < length; i++) {

        i = parseInt(i)
        var row = data[i];
        for (var j = 0; j < length; j++) {
            j = parseInt(j)
            if ((data.length - i) > 1 && (row.length - j) > 1 && !exception[i + '_' + j]) {
                var group = [data[i][j], data[i][j + 1], data[i + 1][j + 1], data[i + 1][j]];
                if (compare(group)) {
                    setColor(i, j)
                    setColor(i + 1, j)
                    setColor(i + 1, j + 1)
                    setColor(i, j + 1)

                    exception[(i + 1) + '_' + j] = 1;
                    exception[i + '_' + (j + 1)] = 1;
                }
            }
        }
    }

    function setColor(x, y) {
        var key = x + '_' + y;
        if (colorSet[key]) {
            colorSet[key] -= 3;
        } else {
            colorSet[key] = 12
        }
    }

    function print(data) {
        for (var i in data) {
            var row = data[i];
            var ul = $('<ul></ul>').appendTo('.grid');
            for (var j in row) {
                var li = $('<li></li>').appendTo(ul);
                var cell = row[j];
                li.text(cell);

                var key = i + '_' + j;
                if (colorSet[key]) {
                    var color = colorSet[key].toString(16);
                    li.css('background', '#f' + color + color)
                }
            }
        }
    }
    print(data)


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<style>
	ul {
	height: 20px;
	margin: 0;
	}

	li {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div class="grid">

	</div>
	<script>
	function getNum() {
	return Math.round((Math.random() * 10)) % 4 + 1;
	}

	function initData(length) {
	var data = [];
	for (var i = 0; i < length; i++) {
	data[i] = [];
	for (var j = 0; j < length; j++) {
	data[i][j] = getNum();
	}
	}
	return data;
	}
	var length = 80;
	var data = initData(length);

	function compare(group) {
	var sample = [1, 2, 3, 4];
	for (var i in group) {
	i = parseInt(i)
	var result = 0;
	for (var j in group) {
	j = parseInt(j)
	if (group[(i + j) % group.length] == sample[j]) {
	result++;
	}
	if (!result) {
	break;
	}
	}
	if (result == 4) {
	return true;
	}
	}
	return false;
	}
	var colorSet = {};
	var exception = {};
	for (var i = 0; i < length; i++) {

	i = parseInt(i)
	var row = data[i];
	for (var j = 0; j < length; j++) {
	j = parseInt(j)
	if ((data.length - i) > 1 && (row.length - j) > 1 && !exception[i + '_' + j]) {
	var group = [data[i][j], data[i][j + 1], data[i + 1][j + 1], data[i + 1][j]];
	if (compare(group)) {
	setColor(i, j)
	setColor(i + 1, j)
	setColor(i + 1, j + 1)
	setColor(i, j + 1)

	exception[(i + 1) + '_' + j] = 1;
	exception[i + '_' + (j + 1)] = 1;
	}
	}
	}
	}

	function setColor(x, y) {
	var key = x + '_' + y;
	if (colorSet[key]) {
	colorSet[key] -= 3;
	} else {
	colorSet[key] = 12
	}
	}

	function print(data) {
	for (var i in data) {
	var row = data[i];
	var ul = $('<ul></ul>').appendTo('.grid');
	for (var j in row) {
	var li = $('<li></li>').appendTo(ul);
	var cell = row[j];
	li.text(cell);

	var key = i + '_' + j;
	if (colorSet[key]) {
	var color = colorSet[key].toString(16);
	li.css('background', '#f' + color + color)
	}
	}
	}
	}
	print(data)


	</script>
	</body>
	</html>