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!
an easy soln for custom mode:
00,03,30,33
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” 😀
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.
@Vikram: You solution doesn’t work
@Jynx: Great work, I gave up while solving it in either mode
@Jynx……that was a good one.
Pingback: Toggle : A Javascript game, anyone up for the challenge? | Abhi's …
@ Abhi : Interesting game 🙂
@Jynx : Elegant solution 🙂
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 🙂
1-0,4-0,1-3,4-4,4-2,4-1
Â
the above sol wrks for custom
00,03,31,34
is also a solution for custom
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
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!
incredibly easy , with only 4 steps :p
1-4,1-1,4-1,4-4
Â
Â
sorry , i forget to mention the version
it’s custom
for Custom
1-1,4-1,1-4,4-4
What do u mean bu 0-1 1-1 how to interpret it