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

• Introducing jSlider: A Content Slider plugin for JQuery (6)
• fixed.js – Solution to IE6 "position:fixed" Bug (4)
• Facebook type image rotation and more using PHP and Javascript (27)
• SEO Analyzer v 1.2 – Adding support for Bing along with Google and Yahoo (24)
• Getting Google Page Rank using Javascript – For Adobe AIR Apps (2)

Anagram, many of you might be familiar with it or even played many a times back in school and colleges. Its a simple text based game, where you are given a jumbled word and you need to re-arrange it. E.g. You will be given huldos and you need to quickly identify that as should.

So getting bored back in college or office, add games@gtalkbots.com and type anagram to start gaming. Play and score well. Your score will turn up on the Gtalkbots front page. They have kept this game open for the world i.e. one can play this game even without registering at Gtalkbots.

A few important points:

1. Add games@gtalkbots.com as your friend in Gtalk Messenger.
2. Type rules to read them before you start gaming.
   
3. Type anagram to start gaming.
4. You will be given a jumbled word which you needs to rearrange and reply back.
5. If your answer is correct you get 10 Points.
6. If your answer is not correct and you are finding it tough to solve it, Type hint to get a clue, and a clue will be sent to all users playing the game.
   
7. DO NOT FORGET to type exit when you are finished gaming. If you forget to do so, you will be considered as a part of next round being played and eventually your average score decreases.
8. If total number of wrong answers = 5 (including all users), the bot will automatically reply back with correct answer and moves to the next word.

So try out and enjoy.

• How to broadcast a message to your Gtalk friends using JAXL? (13)
• How to get dzone feeds as IM using JAXL? Add dzone@gtalkbots.com (8)
• Introducing JAXL – Open Source Jabber XMPP Library (93)
• Save your and your friend's status messages. Share and promote your website through your status (1)
• GTalk Status Message Collector (3)