Home
Games
Button Mania 2
Check out this simple but addictive set-all-the-buttons-to-0
game. If you can count to three, you're good enough. Higher
levels are, of course, a bit more of a challenge. This final
version has a clean look and works in most any browser.
How to play :
Click on one of the buttons in the playing field to subtract 1 from that button's value, as well as from the values of the 4 surrounding ones.
Objective :
Set all buttons to '0'.
Example (a click on the "2" in the middle):
Things you should know :
As soon as you click on "New", a new game starts.
The score starts counting down from 1000.
The quicker you finish, the higher your score will be.
"Undo" and "Hint" as well as using more "Clicks" than the current difficulty setting requires, will all make you lose a couple points.
The JavaScript Source: Games: Button Mania
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!
<!-- THREE STEPS TO INSTALL BUTTON MANIA:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Patrick Dostert (dostert@pt.lu ) -->
<!-- Web Site: http://webplaza.pt.lu/dostert/buttonmania.htm -->
<style type="text/css">
body { background-color: #FEFEFE; color: black }
input.play { font-family: monospace; font-weight:bold; font-size: 125%; width: 2em; }
div {text-align: center;}
div table {margin-left: auto; margin-right:auto; text-align: left;}
</style>
<script type="text/javascript">
/*
I put into this script everything I thought would be remotely confusing.
If you understood everything, I recommend you get some help, immediately.
The intellect, as a means for the preservation of the individual,
unfolds its chief powers in simulation.
- Friedrich Nietzsche (1844-1900) -
*/
var Size = new Number(6);
var Moves = new Array();
var noGame = 1;
var FD;
var Board = new function()
{
this.init = function()
{
var a;
Solve.init();
for(var i = 0; i < Size * Size; this.set(i++,0));
for(var i = 0; i < 3 + 3 * FD.selectedIndex; i++)
{
Board.clicked(a = Math.floor(Math.random() * Size) + "-" + Math.floor(Math.random() * Size),1);
Solve.add(a);
}
}
this.clicked = function(square,c)
{
var x,y;
this.change(x = parseInt(square.split("-")[0]),y = parseInt(square.split("-")[1]),c);
this.change(x - 1,y,c);
this.change(x + 1,y,c);
this.change(x,y - 1,c);
this.change(x,y + 1,c);
}
this.change = function(x,y,c)
{
if(this.check(x,y))
this.set(x + Size * y,(parseInt(this.get(x,y)) + c) & 3);
}
this.set = function(square,val)
{
window.document.forms["playForm"].elements[square].value = val;
}
this.get = function(x,y)
{
return (this.check(x,y) ? window.document.forms["playForm"].elements[x + Size * y].value : ' ');
}
this.check = function(x,y)
{
return (x >= 0 && y >= 0 && x < Size && y < Size);
}
}
var Counter = new function()
{
this.counter = 0;
this.counterID = 0;
this.set = function(i)
{
this.stop();
this.counter = i;
this.show();
}
this.get = function()
{
return this.counter;
}
this.show = function()
{
window.document.forms["CounterForm"]["Counter"].value = this.counter;
}
this.add = function(i)
{
if((this.counter += i) <= 0)
this.set(0);
this.show();
}
this.start = function()
{
this.set(1000);
this.counterID = setInterval('Counter.add(-1)',166);
}
this.stop = function()
{
if(this.counterID)
clearInterval(this.counterID);
this.counterID = 0;
}
}
var Solve = new function()
{
this.solve = new Array();
this.solveID = 0;
this.init = function()
{
this.stop();
this.solve.length = 0;
for(var i = 0; i < 9; window.document.forms["hintForm"].elements[i++].value = ' ');
}
this.add = function()
{
for(var i = 0; i < arguments.length; this.solve.push(arguments[i++]));
this.solve.sort();
for(var i = 0; i <= this.solve.length - 4; i++)
if(this.solve[i] == this.solve[i + 1] && this.solve[i] == this.solve[i + 2] && this.solve[i] == this.solve[i + 3])
this.solve.splice(i--,4);
return this.solve.length;
}
this.start = function()
{
this.solveID = setInterval('Solve.run()',window.document.forms["solveForm"].SolveSpeed.options[window.document.forms["solveForm"].SolveSpeed.selectedIndex].value);
}
this.stop = function()
{
if(this.solveID)
clearInterval(this.solveID);
this.solveID = 0;
}
this.run = function()
{
var i;
if(i = this.solve.pop())
return Board.clicked(i,3);
this.stop();
}
this.hint = function()
{
var i = this.solve[Math.floor(Math.random() * this.solve.length)];
var x = parseInt(i.split("-")[0]);
var y = parseInt(i.split("-")[1]);
window.document.forms["hintForm"].elements[0].value = Board.get(x - 1,y - 1);
window.document.forms["hintForm"].elements[1].value = Board.get(x,y - 1);
window.document.forms["hintForm"].elements[2].value = Board.get(x + 1,y - 1);
window.document.forms["hintForm"].elements[3].value = Board.get(x - 1,y);
window.document.forms["hintForm"].elements[4].value = Board.get(x,y);
window.document.forms["hintForm"].elements[5].value = Board.get(x + 1,y);
window.document.forms["hintForm"].elements[6].value = Board.get(x - 1,y + 1);
window.document.forms["hintForm"].elements[7].value = Board.get(x,y + 1);
window.document.forms["hintForm"].elements[8].value = Board.get(x + 1,y + 1);
}
}
var Highscores = new function()
{
this.highscores = new Array();
this.init = function()
{
for(var i = 0; i < FD.length; i++)
{
this.highscores[i] = new Array(10);
for(var j = 0; j < 10; this.highscores[i][j++] = 1);
}
}
this.add = function(score)
{
this.highscores[FD.selectedIndex].push(score);
this.highscores[FD.selectedIndex].sort();
this.highscores[FD.selectedIndex].reverse();
this.highscores[FD.selectedIndex].pop();
this.show(score);
}
this.show = function(score)
{
for(var i = 0, t = ''; i < 10; t += (i < 9 ? ' ' : '') + (i + 1) + ': ' + this.highscores[FD.selectedIndex][i] + (score == this.highscores[FD.selectedIndex][i++] ? ' <--' : '') + '\n');
window.document.forms["scoreForm"].Scores.value = t;
}
}
function buttonNew()
{
Board.init();
Moves.length = window.document.forms["clicksForm"].Clicks.value = 0;
Highscores.show(0);
Counter.start();
noGame = 0;
}
function buttonMove(x)
{
if(noGame)
return;
Board.clicked(x,3);
window.document.forms["clicksForm"].Clicks.value = Moves.push(x);
if(Solve.add(x,x,x))
return;
noGame = 1;
Counter.stop();
if((i = 3 + 3 * FD.selectedIndex - Moves.length) < 0)
Counter.add(7 * i);
Highscores.add(Counter.get());
}
function buttonUndo(flag)
{
if(noGame)
return;
Counter.add(-20);
while(flag-- && (i = Moves.pop()))
Board.clicked(i,1),Solve.add(i);
window.document.forms["clicksForm"].Clicks.value = Moves.length;
}
function buttonHint()
{
if(noGame)
return;
Counter.add(-35);
Solve.hint();
}
function buttonSolve()
{
if(noGame)
return;
noGame = 1;
Counter.set(0);
Solve.start();
}
function doOnload()
{
FD = window.document.forms["settingsForm"]["Difficulty"];
Highscores.init();
}
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="doOnload()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Patrick Dostert (dostert@pt.lu ) -->
<!-- Web Site: http://webplaza.pt.lu/dostert/buttonmania.htm -->
<div>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td colspan="2">
<form name="settingsForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<p>
Difficulty setting: <select name="Difficulty" onChange="buttonNew()">
<option>Huh, what ?</option>
<option>Dumb</option>
<option>Real easy</option>
<option>Easy</option>
<option selected>Normal</option>
<option>Hard</option>
<option>Real hard</option>
<option>Master</option>
<option>Impossible</option>
</select>
- <input type="button" value="New" onClick="buttonNew()" title="Start a new game"> - <input type="button" value="Restart" onClick="buttonUndo(-1);" title="Restart the board"> - <input type="button" value="Undo" onClick="buttonUndo(1);" title="Undo last move">
</p>
</form>
</td>
</tr>
<tr>
<td>
<form name="playForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<!--
<p>
<script type="text/javascript">
for(y = 0; y < Size; y++,window.document.write("<br>"))
for(x = 0; x < Size; x++)
window.document.write('<input class="play" type="button" value="0" onClick="buttonMove(\'' + x + '-' + y + '\')">');
</script>
</p>
-->
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-0')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-0')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-0')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-0')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-0')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-0')"></td></tr>
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-1')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-1')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-1')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-1')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-1')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-1')"></td></tr>
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-2')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-2')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-2')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-2')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-2')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-2')"></td></tr>
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-3')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-3')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-3')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-3')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-3')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-3')"></td></tr>
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-4')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-4')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-4')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-4')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-4')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-4')"></td></tr>
<tr><td><input class="play" type="button" value="0" onClick="buttonMove('0-5')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('1-5')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('2-5')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('3-5')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('4-5')"></td><td><input class="play" type="button" value="0" onClick="buttonMove('5-5')"></td></tr>
</table>
</form>
</td>
<td>
<form name="scoreForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<p>
<textarea name="Scores" rows="11" cols="18" readonly>
Highscores
since last reload
</textarea>
</p>
</form>
</td>
</tr>
<tr>
<td>
<form name="clicksForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<p>
Clicks used: <input type="text" name="Clicks" value="0" size="3" readonly>
</p>
</form>
</td>
<td>
<form name="CounterForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<p>
Current score: <input type="text" name="Counter" value="0" size="6" readonly>
</p>
</form>
</td>
</tr>
<tr>
<td>
<form name="hintForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td></tr>
<tr><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td></tr>
<tr><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td><td><input class="play" type="button" value=" "></td></tr>
</table>
<div>
<p><input type="button" value="Hint" onClick="buttonHint()"></p>
</div>
</form>
</td>
<td>
<form name="solveForm" action="buttonmania.htm" method="GET" onSubmit="return false;">
<p>
Solve speed: <select name="SolveSpeed">
<option value="500">Fast</option>
<option value="900" selected>Normal</option>
<option value="1300">Slow</option>
</select>
</p>
<p>
<input type="button" value="Solve" onClick="buttonSolve()">
</p>
</form>
</td>
</tr>
</table>
</div>
<dl>
<dt><strong>How to play</strong>:</dt>
<dd>Click on one of the buttons in the playing field<br>to subtract 1 from that button's value,<br>as well as from the values of the 4 surrounding ones.</dd>
<dt><strong>Objective</strong>:</dt>
<dd>Set all buttons to '0'.</dd>
</dl>
<dl>
<dt><strong>Example</strong> (a click on the "2" in the middle):</dt>
<dd>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td> </td><td><strong>0</strong></td><td> </td></tr>
<tr><td><strong>1</strong></td><td><strong>2</strong></td><td><strong>3</strong></td></tr>
<tr><td> </td><td><strong>2</strong></td><td> </td></tr>
</table>
</td>
<td>
-->
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td> </td><td><strong>3</strong></td><td> </td></tr>
<tr><td><strong>0</strong></td><td><strong>1</strong></td><td><strong>2</strong></td></tr>
<tr><td> </td><td><strong>1</strong></td><td> </td></tr>
</table>
</td>
</tr>
</table>
</dd>
</dl>
<dl>
<dt><strong>Things you should know</strong>:</dt>
<dd>
<ul>
<li>As soon as you click on "New", a new game starts.</li>
<li>The score starts counting down from 1000.</li>
<li>The quicker you finish, the higher your score will be.</li>
<li>"Undo" and "Hint" as well as using more "Clicks" than the current difficulty setting requires,<br>will all make you lose a couple points.</li>
</ul>
</dd>
</dl>
<p>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 16.72 KB --> Did you use this script? Do you like this site? Please link to us!
Comments feed