JavaScript Sample

jQuery(function($) {

var colors = ['#f99','#ff9','#9f9','#9cf'];
var block = [], clust = [], ctx, preid = -1;
var score = 0, width = 20, height = 10;

$(window).load(function() {
  ctx = $('#game').get(0).getContext('2d');
  init();
});

var init = function() {
  score = 0;
  for (var i = 0; i < width*height; i++) {
    block[i] = parseInt(Math.random()*colors.length);
  }
  clustering();
  draw();
};

var putval = function(v1, v2) {
  if (v1 == v2) return;
  for (var i = 0; i < clust.length; i++) {
    if (clust[i] == v1) clust[i] = v2;
  }
};

var clustering = function() {
  for (var i = 0; i < block.length; i++) {
    clust[i] = i;
  }
  for (var i = 0; i < block.length; i++) {
    if (i%width < width-1 &&
        block[i] == block[i+1])
      putval(clust[i+1], clust[i]);
    if (parseInt(i/width) < height-1 &&
        block[i] == block[i+width])
      putval(clust[i+width], clust[i]);
  }
};

var count = function() {
  var hash = [], c1 = 0, c2 = 0;
  for (var i = 0; i < block.length; i++) {
    if (block[i] == -1) { c2++; continue; }
    var k = 'c'+clust[i];
    hash[k] ? hash[k]++ : hash[k] = 1;
    if (hash[k] == 2) c1++;
  }
  if (c2 == block.length) score += 1000;
  return c1;
};

var clockwise = function(a, w, f) {
  var r = [], h = parseInt(a.length/w);
  for (var i = 0; i < w*h; i++) {
    if (!f) /* clockwise */
      r[(i%w)*h+h-1-parseInt(i/w)] = a[i];
    else /* anticlockwise */
      r[(w-1-i%w)*h+parseInt(i/w)] = a[i];
  }
  return r;
};

var check = function() {
  var arr = clockwise(block, width);
  var r = [], c = 0;
  for (var i = 0; i < arr.length; i++) {
    if (i%height == 0) c = 0;
    arr[i] != -1 ? r.push(arr[i]) : c++;
    if (i%height == height-1 && c < height)
      while (c-- > 0) r.push(-1);
  }
  c = arr.length - r.length;
  while (c-- > 0) r.push(-1);
  block = clockwise(r, height, true);
  clustering();
  draw();
};

var draw = function() {
  ctx.lineWidth = 4;
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, 548, 278);
  for (var i = 0; i < block.length; i++) {
    ctx.fillStyle = (block[i]==-1? '#000':colors[block[i]]);
    ctx.fillRect(i%width*27+8, parseInt(i/width)*27+8, 19, 19);
  }
  $('#score').html(score);
  $('#cluster').html(count());
};

var getid = function(x, y) {
  var ox = $('#game').offset().left;
  var oy = $('#game').offset().top;
  if (x-4-ox >= 540) return -1;
  x = parseInt((x-4-ox)/27);
  y = parseInt((y-4-oy)/27);
  return y*width+x;
};

var countcl = function(id) {
  var c = 0;
  for (var i = 0; i < clust.length; i++) {
    if (clust[id] == clust[i]) c++;
  }
  return c;
};

var drawfocus = function(id, focus) {
  ctx.strokeStyle = (focus ? '#ccc' : '#000');
  ctx.lineWidth = 4;
  for (var i = 0; i < clust.length; i++) {
    if (clust[id] == clust[i])
      ctx.strokeRect(i%width*27+6, parseInt(i/width)*27+6, 23, 23);
  }
};

$('#game').mousemove(function(e) {
  var id = getid(e.pageX, e.pageY);
  if (preid != id) {
    $('#game').css('cursor','auto');
    drawfocus(preid, false);
    preid = id;
    if (block[id] == -1) return;
    var c = countcl(id);
    if (c > 1) {
      $('#game').css('cursor','pointer');
      drawfocus(id, true);
    }
  }
});

$('#game').click(function(e) {
  var id = getid(e.pageX, e.pageY);
  if (block[id] == -1) return;
  var c = countcl(id);
  if (c > 1) {
    for (var i = 0; i < clust.length; i++) {
      if (clust[id] == clust[i]) block[i] = -1;
    }
    score += Math.pow(c-2,2);
    check();
    preid = -1;
  }
});

$('#reset').click(init);

});