Button Mania

JavaScriptSource Staff Aug 1, 2002

A simple but addictive "set all buttons to 0" game. Should work in any CSS-aware browser.

How to play:: Click on one of the buttons in the playing field
to decrement that button's value by 1,
as well as the values of the 4 surrounding ones.
Objective:: Set all buttons to '0'.

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: #EEEEEE; color: black }

a { font-weight: bold }

a:link { background-color: #EEEEEE; color: blue }

a:visited { background-color: #EEEEEE; color: blue }

a:active { background-color: #EEEEEE; color: blue }

a:hover { background-color: white; color: maroon}

input { font-family: monospace; font-size: 24px; border-left: 10px; border-right: 10px; border-color: silver; border-style: double }

-->

</style>

<!-- Begin

var Size = new Number(6);

var Moves = new Array();

function NewGame()

{

for(i = 0; i < Size * Size; document.forms[0].elements[i++].value = 0);

for(i = 0; i < 3 + 3 * document.forms[0].Difficulty.selectedIndex; i++)

NewValue(Math.floor(Math.random() * Size),Math.floor(Math.random() * Size),1);

Moves.length = document.forms[0].Score.value = 0;

}

function TakeBack(flag)

{

while(flag-- && (i = Moves.pop()))

NewValue(parseInt(i.split("-")[0]),parseInt(i.split("-")[1]),1);

document.forms[0].Score.value = Moves.length;

}

function Clicked(x,y)

{

NewValue(x,y,3);

document.forms[0].Score.value = Moves.push(x + "-" + y);

for(i = 0; i < Size * Size; i++)

if(parseInt(document.forms[0].elements[i].value))

return;

alert((Moves.length <= 3 + 3 * document.forms[0].Difficulty.selectedIndex ? "Perfect!\n" : "") + "Done in " + Moves.length + " clicks");

NewGame();

}

function NewValue(x,y,c)

{

ChangeValue(x,y,c);

ChangeValue(x - 1,y,c);

ChangeValue(x + 1,y,c);

ChangeValue(x,y - 1,c);

ChangeValue(x,y + 1,c);

}

function ChangeValue(x,y,c)

{

if(x >= 0 && x < Size && y >= 0 && y < Size)

with(document.forms[0].elements[x + Size * y]) value = (parseInt(value) + c) & 3;

}

//  End -->

</script>

</HEAD>

<p><a href="" onClick="NewGame(); return false;" onMouseOver="window.status='Start a new game'; return true;" onMouseOut="window.status=''; return true;" title="Start a new game">New</a> - <a href="" onClick="TakeBack(-1); return false;" onMouseOver="window.status='Restart the board'; return true;" onMouseOut="window.status=''; return true;" title="Restart the board">Restart</a> - <a href="" onClick="TakeBack(1); return false;" onMouseOver="window.status='Undo last move'; return true;" onMouseOut="window.status=''; return true;" title="Undo last move">Undo</a></p>

<!--

for(y = 0; y < Size; y++,window.document.write("<br>"))

for(x = 0; x < Size; x++)

window.document.write('<input type="button" value="" onClick="Clicked(' + x + ',' + y + ')">');

// -->

</script>

<p>

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

<option selected>Normal</option>

<option>Master</option>

<option>Impossible</option>

</select>

</p>

<p>Clicks used: <input type="text" name="Score" value="0" size="3" disabled></p>

</form>

<dl>

<dd>Click on one of the buttons in the playing field<br>to decrement that button's value by 1,<br>as well as the values of the 4 surrounding ones.</dd>

<dt>Objective:</dt>

<dd>Set all buttons to '0'.</dd>

</dl>

<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

Leave a Response

Attention JavaScript Coders

Go Deeper