Emanuele Feronato » Javascript

Save the Totem: HTML5 game prototype made with Construct2

Emanuele Feronato — Fri, 18 Nov 2011 14:50:12 +0000

As promised, let me show you how to make a game with Construct2.

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.

Make HTML5 games with no programming skills (even with Box2D physics) with Construct 2

Emanuele Feronato — Tue, 15 Nov 2011 17:38:18 +0000

If you want to be an HTML game developer, but your programming skills aren’t that good, then Tom Gullen and his company (actually, his brother) will save your life with Construct 2.

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.

Complete Bejeweled prototype made with jQuery

Emanuele Feronato — Fri, 07 Oct 2011 14:25:00 +0000

Bejeweled is one of the best games to code to learn the basics of programming. I already showed you how to build a working prototype of the game in my book, and I also published a 2KB version of the game (you can also find a more legible version here).

This time I am going to show you a fully working jQuery version. Everything, from the containers divs to the styles, have been made with jQuery, there isn’t a single HTML or CSS line.

This is the result, featuring gem swap, multiple combos, and everything you need to have in a Bejeweled game:

And this is the source code, without any comment, but quite clear. I can make a step by step tutorial if I receive a good feedback.

$(document).ready(function(){
	$("body").append('
').css({"background-color":"black","margin":"0"});
  	$("#marker").css({"width":"52px","height":"52px","border":"5px solid white","position":"absolute"}).hide();
	var selectedRow=-1
  	var selectedCol=-1
  	var posX;
  	var posY;
  	var jewels=new Array();
  	var movingItems=0;
  	var gameState="pick";
  	var bgColors=new Array("magenta","mediumblue","yellow","lime","cyan","orange","crimson","gray");
  	for(i=0;i<8;i++){
     		jewels[i]=new Array();
     		for(j=0;j<8;j++){
          		jewels[i][j]=-1;
     		}
  	}
	for(i=0;i<8;i++){
		for(j=0;j<8;j++){
			do{
				jewels[i][j]=Math.floor(Math.random()*8);
			}while(isStreak(i,j));
			$("#gamefield").append('+i+'_'+j+'">
');
			$("#gem_"+i+"_"+j).css({"top":(i*60)+10+"px","left":(j*60)+10+"px","width":"50px","height":"50px","position":"absolute","border":"1px solid white","cursor":"pointer","background-color":bgColors[jewels[i][j]]});
		}
	}
	$(".gem").live("click",function(){
		if(gameState=="pick"){ 
			posY=$(this).position().top;
			posX=$(this).position().left;
			$("#marker").show();
			$("#marker").css("top",posY-5).css("left",posX-5);
			if(selectedRow==-1){
				selectedRow=(posY-10)/60;
				selectedCol=(posX-10)/60;
			}
			else{
				posY=(posY-10)/60;
				posX=(posX-10)/60;
				if((Math.abs(selectedRow-posY)==1 && selectedCol==posX)||(Math.abs(selectedCol-posX)==1 && selectedRow==posY)){
					$("#marker").hide();
					gameState="switch";
					gemSwitch();
				}
				else{
					selectedRow=posY;
					selectedCol=posX;
				}
			}
		}
	});
 
	function checkMoving(){
		movingItems--;
    		if(movingItems==0){
    			switch(gameState){
    				case "revert":
    				case "switch":
                  		if(!isStreak(selectedRow,selectedCol) && !isStreak(posY,posX)){
               			if(gameState!="revert"){
							gameState="revert";
               				gemSwitch();
               			}
               			else{
							gameState="pick";
							selectedRow=-1;	
						}
                    	}    
					else{
						gameState="remove";
                    		if(isStreak(selectedRow,selectedCol)){
                    			removeGems(selectedRow,selectedCol);
						}
                    		if(isStreak(posY,posX)){
                    			removeGems(posY,posX);
						}
						gemFade();
					}
					break;
				case "remove":
					checkFalling();
					break;
				case "refill":
					placeNewGems();
					break;
			}
		}
	}
 
	function placeNewGems(){
		var gemsPlaced = 0;
		for(i=0;i<8;i++){
			if(jewels[0][i]==-1){
				jewels[0][i]=Math.floor(Math.random()*8);
          		$("#gamefield").append('+i+'">
');
          		$("#gem_0_"+i).css({"top":"10px","left":(i*60)+10+"px","width":"50px","height":"50px","position":"absolute","border":"1px solid white","cursor":"pointer","background-color":bgColors[jewels[0][i]]});
          		gemsPlaced++;
			}
		}
		if(gemsPlaced){
			gameState="remove";
			checkFalling();
		}
		else{
			var combo=0
			for(i=0;i<8;i++){
      			for(j=0;j<8;j++){
      				if(j<=5 && jewels[i][j]==jewels[i][j+1] && jewels[i][j]==jewels[i][j+2]){
						combo++;
						removeGems(i,j); 	
					}
					if(i<=5 && jewels[i][j]==jewels[i+1][j] && jewels[i][j]==jewels[i+2][j]){
						combo++;
						removeGems(i,j); 	
					}		 	
				}
			}
			if(combo>0){
				gameState="remove";
				gemFade();
			}		
			else{
				gameState="pick";
				selectedRow=-1;
			}
		}
	}
 
	function checkFalling(){
		var fellDown=0;
		for(j=0;j<8;j++){
			for(i=7;i>0;i--){
				if(jewels[i][j]==-1 && jewels[i-1][j]>=0){
					$("#gem_"+(i-1)+"_"+j).addClass("fall").attr("id","gem_"+i+"_"+j);
					jewels[i][j]=jewels[i-1][j];
					jewels[i-1][j]=-1;
					fellDown++;
				}
			}
		}
		$.each($(".fall"),function(){
			movingItems++;
			$(this).animate({
				top: "+=60"
				},{
				duration: 500,
				complete: function(){
					$(this).removeClass("fall");
					checkMoving();
				}
			});
		});     
		if(fellDown==0){
			gameState="refill";
			movingItems=1;
			checkMoving();	
		}	
	}
 
	function gemFade(){
		$.each($(".remove"),function(){
			movingItems++;
			$(this).animate({
				opacity:0
				},{
				duration: 500,
				complete: function(){
					$(this).remove();
					checkMoving();
				}
			});
		});
	}
 
	function gemSwitch(){
		var yOffset=selectedRow-posY;
		var xOffset=selectedCol-posX;
		$("#gem_"+selectedRow+"_"+selectedCol).addClass("switch").attr("dir","-1");
		$("#gem_"+posY+"_"+posX).addClass("switch").attr("dir","1");
		$.each($(".switch"),function(){
			movingItems++;
			$(this).animate({
				left: "+="+xOffset*60*$(this).attr("dir"),
				top: "+="+yOffset*60*$(this).attr("dir")
				},{
				duration: 500,
				complete: function(){
					checkMoving();
				}
			}).removeClass("switch")
		});
		$("#gem_"+selectedRow+"_"+selectedCol).attr("id","temp");
		$("#gem_"+posY+"_"+posX).attr("id","gem_"+selectedRow+"_"+selectedCol);
		$("#temp").attr("id","gem_"+posY+"_"+posX);
		var temp=jewels[selectedRow][selectedCol];
		jewels[selectedRow][selectedCol]=jewels[posY][posX];
		jewels[posY][posX]=temp;
	}
 
	function removeGems(row,col){
		var gemValue = jewels[row][col];
		var tmp = row;
		$("#gem_"+row+"_"+col).addClass("remove");
		if(isVerticalStreak(row,col)){
			while(tmp>0 && jewels[tmp-1][col]==gemValue){                          
				$("#gem_"+(tmp-1)+"_"+col).addClass("remove");
				jewels[tmp-1][col]=-1;
				tmp--;
			}
			tmp=row;
			while(tmp<7 && jewels[tmp+1][col]==gemValue){
				$("#gem_"+(tmp+1)+"_"+col).addClass("remove");
				jewels[tmp+1][col]=-1;
				tmp++;
			}
		}
		if(isHorizontalStreak(row,col)){
			tmp = col;
			while(tmp>0 && jewels[row][tmp-1]==gemValue){
				$("#gem_"+row+"_"+(tmp-1)).addClass("remove");
				jewels[row][tmp-1]=-1;
				tmp--;
			}
			tmp=col;
			while(tmp<7 && jewels[row][tmp+1]==gemValue){
				$("#gem_"+row+"_"+(tmp+1)).addClass("remove");
				jewels[row][tmp+1]=-1;
				tmp++;
			}
		}
		jewels[row][col]=-1;
	}
 
	function isVerticalStreak(row,col){
		var gemValue=jewels[row][col];
		var streak=0;
		var tmp=row;
		while(tmp>0 && jewels[tmp-1][col]==gemValue){
			streak++;
			tmp--;
		}
		tmp=row;
		while(tmp<7 && jewels[tmp+1][col]==gemValue){
			streak++;
			tmp++;
		}
		return streak>1
	}
 
	function isHorizontalStreak(row,col){
		var gemValue=jewels[row][col];
		var streak=0;
		var tmp=col
		while(tmp>0 && jewels[row][tmp-1]==gemValue){
			streak++;
			tmp--;
		}
		tmp=col;
		while(tmp<7 && jewels[row][tmp+1]==gemValue){
			streak++;
			tmp++;
		}
		return streak>1
	}
 
	function isStreak(row,col){
		return isVerticalStreak(row,col)||isHorizontalStreak(row,col);
	}                    
 
});
script>

Happy swapping. Would you add any feature?

Playing with javascript, iPhone and devicemotion event listener

Emanuele Feronato — Mon, 05 Sep 2011 14:58:27 +0000

As you all know, the iPhone has an accelerometer which can help you to detect phone movements and tilts.

With javascript’s devicemotion event you can add a listener to your iPhone browser and have your x, y and z acceleration values ready to be used in your scripts.

Before we see any script, let’s see what these acceleration values mean: if you place your iPhone on a table, that’s what you can get:

X: roll, that is the rotation around the vertical axis, from the home button to the earpiece.

Y: pitch, that is the rotation around the horizontal axis.

Z: yaw… no… surprise! It’s not the yaw, it’s just a face up/face down detection. This means you can toss your iPhone in the air and play “head or tail” just like you are used to do with coins.

(warning: tossing your iPhone in the air can cause damage to the phone itself and injuries to nearby people)

Even more interesting, with the iPhone in your hand you can determine where is the “sky”, that is the iPhone highest point, just combining X and Y values and some trigonometry. Useful if you are buried under an avalanche.

(warning: getting buried under an avalanche may reduce life expectancy)

So this is what you can do with a little jQuery Mobile script and a touch of HTML5 canvas:

This is the code:

 
 
 
 
      
     
 
     
 
     
     
 
	<script type="text/javascript">
		$(document).ready(function(){
			window.addEventListener("devicemotion",onDeviceMotion,false);
		});
 
		function onDeviceMotion(event){
			var ctx = document.getElementById("c").getContext("2d");
			var accel = event.accelerationIncludingGravity;
			$("#sliderX").val(Math.round(accel.x)).slider("refresh");
			$("#sliderY").val(Math.round(accel.y)).slider("refresh"); 
			$("#sliderZ").val(Math.round(accel.z)).slider("refresh");
			var angle = Math.atan2(accel.y,accel.x)  
			ctx.clearRect(0,0,100,100);
			ctx.beginPath();
			ctx.arc(50,50,5,0,2*Math.PI,false);
			ctx.moveTo(50,50);
			ctx.lineTo(50-50*Math.cos(angle),50+50*Math.sin(angle));
			ctx.stroke();
		}
	script>
 
 
 
 

 
	
		Accelerometer
	
 
		   
     	X Acceleration (Roll)
		
 
          Y Acceleration (Pitch)
          
 
          Z Acceleration (Yaw Face up/down)

The core lies at line 15 (the listener) and 20 (getting acceleration data).

You can see it in action pointing your iPhone browser at this link:

http://www.emanueleferonato.com/stuff/iaccelerometer/

or using this QRCode:

And that’s it!

Play GuessNext for iPhone, a web app game powered by jQuery Mobile

Emanuele Feronato — Wed, 17 Aug 2011 12:21:01 +0000

Do you want to play a web app game for iPhone? Go to www.emanueleferonato.com/stuff/guessnext or use this QR Code

and play GuessNext for iPhone!

It’s the web remake of an old game I published on Kongregate more than three years ago, and it’s the perfect kind of game if you want to take the first steps into iPhone web app development.

During the next days I will explain in detail every (interesting) line of code, meanwhile have a look at the features:

* Powered by jQuery Mobile
* Optimized to be launched from Home
* Loading screen (only if played from Home)
* Custom icon when adding it to Home
* Reminder to add it to Home if the game is not launched from Home
* Smooth transitions between pages
* Best score saved locally
* In game Adsense ads
* Views and plays tracking powered by Playtomic

The game was built starting from the tutorials Making a game with HTML + jQuery Mobile and publishing it to Apple App Store step 1 and step 2, reading those tutorials will give you a lot of clues about the development of this game.

Your feedback is needed to improve a bit the game, to finally convert it into a native iPhone app. Also, I would like to know your best scores.

Making a game with HTML + jQuery Mobile and publishing it to Apple App Store – step 2

Emanuele Feronato — Wed, 20 Jul 2011 17:47:22 +0000

Some days ago I showed you the basics of an HTML game optimized for the iPhone.

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:

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:

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:

$(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.

Controlling an iPhone mobile game with swipes using jQuery

Emanuele Feronato — Wed, 06 Jul 2011 08:28:35 +0000

Now that I’m trying to create an iPhone game using HTML + jQuery, one of the most unusual things to develop in a web app is the swipe management.

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:




     
     
     jQuery Swipe 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);  
               }
     	}
        	$("#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>

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.

Making a game with HTML + jQuery Mobile and publishing it to Apple App Store

Emanuele Feronato — Thu, 30 Jun 2011 08:39:55 +0000

During these days I am playing with HTML to build an iPhone web app and publish it on the Apple App Store.

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:


 

 
	
	
 

 

 

higher
lower

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

$(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 and <\head> to specify the viewport:

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:

 
 

 

 
	
 
	
 
	
	
	
 

 

 

 
	
		Page Title
	
 
		
		
		higher
		lower
				
	
 
	
		Page Footer

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:

and

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 and <\head>:

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:

	
	
	Higher
	Lower

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.

Create awesome HTML5 games with Impact

Emanuele Feronato — Thu, 07 Apr 2011 17:09:36 +0000

Today I want to show you an impressive library you can use to create great HTML5 games: Impact.

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.

jQuery color picker using Farbtastic and jQuery UI

Emanuele Feronato — Mon, 21 Mar 2011 22:14:12 +0000

I want to share with you a little snippet of code I am using for a project. I was looking for a cute jQuery color picker and I found Farbtastic to be the best for my needs. Anyway, I also liked how jQuery UI used the Slider to make a simple color picker so I decided to merge both techniques to create a single color picker with more features.

Use the color wheel or the sliders and see how everything is linked.

I tried to keep the code in a single page, using Google as CDN when necessary. Here is the source:

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" lang="en">
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript">script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript">script>
     <script src="js/farbtastic.js" type="text/javascript">script>
 
	<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media = "all"/>
     <link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
     <style type="text/css">
     #red .ui-slider-range,#red .ui-slider-handle{
		background: #ef2929;
	}
	#green .ui-slider-range,#green .ui-slider-handle{
		background: #8ae234;
	}
	#blue .ui-slider-range,#blue .ui-slider-handle{
		background: #729fcf;
	}
	#swatch{
		width: 180px;
		height: 180px;
		background-image:none;
		float:right;
		margin:6px 20px 0px 0px;
		border:none;
		background-color:black;
	}
	#sliders{
		width:500px;
	}
	#colorpicker{
		float:left;
		margin:0px 0px 0px 20px;
	}
	#red,#green,#blue{
		margin:10px 0px 0px 0px;
	}
	#innerswatch{
		font:bold 24px arial;
		margin:75px 0px 0px 0px;
		text-align:center;
		color:white;
	}
	style>
     <script type = "text/javascript">
     	$(document).ready(function(){
			var colorPicker = $.farbtastic("#colorpicker");
			colorPicker.linkTo(pickerUpdate);
			$("#red,#green,#blue").slider({
				orientation:"horizontal",
				range:"min",
				max:255,
				slide:sliderUpdate
			});
			function sliderUpdate() {
				var red=$("#red").slider("value");
				var green=$("#green").slider("value");
				var blue=$("#blue").slider("value");
				var hex=hexFromRGB(red,green,blue);
				colorPicker.setColor("#"+hex);
			}	
			function hexFromRGB(r,g,b){
				var hex = [r.toString(16),g.toString(16),b.toString(16)];
				$.each(hex,function(nr,val){
					if(val.length===1){
						hex[nr]="0"+val;
					}
				});
				return hex.join("").toUpperCase();
			}
			function pickerUpdate(color){
				$("#swatch").css("background-color",color);
				if(colorPicker.hsl[2]>0.5){
               		$("#innerswatch").css("color","#000000");     
          		}
          		else{
               		$("#innerswatch").css("color","#ffffff");   
          		}
				$("#innerswatch").html(color.toUpperCase())
				var red = parseInt(color.substring(1,3),16);
				var green = parseInt(color.substring(3,5),16);
				var blue = parseInt(color.substring(5,7),16);	
				$("#red").slider("value",red);
				$("#green").slider("value",green);
				$("#blue").slider("value",blue);		
			}
		});
     script>
<head>
<body>
	<div id = "sliders">
		<div id="colorpicker">div>
		<div id="swatch" class="ui-widget-content ui-corner-all">
			<div id="innerswatch">#000000div>
		div>
		<div style = "clear:both">div>
		<div id="red">div>
		<div id="green">div>
		<div id="blue">div>
	div>
body>
html>

You can also download the complete package along with Farbtastic color picker.

How would you improve it?