Emanuele Feronato » Javascript

Creation of a Sokoban game with jQuery

Emanuele Feronato — Mon, 14 Jun 2010 09:55:27 +0000

When I said there are games you must be able to make in less than a day, obviously I meant in any language.

This is the jQuery version of the Sokoban game I made in less than 2Kb.

Or, more precisely, it’s the javascript version, powered by jQuery.

You should know the rules… click in the iframe and play using WASD keys.

Let’s take look at the script:




     
     jQuery Sokoban by Emanuele Feronato
     
     <script type="text/javascript">
     $(document).ready(function() {
     	var map = new Array();
     	map[0] = new Array(1,1,1,1);
     	map[1] = new Array(1,0,0,1,1,1,1,1);
     	map[2] = new Array(1,0,2,0,0,3,0,1);
     	map[3] = new Array(1,0,3,0,0,2,4,1);
     	map[4] = new Array(1,1,1,0,0,1,1,1);
     	map[5] = new Array(0,0,1,1,1,1);
     	for(i=0;i<map.length;i++){
     		for(j=0;j<map[i].length;j++){
     			switch(map[i][j]){
     				case 1:
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					break;
     				case 2:
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					break;
     				case 3:
     					$("#sokoban").append('+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px">
');
     					break;
     				case 4:
     					map[i][j]=0;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					break;
     				case 5:
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					$("#sokoban").append('+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px">
');
     					break;
     				case 6:
     					map[i][j]=2;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					$("#sokoban").append('+i*32+'px;left:'+j*32+'px">
');
     					break;
     			}
     		}
     	}
     	function possible_move(x,y){
     		var tile = map[player_pos[0]+y][player_pos[1]+x]
     		var far_tile = map[player_pos[0]+2*y][player_pos[1]+2*x]
     		var can_move = false;
     		var solved = true;
     		if(tile==0 || tile==2){
                    can_move = true;
                    solved = false;
               }
               else{
                    if((tile==3 || tile==5) && (far_tile==0 || far_tile==2)){
                         map[player_pos[0]+y][player_pos[1]+x]-=3;
                         map[player_pos[0]+2*y][player_pos[1]+2*x]+=3;
                         $("#c"+(player_pos[0]+y)+"_"+(player_pos[1]+x)).animate({
                              left: "+="+(x*32),
                              top: "+="+(y*32)
                         },100,function(){
                              for(i=0;i<map.length;i++){
                                   for(j=0;j<map[i].length;j++){
                                        if(map[i][j]==2){
                                             solved = false;
                                             break;
                                        }
                                   }
                              }
                              if(solved){
                                   alert("SOLVED")
                              }
                         }).attr("id","c"+(player_pos[0]+2*y)+"_"+(player_pos[1]+2*x))
                         can_move = true;
                    }
               }	
               if(can_move){
                    player_pos[0]+=y;
                    player_pos[1]+=x;
     			$("#player").animate({
     				left: "+="+(x*32),
                         top: "+="+(y*32)
     			},100);  
               }
     	}
     	$(document).keydown(function(event) {
     		switch(event.keyCode){
     			case 65:
     				possible_move(-1,0)
     				break;
     			case 87:
     				possible_move(0,-1)
     				break;
     			case 68:
     				possible_move(1,0)
     				break;
     			case 83:
     				possible_move(0,1)
     				break;
     		}
        	});
     });
     script>

Line 7: loading jQuery

Line 9: function to be executed when the document is ready

Lines 10-16: map initialization. Unfortunately javascript does not support multi-dimensional array creation on the fly…

Lines 17-46: drawing the map. As you can see, all map elements are divs of different classes placed according to their position in the map. Movig objects, such as the player and the crates, are stylized with an high z-index to always stay on top of the map. Various objects are mapped this way:

0: empty tile
1: wall
2: place where to drop a crate
3: crate – crate divs are created with an unique id to indentify them when it’s time to be pushed by the player
4: player
5: crate on a place where to drop a crate (3+2)
6: player on a place where to drop a crate (4+2)

Lines 47-87: Core function… checks for a possible move, eventually moves player and crates and sees if the game is solved.

A game is solved where there are not places where to drop a crate without a crate on them. That is, there isn’t any 2 in the map.

Every time I move a crate, I change its id according to its new position.

Lines 88-103: Checking for key presses.

Hope you enjoy it.

Creation of a minimalist image gallery in 18 jQuery lines

Emanuele Feronato — Thu, 03 Jun 2010 10:29:31 +0000

The web is full of jQuery galleries, but I think none of them is really minimalist to give people the opportunity to custom and improve it according to their needs, and none of them is fully explained, line by line, style by style, to help jQuery newcomers.

So I decided to create the Triqui Gallery, a simple and fully commented jQuery gallery you can use as a simple gallery or a “featured photos/games/whatsoever” slideshow.

According to your comments, I will add more and more functionalities, if this topic receives enough interest.

Let’s see its main features:

All the code in a single page – no external stylesheet or javascript files to load, to make it easier to understand
Fully commented source code, from styles to jQuery to HTML tags
Compatible with all modern browsers… at least the latest versions of IE, Firefox, Chrome, Opera and Safari
Easy to configure
Animated captions
Rollover and selected effects on thumbnails

You can find all needed information about gallery setup in the HTML file itself, download it and enjoy.

17 jQuery powered web games with source code

Emanuele Feronato — Tue, 13 Apr 2010 10:07:17 +0000

While Flash remains the best software to develop casual web games, jQuery allows you to make interesting things… nothing to do with pure action Flash games, but in some cases you can get interesting results out of your browser.

Here it is a list with 17 jQuery powered games, most of them with clean and commented source code ready to download (and before you say it’s obvious jQuery games have source code, I mean uncompressed, readable source code)

Javascript game engine for jQuery

Not a game but a whole library to develop jQuery games

Main features:

multi layer-sprite animations
sprite hierarchies (grouping)
collision detection
swappable sound support
periodic callbacks
keyboard state polling
free and open source license

http://gamequery.onaluf.org/ – Check out the demos too!!

TicTacToe in jQuery

The “Hello world” of game programming, now with jQuery

http://thingsilearned.com/2009/06/02/tictactoe-in-jquery/

Tetris with jQuery

The most famous game in the world,

http://fmarcia.info/jquery/tetris/tetris.html

jQuery Mad Libs Word Game

A simple Mad Libs game. There must be something wrong with me because the author says: “If you did not use Mad Libs as a kid (what is wrong with you… j/k) it is a fill-in-the-blanks word game where not knowing the word context can lead to some whacky outcomes (and giggling fits)”.

Yes, I did not use it (do you?)… that’s why I hear “voices”…

http://www.bennadel.com/blog/623-jQuery-Demo-Mad-Libs-Word-Game.htm

jQuery Mine Sweeper

From the same author of Mad Libs, Mine Sweeper.

http://www.bennadel.com/blog/1737-jQuery-Powered-Mine-Sweeper-Game.htm

A Basic Memory Game with jQuery and PHP

Great and complete tutorial (in Feronato’s style :)) to create a basic memory game with jQuery and PHP. A must read.

http://www.webdevplayground.com/2009/09/a-basic-memory-game-with-jquery-and-php/

jTypingHero

After Guitar Hero, here it comes Typing hero, a game which will prove your typing skill.

http://www.marcofolio.net/games/jtypinghero_test_your_typing_skills_in_this_jquery_game.html

jCharacterfall

From the same author, another typing game

http://demo.marcofolio.net/jcharacterfall/

jQRPG

A very basic – and incomplete – Zelda style RPG

http://hokuten.net/2010/jqrpg-%E2%80%94-an-old-school-style-rpg-in-jquery/

Mastermind

jQuery version of the popular brain game

http://www.iohelix.net/mastermind.html

jKill

Point and shoot game, kill presidents and prime ministers

http://www.bulgaria-web-developers.com/projects/javascript/jkill/

jQuery Slot Machine

Cute slot machine made with jQuery

http://eyecon.ro/slotmachine/

jQuery Pong

it’s Pong!!

http://blog.benogle.com/2009/04/20/jquery-pong/

jQuery Sudoku

Really good Sudoku simulator

http://www.anti.ro/games/sudoku/

jQuery Snakey

The famous snake game made with jQuery

http://jquery-snakey.googlecode.com/svn/trunk/index.html

T&C Surf

Great remake of the old 8-bit Nintendo blockbuster (??)

http://jonraasch.com/blog/jquery-video-game-remake-tc-surf-designs

Tunnel game

Another classic, fly with your spaceship inside a tunnel, don’t touch its borders

http://arcade.christianmontoya.com/tunnel/

Loading WP posts with Ajax and jQuery – a real world example

Emanuele Feronato — Tue, 06 Apr 2010 21:28:26 +0000

If you are looking for a real world example made with Loading WordPress posts with Ajax and jQuery or you haven’t played LineBall yet, or you played it, you loved it and you want to know who made the music, this is the right blog post.

I am finishing and polishing LineBall’s official site built with WordPress and Ajax.

I plan to finish it before this week ends, then release the theme next week. So if you have suggestions, feedback or want more information, this is your turn.

Help me to make the ultimate WordPress Flash game theme.

Some features already developed:

* Highly customizable by setup page – no need to edit the code

* Ajax powered to browse it without reloading the header (the game itself)

* Minimal theme, a very few lines of code

Let me know what do you think about it. And don’t pay that much attention to contents… I just wrote a couple of lines just to make some tests

Loading WordPress posts with Ajax and jQuery

Emanuele Feronato — Thu, 01 Apr 2010 21:52:41 +0000

After seeing how to include jQuery Ajax calls in your WordPress blog, it’s time to load posts on the fly, without reloading the page.

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

 wp_head(); ?>

That is the JQuery part


<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("h2 a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http:///triqui-ajax/",{id:post_id});
		return false;
	});
});
script>

I already explained the first 4 lines in the previous tutorial.

Line 5: Waiting for the user to click on an hypertext over an h2 heading. I am doing it because in Kubrick post titles are rendered this way:

This should change from theme to theme, but this works on Kubrick

Line 6: Retrieving the rel attribute of the link and saving it in a variable called post_id. You’ll see later in this tutorial how this attribute will contain the unique ID of the post we want to show.

Line 7: In an element with your_post_here id I am writing “loading…” because I’m starting to load the post. You’ll see later in this tutorial where to place the element

Line 8: Now thw ajax magic… in the your_post_here element this time I load the output of a page of the blog called triqui-ajax. You’ll se later in this tutorial how to create it. This will work if the permalinks of your blog aren’t the default ones. Go to Settings -> Permalinks and select Day and name

I am also passing in POST a variable called id with the content of post_id variable (the post unique id)

Line 9: I added this line to prevent the browser to jump to the link… remember? I want to load the post in the same page.

Now it’s time to make some changes to index.php

This is how I modified it:


/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
get_header(); ?>
 
	
	
	 if (have_posts()) : ?>
 
		 while (have_posts()) : the_post(); ?>
 
			 post_class() ?> id="post- the_ID(); ?>">
				 the_permalink() ?>" rel=" the_ID(); ?>" title="Permanent Link to  the_title_attribute(); ?>"> the_title(); ?>
				 the_time('F jS, Y') ?> 
 
				 
					 the_content('Read the rest of this entry »'); ?>
				
 
				 the_tags('Tags: ', ', ', '
'); ?> Posted in  the_category(', ') ?> |  edit_post_link('Edit', '', ' | '); ?>   comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
			
 
		 endwhile; ?>
 
		
			 next_posts_link('« Older Entries') ?>
			 previous_posts_link('Newer Entries »') ?>
		
 
	 else : ?>
 
		Not Found
		Sorry, but you are looking for something that isn't here.
		 get_search_form(); ?>
 
	 endif; ?>
 
	
 
 get_sidebar(); ?>
 
 get_footer(); ?>

To tell the truth, I only added a line and changed a bit another one:

Line 10: This is the div that will contain the post, the one I change with jQuery (remember? lines 7 and 8 in the jQuery script)

Line 16: Here I changed the rel attribute to store the unique id of the post I want to load. I used it at line 6 in the jQuery script

And the template files do not need any other change.

Now it’s time to create a new page template with some code that will load the selected post.

In your template directory create a new php file, no matter its name… you can call it example.php and write this:


/*
Template Name: Triqui Ajax Post
*/
?>

	$post = get_post($_POST['id']);
?>
 if ($post) : ?>
	 setup_postdata($post); ?>
	 post_class() ?> id="post- the_ID(); ?>">
		 the_title(); ?>
		 the_time('F jS, Y') ?> 
 
		 
			 the_content('Read the rest of this entry »'); ?>
		
 
		 the_tags('Tags: ', ', ', '
'); ?> Posted in  the_category(', ') ?> |  edit_post_link('Edit', '', ' | '); ?>   comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
	
 endif; ?>

As you can see it’s almost the same code you can find in index.php at lines 15-24… because I just want to load a post in the same way the index file does. I just removed the anchor tag in the title, because I don’t want it to be clickable. And obviously I read the id value passed by the jQuery script at line 8

The only interesting lines are lines 2-4… yes, the comment… because this way I am giving the template page the name Triqui Ajax Post.

Now in your admin area create a new page, call it Triqui Ajax (do you remember the permalink url at line 8 in the jQuery script…) and select Triqui Ajax Post as template

And that’s it… you don’t need anything else, and the blog will work as in the video.

Enjoy

Including jQuery Ajax calls in your WordPress blog

Emanuele Feronato — Tue, 30 Mar 2010 15:33:46 +0000

I want to show you how to include jQuery ajax calls in your WordPress blog.

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it.

In this case all changes have been made in header.php file, adding nine lines after

 wp_head(); ?>

Here they are:


<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	var refresh = setInterval(function(){   	
		$("#description_span").load("/example.php");
	},1000);
});
script>

First, I am loading jQuery using Google as content delivery network.

Then, when the document is ready, I disable the cache to stop jQuery .load response from being cached.

Now I just execute an ajax call to example.php file at every second and print the result in the element with description_span id

This is example.php content


 
echo rand(1,10000);
 
?>

Now it’s time to locate description_span element… it’s in the header, next to the description of the blog.

 like other  ones

And that’s it. This time I changed the header without touching the content, next time (the aim of my experiment) I’ll change the content without touching the header, maybe because the header contains a Flash game called LineBall… (yes, I am designing a WP theme for a game official site).

Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version

Emanuele Feronato — Wed, 10 Mar 2010 17:35:09 +0000

Some days ago I showed you how to create a dynamic content animated footer ad for your site in just 9 jQuery lines.

Now it’s time to write eight more lines to add two important features:

The first, as suggested in a comment, is allowing to set a delay before the ad appears.

The second is using a cookie to let the ad appear only once in a session. This means if you refresh the page, the ad won’t appear again, until you close the browser window and open it again.

This is what we’ll get… the ad appears after three seconds, and only once in a session.

Now let’s see the new lines added:


<script type="text/javascript">
$.delay = function(time,ret_function){
	var ret = {timer:setTimeout(ret_function,time)}
	return ret;
};
$(document).ready(function(){
	var delayed_start = 3000;
	var path_to_dynamic_file = 'ajax.php';
	if(document.cookie.indexOf("triqui_ad")==-1){
		document.cookie="triqui_ad=1";
		$.ajaxSetup({cache:false});
		$('#triqui_ad').wrap('
');
		var delayed_start = $.delay(delayed_start,function(){
			$('#triqui_ad').load(path_to_dynamic_file,function(){
				$('#triqui_ad').css('display','block');
				$('#triqui_container').hide().slideDown('slow');
				$('#triqui_ad').append(' • Close');
				$('#triqui_ad_close').click(function(){ 
		   			$('#triqui_container').slideUp('slow'); 
		  		}); 
			});
		});
	} 
});
script>

Lines 3-6: Declaring a new jQuery function called delay, that’s just a callback after a given amount of milliseconds.

Line 8: Variable storing the number of milliseconds to wait before showing the ad

Line 9: Variable storing the path to the dynamic file

Line 10: Checking if I have a cookie called triqui_ad. The statement is true if I don’t have it.

Line 11: Creating a cookie called triqui_ad. Since there is not an expiration date, it will expire when the user will close the browser.

Line 14: The entire function explained in part 1 is executed only after the preset delay.

And that’s it… any idea for additional features?

Create a dynamic content animated footer ad for your site in just 9 jQuery lines

Emanuele Feronato — Wed, 03 Mar 2010 21:50:49 +0000

Have you ever seen those ads sliding up from the bottom of your page when you are visiting a website? We are going to create a simple one in just 9 jQuery lines.

Moreover, with this script you will need to add just one line to your site to display the ad.

Just to make it easier to understand, I am showing you for free the principles some “companies” sell at more than $40. According to such sites, ads like the one we are about to make should increase your conversions, have more readers sign up to your newsletter, and make you live in harmony. All in one-

Unfortunately, I am only showing you how to create such ad in a bunch of jQuery lines.

This is what we are going to make: Watch the example.

Ready for the recipe? Here we go:

A web page

Obviously, you need a webpage. Any webpage will fit, as long as you include

just before the tag.

jQuery

Then it’s time to add the power of jQuery to the page: insert this script between and


<script type="text/javascript">
$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$('#triqui_ad').wrap('
');
	$('#triqui_ad').load('ajax.php',function(){
		$('#triqui_ad').css('display','block');
		$('#triqui_container').hide().slideDown('slow');
		$('#triqui_ad').append(' • Close ');
		$('#triqui_ad_close').click(function(){ 
   			$('#triqui_container').slideUp('slow'); 
  		}); 
	}); 
});
script>

Line 1: loading the latest jQuery version. I am loading it directly from Google to get the latest stable version with no stress for my server.

Line 3: Function to be executed when the document DOM is fully loaded.

Line 4: Disabling the cache when using Ajax calls. That’s why when you reload the page in the example, you always get the current timestamp

Line 5: I had to add this line because I wanted the final user to type in as less code as possible, so at the moment you just have to add

while the “real” code should be

Using wrap you will (guess what?) wrap an HTML structure around the selected element.

Line 6: This is the most important line. I am loading the result of the Ajax call made on the ajax.php file. This means I am printing inside the div everything ajax.php will echo. In my case, it will print the current date since this is the code:


 
echo "Hello, I am a dynamic content created on ".date('l jS \of F Y h:i:s A');
 
?>

As you can imagine, load loads data from the server and place the returned HTML into the matched element. The only issue is it caches the result, that’s why I disabled it at line 4

Line 7: Here I am showing the content of the div containing the ad. When you’ll look at the css, you’ll find there was a display:none to keep it hidden until the script is ready to work.

Line 8: Time to slide in the ad

Line 9: Appending a link to close the ad

Line 10: Triggering the link used to close the ad

Line 11: Sliding away the ad when the user clicks on the link

CSS

And finally it’s time to stylize the ad.

#triqui_container {
	width: 100%;
	position: fixed;
	bottom: 0;
}
 
#triqui_ad{
	background-color:#e5e5e5;
	border-top:1px solid black;
	height: 100px;
	text-align:center;
	display:none;
}
 
#triqui_ad_close {
	cursor: pointer;
	text-decoration: underline;
}

You can custom the stylesheet as you want as long as you set display:none to the ad and position:fixed and bottom:0 to the container.

Have fun… would you like more options?

Placing ads before a game loads with jQuery

Emanuele Feronato — Wed, 30 Dec 2009 11:50:08 +0000

When you run a Flash game portal or a Flash game official site, you normally place ads everywhere hoping someone will notice it.

Obviously the most interesting place where to place ads is already taken by the game itself, so we are going to create a javascript preloader that will show an ad for 15 seconds before the game starts loading.

In order to do it, you need jQuery and swfobject

Now let’s suppose the game has to be embedded in a div called the_game, just like I did in my BarBalance official site.

Just create the div this way:


	BarBalance game is loading

I used some SEO like an h1 tag and relevant content, and a CPMStar because it’s animated and we suppose won’t bore the player during the 15 seconds.

If you don’t have a CPMStar account, feel free to use my code :)

Then the jQuery part:

It’s just a 15000 milliseconds timeout fading out with a callback replacing the existing content with the Flash game.

Look at BarBalance official site to see it working.

I can’t wait to know this ad eCPM… did you already use something similar?

JQuery powered lights off effect

Emanuele Feronato — Mon, 12 Oct 2009 14:58:07 +0000

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script:

Emanuele Feronato's lights off effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque libero euismod nulla porttitor egestas. Nulla fermentum facilisis sagittis. Vestibulum commodo pretium diam, vitae scelerisque lectus bibendum nec. Curabitur a metus est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc dolor, pretium eget venenatis ut, condimentum at sem. Vivamus rhoncus ullamcorper turpis. Aliquam sit amet risus diam, vel mattis est. Quisque sodales eros id nulla rhoncus posuere. Nullam accumsan lorem quis dolor tempor congue. Vivamus ligula augue, commodo malesuada tempor non, tristique id enim. Sed dapibus sagittis porttitor. Suspendisse faucibus scelerisque eros, ac hendrerit orci scelerisque sit amet.

Everything inside this div will remain highlighted

Lights off

Soft lights

Lights on

Vestibulum interdum, odio ut congue imperdiet, justo ligula bibendum nisl, ac placerat orci eros nec tortor. Maecenas rhoncus felis vitae elit consectetur vitae mattis metus tincidunt. Donec nec ipsum quis tellus posuere ultricies. Ut tempus tortor nec sem blandit ut facilisis nisl scelerisque. Nulla venenatis ante sit amet nisi dictum varius. Etiam congue dui eu diam fermentum et tincidunt magna egestas. Sed tincidunt magna et metus molestie malesuada. Nam tempus dignissim porta. Vivamus iaculis, orci hendrerit condimentum viverra, eros nisl euismod arcu, nec pulvinar tellus elit eu nulla. Vestibulum mattis, ligula sit amet euismod commodo, augue lorem fermentum magna, et rhoncus nisl urna nec purus. Suspendisse potenti. Fusce fermentum orci at orci posuere ornare a imperdiet justo. In hac habitasse platea dictumst. Duis adipiscing leo nec risus varius auctor. Cras sed erat massa, quis egestas leo. Vivamus dignissim lacinia leo, ac interdum nisi facilisis eget.

The div is the one called standout at line 48 and it has nothing special but a background color (it can’t be transparent) and a z-index along with a relative position (lines 40-42).

Obviously the z-index should be higher than the rest of the elements.

The other interesting div is the_lights (line 50), a black div covering all the page, initially invisible (lines 30-36). Playing with its transparency will simulate the lights effect

Now it’s all a matter of JQuery:

Line 7: Listening for the document to be ready

Line 8: Once it’s ready, the first thing is setting the_lights alpha to zero. I don’t set it from CSS but use fadeTo because I need to initialize the fading process. The entire lights out effect is just playing with the_lights and some tweening.

Line 9: Here I am listening for the turnoff div to be clicked

Line 10: Showing the_lights div… this is the same thing as
document.getElementById('the_lights').style.display='block'

Line 11: Fading the black div to full opacity.

This will give the “lights out effect”

Try the example at this page will show you the effect… click on “lights on”, “lights off” or “soft lights” and see what happens.