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

Talking about Game development, HTML5 and Javascript.

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

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.