topical media & game development
mobile-query-game-tools-shim-mobile-index.htm / htm
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>gameQuery shim for mobile game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="icon.png" rel="apple-touch-icon" />
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="mobile-query-game-jquery.gamequery.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
/* CSS for the touchscreen controlers*/
#control {
display: none;
position: absolute;
top: 0;
left: 0;
width: 480px;
height: 320px;
}
#stick {
position: absolute;
bottom: 30px;
left: 30px;
background: url(control.gif);
width: 79px;
height: 79px;
}
#b1 {
position: absolute;
bottom: 30px;
right: 100px;
background: url(control.gif) -79px 0px;
width: 41px;
height: 41px;
}
#b2 {
position: absolute;
bottom: 30px;
right: 20px;
background: url(control.gif) -79px -41px;
width: 41px;
height: 41px;
}
</style>
<script>
$(function(){
// Small adjustemet for iPhone:
document.ontouchmove = function(e) {e.preventDefault()}; // disable scrolling
setTimeout(function() { window.scrollTo(0, 1) }, 100); // hide the address bar;
// sets the div to use to display the game and its dimension
$("#playground").playground({width: 480, height: 320});
// configure the loading bar
.playground().startGame(function(){
$("#splash").remove(); // remove the splash screen
$("#control").fadeTo('fast',50).show(); // show the control (transparent 50%)
});
});
// Virtual joypad for the game
var controlStick = {
touching: false,
startX: undefined,
startY: undefined,
diffX: undefined,
diffY: undefined
};
$("#stick").bind("touchstart", function(event){
var touches = event.originalEvent.touches
for(var i=0; i < touches.length; i++){
if(touches[i].target==this){
controlStick.startX = touches[i].screenX;
controlStick.startY = touches[i].screenY;
}
}
return false;
});
$("#stick").bind("touchmove", function(event){
controlStick.touching = true;
var touches = event.originalEvent.touches
for(var i=0; i < touches.length; i++){
if(touches[i].target==this){
controlStick.diffX = controlStick.startX-touches[i].screenX;
controlStick.diffY = controlStick.startY-touches[i].screenY;
}
}
return false;
});
$("#stick").bind("touchend", function(event){
controlStick.touching = false;
return false;
});
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.