q.html

<style type="text/css">
.cell{
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 1px solid;
}
.c1 {
  background-color: red;
}
.c2 {
  background-color: blue;
}
</style>
<script type="text/javascript" src="q.js"></script>

q.js

var a = [
[0, 1, 2, 2],
[1, 1, 2, 2],
[1, 1, 2, 2],
[1, 1, 2, 2],
];

for (i in a) {
    document.writeln('<div>');
    for (j in a[i]) {
        document.writeln('<div class="cell c'+a[i][j]+'" onclick="cellClickEvent(this);" id="C_'+i+'_'+j+'" color="'+a[i][j]+'"></div>');
    }
    document.writeln('</div>');
}

function cellClickEvent(obj) {
    console.log(obj.getAttribute('data-x'), obj.getAttribute('data-y'));
}

function swap(a, b) {
    var color = a.getAttribute('color');
    a.setAttribute('color', b.getAttribute('color'));
    b.setAttribute('color', color);
}

function bindAttrFunc(name) {
    return function () {
        if (arguments.length = 1) {
            return this.getAttribute(name);
        }
        this.setAttribute(name, arguments[0]);
        return this;
    }
}
function $(o) {
    o.x = bindAttrFunc('data-x');
    o.y = bindAttrFunc('data-y');
    return o;
}