This weekend I came across a game made using java applets. Initially looked like its possible to solve it, but slowly we realized that there might be no solution to this game. Finally I decided to clone it using javascript and see if you can solve the same.

PS: Tested on all browsers except IE

Modes:
I included a custom mode in this game. Original game had only the classic mode.

• Classic Mode: When you click a square in classic mode, that clicked square and all neighbourhood squares toggle their colors (excluding diagonal neighbours).
• Custom Mode: In custom mode, when you click a square, the clicked square and all neighbourhood squares toggle their colors (including diagonal neighbours).

Rules:

• Destination is to fill all the squares with black color.
• Ideally game should be played in a single mode only. However I have provided an option where you can switch modes in between the game. So you are free to either play it in a single mode throughout, or switch modes as and when you feel is the requirement
• If you are finally able to make it, click view history, copy the steps you followed to conquer this game and post it as a comment to this blog post

Source Code:
The source code consists of toggle.js and toggle.css. Find below the source code, and towards the end, find how to embed the same on your page/blog.

toggle.css

/*

  Script: toggle.css
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

*/
.box {
  border:1px solid #000000;
  cursor:pointer;
}
.boxColored {
  border:1px solid #FFFFFF;
  background: #000000;
  cursor:pointer;
}

toggle.js

/*

  Script: toggle.js
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

*/
Array.prototype.unique = function(b) {
  var a = [], i, l = this.length;
  for(i=0; i<l; i++) {
    if(a.indexOf(this[i], 0, b) < 0) { a.push(this[i]); }
  }
  return a;
};
var $ = {
  html: '',
  cid: 'container',
  xBoxes: 5,
  yBoxes: 5,
  boxWidth: 50,
  boxHeight: 50,
  version: 'classic',
  history: Array(),
  init: function() {
    var tmp = '';
    for(var i=0;i<this.yBoxes;i++) {
      for(var j=0;j<this.xBoxes;j++) {
        tmp += '<div onclick="$.toggle(this)" name="box" id="box-'+i+'-'+j+'" style="position:absolute; left:'+(j*this.boxWidth)+'px; top:'+(i*this.boxHeight)+'px; height:'+this.boxHeight+'px; width:'+this.boxWidth+'px" class="box">';
        tmp += '</div>';
      }
    }
    tmp += '<div style="position:absolute; top:'+((this.yBoxes*this.boxHeight)+5)+'px; left:0px;">';
    tmp += '  <b style="float:left">Version:</b> ';
    tmp += '  <select style="float:left" id="version" onchange="$.version = this.options[this.selectedIndex].value;">';
    tmp += '    <option value="classic">Classic</option>';
    tmp += '    <option value="custom">Custom</option>';
    tmp += '  </select>';
    tmp += '  <div style="float:left; padding-left:20px; text-decoration:underline; cursor:pointer;" onclick="alert($.history.unique())">View History</div>';
    tmp += '</div>';
    document.getElementById(this.cid).innerHTML = tmp;
  },
  toggle: function(t) {
    this.history.push((t.id.toString()).replace('box-',''));
    id = t.id; ids = id.split("-");
    xid = parseInt(ids[1]); yid = parseInt(ids[2]);

    for(var l=xid-1; l<=xid+1; l++) {
      for(var m=yid-1; m<=yid+1; m++) {
        if(l>=0 && l<this.xBoxes && m>=0 && m<this.yBoxes) {
          if(this.version == "classic") {
            if((l == xid-1 && m == yid-1) || (l == xid+1 && m == yid-1) || (l == xid-1 && m == yid+1) || (l == xid+1 && m == yid+1)) {

            }
            else {
              var boxid = document.getElementById('box-'+l+'-'+m);
              if(boxid.className == "box") boxid.className = "boxColored";
              else if(boxid.className == "boxColored") boxid.className = "box";
            }
          }
          if(this.version == "custom") {
            var boxid = document.getElementById('box-'+l+'-'+m);
            if(boxid.className == "box") boxid.className = "boxColored";
            else if(boxid.className == "boxColored") boxid.className = "box";
          }
        }
      }
    }
  }
}
$.init();

How to embed toggle on my page/blog?

• Simply copy the js and css files from above or download them from here: toggle.js, toggle.css
• Include the two on your page/blog. toggle.js automatically calls up $.init() on load. $.init() method will look for a div with id $.cid on you page, and populate the game in the same div. Hence make sure you have a div with id $.cid on the page.
• $.xBoxes, $.yBoxes, $.boxWidth, $.boxHeight are a few tunable parameters you may want to play with

Happy Toggling!