swipe events are most popular events for the android and ios devices.
so here i come with a example where i am using jquery and easeljs.
what you need to run this example
============================================================================
a images floder which contains two pictures one for background and another of a moving object
==========================================================================
files required (jquery and wipetouch files)
--------------------------------------------------
download easeljs (coolest javascript library )
copy and paste the entrie code in html file be sure your directory structure is like mine or you can create you own
=======================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
//lib floder contains two files
<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/jquery.wipetouch.js"></script>
<script type="text/javascript" src="CreateJS-EaselJS/lib/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="CreateJS-PreloadJS/lib/preloadjs-0.2.0.min.js"></script>
<script>
//variables
var totalLoaded=0;
var speed=0;
//functions
function init()
{
canvas=document.createElement('canvas');
canvas.width=1280;
canvas.height=768;
document.body.appendChild(canvas);
//game stage
createGamestage();
}
function createGamestage()
{
stage = new createjs.Stage(canvas);
stage.autoClear = false;
//works for both either pc or tab ios and android devices
createjs.Touch.enable(stage);
stage.snapToPixelEnabled =true;
manifest = [
{src:"images/background.png", id:"bg"},
{src:"images/reindeer.png", id:"reindeer"},
];
//preload all images and sound
preloader = new createjs.PreloadJS();
preloader.onProgress = handleProgress;
preloader.onComplete = handleComplete;
preloader.onFileLoad = handleFileLoad;
preloader.loadManifest(manifest);
//frame rate of bee game
addEnterFrame();
}
function addEnterFrame()
{
createjs.Ticker.setFPS(60);
createjs.Ticker.useRAF = true;
createjs.Ticker.addListener(stage);
}
function handleFileLoad(event) {
switch(event.type)
{
case createjs.PreloadJS.IMAGE:
//loading images
if(event.id=="reindeer")
{
var img = new Image();
img.src = event.src;
img.onload = handleLoadComplete;
var reindeerSprite=new createjs.SpriteSheet({
// image to use
images: [img],
// width, height & registration point of each sprite
frames: {width: 93, height: 120, regX: 46.5, regY:60},
animations: {
run: [0, 4, "run",4]
}
});
//adding a flipped animation or you can use xsacale property
window[event.id] = new createjs.BitmapAnimation(reindeerSprite);
createjs.SpriteSheetUtils.addFlippedFrames(reindeerSprite, true, false, false)
}
else
{
var img = new Image();
img.src = event.src;
img.onload = handleLoadComplete;
window[event.id] = new createjs.Bitmap(img);
}
break;
}
}
function handleProgress(event)
{
//use event.loaded to get the percentage of the loading
}
function handleComplete(event) {
}
function handleLoadComplete(event)
{
totalLoaded++;
if(manifest.length==totalLoaded)
{
//when all files loaded game or application is ready to start
gameBegin();
}
}
function gameBegin()
{
//adding background to my game
stage.addChild(bg);
//adding objects
addreindeer();
addstatutsTest();
}
function addreindeer()
{
stage.addChild(reindeer);
reindeer.x=400;
reindeer.y=600;
reindeer.gotoAndStop(0);
//adding swipe event using juery
$(canvas).wipetouch(
{
/*
read the lib/jquery.wipetouch for more details how wipe events works
wipeMove=swipe in any direction
wipeUp=swipe in up dierection
wipeDown=swipe in down direction
wipeLeft=swipe in left direction
wipeRight=swipe in right direction
*/
//wipeMove: function(result) { wipeStatus(result); },
wipeRight: function(result) { wipeStatus( result,"right"); },
wipeLeft: function(result) { wipeStatus( result,"left"); },
wipeUp: function(result) { wipeStatus( result,"up"); },
//wipeDown: function(result) { wipeStatus( result); },
});
reindeer.onTick=moveLeftRight;
}
function wipeStatus(result,direction)
{
statusTxt.text="Speed is"+" "+result.speed+" "+"Direction of Swipe is"+" "+direction;
if(direction=="right")
{
speed=result.speed;
reindeer.gotoAndPlay("run");
}
else if(direction=="left")
{
speed=-result.speed;
reindeer.gotoAndPlay("run_h");
}
else if(direction=="up")
{
jumpdeer();
}
}
function jumpdeer()
{
}
function addstatutsTest()
{
statusTxt = new createjs.Text("Swipe in left or right direction to move", "40px Verdana", "#000");
statusTxt.x = 100;
statusTxt.y = 100;
stage.addChild(statusTxt);
}
function moveLeftRight()
{
if(reindeer.x>900)
{
statusTxt.text="Swipe in left or right direction to move";
reindeer.gotoAndStop(0);
reindeer.x=900;
speed=0;
}
else if(reindeer.x<100)
{
statusTxt.text="Swipe in left or right direction to move";
reindeer.gotoAndStop(0);
reindeer.x=100;
speed=0;
}
reindeer.x+=speed;
}
//random
function random_number(min,max) {
return (Math.round((max-min) * Math.random() + min));
}
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body onload="init()">
</body>
</html>
Comments
Post a Comment