flooble :: scripts :: Toggler Minigame


All about flooble \| Get a free chatterbox \| Make the web your notepad \| logic problems / brain teasers \| random fun stuff

Also check out: Color Picker | Post 'Em Notes | Floating Menu | More

Toggler






get toggler @ flooble

Rate it on HotScripts:

If your page is anything like most pages on the web, it probably has a sidebar. And most likely, that sidebar is filled with a whole bunch of links. Same old boring links. But now, there's toggler, the amazing mini-game from flooble that's so tiny, it's only 130 pixels wide! Are you thinking what we're thinking? Yes, it'd be perfect for your bland sidebar.

Check out toggler to the right. It's small, but it's a fun little game that your visitors will love. The object is to turn all the [X] buttons into [.] buttons by toggling them. But be careful: when you toggle a button, the four buttons around it are toggled as well. When all the buttons are turned into [.]'s, you win. But the point of the game is to win after the smallest possible number of moves.

Like it? So will your visitors. And we're giving toggler away absolutely free, because here at flooble.com we're just that nice.

So how do you put this puppy on your page? Easy. Just copy the following code, and paste it into your page's body somwhere. (Be careful not to put this inside of a <form> ... </form> tag, since that may cause problems.)

<script language="javascript">
		var max = 3;
		var score = 0;
		var moves = 0;
		
		function press(form, button) {
			name = button.name;
			x = name.substring(0,1);
			y = name.substring(2,3);
			play(form, (x-1+1), (y-1+1));
		}
		
		function play(form, x, y) {
			moves++;
			toggle(form, x, y);
			toggle(form, x-1, y);
			toggle(form, x+1, y);
			toggle(form, x, y-1);
			toggle(form, x, y+1);
			if (score == 16) {
				if (moves == 4) { w = 'That\'s the best possible score!'; }
                                else { w = 'See if you can do any better!'; }
                                alert('You win after ' + moves + ' moves! \n' + w);
				resetboard(form);
			}
		}

function showrules() {
			rules = 'Toggler - from flooble.com \n\n'
				+ 'The goal of the game is to turn \n' 
				+ 'all the buttons from [X] to [.]. \n'
				+ 'This is done by clicking buttons. \n'
				+ 'When a button is clicked, its state is \n'
				+ 'toggeled, but so is the state of four \n'
				+ 'buttons around it, so plan carefully! \n';
			alert(rules);
		}
		
		function resetboard(form) {
			var i,j,button;
			for (i = 0; i < 4; i++) {
				for (j = 0; j < 4; j++) {
					button = getelement(form, i + '_' + j);	
					button.value='X';
				}
			}
			score = 0;
			moves = 0;
		}

function getelement(form, name) {
			var k;
			var elements = form.elements;
			for (k = 0; k < elements.length; k++) {
				if (elements[k].name == name) return elements[k];
			}
		}
	
		function toggle(form, x, y) {
			if (x < 0 || y < 0 || x > max || y > max) {
				//alert('Ignore (' + x + ',' + y + ')');
				return;
			}
			name = x + '_' + y;
			button = getelement(form, name);
			a = button.value;
			button.value = '!!!';
			//alert(a + '  (' + x + ',' + y + ')') ;
			button.value = a;
			if (button.value == 'X') {
				button.value = '.';
				score ++;
			} else {
				button.value = 'X';
				score --;
			}
		}
	</script>
	
	<table border="0" cellspacing="0" cellpadding="1">
		<form>
		<tr>
			<td><input style="width:30px;" type="button" name="0_0" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="1_0" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="2_0" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="3_0" value="X" onclick="press(this.form, this);"></td>
		</tr>
		<tr>
			<td><input style="width:30px;" type="button" name="0_1" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="1_1" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="2_1" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="3_1" value="X" onclick="press(this.form, this);"></td>
		</tr>
		<tr>
			<td><input style="width:30px;" type="button" name="0_2" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="1_2" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="2_2" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="3_2" value="X" onclick="press(this.form, this);"></td>
		</tr>
		<tr>
			<td><input style="width:30px;" type="button" name="0_3" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="1_3" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="2_3" value="X" onclick="press(this.form, this);"></td>
			<td><input style="width:30px;" type="button" name="3_3" value="X" onclick="press(this.form, this);"></td>
		</tr>
		<tr>
			<td colspan="2">
				<input style="width:62px;" type="button" value="reset" onclick="resetboard(this.form);">
			</td>
			<td colspan="2">
				<input style="width:62px;" type="button" value="rules" onclick="showrules();">
			</td>
		</tr>
		<tr>
			<td colspan="4" style="font-family:Verdana; font-size:10px;">
				<a href="http://www.flooble.com/scripts/toggler.php">get <b>toggler</b></a> @
				<a href="http://www.flooble.com/">flooble</a>
			</td>
		</tr>
		</form>
	</table>
	<img src="http://www.flooble.com/images/dot.gif?src=toggler" width="1" height="1">
<noscript>
</noscript>

We spent a full day creating this script.
If you found it useful, please consider donating a few of dollars to show your support:

Copyright © 2002 - 2004 by Animus Pactum Consulting. All rights reserved.