Today is . Page created 05/13/07

TechTerms Light Bulb Lights Out Game On Off Switch


Moves:

Blast from the Past: A simple game called lights out. You can customize the number of buttons to change the difficulty.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.20, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in IE 7.0, Opera 9.20 and AOL Explorer 1.5. In Netscape 8.1.3 and Firefox 2.0.0.3 it did not work correctly.

  • Once you start and click the first button in Netscape 8.1.3 and Firefox 2.0.0.3, the alert message appears to tell you you won the game in 1 move.
  • [ Error Example ]

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> (minimal reconfigurations) section and <BODY> (no reconfigurations) section (anywhere you want it to appear) of your document.

<HEAD> Section Reconfigurations

<script lanugage="javascript">
<!--
// Change these values from 3 - 9 for
// different levels of difficulty
var nRows = 6;
var nCols = 6;

//change to edit win message.
var sWinMsg = "Your Message Here."

As you can notice to the left the reconfigurations are extremely minimal. Basically all you can do is configure how many little buttons in each nRows and nCols plus your alert message upon winning the game.

  • var nRows = 6;       This denotes how many buttons will be left to right or right to left
  • var nCols = 6;       This denotes how many buttons will be from top to bottom
  • var sWinMsg = "Your Message Here."     This is the message you want to appear upon winning the game.

Add-On Not Included In Script Little Extra Not Included In The Script:     The last this we shall cover is to make the <HEAD> section of the script into an external.js file and called from an external location. If you need a little refresher on howto, see below.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

  1. Remove the opening and closing JavaScript tags.
  2. Copy/cut and paste everything in-between into a notepad and save it as lightsOut.js*
  3. The newly created (Saved As) file will look something like this   lightsOut.js
  4. Upload the newly created lightsOut.js into your directory
  5. Paste the below snipplet of code into the <HEAD> section of your document to call formScreener.js

    <script type="text/javascript" src="lightsOut.js"> </script>

  6. If you have uploaded the lightsOut.js into a different directory, you will have to change the path of the above to reflect the location.
  7. If changing the path is a little confusing, grab the below link and it is explained in detail.
    [ Upload To Different Directory ]
* We named our external.js file lightsOut.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external.js file in the <HEAD> section, grab the below link and you are there.
[ Lights Out Game With External.JS File ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]   Digg It!