Browsed by
Tag: project

A Guess-The-Color-Code Game: ColorCode

A Guess-The-Color-Code Game: ColorCode

This post was written ~6 years ago, a lot of things in the world of browsers have changed since, the game may no longer work/look correctly.

A game with unknown name!
That is what it was when I started working on it…
I played this game first as a board game, on a very very old board, with no reference to the name. It was to be played by two players.
The other day, my younger sisters friends had come home, they brought with them a board game to play. It belonged to her mom (so old). No one knew the name, but it was just plain fun to play.

We decided to implement it in code. And here it is.. A digital version of the game.
But what to name it? First we thought of naming it colour-seq, but some amount of Googling revealed that there exist many versions of this game in digital format already and they are called ColorCode. So thats what it is! 🙂

Game objective:
Its simple, match the same colour sequence with same colours as the computer had in his mind.

Game rules:

  • The computer decides a sequence of the colours (in mind!)
  • The player puts the pegs in the holes and tries to arrive at the same sequence.
  • Computer will indicate on every entry how many of the colours the player missed and how many positions were incorrect.
  • You can choose from 3 different difficulty levels:
    • Easy: 4 colours,4 positions (no chance to choose a wrong color), 10 attempts
    • Medium: 5 colours, 4 positions, 10 attempts.
    • Hard: 6 colours, 4 positions and 10 attempts.
  • You can also select if you want numbers to be  displayed on the pegs along with the colours to identify them.

How to play:

  • Once you choose the options, you will see the game board.
  • Drag and drop the coloured pegs from the right hand side floating bar onto the central part of the board with 4 holes (not holes, but, u get it, right?)
  • You can rearrange the colour sequence.
  • Once you are satisfied, press the submit button.
  • Computer will match the code you entered with the one it had in mind and will answer in a colour code.
  • On the left part, where you see the holes arranged in two columns:
    • If a position turns orange, there is a colour in wrong position.
    • If a position turns black, there is a wrong colour.
    • Counting the number of black squares, you know how many colours were wrong. (i.e. you selected the colour but computer did not, choose another.)
    • Counting the number of orange squares, you know how many colours were in wrong position (i.e. the colour is correct, but not is correct position, rearrange.)
  • Starting with a guess for the first attempt, it goes all Logic from there on..
Known issues:
  • The floating bar has a little glitch, it floats a little weird sometimes.

Future enhancements

  • Forgot to mention, have not tested the code on Internet explorer at all. Will do the testing and required fixing once I find a windows machine. Till then, please use firefox or chrome.
  • I plan to make it more customisable: allow for choosing colours, columns and attempts manually.
  • Make them circles.
  • Remove the hiding plate above to reveal the code in computer’s mind.
  • What if computer never told you the colour was wrong..? Thinking… 😀

Well, a note:
I know its all JavaScript and all the geeks will simply turn on their firebug to check what the colour sequence is. But please don’t, otherwise, there is no fun! But if you just could not convince your conscience, let me tell you I have taken care not to spoil the fun for you. The colour code the computer remembers is actually salted, hashed number and not the simple colour name you might make some guess at.. The salt is randomly generated on every new game. Just to help you take a firm stand against your disobedient mind! (Oh I know, its still not difficult to crack it, but worth the effort! 🙂 )

So what are you waiting for? Hit the ‘Start the game’ button!

If you find more glitches and bugs please note them in the comments. And feel free to tell me you enjoy it! 😀

Just another object-oriented approach to jQuery plugins

Just another object-oriented approach to jQuery plugins

It has been almost a year since I have been working primarily in JavaScript. During this time I have written three jQuery plugins and loads of other scripts.This is the story of how my approach to writing jQuery plugins has evolved.

I was working on my first plugin, which was supposed to be a large (in LOC) and went through the authoring mentioned on the jQuery site. In the beginning- it was great, a few exposed methods, well organized code, private functions, everything looked pretty. Soon the code reached some 1000 lines and it started becoming messy for me. To clarify, I am basically a java developer. I accept that the coding practices will obviously differ in every language, but for me, object oriented approach to code seems much more understandable and tidier than ‘functions everywhere’ thing!

I began searching for object oriented approaches people take in writing jQuery plugins. There are many, but mostly at the cost of some other flexibility. Some approaches allow only one public method, claiming only one namespace is must but more control was needed in the calendar. Some allow complete public access to the options object, but additional control was needed. There were one time calculations based on options that were necessary for the required functionality. Now making the options object public won’t give me that control, will it? But apart from that, I could not understand the requirement of making it fully public. Pardon me, this statement is not to question those who follow these approaches, but this is what was thought.

A better approach was needed, where all the flexibility of making it a ‘functions everywhere’ is retained and a little more organization is achieved in the code. So there emerged a merger. A merger that:

  • Allows multiple methods to be made available.
  • Claims only one namespace.
  • Does not make options simply public.
  • Keeps a context, maintains a state.
  • And follows every other requirement mentioned as a guideline while writing plugins by the jQuery authors.
That merger has now evolved into a simple, precise plugin template! All you need is a case-sensitive, replace-all and you are ready with a working plugin, set with the basic features ready for more, organized plugin…
Here’s the code:
* Plugin comments
(function($, undefined){
var MyPlugin = function(element, options){

* *************************** Variables ***************************
var defaults = {
defaultValue : '2'
}; //default options

* *************************** Plugin Functions ***************************

* Initializes plugin.
function initialize(options){
sl.log("Got Options- initialize: ");

* Updates plugin.
function update(options){
sl.log("Got Options- update: ");

* Destroy plugin changes
function destroy(options){
// Remove all added classes.
// Remove all bound methods.

// Remove plugin data

* Updates plugin options after plugin has been initialized.
function setOptions(options){

//expose plugin functions
this.initialize = initialize;
this.update = update;
this.destroy = destroy;
this.setOptions = setOptions;

* *************************** Utility Methods ***************************
* Extend the default options using the passed options.
function extendOptions(options){
if (options) {
$.extend(true, defaults, options);

var mP = $.myPlugin = {version: "0.01"};
$.fn.myPlugin = function(options){
var args = arguments; // full argument array passed to the plugin.

// Available methods in plugin
var pMethods = {
init : function(options){
// Get the plugin data
if ('myplugin')) return;
// Initialize the plugin
var myplugin = new MyPlugin(this, options);
// Add plugin data to the element'myplugin', myplugin);
update : function(options){
// Get the plugin data
var myplugin ='myplugin');
if (!myplugin) return; // do nothing if plugin is not instantiated.

destroy : function(options){
// Get the plugin data
var myplugin ='myplugin');
if (!myplugin) return; // do nothing if plugin is not instantiated.

// destroy data and revert all plguin changes.
setOptions : function(options){
// Get the plugin data
var myplugin ='myplugin');
if (!myplugin) return; // do nothing if plugin is not instantiated.

// Update the plugin options

// For each element, check and invoke appropriate method passing the options object
return this.each(function(i, tElement){
var element = $(tElement);

if (pMethods[options]){
pMethods[options].call(element, args[1]);
} else if (typeof options === 'object' || !options){
pMethods['init'].call(element, args[0]);
} else {
$.error( 'Method ' + options + ' does not exist in jQuery.myplugin' );
Now what you need to get going is the replace-all, this is what you replace:

MyPlugin : PluginName
myPlugin : Plugin JQuery Method Name/pluginName
myplugin : Data Name/Variable Name
mp       : pN
pMethods : pluginNameMethods
defaults : defaulsObjectName

That’s it!
You are ready with a working plugin!
Oh yes, that sl there in the code is actually the SmartLogger. Read about it here.
This is a quick post and I plan to update the post with more explanation of the code, do visit again!

Let me know how you find it in the comments.

Habit-Firebug Saver: SmartLogger

Habit-Firebug Saver: SmartLogger

How many of the web developers do not depend on Firebug or the chrome’s console… Just wondering..

BTW, its plain fun to work with firebug, makes life a lot easier.. Its a different matter all together that the other browser that you have to develop for does not have a powerful enough tool. (Name deliberately avoided to avoid the eminent flame-war!) Yes the current versions have a quite powerful debug and development tools but (hopefully) few developers working on products still have to consider some 10 year old versions (namely 6, 6.5 and 7). Ah, the pain.. Anyways, we are not discussing that..

What we are talking about is the issues that we face when testing our changes to a thousand lines JavaScript code on multiple browsers, especially after we are accustomed to the ease of firebug. 🙂

I spent much of my time commenting my console.log() statements before I could dare to open the page in IE. Well, fear not, the days have passed! The pain drove me to write a logger object that can not only sense presence of console object but can do much more than that, like ability to assert, selective logging and more..

I call it the SmartLogger.

//Global Logger Object, for use during development, configurable logger.
var SmartLogger = function(options) {

var sl = {}; // Logger Object

// Accepting passed params.
options = options || {};
sl.enableLogger = options.enableLogger!==undefined?options.enableLogger:true;
sl.enableAssert = options.enableAssert!==undefined?options.enableAssert:true;
sl.loggerOutput = options.loggerOutput!==undefined?options.loggerOutput:undefined; //'console', 'alert', undefined
sl.selectiveEnable = options.selectiveEnable!==undefined?options.selectiveEnable:'';
sl.selectiveDisable = options.selectiveDisable!==undefined?options.selectiveDisable:'';

// Logger properties = "SmartLogger";
sl.whoami = function(){ return "SmartLogger_"+sl.enableLogger+"_"+sl.enableAssert+"_"+sl.loggerOutput+"_"+sl.selectiveEnable+"_"+sl.selectiveDisable;}
sl.version = '0.7';

// Checks if console object is defined. Checked only at the time of instantiation.
var hasConsole = (typeof console === "object");

// Checks if logging should be done to console.
function logToConsole(){
if (sl.loggerOutput){
if (sl.loggerOutput === 'console') return true;
} else {
if(hasConsole) return true;
return false;

// Handles the logging intelligence
function handleLogging(logMethod, logString, strId){
if(!sLog(strId)) {return;}
// Decides if to log and logs or alerts appropriately.
if (logToConsole()){ // && hasConsole
} else {

// Handles the selective logging functionality
function sLog(strId){
var allowLog = true;
if (sl.selectiveEnable) {
allowLog = strId === sl.selectiveEnable;
} else if (sl.selectiveDisable) {
allowLog = !(strId === sl.selectiveDisable);

return allowLog;

// Returns a formatted object structure with current values to complete depth.
function printString(obj, name, str, strEnd){
var stringified;
name = name?name:"Object",
str = str?str:"";
strEnd = strEnd?strEnd:"";
stringified = str+name+" : {n";
for (var a in obj){
if (typeof obj[a] === 'object'){
stringified+= printString(obj[a],a,"t",",");
} else {
stringified+= str+"t"+a +" : "+obj[a]+",n";
stringified += str+"}"+strEnd+"n";
return stringified;

// Exposed methods of the object
//log a string to console/alert
sl.log = function(str, strId){
handleLogging('log', str, strId);

//debug logging a string to console/alert
sl.debug = function(str, strId){
handleLogging('debug', str, strId);

//write an information string to console/alert = function(str, strId){
handleLogging('info', str, strId);

//throw error string to console/alert
sl.error = function(str, strId){
handleLogging('error', str, strId);

//Assert an assumption
sl.assert = function(str, strId){
handleLogging('log', 'Assumption: true', strId);
handleLogging('error', 'Assumption failed!', strId);

// Logs the formatted object structure with current values to console/alert
sl.stringToConsole = function(obj, str){
sl.log(printString(obj, str));

return sl;

var sl = new SmartLogger();


  • Multiple logging profiles can be maintained at the same time with different properties.
var sl = new SmartLogger();
var sl2 = new SmartLogger({selectiveEnable: 'block1'});
  • Proprieties can be set at the time of instantiation or even later.
var sl = new SmartLogger();
sl.loggerOutput = 'console';
var sl2 = new SmartLogger({loggerOutput: 'console'});
  • name, version number and whoami to identify the logger with a string of its current properties.
var sl = new SmartLogger(); // SmartLogger.
sl.version // 0.7
sl.whoamI() // Returns a string of its properties with the name of the object in a specific sequence:
// "SmartLogger_"+ enableLogger +"_"+ enableAssert+"_"+ loggerOutput+"_"+ selectiveEnable+"_"+ selectiveDisable;
// Example: SmartLogger_true_true_console__b
// We will see what these properties are in some time..
  • Enable or disable logging altogether: enableLogger controls if the statements should ever be logged.
var sl = new SmartLogger();
sl.log('gets logged');
sl.enableLogger = false;
sl.log('never gets logged');
  • Intelligently decides where the logging statements should go…
sl.loggerOutput = undefined; //default
/* Decides based on presence of 'console' object.
If console is present statements will be logged to console,
else like in case of IE, will be 'alerted' to the user.
Now at times this can get messy, with loads of log statements alerting on our face..
But wait, we have ways to handle that.*/

sl.loggerOutput = 'console';
// Plain instruction, no intelligence, all statements will always go to console.
// If console is not present statements will just be eaten-up.

sl.loggerOutput = 'alert';
// Another plain instruction, all statements will always be alerted.
// Will not bother to check if console exists or not.
  • Log formatted objects to console. Now you wont need that much with firebug but to see the entire contents of the object, well formatted you can just say stringToConsole.
// Just a sample object with unknown properties.
var obj = {prop1: 'value',functProp:function(){return "this is a function that returns me!";}, propObj:{prop2:'value2'}};
sl.stringToConsole(obj); // You say this.

// On console or in the alert prompt, you get this
Object : {
prop1 : value,
functProp : function () {
return "this is a function that returns me!";
propObj : {
prop2 : value2,
  • Assert your assumptions. Checks that the assumption is true, if yes, logs so. If assumption fails, will write out an error on the console and invoke the debugger so the user can check in the stack exactly where the assumption failed and why.
sl.assert(1==1); // logs 'Assumption: true' to console.
sl.assert(1==2); // Logs error 'Assumption: failed!' and invoke debugger to the assert line in SmartLogger.

//Now you can go and check in the stack and watch to panels to check value and call stack.
  • Has a wrapper for 4 of the logging APIs from firebug and adding new is not much of a task. What it already has:
    • log
    • debug
    • info
    • error
  • Has ability of selective logging.
Now this thing is a live saver. The properties selectiveEnable and selectiveDisable control what statements to log. While these are not mandatory inputs to all the wrappers but I suggest you set them always. These are logging context that can be used to selectively enable logs for only partial of the code, the code that currently interests you..
// Suppose we were working on a defect number 101 and now we are developing a functionality for
// automating welcome messages to users and are asked to urgently fix defect 203.
// Ah, complex scenario, but it will only help understand the purpose.

// When we are working on defect 101, we had the logger configured as statements as:
sl.log("reached here"); // worst way to log: who knows wheres here! but just an example.

// Now we are working on the functionality and
// we would not want those 10 logging statements added while we were working on the defect.
// We can remove them or simply enable the 'selective logger'!
sl.selectiveEnable = 'welcomer';
sl.log("fetching message", "welcomer");
// And voila, only the 'welcomer' messages will be logged.

// Now we get the next urgent defect.
sl.selectiveEnable = 'defect203';
sl.log("value in Obj1.str"+Obje1.str, "defect203");
// We get only the defect203 logs!

// Now some of our new changes depend on the changes we made in defect101, but we cant get the logs from those..
// What do we do? If someone did not enable selective logger and removed the statements, please add them back (:p),
// remove statements for 'welcomer' functionality. Or simply, disable 'welcomer' messages..!
sl.selectiveEnable = '';
sl.selectiveDisable = 'welcomer';
sl.log("value in Obj1.str"+Obje1.str, "defect203");
sl.log("value in Obj2.varInt1"+Obj2.varInt1, "defect101");
// Ha ha! Log statements for 'welcomer' gone and we get the rest!
While using the SmartLogger, I suggest you always pass the string identifier, so that you can control the logs at any point of time later.

What can you expect next in SmartLogger:

  • Use assert from firebug itself.
  • Check that the function exists in the logger before calling it.
  • Make the selective logger take arrays.
  • In stringToConsole, handle functions too to remove that glitch in no closing bracket.

Let me know what you think about the SmartLogger, if you would like any additions to its behaviour and also if you find any defects in the comments below.