Detecting swipes

If we analyze a swipe, we can break it down into three parts:

1. The player is touching the stage at a certain point.
2. The player is dragging their finger in a certain direction.
3. The player is releasing the finger.

By comparing the coordinates of the points where the drag started and ended, we can determine the direction of the swipe and move the player accordingly.

We need to add three new global variables:

var startTouch;
var endTouch;
var swipeTolerance = 10;

Their names are quite self-explicative: startTouch and endTouch will store the starting and ending points of the swipe, while swipeTolerance is the minimum allowed distance in pixels between startTouch and endTouch in order to consider the whole action as a swipe.

Now, we will let game detect when a touch starts or ends:

var game  = cc.Layer.extend({
  init:function () {
    // same as before
    cc.eventManager.addListener(listener, this);
     }
});

As usual, we added a listener attached to a variable called listener, which...