The JavaScript Source: Games: Button Mania 2

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

Sign up for the JavaScript Weekly

internet.com Privacy Policy

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

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms

PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
HP eBook: Guide to Storage Networking
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now!
Video: Intel Launches Data Center Efficiency Initiative
Intel Podcast: Talking vPro
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action

Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter
Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications
Acresso Download: Try InstallShield 2009
Microsoft Download: Silverlight 2 SDK
Access Crystal Reports for Eclipse Basic Edition (Free)
30-Day Trial: SPAMfighter Exchange Module

IBM Energy Efficiency e-Kit Shows You How to Reduce Costs
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Developer Runtime (Windows)
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today!
Demo: Dual-Core Intel Itanium 2 Processor
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage

Microsoft Article: Making Designer/Developer Collaboration a Reality
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES