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.