First, let’s introduce the two main actors in the game: Layouts and Event sheets.

Layouts are basically the equivalent of Flash Scenes and represent the “stuff” you place in your game, such as the splash screen, the level selection screen, the game itself, the game over screen, and so on.

Event sheets contain what happens behind the scenes, such as events and subsequent actions.

While I recommend you to learn the bare bones (how to create a a project, how to import graphics, and so on) in the official tutorial page, I’ll show you the logic I used in the making of this little one-level game:

First of all, let’s look at the project assets:

And now let’s see the game, layout by layout

Splash Screen

The splash screen just contains the background and a couple of texts: one with the name of the game, and one with the “click to play” message.

Once the player clicks anywhere on the screen, the game will begin, so the Event Sheet will be:

You should read it this way: when an On any click event on the Mouse occurs, the System will make the action Go to Game.

That is, when the player clicks, the game begins.

Game

The game itself has just a few more events on the Event sheet. Let’s see them all:

First, I am declaring a new global variable called destroyed. Now, look at the events:

Event 1: on the start of the layout (think about ADDED_TO_STAGE if you love AS3) I am setting destroyed variable to zero and set the dynamic text to “Destroyed: 0/6″.

Look at the & operator to concatenate strings.

Event 2: this is a mouse event. When the player clicks with the left button on the small brick, the small brick is destroyed, the global variable destroyed is incremented and the dynamic text is updated.

Event 3: same thing for the big brick, I just destroy it rather than updating everything for the sake of simplicity of this tutorial.

Event 4: if the totem collides with the ground, the totem is destroyed, I show a game over message and set destroyed variable to -1.

Event 5: if the mouse clicks anywhere and destroyed is equal to -1 (game over), then restart this layout.

Event 6: if destroyed is equal to 6 (game completed) show a congratulations message.

Event 7: if the mouse clicks anywhere and destroyed is equal to 6 (game completed), then restart from the splash screen.

And that’s it, in a few minutes with a grand total of eight events this prototype is done. I will try to make a real game in a couple of days, and show you some ways to monetize HTML5 games.

Construct 2 is a visual editor that lets you make HTML5 games without writing a single line of code, thanks to its event editor which makes building and creating games visual and easy for beginners and advanced users alike.

Do you remember Totem Destroyer? Look at the HTML5 version I made in 10 minutes (half of them spent googling for the graphic assets) thanks to Construct 2.

Click on the bricks to destroy them, don’t let the totem fall on the ground or it will get destroyed too.

Look at the physics.

Tomorrow I will publish the second part of the game, as well as the “build it in 5 minutes tutorial”.

Meanwhile, here is a brief list of all Construct 2 features:

* Physics Engine – with a couple of clicks make objects behave realistically.

* Facebook connection – publish your games to Facebook. Log in, post hi-scores and see friend’s scores — even from your own website. Make your games go viral.

* Make money from your games – publish your Construct 2 games to the Chrome Web Store. Bring your games to an audience of millions.

Stay tuned because I’ll talk about it quite a lot in the next days.

Now we are going to improve the game with three exciting new features:

* Showing a splash/preloader screen
* Changing iPhone top bar appearance
* Saving data locally

To show a preloader we just need to add a line in the header of the page:

<link rel="apple-touch-startup-image" href="splash.png" />

This will work only on iOS 3.0 and later, and splash.png (which you will change with any other path) is the splash image that is displayed while your web application launches, replacing the default screenshot of the web application taken the last time it was used.

Your image must have a size of 320×460 pixels.

In the following picture, on the left the picture I used, on the right how it is shown on the iPhone.

You can also change the status bar with just one line in the header:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This will work only if your app is launched in full screen mode (refer to step 1 to see how to launch a web app in full screen mode).

content attribute may have three values:

default: displays the status bar as you are used to see.

black: the status bar will have a black background.

black-translucent: the status bar is black and translucent. In this case, the web content is displayed even below the status bar, partially obscured by the status bar.

This is how my app looks before and after changing the status bar:

As you can see, the status bar is black.

To save data locally, localStorage comes into our help as it acts like a browser local database, or something like a cookie, if you prefer.

That’s why in this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(document).ready(function(){
	var currentNumber = Math.floor(Math.random()*10);
	var score = 0;
	if(localStorage.topScore==undefined){
		localStorage.topScore=0;	
	}
	$("#topscore").html("Top score: "+localStorage.topScore);
	$("#number").html(currentNumber);
	$("#comment").html("Click higher or lower");
	$("#higher").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber >= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);	
	}));
	$("#lower").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber <= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}	
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);
	}))
});

At lines 4-7, 14-17 and 30-33 we are using a variable called topScore saved into localStorage accessing it just like an ordinary variable.

And that’s enough for this step, no we have everything we need to create a complete game with high scores, which will be shown during next step.

Normally when you design web pages you don’t need to handle swipes because we expect the final user to interact with it with the mouse or the trackpad.

On mobile phones, people expect to use their fingers to interact with the content, and we have to meet their wishes if we want our app to be successful.

I am about to show you how easy it is: let’s start with the jQuery Sokoban prototype I published about a year ago, and change keyboard input with swipe input.

Have a look at the code in the original version, then look at this one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>jQuery Swipe Sokoban by Emanuele Feronato</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="touchswipe.js"></script> 
     <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('<div class = "wall" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 2:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 3:
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 4:
     					map[i][j]=0;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 5:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 6:
     					map[i][j]=2;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					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);  
               }
     	}
        	$("#player").swipe({swipe:swipe,threshold:50});
        	function swipe(event,direction){
			switch(direction){
     			case "left":
     				possible_move(-1,0)
     				break;
     			case "up":
     				possible_move(0,-1)
     				break;
     			case "right":
     				possible_move(1,0)
     				break;
     			case "down":
     				possible_move(0,1)
     				break;
     		}
		}
     });
     </script>
     <style type="text/css">
     .wall{
     	background-color:#000000;
     	width:32px;
     	height:32px;
     	position:absolute;
     }
 
     .goal{
     	background-color:#ff0000;
     	width:32px;
     	height:32px;
     	position:absolute;	
     }
 
     .crate{
     	border:10px solid #00ff00;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
 
     #player{
     	border:10px solid #0000ff;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
     </style>
</head>
<body>
     <div id = "sokoban"></div>
</body>
</html>

At line 5 we have the viewport meta declaration as explained in this post but the core lies at line 9 when I call TouchSwipe, a jQuery plugin for touch devices.

Everything is managed by this fantastic plugin, since among its features you can find:

* Detects swipes in 4 directions, “up”, “down”, “left” and “right”
* Supports single finger or double finger touch events
* Supports click events both on the touchSwipe object and its child objects
* Definable threshold to determin when a gesture is actually a swipe
* Events triggered for swipe “start”,”move”,”end” and “cancel”
* End event can be triggered either on touch release, or as soon as threshold is met
* Allows swiping and page scrolling

So WASD key interaction you can find in the original version has been replaced by swipe interaction at lines 90-106, where every swipe longer than 50 pixels is translated into a movement.

To test it, point your mobile browser to this page, put your finger on the hero (the blue square) and move it with a swipe.

That wasy? Yes, that easy. The App store is getting closer and closer.

It will be a long journey, so let’s start with something simple: a jQuery version of MagOrMin – an old php based game, whose concept have been applied for the creation of GuessNext Flash game.

The first step in making an HTML app for iPhone is making an HTML page.

And this is main, the most basic possible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
 
<head>
 
	<script src = "jquery.js"></script>
	<script src = "game.js"></script>
 
</head>
 
<body>
 
<div id = "number"></div>
<div id = "higher">higher</div>
<div id = "lower">lower</div>
<div id = "comment"></div>
 
</body>	
 
</html>

Where jquery.js contains the latest jQuery distribution and game.js is this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(document).ready(function(){
	var currentNumber = Math.floor(Math.random()*10);
	var score = 0;
	$("#number").html(currentNumber);
	$("#comment").html("Click higher or lower");
	$("#higher").click(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber >= currentNumber){
			score++;	
			$("#comment").html("Good! score: "+score);	
		}
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);	
	});
	$("#lower").click(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber <= currentNumber){
			score++;	
			$("#comment").html("Good! score: "+score);	
		}	
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);
	})
});

Explaining HTML and jQuery is beyond the scope of this post, just notice there are four divs:

number contains a random integer number from 0 to 9

higher is a clickable div and when the player clicks on it then he guesses next random number will be higher (or equal) than the current one

lower follows the same concept as higher but the guess assumes next random number will be lower or equal than the current one

comment contains in-game comments, such as “Good!”, “Bad!” and the current score.

At this stage the game has no limit, no game over, no high scores, nothing. But it’s a good start.

This is what you get if you upload the scripts on a page and browse it with your iPhone:

You can even play it, but the text is so tiny!

This happens because unless you tell it otherwise, Safari on the iPhone is going to assume that your page width is 980px.

So we are going to add this line between <head> and <\head> to specify the viewport:

<meta name="viewport" content="user-scalable=no, width=device-width" />

This is how the same page looks with the correct viewport meta data:

Much better now… and more playable since the “buttons” are bigger.

But it’s obvious we won’t go so far without a library designed with mobile devices in mind.

This is when jQuery Mobile comes into play. It’s an unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation, and that’s what we need.

Now it’s time to heavily change our html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html> 
 
<html>
 
<head>
 
	<meta name="viewport" content="user-scalable=no, width=device-width" />
 
	<link rel="stylesheet" href="jquery.mobile-1.0b1.min.css" />
 
	<script src = "jquery.js"></script>
	<script src="jquery.mobile-1.0b1.min.js"></script>
	<script src = "game.js"></script>
 
</head>
 
<body>
 
<div data-role="page">
 
	<div data-role="header">
		<h1>Page Title</h1>
	</div>
 
	<div data-role="content">	
		<div id = "number"></div>
		<div id = "higher">higher</div>
		<div id = "lower">lower</div>
		<div id = "comment"></div>		
	</div>
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>
 
</body>
 
</html>

Line 9: imports jQuery mobile stylesheet.

Line12: imports jQuery Mobile library. Both the library and the stylesheet can be downloaded from this page

Line 19: we are meeting our first data-role attribute. This will tell jQuery Mobile the role of the div in the mobile page. With data-role="page" we tell jQM it’s the beginning of a mobile page.

Line 21: data-role="header" tells us we are working wit the header of the page.

Line 25: data-role="content" tells us we are working wit the content of the page.

Line 32: data-role="footer" tells us we are working wit the footer of the page.

Once the browser is pointed on the page, jQM automatically triggers all HTML5 data-role attributes to render the page with all necessary widgets. That’s what we have now:

This is not that good yet, as the footer isn’t at the bottom of the page but just when the page itself ends. To have the footer (and the header) fixed on the bottom (and on the top) of the page, change lines 21 and 32 respectively with:

21

<div data-role="header" data-position="fixed">

and

32

<div data-role="footer" data-position="fixed">

and now your header and footer will be fixed at the very top and at the very bottom of the page, this way:

Anyway, we are greedy and we want our page to go in full screen mode, without showing the address bar at the top and the toolbar at the bottom.

This will be made in two steps: first, we have to insert this line between <head> and <\head>:

<meta name="apple-mobile-web-app-capable" content="yes" />

Then, we have to launch the web page from Home, that is the iPhone “desktop”. Add the page to home: a custom icon will be generated with the thumbnail of the page:

and once you call it directly from the icon you will get your full page navigation.

The last thing we will see in this first part is how to create two mobile friendly buttons to control “higher” and “lower” guesses.

Change your content block this way:

25
26
27
28
29
30

<div data-role="content">	
	<div id = "number"></div>
	<a href="#" data-role="button" id = "higher">Higher</a>
	<a href="#" data-role="button" id = "lower">Lower</a>
	<div id = "comment"></div>		
</div>

Button divs have been changed to anchor texts with data-role="button". This will make jQuery Mobile render the links as buttons.

This is how the page looks now:

But to interact with them we have to change a bit the javascript changing lines 6 and 18 from respectively

6

$("#higher").click(function(){

and

18

$("#lower").click(function(){

to respectively

6

$("#higher").live("click tap",(function(){

and

18

$("#lower").live("click tap",(function(){

And finally you will be able to play again using the new buttons.

This is where this tutorial ends, but there’s still a lot to do. During next step we’ll build a preloader, save high scores and enhance the visual appeal of the game.

Impact is a JavaScript Game Engine that allows you to develop HTML5 Games in no time. Games created with Impact require no browser plugins or any software installations – just a modern browser that supports the Canvas tag.

Impact runs on all HTML5 capable browsers: Firefox, Chrome, Safari, Opera and (behold) even Internet Explorer 9. Of course this also includes the iPhone, iPod Touch and iPad.

I got a license from Dominic Szablewski, the author, and I’ll start playing with the engine in a couple of days, releasing some tutorials about making a game with this tool.

Meanwhile, visit the official site or play Biolab Disaster, a browser game made with Impact. You’ll find it has the same look & feel of Flash games made with Flixel or FlashPunk.

I am showing you an analog clock made without any image and without any style thanks to Raphaël JavaScript Library.

Raphaël is a JavaScript library that let you your work with vector graphics on the web using the SVG W3C Recommendation and VML as a base for creating graphics which works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

This is what we are going to create:

And as you can see from the source code there isn’t any image or CSS style as the clock is fully made with vectors.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<title>Triqui Clock</title> 
		<script type="text/javascript" src="raphael-min.js"></script> 
		<script type="text/javascript">
 
			function draw_clock(){
				canvas = Raphael("clock_id",200, 200);
				var clock = canvas.circle(100,100,95);
			     clock.attr({"fill":"#f5f5f5","stroke":"#444444","stroke-width":"5"})  
			     var hour_sign;
				for(i=0;i<12;i++){
					var start_x = 100+Math.round(80*Math.cos(30*i*Math.PI/180));
					var start_y = 100+Math.round(80*Math.sin(30*i*Math.PI/180));
					var end_x = 100+Math.round(90*Math.cos(30*i*Math.PI/180));
					var end_y = 100+Math.round(90*Math.sin(30*i*Math.PI/180));	
					hour_sign = canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y);
				}    
				hour_hand = canvas.path("M100 100L100 50");
				hour_hand.attr({stroke: "#444444", "stroke-width": 6});
				minute_hand = canvas.path("M100 100L100 40");
				minute_hand.attr({stroke: "#444444", "stroke-width": 4});
				second_hand = canvas.path("M100 110L100 25");
				second_hand.attr({stroke: "#444444", "stroke-width": 2}); 
				var pin = canvas.circle(100, 100, 5);
				pin.attr("fill", "#000000");    
				update_clock()
				setInterval("update_clock()",1000);
			}
 
			function update_clock(){
				var now = new Date();
				var hours = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();
				hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
				minute_hand.rotate(6*minutes, 100, 100);
				second_hand.rotate(6*seconds, 100, 100);
 
			}
 
		</script>
 
	</head> 
	<body> 
		<div id="clock_id"></div>
		<script>draw_clock()</script>
	</body> 
</html>

let’s explore it in detail:

Line 6: loading Raphaël library

Line 10: creation of a canvas object called canvas on which we will draw the clock. The parameters are the id of the container (clock_id, you can find it at line 48), the width and the height of the object, in pixels

Line 11: drawing a circle called clock with center at 100,100 with a 95 pixels radius.

Line 12: setting some attributes for clock (the circle): fill":"#f5f5f5" will fill the circle with that color ,"stroke":"#444444" will decide the stroke color and "stroke-width":"5" is the width, in pixels, of the stroke.

Line 13: creating a variable called hour_sign that we’ll use to draw the hours.

Lines 14-20: the for loop goes through all 12 hours representable in a clock, uses trigonometry to find the starting and ending point of each hour sign, then uses path method to create a path element according to the string passed as argument which represents the path in SVG format. For more information about this format, check the official SVG docs. Anyway, it’s a very easy format since it follows the “move and line” theory, just like AS3.

If we look at line 21, which draws the hour hand

1

<hour_hand = canvas.path("M100 100L100 50");

it can be translated into AS3 this way:

1
2

<canvas.graphichs.moveTo(100,100)
canvas.graphics.lineTo(100,50)

We keep drawing clock parts until line 29, using the same methods.

At line 30 we call update_clock function which will place all hands in the correct position according to your computer’s time, then at line 31 we make such function being executed at every second.

update_clock just determines current hours, minutes and seconds and updates the hands using rotate method which wants as arguments the amount of degrees to rotate the object and the center of rotation.

The degrees are determined by dividing 360 by the number of possible values (60 for seconds and minutes, 12 for hours) then multiplying such value by the current hours/minutes/seconds.

Hour hand is also rotated a bit more as minutes pass by, just like in real clocks.

Just notice the perfect code for the hour hand would be

1

<hour_hand.rotate(30*hours+(minutes/2), 100, 100);

rather than

1

<hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);

but dividing minutes by 2.5 rather than 2 will make hour hand rotate slower and will give a better visual effect.

Hope you will like Raphaël JavaScript Library, I can show you how to make a little puzzle game with it if I receive a good feedback.

First, you should change the CSS to

<style type="text/css">
     #triquiback{
          left: 0;
          top: 0;
          position:fixed;
          overflow:hidden;
          zIndex: -9999
     }
     #triquibackimg{
          position:relative    
     }      
</style>

Setting triquibackimg‘s position to relative rather than fixed will make it work in Opera too. Then since we want to resize the background image when it loads and when the user resizes the browser, I made a function to handle resizing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function resize_bg(){
     $("#triquibackimg").css("left","0");
     var doc_width = $(window).width();
     var doc_height = $(window).height();
     var image_width = $("#triquibackimg").width();
     var image_height = $("#triquibackimg").height();
     var image_ratio = image_width/image_height;      
     var new_width = doc_width;
     var new_height = Math.round(new_width/image_ratio);
     if(new_height<doc_height){
          new_height = doc_height;
          new_width = Math.round(new_height*image_ratio);
          var width_offset = Math.round((new_width-doc_width)/2);
          $("#triquibackimg").css("left","-"+width_offset+"px");
     }
     $("#triquibackimg").width(new_width);
     $("#triquibackimg").height(new_height);
}

I removed all the alerts since they became useless. First, I reset image’s left position to zero (line 2), to align it to top left corner. I am doing this because at line 14 left position can be changed due to background alignment.

The remaining script is the same you saw at step 1, with the only exception doc_width and doc_height are determined according to window size rather than document size. I found it to be more accurate.

At this time, the entire javascript can be written this way:

$(document).ready(function() {
     $("#triquibackimg").load(function(){
          resize_bg();
     })
     $(window).resize(function(){
          resize_bg();
     })
     function resize_bg(){
          $("#triquibackimg").css("left","0");
          var doc_width = $(window).width();
          var doc_height = $(window).height();
          var image_width = $("#triquibackimg").width();
          var image_height = $("#triquibackimg").height();
          var image_ratio = image_width/image_height;      
          var new_width = doc_width;
          var new_height = Math.round(new_width/image_ratio);
          if(new_height<doc_height){
               new_height = doc_height;
               new_width = Math.round(new_height*image_ratio);
               var width_offset = Math.round((new_width-doc_width)/2);
               $("#triquibackimg").css("left","-"+width_offset+"px");
          }
          $("#triquibackimg").width(new_width);
          $("#triquibackimg").height(new_height);
     }
});

As you can see, resize_bg function is called both when the background image is loaded and when the window is resized.

You can see the final result here and copy the entire source code by looking at the html.

Next steps will be the creation of a standalone jQuery plugin and a WordPress plugin too. Stay tuned.

This is what you’ll get: demo.

Before you continue reading this post, I have to warn you the title is misleading: you won’t center any background image. You are going to achieve this effect by using an image in div with a a low z-index.

During this example we’ll use a this photo by horlo.

HTML

As said, it’s an image inside a div, so let’s create them:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

The div has an id called triquiback while the image has triquibackimg. It should be the first thing you add after body opening.

CSS

z-index and positions will be defined with CSS this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <style type="text/css">
          #triquiback{
               position:fixed;
               left: 0;
               top: 0;
               overflow:hidden;
               zIndex: -9999
          }
          #triquibackimg{
               position:fixed
          }
     </style>
</head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

Notice the z-index of #triquiback and its overflow: being an <img /%gt; image and not a background, I had to set the overflow to hidden to prevent unwanted scrollbars. Also, the left and top positions are set to zero to override body margins and paddings.

Both the div and the image have fixed position to allow to easily place them with left and top.

jQuery

jQuery will allow us to resize the image as we want.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <title>AUTO RESIZE BACKGROUND IMAGE</title>
     <script type="text/javascript">
     $(document).ready(function() {
          $("#triquibackimg").load(function(){
               var doc_width = $(document).width();
               var doc_height = $(document).height();
               alert("Step 1: getting document size\n\nWidth: "+doc_width+"px\nHeight = "+doc_height+"px");
               var image_width = $(this).width();
               var image_height = $(this).height();
               alert("Step 2: getting image size\n\nWidth: "+image_width+"px\nHeight = "+image_height+"px");
               var image_ratio = image_width/image_height;
               alert("Step 3: getting image width/height ratio: "+image_ratio);       
               var new_width = doc_width;
               var new_height = Math.round(new_width/image_ratio);
               alert("Step 4: adapting the image to document width, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
               $(this).width(new_width);
               $(this).height(new_height);
               if(new_height<doc_height){
                    new_height = doc_height;
                    new_width = Math.round(new_height*image_ratio);
                    alert("Step 5: the image isn't high enough\n\nAdapting the image to document height, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
                    $(this).width(new_width);
                    $(this).height(new_height);
                    var width_offset = Math.round((new_width-doc_width)/2);
                    alert("Step 6: moving the image left by "+width_offset+"px to have it centered");
                    $(this).css("left","-"+width_offset+"px");
               }
               alert("Yeah!! Done :)");
          })
     });
     </script>
     <style type="text/css">
          #triquiback{
               left: 0;
               top: 0;
               position:fixed;
               overflow:hidden;
               zIndex: -9999
          }
          #triquibackimg{
               position:fixed
          }
     </style>
</head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

At line 6 I import jQuery library using Google as CDN.

The code is filled with alerts which will guide you through the demo, obviously you can remove them from your project.

Line 9: Function to be executed once the document is ready

Line 10: Function to be executed once the “background” image is loaded

Lines 11-12: Getting document area with and height

Lines 14-15: Getting “background” image width and height

Line 17: Determining image ratio as width/height

Line 19: Setting image width equal to document width

Line 20: Adjusting image height according to new image width and image ratio

Lines 22-23: Resizing the image

Line 24: Checking if the new image height is shorter than document height. In this case we need to resize the image again

Line 25: Setting image height equal to document height

Line 26: Adjusting image width according to new image height and image ratio

Lines 28-29: Resizing the image. At this time, we need to horizontally center the image

Line 30: Calculating half of the difference between new image width and document width

Line 32: Adding a style to image to move it by such difference to the right

And that’s it. You can check the demo here. In case of positive feedback, I’ll show you how to resize image on the fly when the browser is resized, and add an overlay to image.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
          <title>Emanuele Feronato's lights off effect</title>
          <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
          <script>
               $(document).ready(function(){
                    $("#the_lights").fadeTo(1,0);
                    $("#turnoff").click(function () {
                         $("#the_lights").css({'display' : 'block'});
                         $("#the_lights").fadeTo("slow",1);
                    });
                    $("#soft").click(function () {
                         document.getElementById("the_lights").style.display="block";
                         $("#the_lights").fadeTo("slow",0.8);
                    });
                    $("#turnon").click(function () {
                         document.getElementById("the_lights").style.display="block";
                         $("#the_lights").fadeTo("slow",0);
                    });
               });
          </script>
          <style>
               html{
                    width:100%;
                    height:100%;
                    margin:0px;
               }
               #the_lights{
	              background-color:#000;
	              height:100%;
	              width:100%;
	              position:absolute;
	              top:0;
	              left:0;
	              display:none;
               }
               #standout{
                    padding:5px;
                    background-color:white;
                    position:relative;
                    z-index:1000;
               }
          </style>
     </head>
<body>
     <p>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.</p>
     <div id = "standout"><p>Everything inside this div will remain highlighted</p><div id = "turnoff">Lights off</div><div id = "soft">Soft lights</div><div id = "turnon">Lights on</div></div>
     <p>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.</p>
     <div id="the_lights"></div>
</body>
</html>

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.