Permalink
Browse files

Added swipe library

Modifed to support callbacks and multiple triggers on horizontal movement
  • Loading branch information...
1 parent 269a3c1 commit 7da120709decc56aba983507993ba42b02b0de42 @a727891 committed May 19, 2013
Showing with 180 additions and 14 deletions.
  1. +1 −0 build/Build.php
  2. +27 −14 src/Input.js
  3. +1 −0 src/Intro.js
  4. +151 −0 src/Swipe.js
View
1 build/Build.php
@@ -6,6 +6,7 @@
"../src/Shims.js",
"../src/Class.js",
"../src/Intro.js",
+ "../src/Swipe.js",
"../src/App.js",
"../src/Game.js",
"../src/Input.js",
View
41 src/Input.js
@@ -2,24 +2,36 @@ var Input = Class.extend({
init: function (APP) {
this.app = APP;
-
+ var self = this;
this.RotateFlag = false;
this.LeftFlag = false;
this.RightFlag = false;
this.FallFlag = false;
this.InstaDropFlag = false;
-// var el = document.getElementsByTagName("canvas")[0];
-// this.CanvasCenter = el.width / 2;
-// this.Canvas80H = el.height * .8;
-// this.Canvas50H = el.height * .5;
-// this.Canvas70W = el.width * .7;
-// this.Canvas30W = el.width * .3;
-// el.addEventListener("touchstart", this.touchStart.bind(this), false);
-//// el.addEventListener("touchstart", this.startTouch.bind(this), false);
-// el.addEventListener("touchend", this.touchEnd.bind(this), false);
-// el.addEventListener("touchmove", this.touchMove.bind(this), false);
- this.attachImages();
+ var el = document.getElementsByTagName("canvas")[0];
+ var swipe = new Swipe();
+ swipe.bindTouchToElement('AppCanvas');
+ swipe.bindCallback('left',function(){
+ self.LeftFlag = true;
+ });
+ swipe.bindCallback('right',function(){
+ self.RightFlag = true;
+ });
+ swipe.bindCallback('down',function(){
+ self.InstaDropFlag = true;
+ });
+ swipe.bindCallback('tap',function(){
+ self.RotateFlag = true;
+ });
+ swipe.bindCallback('up',function(){
+ if (self.app.isStopped) {
+ self.app.start();
+ } else {
+ self.app.stop();
+ }
+ });
+// this.attachImages();
},
attachImages: function () {
@@ -31,8 +43,8 @@ var Input = Class.extend({
{pic: 'Down.png', flag: 'Fall'},
{pic: 'PP.png', flag: 'Pause'}
], newImg, self = this,
- canvas = document.getElementsByTagName("canvas")[0];
- Canvas20H = canvas.height * .2,
+ canvas = document.getElementsByTagName("canvas")[0],
+ Canvas20H = canvas.height * .2,
Canvas20W = Math.floor(canvas.width / images.length),
imgsize = Math.min(Canvas20H, Canvas20W);
for (var i = 0; i < images.length; i++) {
@@ -75,6 +87,7 @@ var Input = Class.extend({
break;
}
},
+
readInput: function () {
var ret = {
Rotate: this.RotateFlag,
View
1 src/Intro.js
@@ -1,6 +1,7 @@
(function () {
var app, game, input, renderer;
var canvas = document.createElement('canvas');
+ canvas.id = 'AppCanvas';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
View
151 src/Swipe.js
@@ -0,0 +1,151 @@
+/**
+ * Touch screen swipe library (modified for callback binding and interval callbacks on move)
+ * @link http://padilicious.com/code/touchevents/swipesensejs.html
+ * @type {*}
+ */
+var Swipe = Class.extend({
+ // TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
+ // Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
+
+ init: function () {
+ this.fingerCount = 0;
+ this.startX = 0;
+ this.startY = 0;
+ this.curX = 0;
+ this.curY = 0;
+ this.deltaX = 0;
+ this.deltaY = 0;
+ this.horzDiff = 0;
+ this.vertDiff = 0;
+ this.minLength = 72; // the shortest distance the user may swipe
+ this.swipeLength = 0;
+ this.swipeAngle = null;
+ this.swipeDirection = null;
+ this.triggerXCallback = 50;
+ this.callbacks = {
+ left: [],
+ right: [],
+ up: [],
+ down: [],
+ tap: [],
+ }
+ },
+
+ // The 4 Touch Event Handlers
+ bindTouchToElement: function (elementID) {
+ var element = document.getElementById(elementID);
+ element.addEventListener('touchstart', this.touchStart.bind(this), false);
+ element.addEventListener("touchend", this.touchEnd.bind(this), false);
+ element.addEventListener("touchmove", this.touchMove.bind(this), false);
+ element.addEventListener("touchcancel", this.touchCancel.bind(this), false);
+ },
+
+ bindCallback: function (direction, callback) {
+ this.callbacks[direction].push(callback);
+ },
+
+ touchStart: function (event) {
+ // disable the standard ability to select the touched object
+ event.preventDefault();
+ // get the total number of fingers touching the screen
+ this.fingerCount = event.touches.length;
+ // since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
+ // check that only one finger was used
+ if (this.fingerCount == 1) {
+ // get the coordinates of the touch
+ this.startX = event.touches[0].pageX;
+ this.startY = event.touches[0].pageY;
+ } else {
+ // more than one finger touched so cancel
+ this.touchCancel(event);
+ }
+ },
+
+ touchMove: function (event) {
+ event.preventDefault();
+ if (event.touches.length == 1) {
+ this.curX = event.touches[0].pageX;
+ this.curY = event.touches[0].pageY;
+ this.deltaX = this.startX - this.curX;
+ //If horizontal swipe meets threshold, do left or right callback and start a new swipe
+ if (Math.abs(this.deltaX) > this.triggerXCallback) {
+ this.swipeDirection = this.deltaX > 0 ? 'left' : 'right';
+ this.processingRoutine();
+ this.touchCancel();
+ this.touchStart(event);
+ }
+ } else {
+ this.touchCancel(event);
+ }
+ },
+
+ touchEnd: function (event) {
+ event.preventDefault();
+ // check to see if more than one finger was used and that there is an ending coordinate
+ if (this.fingerCount == 1 && this.curX != 0) {
+ // use the Distance Formula to determine the length of the swipe
+ this.swipeLength = Math.round(Math.sqrt(Math.pow(this.curX - this.startX, 2) + Math.pow(this.curY - this.startY, 2)));
+ // if the user swiped more than the minimum length, perform the appropriate action
+ if (this.swipeLength >= this.minLength) {
+ this.caluculateAngle();
+ this.determineSwipeDirection();
+ this.processingRoutine();
+ this.touchCancel(event); // reset the variables
+ } else {
+ this.touchCancel(event);
+ }
+ } else {
+ this.swipeDirection = 'tap';
+ this.processingRoutine();
+ this.touchCancel(event);
+ }
+ },
+
+ touchCancel: function (event) {
+ // reset the variables back to default values
+ this.fingerCount = 0;
+ this.startX = 0;
+ this.startY = 0;
+ this.curX = 0;
+ this.curY = 0;
+ this.deltaX = 0;
+ this.deltaY = 0;
+ this.horzDiff = 0;
+ this.vertDiff = 0;
+ this.swipeLength = 0;
+ this.swipeAngle = null;
+ this.swipeDirection = null;
+ },
+
+ caluculateAngle: function () {
+ var X = this.startX - this.curX;
+ var Y = this.curY - this.startY;
+ var Z = Math.round(Math.sqrt(Math.pow(X, 2) + Math.pow(Y, 2))); //the distance - rounded - in pixels
+ var r = Math.atan2(Y, X); //angle in radians (Cartesian system)
+ this.swipeAngle = Math.round(r * 180 / Math.PI); //angle in degrees
+ if (this.swipeAngle < 0) {
+ this.swipeAngle = 360 - Math.abs(this.swipeAngle);
+ }
+ },
+
+ determineSwipeDirection: function () {
+ if ((this.swipeAngle <= 45) && (this.swipeAngle >= 0)) {
+ this.swipeDirection = 'left';
+ } else if ((this.swipeAngle <= 360) && (this.swipeAngle >= 315)) {
+ this.swipeDirection = 'left';
+ } else if ((this.swipeAngle >= 135) && (this.swipeAngle <= 225)) {
+ this.swipeDirection = 'right';
+ } else if ((this.swipeAngle > 45) && (this.swipeAngle < 135)) {
+ this.swipeDirection = 'down';
+ } else {
+ this.swipeDirection = 'up';
+ }
+ },
+
+ processingRoutine: function () {
+ for (var i = 0; i < this.callbacks[this.swipeDirection].length; i++) {
+ this.callbacks[this.swipeDirection][i]();
+ }
+ }
+
+});

0 comments on commit 7da1207

Please sign in to comment.