Toggle : A Javascript game, anyone up for the challenge?

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.

Toggle

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!

  • jynx

    an easy soln for custom mode:
    00,03,30,33

  • Vikram

    Used custom mode for last step.

    0-0,0-4,1-2,4-2,4-4,4-3,3-4,4-0,2-1,4-1,2-2,3-0,3-2,3-3,2-3,0-3,1-3,1-4,2-4,2-0,3-1

  • Indeed. But custom mode was made more for a help.

    Looking forward to a possible solution in “classic mode”. That will be “awesome” 😀

  • jynx

    classic mode soln:
    00,01,
    10,11,13,14,
    22,23,24,
    31,32,33,
    41,42,44

  • Excellent Jynx! That does the trick indeed 😀

    Now interesting would be to find all possible solutions using an algorithm/script. 😉 A real tricky coding problem.

  • bala

    @Vikram: You solution doesn’t work
    @Jynx: Great work, I gave up while solving it in either mode

  • Abhijeeth

    @Jynx……that was a good one.

  • Pingback: Toggle : A Javascript game, anyone up for the challenge? | Abhi's …()

  • Sowmya

    @ Abhi : Interesting game 🙂
    @Jynx : Elegant solution 🙂

  • truly

    nice one jhantu….custom one was easy….still figuring out classic one….but one more soln cn b used to make a chess board in classic one….though its not meant for that….

  • I have already seen it somethere…
    Rufor

  • @Rufor Yup, as i already wrote it came to me as a java applet and i just converted that into a javascript game. 😀

    @truly Thanks man. The solution is already posted by @jynx. See the above comments if you want to 🙂

  • Ashish

    1-0,4-0,1-3,4-4,4-2,4-1
     

  • Ashish

    the above sol wrks for custom

  • truly

    00,03,31,34
    is also a solution for custom

  • vikas garg

    1-2,3-4,4-2,3-0,0-0,0-4,2-2,2-3,1-3,3-3,2-4,4-4,3-1,4-0,1-0,2-0,0-1,0-2,1-4

  • Jenna

    Pretty nice post. I just came by your blog and wanted to say
    that I have really enjoyed browsing your posts. Anyway
    I’ll be subscribing to your blog and I hope you post again soon!

  • Khaled

    incredibly easy , with only 4 steps :p
    1-4,1-1,4-1,4-4
     
     

  • Khaled

    sorry , i forget to mention the version
    it’s custom

  • Sahil

    for Custom

    1-1,4-1,1-4,4-4

  • Hiten

    What do u mean bu 0-1 1-1 how to interpret it