Add a virtual pad to play your HML5 games made with PuzzleScript on mobile devices

Last week I showed you BWBan a game created with PuzzleScript and I told you I was looking for a way to add mobile control to games.

Well, I made it. I added a semi-transparent, draggable virtual pad which calls checkKey PuzzleScript’s function. I used Brian Gonzalez’s pep plugin for jQuery to add drag functionality.

It should be optimized a bit, but it’s working and it represents a good starting point.

The changes to make to PuzzleScript generated files are very easy: just include the latest version of jQuery and pep plugin, then between <head> and </head> add:

<script src = "http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src = "pep.js"></script>
<script>
	$(document).ready(function(){
		$("#gamecontrols").pep({
			useCSSTranslation: false,
			constrainTo: "window"
		});
          $(".control").on("touchend click",function(){
               var k = $(this).attr("id").split("_");
               var keyPressed = parseInt(k[1]);
               javascript:checkKey({
                    keyCode:keyPressed
               }, true);
          })
	});
</script>

At this time, you just need to create the pad somewhere between <body> and </body>

<div id = "gamecontrols">                                   
	<div class = "empty"></div>                            
     <div class = "control up" id = "ctrl_38"></div>        
     <div class = "empty dragme"></div>                     
     <div class = "control left" id = "ctrl_37"></div>      
     <div class = "control action" id = "ctrl_88"></div>    
     <div class = "control right" id = "ctrl_39"></div>     
     <div class = "control undo" id = "ctrl_90"></div>      
     <div class = "control down" id = "ctrl_40"></div>      
     <div class = "control restart" id = "ctrl_82"></div>   
     <div style = "clear:both"></div>                       
</div>

And here is its CSS:

#gamecontrols{
     width:264px;
     position:absolute;
     top:50px;
     left:50px;
     opacity:0.4;
     filter:alpha(opacity=40);	
}
.control{
     border:1px solid #777777;
     margin:3px;
     background-color:#444444;
     width:80px;
     height:80px;
     float:left;
}

.empty{
     border:1px solid transparent;
     margin:3px;
     width:80px;
     height:80px;
     float:left;
}

.up{
	background-image: url('up.png');
}

.left{
	background-image: url('left.png');
}

.right{
	background-image: url('right.png');
}

.down{
	background-image: url('down.png');
}

.action{
	background-image: url('action.png');
}

.undo{
	background-image: url('undo.png');
}

.restart{
	background-image: url('restart.png');
}

.dragme{
	background-image: url('dragme.png');
}

Now, you can point your mobile devices to www.emanueleferonato.com/stuff/bwban_mobile/

and you will be able to play the game on mobile devices, like in this video made with Reflector:

Now, every PuzzleScript game can be played on mobile devices.

Download the full project. By the way, you should solve all 80 levels to see the awesome congratulations screen.