Button Mania 2

Patrick Dostert Aug 19, 2003

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):

	0
1	2	3
	2

-->

	3
0	1	2
	1

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  -->

<HEAD>

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>

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>

<div>

<tr>

<p>

Difficulty setting: <select name="Difficulty" onChange="buttonNew()">

<option selected>Normal</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>

<!--

<p>

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>

</form>

</td>

<td>

<p>

Highscores

since last reload

</textarea>

</p>

</form>

</td>

</tr>

<tr>

<td>

<p>

Clicks used: <input type="text" name="Clicks" value="0" size="3" readonly>

</p>

</form>

</td>

<td>

<p>

Current score: <input type="text" name="Counter" value="0" size="6" readonly>

</p>

</form>

</td>

</tr>

<tr>

<td>

</table>

<div>

</div>

</form>

</td>

<td>

<p>

Solve speed: <select name="SolveSpeed">

<option value="900" selected>Normal</option>

</select>

</p>

<p>

</p>

</form>

</td>

</tr>

</table>

</div>

<dl>

<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>

<tr>

<td>

</table>

</td>

<td>

-->

</td>

<td>

</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>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Button Mania 2

Leave a Response

Attention JavaScript Coders

Go Deeper