The JavaScript Source: Games: Button Mania 2

Click here

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

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

  <HEAD>     <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>  <BODY onLoad="doOnload()">      <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;">  <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> 
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Click here

Sign up for the Web Development Daily Newsletter

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Click here